Building My Personal Website

Why I think hand-coding your personal website is great for your CV and how I approached it.

Intro

I have to admit, I haven't made a lot of time recently for "web stuff" out with work. Back when I was a senior developer (and had no kids) I used to spend a bit of my own time on prototypes of ideas I had for the day job, I really enjoyed the creativity. That's what I love best about the web, the act of creation. It is imagination come alive in digital form. It has been 10 years since I left Allsaints, you can imagine how much of the site has changed in that time, but I can still look at the site and see features I created. Ideas that popped in to my head, I quickly prototyped and demonstrated to the business and more than a decade later they are still there, so that's a pretty good return on investment!

But times change. My career path took me away from development. I was a competent developer, never a rock star, but my real interest was in the "business of websites", what changes could and should be made to a website to make it more effective? One of the reasons I joined Schuh was because I was looking for an opportunity to use my technical knowledge about how websites work but to have an even greater say on the roadmap. Not just the list of projects on the roadmap but to have a clear view as the quality of implementation of those projects.

With lack of time spent on web development, my back-end expertise has become a bit rusty. However, somewhat ironically, my front-end skills are better now than they were when I was a developer, as back then I was mostly focused on databases, servers and back-end code execution. While at Schuh I got much sharper on the front-end of web development, not for actually building sites but I have a real interest in web performance and front-end skills are a must if you're to make a website as fast as possible.

I tinkered with a few bits and pieces but never had the chance to dedicate much time to it. I occasionally built demo scripts to illustrate a particular solution or approach, for example a placeholder image concept or making the case for optimising SVGs or illustrating to a payment provider why part of their fraud detection tool was slowing down the checkout. Between having two young kids and building an extension on the house, building my own website was never a priority.

Time for a change

I'm 46 this year, and I'd describe my mid-life crisis as "taking stock of what is important to me and pushing myself physically and intellectually to achieve more". I made the decision on the day before my birthday that I wasn't happy to slide slowly in to middle-age unfitness and increasing weight, so I started running, which you can read about here: How and Why I started to run. I have been able to make good progress with my running which I think has been an incredibly empowering experience. That empowerment has also given me a mental kick up the ass and made me realise that I was ready for a fresh challenge at work.

What has this got to do with your website, I hear you ask?

Well, I thought a change of jobs was as good a reason as any to get back to doing some web development in my spare time. If I'm changing jobs, I'll need to update my CV, and what better way to illustrate that I really do understand websites than to build one to expand on my CV content. It would also be a great opportunity to brush up on some skills.

Website Priorities

In order for me to consider the site a success, there are a number of boxes I want it to tick:

  1. It must illustrate my skills and experience to potential employers/clients.
  2. It should be visually pleasing, however I'm no designer, so there are limits on this one...
  3. It must be well executed. This means:
    • The HTML must be valid and semantically correct. And beautiful.
    • The CSS must be valid.
    • It must be accessible.
    • It must be very fast.
    • It must be very SEO friendly.
    • It must get 100% scores in Lighthouse, desktop and mobile.
    • It must be truly responsive, working well on all screen sizes.
    • It must be secure.

My Approach

Going for a framework or pre-built CMS was never an option. To tick all the boxes above, I was going to have to hand-code it. It makes sense for a small site like this for it to just be plain HTML, but this approach would not necessarily work for everyone. But if I want every byte to be as I intend it then it really is the only option. I can write HTML almost as quick as I can type a document in Word and it means that I'm using exactly the HTML tags I intend. If you look at the source on something like Neil Patel's website, for example, which is built on Wordpress, the HTML is a mess, with mediocre Lighthouse scores (even in the SEO category). That's just typical of the output from all major platforms, and without a lot of work they would not meet my criteria above, if it could be done at all.

This site is an opportunity for me to put all I know about best-practice in to practice. And this is why I would advocate anyone who works on optimising websites to do the same. Speaking as someone who talks to a lot of vendors and third-parties, who claimed they could make my businesses website better, the first thing I do when they get in touch is look at their website. If they can't get their own website to be great, then I have no confidence that they could do any better on my business's website. Medice, cura te ipsum!

While the hand-rolled approach is not feasible for a large website, what I would still advocate is the attitude. Do not accept "good enough", set the bar high. Attention to detail is what separates mediocre websites and great websites. Learn how high the bar can be set.

My Learning Platform

Another big motivator for me when I decided to build the site was a chance to improve my skills. While my HTML skills are not bad they could be better, there are newer techniques which I'm not familiar with. This site is a great opportunity to play. Related to that, I'd like to improve my SVG skills, for no reason other than "just because".

But my two key areas I really want to focus on are Google Tag Manager and Google Analytics 4. I've dipped in and out of GTM over the years, but the product has moved on massively. I'm a heavy user of Google Analytics, specifically Universal Analytics. But I'm not yet familiar enough with GA4, and it is so very different to UA.

It is also a chance for me to improve my SEO skills, I have used SEMRUSH a bit in the past, but I want to take the chance now to properly get in to it.

In Summary

This website is small, and very new, and still needs a lot of polishing. But I'm really happy that I have put some time in to it to get it off the ground. And I'm enjoying writing the content.

If you at all work in Digital, I would strongly encourage you to learn how to code your own personal website.

Accessibility check by the WebAim WAVE tool, showing zero errors Lighthouse scores for this website, 100% for all categories Webpagetest Performance Summary scores, showing 100% score for the quick/usable/resilient categories SEMRUSH Site Health score of 100%


Some technical notes

For those interested, in no particular order, here are some of the technical implementation details.