Gatsby Theme Portfolio
See the live demo
Installation
To use this theme in your Gatsby sites, follow these instructions:
-
Install the theme
npm i gatsby-theme-portfolioor
yarn add gatsby-theme-portfolio -
Add the theme to your
gatsby-config.js
:moduleexports =plugins:resolve: "gatsby-theme-portfolio"options:contentPath: `/content` // the path to your markdown files -
There are two markdown files
intro.md
with content that looks like this:
---section: introtitle: Hi there!description: I’m John and I’m a Wizard!action: Hire me---about.md
with content that looks like this:
---section: abouttitle: Hellodescription: descriptionaction: Hire me--- -
Create a
src/gatsby-theme-portfolio/data/index.js
file and pass in this object of data to override the theme's data:moduleexports =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"; -
Create a
.env.development
file and put this env variable with your GitHub token as valueGITHUB_TOKEN=xxxxxxxxxx -
Start your site
gatsby develop -
You can override colors by creating a
src/gatsby-theme-portfolio/tokens/colors.js
file with object:
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