Portfolio Rebuild

I have finally rebuilt my personal site 🎉

I had been pretty happy with the design of my portfolio for some time now, but it was just a single HTML page and when I looked at the code recently, to my horror, I discovered it was still using jQuery!

I have also been wanting to get back into writing a few web dev articles recently. Previously I would have written these on Medium, but given the recent rejuvination of the personal blog and Medium's increasing annoyingness, I wanted to create a new blog I am in complete control of here.

Migrating to new shiny things

The old version of this site wasn't built badly by any means, but it hadn't been touched for a number of years so needed bringing up to date. Here's a summary:

• Migrate from custom CSS baseplate to TailwindCSS
• Go from a single HTML file using nunjucks templates to a statically generated site with Gridsome
• Create a blog section and use Netlify CMS to manage content

Tailwind CSS

I have been a big advocate of utility first CSS for years now. Previously this site was built with the CSS baseplate we used to use at my previous work. Fortuanately this was a utility first too, so it was relatively straight forward to transition to Tailwind CSS.

In addition to Tailwind I am now using Purgecss to remove any unused styles. This results in a main css file that is less than 7kb gzipped 😎. I'm also using critical css to extract the css required to display content above the fold and get a super speedy time to first meaningful paint.

Gridsome and Vue.js

The previous version of this site used Nunjucks and Gulp to render templates for parts of the site. Converting this to Gridsome and Vue.js components was a nice reminder of how far frontend development has come on since I last built the site!

Gridsome is still relatively immature as as static site generator, but I have used it on a number of projects and it is already more than powerful enough to build a site like this.

Converting all the old jQuery interactions into a component based architecture took a while but resulted in code that is way more resuable and readable. Vue.js is actually a smaller bundle than jQuery too!

Netlify CMS

Using Netlify CMS to edit the content means I don't need to mess around creating a backend to host my CMS. Netlify CMS interacts directly with GIT to store the content in markdown files. It's great for personal sites like this, but I have found it fairly limiting on more complex sites. That's worth a post in itself though.

More to come...

Now that I finally have a nice place to write again I plan to post as frequently as I can about web dev topics. Stay tuned 👋