Skip to content
JavaScript CSS
Branch: master
Clone or download
smakosh Merge pull request #1 from smakosh/customize-social-media
added ability to set social media links and colors of the icons
Latest commit 9a992c4 Jul 10, 2019

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

You can’t perform that action at this time.