Gatsby JS Minimal Portfolio

Blog style portfolio website, created with Gatsby and hosted on Netlify.
Carefully designed to be minimal and content focused. Don't forget to leave a star ⭐!

Features

• PWA ready, installable on Android and iOS
• Blog ready, easily add own blog posts
• Toggable dark mode
• Mobile friendly nav-dock, and bottom drawer
• Netlify contact form with seamless setup
• SEO ready, option to Add meta description

Quick Start

Prerequisites include Node.JS v13 and Gatsby CLI. See Gatsby's Development Environment Setup documentation for more details or issues with initial project installation.

nvm install 13
nvm use 13

npm install -g gatsby-cli

1. Install Project

   Create new site using gastby new command, doing it this way will also install the project dependencies.

   gatsby new gatsby-minimal-portfolio https://github.com/BrianRuizy/gatsby-minimal-portfolio

   Alternatively, you can manually clone the repository and install dependencies by running npm install.

2. Start Developing

   Navigate into your new site’s directory and start it up using gatsby develop command.

   gatsby develop
   
   DONE - Compiled successful
   You can now view Brian-Ruiz-Portfolio in the browser.
   http://localhost:8000/

Usage

Using this portfolio website and adding your own content is super simple! Add your respective project markdown-file to the _data folder, and Gatsby + GraphQL + Remark does the rest of the work rendering the markdown file to html. Same applies for site metadata, add your own content to site-meta-data.json.

See _data/readme.md for examples on .md syntax, or brianruizy.com/markdown-help/.

Deployment

Netlify currently has built in support for GitHub. You gain the ability to redeploy the site by pushing the code to the respective repository, with no need to manually rebuild and upload every time you make changes. See Gatsby's docs for more detail.

1. Login to Netlify.com and you will see a New site from git button at the top right corner of the screen. Click on it and connect with the same git provider that you used to host your website and authorize Netlify to use your account.

2. Choose your website repository and it will take you to deploy settings with the below options.

   • Branch to deploy: You can specify a branch to monitor. When you push to that particular branch, only then will Netlify build and deploy the site. The default is master.
   • Build Command: You can specify the command you want Netlify to run when you push to the above branch. The default is npm run build.

3. Click on the Deploy site button and Netlify will start the build and deploy process you have specified. You can go to the Deploys tab and see the process unfold in the Deploy log. After a few moments, it will give you the live site URL, e.g., random-name.netlify.com.

Credits

This site's Web design was made possible thanks to these awesome packages / plugins!

Function	Package + Link
UI Library	react-bootstrap / MaterialUI
Dark Mode	gatsby-plugin-dark-mode
Syntax Highlighting	gatsby-remark-prismjs
UI element(s)	react-bottom-drawer
Icons	react-icons
Fonts	google-fonts, rfs