Skip to content
master
Switch branches/tags
Code
This branch is up to date with master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

gatsby-theme-portfolio-are.na

A Gatsby theme for creating a portfolio with are.na.

View Live Demo

Features

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
    ...
  1. Install gatsby-theme-portfolio-are.na as a dependency to your project.
yarn add gatsby-theme-portfolio-are.na

or

npm install --save gatsby-theme-portfolio-are.na

4. Edit your gatsby-config.js

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

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,
      },
    },
  ],
}

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

5. Adding non-project pages (/about, /contact etc)

Simply create a .mdx file in the your /src/pages/ directory. For example /src/pages/contact.mdx will create the /contact page.

If you would like specific pages to show in the navigation, you can edit navItems in the gatsby-config.js (see previous step).

// /src/pages/contact.mdx

---
title: Contact
description: How to contact me
---

<div>

# Hello World

</div>

Customising through Component Shadowing

You can override components from this theme using Component Shadowing

Shadow Components

All of the files below are available for customising through shadow components.

AnimatedContent.js

Button.js

Footer.js

Header.js

Layout.js

PageTitle.js

ProjectsGrid.js

ProjectsGridItem.js

SEO.js

Theme UI

Because this theme uses Theme UI, you can customise colours, spacing, fonts, color modes, MDX styles and more by shadowing gatsby-plugin-theme-ui.

About

Gatsby + Are.na + Theme UI + MDX

Resources

Releases

No releases published

Packages

No packages published