You may have noticed this website doesn't look like it used to. That's because I've spent the past week redesigning it from scratch. Everything has changed, from the stack to the design style, and I thought it'd be a good idea to write about what motivated me to put in the work, what inspired the design and what I learned in the process.
I felt like the old design didn't convey the image I wanted it to. Granted, it looked great, but I'd say the design was better suited for a magazine than for a personal indie website. It also put too much focus on the articles, while the new one puts focus on who am I and relegates the articles to a sub-page. This new design makes this look less like a professional blog and more like my small fun corner of the internet.
Besides that, there were some issues with my old stack. I was using a static site generator that only worked half of the times, the CSS was a mess and dark mode didn't look great with most of the elements of the page. Another of the things that motivated the change was having a website I could be proud of. Not just proud of my content, but everything.
I decided to drop the static part of my website and switch back to a CMS. I love Ghost, so I set off to create a custom theme from scratch. Using Tailwind CSS made everything a lot easier and saved me from falling into the messy CSS problem again.
I started with the home page, which originally included links to recent articles. I ended up with a minimalistic vibe I really liked (inspired by Justin's website minus the brutalist part). I designed everything from the start focusing equally on the light and dark versions (have you noticed the moon button on the bottom right corner?) to avoid facing the same problems I had experienced on the old design.
Once that was done I moved to the post page. I really wanted some color in here while keeping the minimal look, so I added the gradient border to the top section (highly inspired by CSS Tricks) and made the cover image a moving blob (here's the code for that in case you're curious). I also integrated the Blogcast player into the design (checkout that play button on the gradient border) using the new whitelabeled player feature. Finally, I added a card to direct readers to my newsletter at the bottom of every article (more on that below) and a full-blown comment system powered by Commento, a comment system built with privacy in mind (and this time, comments also look awesome on the dark).
Finally, I designed the newsletter page. If you haven't yet subscribed, I'd recommend you to do it, because I'm planning to focus on that newsletter a lot more from now on, with weekly project updates and early-access to articles (you can also support me on Patreon for more updates and even earlier access).
I plan to write more this summer, and will probably launch a few things before I start school again on September (that'll be my last year before university!). I'll also keep tweaking the design, which I've open-sourced.
Would love to know what you think about the new design, so make sure to leave a comment below (who knows, you could be forever remembered as one of the first commenters of this website!) :D