HomeProjectsBlog

Portfolio Website

GraphQLReactSanityGatsby

I set out in November 2020 to rebuild my portfolio website. My previous website was built using Webflow, but it was not fit for purpose. The design was poor and it wasn't really tailored to my purpose (freelancing).

The tech stack I used to build this website is as follows:

- Gatsby with Emotion (for styled components) on the frontend

- Sanity Headless CMS on the backend

- GraphQL

I chose Gatsby first and foremost for its performance benefits. When you build a website in Gatsby, it spits out a Jamstack website on the other end. Jamstack websites consist of pre-rendered HTML, CSS and Javascript. They can be hosted on a CDN or purpose built host like Netlify (making them cheap/free to host) and do not require a web server on the back end. Because of these traits, they're secure, performant, scalable and simple to deploy. Everything you'd want in a website that doesn't require dynamic content.

In addition to that, I've been building on my prior Javascript experience by learning React, and Gatsby is one of the most popular and easy to use React based frameworks. I found it a joy to work with and have learned a lot about React and Gatsby along the way.

I chose Sanity as my headless CMS because it's simple to use and customise, quick to get up and running, and has a generous free tier. I wanted to work with a CMS that would work really well for paying clients, and I believe that Sanity fits that bill. Sanity is built with React so a lot of the coding that went into my backend also allowed me to hone my React knowledge which was nice.

GraphQL was used as the method for communicating with the Sanity backend from the Gatsby frontend. I'm completely new to GraphQL, but I found it to be really nice to work with also.