Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

Gatsby Theme Portfolio

See the live demo

Installation

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

  1. Install the theme

    npm i gatsby-theme-portfolio

    or

    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. intro.md with content that looks like this:

      ---
      section: intro
      title: Hi there!
      description: I’m John and I’m a Wizard!
      action: Hire me
      ---
    2. about.md 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: "https://gatsby-theme-portfolio.smakosh.com/favicon/favicon-512.png",
      author: "John Doe",
      url: "https://gatsby-theme-portfolio.smakosh.com",
      legalName: "John Doe",
      defaultDescription: "I’m John and I’m a Backend & Devops engineer!",
      socialLinks: {
        twitter: "http://www.twitter.com/smakosh",
        github: "https://github.com/smakosh",
        linkedin: "https://www.linkedin.com/in/ismail-ghallou-630149122/",
        instagram: "https://instagram.com/smakosh19",
        youtube: "https://www.youtube.com/user/smakoshthegamer",
        google: "https://plus.google.com/u/0/+IsmailSmakoshGhallou",
        telegram: "https://t.me/smakosh",
        stackOverflow: "https://stackoverflow.com/users/story/7396786"
      },
      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

    GITHUB_TOKEN=xxxxxxxxxx
  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

SITE_RECAPTCHA_KEY=xxxxx

SITE_RECAPTCHA_SECRET=xxxxx

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