Only 11 months ago I announced version 5 of this little website here, and I worked a lot on it since then. I added Quick Reviews, organized the Cool Links, added a whole new Photography section and even built a single page to see them all at the same time.
And it's working! I've been posting a lot more than I ever did, and there's more people reading than ever, too. Far more than a blog, this has become my corner of the internet where I can publish anything I want to make public. Things I love, hate, or am proud of.
It was starting to get a bit messy behind the scenes, though, and I had too many ideas I couldn't experiment with because of that. So, I started by rebuilding my existing design in Figma, and experimenting a bit there... which ended up becoming a big enough change for me to label it as version 6 😅
Improvements everywhere
Every part of this website is now significantly improved in one way or another. I went over every single element of it and either cleaned it up, refactored or rewrote it. Which in turn meant I could add a lot of
Everything - the way a button reacts when you hover over it, the breathing rainbows, the subtle neon glow of headings, the way things are positioned - was thought out explicitly at some point. That doesn't mean it's perfect, as I'm far from an expert in design and UX, but everything was built to be the best it could be for me, within my time and knowledge constraints.
I wanted to call out some of my favorite details in this update:
Color tinting
The first is probably my favorite: since each section of the site has its own accent color, I used the new-ish color-mix CSS function to add just a tint of that accent color to the background of each page:
But wait, did you notice that transition?
Page transitions
As you might have noticed above, every page navigation smoothly animates the content of the page on the right. That's intentional! I used View Transitions to achieve that animation. I only wanted to apply it when it made sense, so it only happens when you click on one of the main nav menus, but not when you navigate within the blog section, for example.
I really wanted to achieve this effect that the content was, well, a page that was smoothly swapped out as you go between the sections of the website, and I think I achieved that effect. On mobile, the main nav is on top, so the page scrolls from the bottom:
New mobile menu
As you can also see above, the header menu changed! Before, all items were hidden behind an hamburger menu. Look, hamburger menus work, but are almost never a good experience. Unless someone is actively exploring the website, they'll most likely never open it, and chances are they'll miss out on something they might like.
However, it is hard to find a good solution for mobile. I experimented a bit and landed on a simple horizontal scroll, because the menu is simple enough for it to work. I used this trick to get a smooth dynamic fade to the right/left of the menu, so there's a visual hint that it is scrollable. And I think the result is pretty functional and
Filter all the things!
I added filters to all parts of the website now! Everything can be filtered by date, so it's easy to get to the older posts. Blog posts, reviews, cool links all also have their own filters by category or type. And in the archive page you can still see everything, but can now filter out the things you don't care about!
Oh, and filtering on mobile is not behind. I put all the same filters inside a modal dialog that pops up from the bottom of the page. And since it mimics something that phones already have, I made sure that swiping down closes the dialog as well!
Polaroids
The polaroid-like cards in the home page are not just flat, boring imitations: they have some weight to them too. Not much, since they're just sheets of paper, but have you tried hovering your cursor over them (or tapping on them if you're on your phone)?
They're also more complex than they look: they are responsive, but do so by scaling down its content and not just themselves. It does some smart calculations with scale to fit in wherever they are and without risking the label getting too big. Just like a real world element would.
They started as an experiment that I liked too much to not use somewhere. And I needed some ideas of what to put in the home page, so that's how they ended up there.
So much more behind the scenes
I also did a lot of work behind the scenes to make things easier to keep track of and to maintain. Since this is a side project, it's normal for me to not work on it for a while, and I need things to be in order so I don't get caught up trying to remember how things work.
So I refactored a lot of the existing code, moved even more content away from the code, and prepped everything I need to finally build some pages I've been wanting to for a while, like /about, /now and /uses. I'm still procrastinating on those just a little bit more, though.
Wrapping up
I hope you enjoyed seeing a bit of what I put into this digital garden of mine. Most of all, it's something I do out of pure passion, and I love playing around with these 0s and 1s. It's my favorite way of expressing myself and learning cool things that I can use at work at the same time 😉
Did this blog post change your life? Or maybe I made a mistake that ruined your day? You can always send me an email to tell me about it.