shaunkleyn / gatsby-theme-portfolio

Gatsby theme portfolio

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