A Gatsby theme for creating a portfolio with are.na.
- are.na for hosting of projects. This is handled by gatsby-source-are.na
- Theme UI for styling
- MDX for non-project pages (
/about
,/contact
) etc - Gatsby Image for optimised images
- React Spring for simple page transitions
You will first need to generate an access token from dev.are.na.
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
...
- 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
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
andSLUG_OF_ARENA_CHANNEL
.
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>
You can override components from this theme using Component Shadowing
All of the files below are available for customising through shadow components.
Because this theme uses Theme UI, you can customise colours, spacing, fonts, color modes, MDX styles and more by shadowing gatsby-plugin-theme-ui
.