Welcome to version 3 of this website! 🎨
Hello! 👋
I’ve been running this current iteration of my website for three years now. Where did the time go? Since I created this website, I’ve made several gradual improvements to this website. From new pages, to some CSS adjustments.
But the more I looked at my website, the more areas I could find which could be improved. So, as it’s the start of a new year, I decided to make several new changes to the website (and fix some issues)!
What’s new in version 3?
- New background colour
- New favicon
- New fonts
- Improved mobile view for the blog page
- Improved desktop/tablet view for the blog page
- Resolved a ‘mystery’ issue for Safari users where the top of the status bar would be purple (and also the background when pulling/scrolling the screen down would be purple)
- New image added to the blog page
- Images associated with blog posts are now clickable
- The ‘Get in touch’ button on the home page has been shrunk down.
- Removed freeCodeCamp icon from footer
- Updated packages (it’s good to keep them updated)
Let’s quickly explain several of the big changes
The improved blog page
Yeah, the blog page needed some work to it. Originally (for those who remember), the blog page didn’t have an image associated for each post. I added images last year but there have been a few things that have bugged me since I made that change.
- The mobile view was awful. The images were squashed and the description of the post would ‘spill’ over. It really looked bad on a mobile device.
- There was so much empty space on each side of an blog entry when viewing the blog page on a desktop.
- The text was slightly small.
- The images were not clickable.
First, let’s talk about the improvements made to the desktop view. Each blog entry is now much bigger, taking up more of the screen. The images are bigger and the font is bigger. Now you can clearly see the associated images for each post.
Next, the mobile view. This is something that proved to be more challenging that I previously thought. Initially, I tried to display each post as a column, not as a row. The original view had images that were stretched by height with text next to it. It was an awful look. Now, I have developed a better solution to the problem:
HORIZONTAL SCROLLBAR
Yes, a horizontal scrollbar! Now in the mobile view, you can scroll horizontally on the blog posts. This takes up much less space on the page and the images aren't being squashed. Several new lines of CSS was added to make this work and I'm proud of the work that I've done.
Finally, clickable images. This seems like such a basic feature, I can't believe I forgot to implement it. Now, regardless of what device you view this website on, you can click an image for an associated blog post.
The blog page has seen the most improvements in version 3 of the website. Hopefully the improvements make an impact!
The mystery Safari issue
So this was something that I don’t think anyone has really noticed. Basically, if you were viewing this website on the Safari web browser, you’d see a purple bar at the top, and a purple bar at the bottom if you pulled the web page down. It’s been bugging me for ages!
It got me thinking “where is the browser getting this purple colour from?”. After looking through my code, I finally found the cause of the issue. It seems that the Gatsby config file had two properties called background colour and theme colour, both shared the same value of #663399. Which happens to be the purple colour that I was seeing.
After removing the properties, the issue was resolved!
The new favicon
Yes, the lightning bolt is gone. Instead, I have a new one! This one is the technologist from Google Noto Colour Emoji. Since this blog is about tech, it makes sense to use the technologist, right?
Let me know what you think of the new favicon!
The new blog header image
The blog is called ‘It works on my machine’, a phrase that everyone who works in software development will know and understand. And recently I thought it might be good to have an accompanying image with the title.
I’ve had this particular image saved for years and I think it sums up a scenario so many have seen or gone through.
Plus, the fact that it’s Godzilla characters makes it even better.
New fonts
I decided to update the fonts used on the links on the website to something that’s a bit more modern. I did also look at updating the font used for the paragraph text, but I decided to stick with Vollkorn.
And that's a brief summary of the changes that I've made for version 3 of this website!
Let me know what you think!
