See the live demo
To use this theme in your Gatsby sites, follow these instructions:
Install the theme
npm i gatsby-theme-portfolio
or
yarn add gatsby-theme-portfolio
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
}
}
]
}
There are two markdown files
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
---
about.md
with content that looks like this: ---
section: about
title: Hello
description: description
action: 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:
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"
};
Create a .env.development
file and put this env variable with your GitHub token as value
GITHUB_TOKEN=xxxxxxxxxx
Start your site
gatsby develop
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