Personal Website

Hosted: Link

Github: Repo

Goal

My personal website includes a portfolio of projects to showcase my developing skills along with contact information.

The primary users for this site are recruiters and hiring managers for co-op positions that I am applying to. I am tertiary user for this site because I need to maintain the site and keep it up to date with new projects that I complete.

For the primary users, I want to make sure the site is simple to navigate, and all details are readable across mobile, tablet and laptop sized devices. As a tertiary user, I want the site to be easy to maintain and add new projects without major development work.

Process

Before writing any code, I designed all the pages for the site in Figma. After the design, I went through the prototype and identified the custom components I wanted to develop.

For the development of my personal website, I used Gatsby. From their website:

Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience incredibly simple.

This was my first time working with Gatsby but it uses React components so it was a good middle ground where I could leverage past experience while learning about a new framework.

I used Gatsby's GraphQL data layer to store my projects in .mdx files and programmatically generate their project cards and pages from the files, making adding new projects in the future simple.

Finally, I used Gatsby cloud for a simple, integrated deployment of my site.

Next Steps & Lessons

My primary next step for this site is integrating with Google Analytics. I hope to use the user behavior information from Google Analytics to inform design changes in the future.

I'm also looking to add a carousel of images to all the project pages to give further context to visitors who don't want to spend the time to visit the project.

This project was a great experience to learn about Gatsby and GraphQL while updating my personal website to a clean, responsive design.