1.0.2 • Public • Published

    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: ``, // Contact email Used for Google Structured Data
        social: [
          ''  // Social link used in site schema for Google Structured Data
        contactSupport: '', // 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 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
    published: true


    npm i gatsby-theme-portfolio-starter

    DownloadsWeekly Downloads






    Unpacked Size

    54.1 kB

    Total Files


    Last publish


    • kamranalinitb