Personal site tinkering
With a little bit of time whilst searching for a new role, I decided to make a few tweaks to this site. From some branding tweaks to trying to improve the performance.
Branding
This is something I've wanted to change for a while, but always just put it off due to lack of ideas. My previous logo was just my initials typed in the Lobster font!
After doing some email signature work for a friend (Angela Bradley), we decided on a skill swap, and she would help me with some new branding.
She did an amazing job, and provided me with a new logo and some new colour palettes to compliment parts of my brand I wanted to keep.
There are still some bits I need to have a play around with and I decided not to massively change my simple, typography led design, as I quite like that in the context of what I use this site for. I may try and bring more of the accent colours in for future features/articles.
Font
One of the more significant changes I've made is to strip out my custom fonts. I was previously using Red Hat for everything, and think that one day I looked at it and for whatever reason didn't like it.
However, I wanted to use this opportunity, before I changed my mind again (I'm my own worst client) to try something different and see if I could settle on something that I was pleased with from a design point of view that just used system fonts.
So the site now just uses the default system UI font set by the OS the user is visiting from. This has some pros and cons. Here's the font family value I'm now using:
font-family: system-ui, Helvetica, sans-serif;
Performance
Not using a custom font means that there are less networks request(s) to make. I don't need to load that font, and also prefetching it, which I was doing to try and avoid FOUT (flash of unstyled text). Although only one fairly well optimised WOFF2 file was being loaded. Every little helps.
Now I'm using system fonts, that flash of default font no longer happens, as I'm just using that fallback. Again I'd previously done some work to try and reduce this with a custom fallback, but this reduces any risk of the font changing causing content layout shift (CLS).
Branding inconsistency
From a design point of view, one thing that using the system defaults does mean is that I don't truly have a distinctive brand font that I can associate with my style guide.
Depending on the OS the user is viewing the site on, the font will be different, not some much of an issue, but it does leave the site open to a bit of risk if the user has managed to change their default OS font and it doesn't work well with my design and content.
Light/dark theme
This is something I have previously had on the site, but as a toggle button implemented with JavaScript. After watching a brilliant talk from State of the Browser 2025, I learned all about the light-dark() CSS function.
I've written an article about the light-dark function so won't go into the same stuff here, but TLDR; the site now respects the OS light/dark colour scheme the user has chosen.
Scripts
Again just another couple of minor improvements/itch scratches I'd had on my list for yonks here.
I'd noticed that the Netlify CMS script was loading on all pages. Although once cached it was very small, it's a request that is not needed for users, I only need this to fire on the admin pages when I'm editing content.
After a little bit of searching to remember where I had done this (and why). I found that I'd added it to the script injection functionality that Netlify provides. I removed this rule and checked everything still works, all good as I have a separate template for the admin that I can just call this script on. Be gone JavaScript!
My other slight tweak was to make a minor change to my service worker script. One of the promise returns in it was playing up and cusing console errors, that seemed to be stopping some Chrome extensions from opening (Wave for example). I admit I had to get AI to help me with this one, but it seems to have done the trick. Looks like I needed to handle a specific request code return.