React Portfolio Theme Using Gatsby

A portfolio site is often a static single page. Gatsby is a great framework when you want to create static generated site. You can find the Gatsby portfolio theme used in this post here. Remember to change the theme to match your profile and skill set.

This project have three external dependencies: Formik to handle the contact form, Google recapcha to check that the form is filled by an user and Google Analytics for statistics.

Prerequisites

1. Create an account at Formik and grab your form endpoint url. This is used to send the response from the contact form
2. Grab a Google recaptcha key from Google Recaptcha
3. Create Google Analytics project for your website

Setup

1. git clone git@gitlab.com:devguides/jonatanl.me.git - Clone the project
2. npm install - Install dependencies
3. cp .env.example .env - Copy a the variable example file and fill it out with your own variables
4. npm run dev - Run the development environment

Your development environment should now be running at http://localhost:8000.

Files to Update

When you are customizing the theme you need to edit the following files:

• src/data/config.js
• src/data/skills.js
• src/data/work.js
• src/content/about.md
• src/content/intro.md

Hosting

Your portfolio site can be hosted for free here at Gitlab with your own domain. If want to read how you can build and host your Gatsby site you can read more here.

If you want to support this blog you can do so by signing up to DigitalOcean using this referral link.