Personal Website

Sat Jul 06 2019 17:00:00 GMT-0700 (Pacific Daylight Time)

My personal portfolio website built with Gatsby.js. A fun venture into the JAM stack and a constant work-in-progress.

Rather than go off of an existing portfolio template or starter-site, this project was started with a bare-bones Gatsby site and built up from there. The site is currently deployed with GitHub pages here.

Features

• Site pages programmatically created from different data sources with GraphQL and assigned different page templates (see gatsby-node.js where this configuration was made)
  • Site pages (e.g., billybunn.com/about) are programmatically created with .js files in the pages/ folder (as with most Gatsby sites)
  • Project pages (e.g., billybunn.com/projects/my-project) are programmatically created from markdown files
• Pagination between project pages
• TabFilter component for displaying projects and filtering based on custom tags. This component allowed for a much cleaner API on the /projects page where content is populated by a static GraphQL query.
• Responsive header rendering with a custom useWindowSize React hook
• MobileHeader menu component that closes on click outside using custom onClickOutside React hook
• CSS-in-JS styling with Styled Components

See project source code on GitHub

Resources and References

Inspiration and direction for certain features was gathered from the sources credited below.

• Official Gatsby.js Tutorial
• Gatsby Starter Blog
• Gatsby Starter Universal
• Theming in React with Styled Components
• Simplifying Responsive Layouts with React Hooks
• Making a Gatsby Site with Multiple Content Types
• useHooks
• A gentle Introduction to React's Higher Order Components