Gatsby-theme-portfolio-are.na NPM

Gatsby Theme Portfolio Are.na

A Gatsby theme for creating a portfolio with are.na

View Live Demo

Features

are.na for hosting of projects
Theme UI for styling
MDX for static pages (/about, /contact) etc
Gatsby Image for optimised images
React Spring for simple page transitions

Getting started

1. Generate a personal access token

You will first need to generate an access token from dev.are.na.

2. Make your are.na channel

You will need to create a single are.na channel which contains all projects as "inner" channels. You will then pass the slug of this single are.na channel to plugin config (details in the next step).

Example

my-awesome-arena-channel
  inner-channel-1
    image-1
    image-2
    ...
  inner-channel-2
    image-3
    image-4
    ...

3. Edit your `gatsby-config.js`

Add gatsby-theme-portfolio-are.na to your plugins in gatsby-config.js.

Note: You will need to substitute out YOUR_PERSONAL_ACCESS_TOKEN and SLUG_OF_ARENA_CHANNEL.

module.exports = {
  siteMetadata: {
    indexTitle: "A Gatsby theme for creating a portfolio with are.na",
    indexDescription: "Gatsby + Are.na + Theme UI + MDX",
    social: [
      {
        name: "Github",
        url: "https://github.com",
      },
    ],
    navItems: [
      {
        name: "Contact",
        slug: "/contact",
      },
    ],
  },
  plugins: [
    {
      resolve: "gatsby-theme-portfolio-are.na",
      options: {
        accessToken: YOUR_PERSONAL_ACCESS_TOKEN,
        channelSlug: SLUG_OF_ARENA_CHANNEL,
      },
    },
  ],
}