Skip to content


Repository files navigation

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 ⭐!

Netlify Status

dribbble tablet peri


  • 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

    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.


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.

image See _data/ for examples on .md syntax, or


Deploy to Netlify

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 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.,


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


👔 JAMstack (Gatsby JS) content-focused portfolio blog starter. Features include dark-mode, installable PWA, SEO, code highlighting, form, CI/CD.







Sponsor this project


No packages published