New Website

Josh Cole·12/04/2022·2 min·370 words
Static Sites
Gatsby
Animation

At the end of 2021 I decided it was time to update my tired old personal website. I’d had my existing site for several years, probably over five years if I remember correctly, and it was getting long in the tooth to say the least. It was also pretty simple, with just a photo, some links to social media, and a short blurb. Not much to be proud of.

Things in the world of web development had also moved on quite a bit in the intervening years and so had my own knowledge and skills. When I originally built my first personal site CSS animations were still hot off the press and a bit flakey to say the least. However, I did manage to implement a reliable 3D flip animation back then. 🙌

This time around I wanted to build something a bit more impressive that would show off my skills a bit more effectively. I chose to build a static site using Gatsby (React) as the generator, Tailwind as the CSS framework, and my personal Notion workspace as the backing for my blog — as you can probably tell I have recently recovered from my decade-long aversion to long-form writing that started after I graduated from university. 🌚

The final touch was to add some animations, for which I chose the Framer Motion library that works with React. The library allowed me to precisely control animations to ensure a fluid and smooth transition between pages as visitors navigate around.

For hosting, I chose Netlify to ensure I didn’t have to spend time deploying my site whenever I made changes in future. Netlify monitors my GitLab code repository and automatically triggers a Gatsby build and deploys when I push to the main branch. 🥳 Netlify also has the added benefit of being completely free for personal projects — always a bonus. 😉

All in all, I’m pretty pleased with the end result! Besides some CSS niggles with WebKit based browsers (Safari I’m glaring at you) it was fairly plain sailing. I wouldn’t consider myself to be a frontend engineer by any stretch of the imagination, but the vast array of tools out there certainly do make web development a lot less painful than it used to be!