Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Version License PRs welcome!

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


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: [

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


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


Place your photos inside content/projects as follows:

  ├── 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.


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

└── @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.


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

© 2023 Gatsby, Inc.