This core theme includes a Project type that you can use to build a portfolio site. It includes no styles.

Installation

Step 1: In the root of your Gatsby site, run the following command:

yarn add @arshad/gatsby-theme-portfolio-core

Step 2: Enable it in gatsby-config.js

// gatsby-config.js
...
  plugins: [
    `@arshad/gatsby-theme-portfolio-core`
  ]
...

Theme options

Key	Default value	Description
contentPath	content/projects	Location of your projects
basePath	/projects	Root url for all projects
pageTitle	Portfolio	The title for the portfolio page. Leave blank for no title
pageExcerpt	null	The excerpt for the portfolio page. Leave blank for no excerpt

Example usage

// gatsby-config.js
...
  plugins: [
    {
      resolve: `@arshad/gatsby-theme-portfolio-core`,
      options: {
        basePath: `/projects`,
      }
    }
  ]
...

Data models

Photo

type Project implements Node @dontInfer {
  id: ID!
  title: String!
  excerpt(pruneLength: Int = 150): String
  slug: String!
  body: String!
  url: String!
  image: File @fileByRelativePath
}

Example

Place your photos inside content/projects as follows:

site
  ├── content
  │   └── projects
  │       └── project-1
  │           ├── screenshot.jpg
  │           └── index.mdx
  ├── node_modules
  ├── gatsby-config.js
  └── package.json

# site/content/projects/project-1/index.mdx

---

title: Proident enim aliqua
url: https://example.com
excerpt: Consequat consectetur mollit commodo nisi reprehent velit aliqua quis nisi laborum.
image: ./screenshot.jpg

---

Et aliquip labore id minim adipisicing excepteur labore in ex deserunt duis quis cillum in.

Customization

Create the following components in your site to shadow and customize the core components:

src
└── @arshad
    └── gatsby-theme-portfolio-core
        └── components
            ├── project-teaser.js
            ├── project.js
            └── projects.js

To learn more about component shadowing, check out the official theme docs.

Support

Create an issue on the main repo @arshad/gatsby-themes.