Skip to content
Revamp of my personal website using Gatsby.js, React.js, and GraphQL.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Project Summary is my personal website, built using Gatsby.js with React.js, GraphQL, and Sass/SCSS. It highlights all my major interests across various disciplines including dance, wellness, events, writing, and tech.

Features include fast site performance, reusable components and design elements, optimized images, content from multiple data sources, SEO, and offline support.

To see how I built this website in detail from design to development and takeaways, take a look at the process write-up for

This project is hosted on Netlify.

Updates Summary

This is a summary of major site updates:

  • 6/17/2019: Tech write-ups all added. Images fixed by uploading directly to Netlify instead of using the build command.
  • 6/6/2019: First deployment. Site includes all main pages (home, dance, wellness, events, writing, tech, and about) and page templates for tech spotlight & project created.

Learning Resources

I used this project as an opportunity to learn Gatsby, React, and GraphQL. I used the following tutorials and documentation to help build this site:

Using Gatsby


This site was created using Gatsby.js's gatsby-starter-hello-world, which is the most basic of Gatsby boilerplates or starters. I also used the following starters as a reference in constructing pages and installing dependencies and plugins:

Dependencies and Plugins

The following is a list of dependencies and plugins for this site. For more info on Gatsby plugins, check out the Gatsby Plugins official docs.

File and Directory Organization

Included are the following top-level files and directories. For more information on these files, please take a look at gatsby-starter-hello-world.

    ├── node_modules
    ├── src
    ├── static
    ├── .gitignore
    ├── .prettierrc
    ├── gatsby-config.js
    ├── gatsby-node.js
    ├── LICENSE
    ├── package-lock.json
    ├── package.json

Source Directory

The src directory is further broken down into the following directories:

    ├── src
    │   ├── components
    │   ├── content
    │   ├── images
    │   ├── pages
    │   ├── styles
    │   └── templates
  • Components: Reusable React components.
  • Content: Markdown and JSON content files and related images.
  • Images: Icon and favicon.
  • Pages: Main pages:
    • Home
    • Dance
    • Wellness
    • Events
    • Writing
    • Tech
    • About
    • Blog
    • 404
  • Styles: Global sass files including variables.
  • Templates: Page templates for dynamically rendered blogposts and project pages.

Site Features

Components and Content

Layout and SEO

Site Title


Navigation Menus




Work Components

Work Cards
Work Videos
Work Spotlight
Tech Cards


Page Templates

Tech Spotlight

Tech Projects





You can’t perform that action at this time.