Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Theme Portfolio Starter

gatsby-theme-portfolio-starter is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @atechguide

A Gatsby theme for creating Superfast, SEO optimized Portfolio powered by Material UI and MDX



Gatsby Theme


Gatsby Theme


It provides following functionality out of box

  • Fully optimized for Lighthouse audit
  • Responsive
  • Pagination for projects
  • Tags for browsing the projects
  • Google Structured Data
  • Google Analytics
  • Sitemap



Manually add to you site

npm install --save gatsby-theme-portfolio-starter

Theme options

Key Default value Description
trackingId UA-27634418-4 Google Analytics Tracking ID
projectsPath projects Location of Projects
imagesPath images Location of cover image and icon
projectsPerPage 12 Number of Projects to be displayed on a single page

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: "gatsby-theme-portfolio-starter",
      options: {
        trackingId: "UA-27634418-4",
        projectsPath: "projects",
        imagesPath: "images",
        projectsPerPage: "12"

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site’s gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `My Portfolio Title`,
    description: `My Portfolio Description`,
    author: `Author Name`,
    headline: `My Introduction`, // One liner Introduction
    focusArea: `Tech focus Area`, // Technologies currently working on / Knowledge of Tools, expertise etc
    twitterId: `@twitterHandle`,
    linkedInId: `linkedInID`,
    siteUrl: `site domain name`,
    keywords: [`Technology Blog`], // Used for SEO and Google Structured Data
    email: `admin@blog.com`, // Contact email Used for Google Structured Data
    social: [
      'https://www.facebook.com/aTechGuide/'  // Social link used in site schema for Google Structured Data
    contactSupport: 'https://www.site.com/support/', // Contact link used in site schema for Google Structured Data
    bingId: '', // Support for Bing 
    menuLinks: [{name: 'Projects', link: '/page/1'}], // Adding Menu bar links

🚀Getting Started

  • Create projects directory and add projects into it as Markdown files
  • Create images directory and add images into it to be used by queries directly
    • Add icon under images by the name icon.png
    • Add cover image under images by the name cover.svg You may download your SVG from undraw.co as per theme color


Please read the guide Shadowing in Gatsby Themes to understand how to customize the theme. Basically you should place your files into src/gatsby-theme-portfolio-starter/ to shadow/override files.

Editing the theme

  • Shadow src/styles/themeColors.js to override the primary, secondary colors


import {blueGrey, cyan} from '@material-ui/core/colors/';

const primary = blueGrey
const secondary = cyan

export {primary, secondary} //<- Exporting an object
  • Shadow src/styles/theme.js to override rest of the defaults


import {primary, secondary} from './themeColors'; //<- Destructuring the imported object

const theme = {
  palette: {
    primary: primary,
    secondary: secondary
  typography: {
    fontSize: 16,
    h1 : {
      fontSize: "3rem",
      fontWeight: 500,
      color: primary[500]
    h5 : {
      color: secondary[900]
  button: {
    color: "primary",
    variant: "contained"

export default theme


Project cards are created from MDX. Its content is picked from the frontmatter as follows

dataType: project // <- This is added to filter markdown files for projects
title: Project Title
description: Project Description
date: '2019-05-28'
  - Node // Tech stack
projectLink: https://github.com/aTechGuide/
published: true
© 2023 Gatsby, Inc.