After years of using the same design for my website (and making some pages of it look utterly bad when last trying to redesign it) I finally have a new design for the website. And this time I have the complete site moved to the new design. I had mentioned in a previous post that I would be redesigning the website this year and this is the fulfillment of that promise.
How did I arrive at the design?
After browsing a lot of other personal blogs, I liked the design of Cory's header and Zoe's footer. Starting from there and keeping a bit of my previous (maroon themed) design, I landed on my current version. Header now has six prominent navigation links and the rest go into the footer. Before the footer was doing nothing and I was trying to fit everything in the header.
I originally wanted to have a hamburger menu in the header so that on mobiles and other small displays only the site name remains visible by default and then other header links could be shown as the user wishes. But I didn't want to use any JavaScript on the site and neither did I like the restyle-a-checkbox route. Finally, I ended up showing all six navigation links in a single line on bigger screens, and on smaller screens they split into two lines of three links each.
I ideally want multiple themes for the design — light, dark and multiple other colour variants. But in the interest of time and getting a first version out the door, I only ended up making the default dark theme.
How I built this?
I moved a lot between what to use for the new design: tailwindcss, pico, Simple.css or something custom from the ground-up. In the end I went with a CSS Reset from Josh Comeau (if you haven't seen this before then I suggest taking 5 minutes out and reading through this, it is an awesome piece of explanation) and a completely custom style built on top of it.
The syntax highlighting in code-blocks is handled with Prism as it allowed me to bake the highlights during build-time, thus eliminating any need to ship JavaScript to the client.
Claude Code did most of the heavy-lifting with me guiding it and changing the source code directly when the guidance failed to communicate my intent. I went through the website page-by-page, starting with the individual blog post page layout.
I wanted to start with this page because that was the only one which I could not handle in my previous effort to redesign as there were a lot of legacy parts coming together to form this page. Instead of working with them and replacing each individual piece as I made its replacement, I went for completely removing all the older parts and then starting from scratch as that ensured no old styles (or anything) were conflicting with the new version.
What next?
This has been my primary software project since the past few months, thus I was not able to focus on many other things. There are a few content fixes needed and I do want to add the /now page before this year ends, but that will be it for modifications to the website for now.