Skip to content
[Gatsby] Web developer portfolio
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
data
src
static
.eslintrc.js
.gitignore
.prettierrc
LICENSE.md
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package.json
yarn.lock

README.md

Personal portfolio for web developer

Origin

Fork of Smakosh template, modified for my personal use.

Changes from upstream

Of note:

  • New artwork (also Undraw.co).
  • GraphQL query changes
  • Pull GitHub site URL if exists and provide demo link
  • List languages used and style with GitHub color
  • Remove stars and forks
  • Add honeypot to form submission to limit spam
  • Don't cache service worker
  • Add LinkedIn CTA and social

Also personalization of text, meta, favicon, social media, etc.

Features

  • Gatsby static site
  • Continuous deployment with Netlify
  • Amazing illustrations by Undraw.co
  • A contact form protected by Google reCaptcha
  • Eslint/Prettier configured
  • Scores 100% on a11y / Performance / PWA / SEO
  • PWA (desktop & mobile)
  • Easy to customize
  • Nice project structure
  • Tablet & mobile friendly
  • Can be deployed with one click
  • Functional components with Recompose, ready to migrate to React hooks!
  • Fetches Github pinned projects

Structure

.
├── data
│   └── config              # SEO related tags
├── src
│   ├── components          # Components
│   │   │── common          # Common components
│   │   │── landing         # Components used on the landing page
│   │   └── theme           # Header & Footer
│   └── pages               # Pages
└── static                  # Icons, favicon & SVG illustrations

Prerequisites

Yarn

Installing

Installing the dependencies

yarn

Start the dev server

yarn start

Clean the cache

This removes the .cache/ & public/ folders

yarn reset

Personalization instructions

Repos

For GraphQL to work, you need to add a GitHub personal access token. Login to GitHub and go to Personal Access Tokens. Create a token with public_repo access.

Create two new files .env.development and .env.production and put your token there.

(If you're deploying to Netlify, you can add it there to your "Build environment variables" instead of creating .env.production.)

GITHUB_TOKEN=xxxxxxxxxx

Recaptcha

To use the recaptcha this template has built-in, go to Google reCaptcha and create one. Add your site to authorized domains (and you may want to add localhost for testing).

IMPORTANT Your reCaptcha must be v2 to work with Netlify. A v3 reCaptcha, which Google defaults to, will error.

Add your public key to your site's data on data/config.js.

When deploying on Netlify, add your keys (including private) to their "Build environment variables." Use the following names:

SITE_RECAPTCHA_KEY=xxxxx

SITE_RECAPTCHA_SECRET=xxxxx

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

You can’t perform that action at this time.