Gilbert Pellegrom

Gilbert Pellegrom

Software Engineer and Web Developer from Scotland

Path Copy 2 Created with Sketch.

Redesign and Rebuild

Posted on

Since moving back to WordPress I’ve been wanting to improve the design of this site to make it feel a bit less bland and bring it more in line with modern sites in terms of technology. My biggest gripe, in terms of design, was that the homepage was just a bunch of text and very uninteresting to look at. In terms of technology, I wanted to see if I could build the site as a Single Page App (SPA) to gain the benefit of that modern, ultra-snappy site feel.

The good news is that, for the last month or so, I’ve spent my evenings and spare time redesigning this site and rebuilding it as a Vue.js SPA. For the first time in forever, I sat down and actually designed the site using Sketch instead of just “designing-as-I-build” (which is normally how I design). I was quite pleased with the results. Here is a before and after of this site:

Gilbitron.me before/after

For a while now I’d had the idea of wanting to build a Vue SPA site using the WordPress REST API as the backend. After a bit of research, I managed to get my head around all of the pieces that I would need to make it work and started building a new WordPress theme as a Vue SPA. In the end, it wasn’t as bad as I thought it would be. Instead of explaining in detail how I did it here, I’m planning to write a whole other blog post and share the code on GitHub so you can see what went into creating the SPA and use it for your own sites.

The site isn’t perfect or finished. I gave up on the idea of this site ever being “finished” a long time ago. But I’m pleased with the results and hope to add incremental improvements in the weeks to come. If you notice anything broken or have any questions then please shoot me a message on Twitter.