smakosh / Gatsby Theme Portfolio
Gatsby theme portfolio
Stars: ✭ 99
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Gatsby Theme Portfolio
Gatsby Plugin Elasticlunr Search
Gatsby search plugin via elastic lunr client-side search index.
Stars: ✭ 88 (-11.11%)
Mutual labels: gatsby
Gatsby Remark Social Cards
Gatsby remark plugin for generating social card graphics
Stars: ✭ 95 (-4.04%)
Mutual labels: gatsby
Gatsby Plugin Google Fonts
Bring Google Fonts to Gatsby https://www.gatsbyjs.org/
Stars: ✭ 84 (-15.15%)
Mutual labels: gatsby
Gatsby Using Page Transitions
Gatsby example site using page transitions
Stars: ✭ 88 (-11.11%)
Mutual labels: gatsby
Gatsby Remark Design System
🎨 Create your design system with Gatsby in Markdown
Stars: ✭ 90 (-9.09%)
Mutual labels: gatsby
Gatsby With Unstructured Data
A simple example of creating pages dynamically in Gatsby without using GraphQL.
Stars: ✭ 83 (-16.16%)
Mutual labels: gatsby
Aaronvandenberg.nl
⚛️ Web Developers portfolio build with Gatsby.js & React.js
Stars: ✭ 98 (-1.01%)
Mutual labels: gatsby
Gatsby Starter Procyon
An opinionated Gatsby starter designed for trash-eating pandas.
Stars: ✭ 88 (-11.11%)
Mutual labels: gatsby
Gatsby Typescript
Alternative typescript support plugin for Gatsbyjs. Aims to make using typescript in Gatsby as painless as possible
Stars: ✭ 95 (-4.04%)
Mutual labels: gatsby
Gatsby Theme Try Ghost
A Gatsby theme to build flaring fast blogs from headless Ghost CMS
Stars: ✭ 88 (-11.11%)
Mutual labels: gatsby
Gatsby Starter Stripe
🛒 A starter storefront & admin UI with Gatsby, Stripe, & Netlify Functions.
Stars: ✭ 92 (-7.07%)
Mutual labels: gatsby
Gatsby Bulma Quickstart
🚀 + ⚛️ A Quick Way to bootstrap your next Gatsby + Bulma site.
Stars: ✭ 84 (-15.15%)
Mutual labels: gatsby
Gatsby Shopify Theme
🛒 Simple theme to build a blazing simple and fast store with Gatsby and Shopify.
Stars: ✭ 95 (-4.04%)
Mutual labels: gatsby
Gatsby Mdx Netlify Cms Starter
Gatsby-MDX with Netlify CMS. Support React components in your CMS editor!
Stars: ✭ 84 (-15.15%)
Mutual labels: gatsby
Builder
Drag and drop page building using your code components
Stars: ✭ 1,281 (+1193.94%)
Mutual labels: gatsby
Gatsby Plugin Ipfs
Adds support for deploying Gatsby to IPFS by ensuring that assets are relative
Stars: ✭ 98 (-1.01%)
Mutual labels: gatsby
Gatsby Theme Firebase
🔥 A Gatsby Theme for adding Firebase to your application.
Stars: ✭ 96 (-3.03%)
Mutual labels: gatsby
Gatsby Plugin Advanced Sitemap
Advanced XML Sitemaps for Gatsby.js
Stars: ✭ 94 (-5.05%)
Mutual labels: gatsby
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-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 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:
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].