Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



9 Commits

Repository files navigation

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
    1. 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