Gatsby Theme Portfolio

See the live demo


To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    npm i gatsby-theme-portfolio


    yarn add gatsby-theme-portfolio
  2. Add the theme to your gatsby-config.js:

    module.exports = {
      plugins: [
          resolve: "gatsby-theme-portfolio",
          options: {
            contentPath: `${__dirname}/content` // the path to your markdown files
  3. There are two markdown files

    1. with content that looks like this:

      section: intro
      title: Hi there!
      description: I’m John and I’m a Wizard!
      action: Hire me
    2. with content that looks like this:

      section: about
      title: Hello
      description: description
      action: Hire me
  4. Create a src/gatsby-theme-portfolio/data/index.js file and pass in this object of data to override the theme’s data:

    module.exports = {
      defaultTitle: "Smakosh",
      logo: "",
      author: "John Doe",
      url: "",
      legalName: "John Doe",
      defaultDescription: "I’m John and I’m a Backend & Devops engineer!",
      socialLinks: {
        twitter: "",
        github: "",
        linkedin: "",
        instagram: "",
        youtube: "",
        google: "",
        telegram: "",
        stackOverflow: ""
      googleAnalyticsID: "UA-xxxxx-x",
      themeColor: "#6b63ff",
      backgroundColor: "#6b63ff",
      social: {
        facebook: "appId",
        twitter: "@smakosh"
      address: {
        city: "City",
        region: "Region",
        country: "Country",
        zipCode: "ZipCode"
      contact: {
        email: "email",
        phone: "phone number"
      foundingDate: "2019",
      recaptcha_key: "xxxxxxxxxx"
  5. Create a .env.development file and put this env variable with your GitHub token as value

  6. Start your site

    gatsby develop
  7. You can override colors by creating a src/gatsby-theme-portfolio/tokens/colors.js file with object:

    export default {
      primary: "#009688",
      primaryOverlay: "ccf2e2",
      buttonColor: "#009688",
      buttonColorSecondary: "#009688"

When deploying on Netlify, you will have to set the private key as well



I highly recommend you check this repository for more details about the Google Recaptcha and Netlify forms