💅 Building a Minimalist CV with Gatsby

🍋 Live

Helloooo everybody! I've been busy with Gatsby recently and I was trying to learn the basics in a fun way. Therefore I created a minimalist CV with Gatsby. I've built my CV step by step, and in this way you can also create a basic CV with me or just learn the basics along the way. I hope you will like and enjoy it. Oke, let’s dig in!

🐝 Intro

First we need to set up our development environment.

🌱 Global Installation

1. Install Homebrew. (To install Gatsby and Node.js on a Mac, it is recommended to use Homebrew.)
2. If you don't have it already, install the Node.js, npm. (Node.js is an environment that can run JavaScript code outside of a web browser.)
3. Install Git: be able to work with starter templates.
4. Install Gatsby globally on your machine npm install -g gatsby-cli
5. Create a new site from Starters
   • Choose the one you like or start with a default gatsby starter which is hello world

TL;DR 🔖 If you’re not sure what you installed before then just check from your Command Line: e.g
node --version to learn your version.

🐙 Github & Terminal & VS Code

1. Create a repository named gatsby-introon your github.
2. Don't forget to initialize your README file.
3. Clone it to your machine.(I personally use VS Code)
4. Change the Directory (This says ‘I want to change directories (cd) to the “hello-world” subfolder’. .)
5. If you are stuck or lost, type in your terminal gatsby --help and see the options it gives you.
6. Start the development mode.. gatsby develop This command starts a development server. You will be able to see and interact with your new site in a development environment — local (on your computer, not published to the internet)

7. View your site locally: Open up a new tab in your browser and navigate to http://localhost:8000/

8. Your hello world index.js file should be like this:
   

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

{/* you need to always export and this is a  React rule. */}.

• Create components in your srcfolder.
  • Components structure should more or less look like below .
  • Footer.js
  • Header.js
  • Main.js
    • About.js
    • Contact.js
    • Skills.js
    • Projects.js

Sorry for the shiny colors:) I created it rather quickly in Figma
⚠️ Don't forget to create styles.cssfiles.

💫 Installing Plugins

• In your gatsby-config.jsfile you need to create plugins to work on..

gatsby-plugin-sass

Provides drop-in support for Sass/SCSS stylesheets

npm install node-sass gatsby-plugin-sass

How to use

extra: If you have a problem with installing the sass plugin then follow these instructions from stackoverflow

🎨 Give a shape

CSS: Apply some basic CSS. If you feel confident with CSS frameworks then you can implement a framework to your gatsby project. Tailwind or Bootstrap.

🚀 Deploy your work

gatsby build You need this command to build your project.

• Always push your work on github (at least 3 times per hour)
• Drag and Drop your public file to Netlify, so we can see your CV online!

Well done! Nice job 👏

🎣 Tools

• Visual Studio Code
• Markdown
• Gatsby Framework
• Starter Libraries
• npm
• Netlify

🖤 Please check my Github Repo

Thank you for reading.