Fantinel.dev v5 is here!

If you're reading this and you're not from a distant future, this means that you are right now on version 5 of fantinel.dev!

Over a year ago, after posting about my blog's 5th anniversary, I posted about my wish to redesign it. First of all: time flies! I hadn't realized it was over a year ago. Secondly, it's finally here! That means it's been a year of me working on the new design, building it, refining it, and above all, procrastinating!

How I got here

Of course, I didn't actually work on it for a year. It's been a very on-and-off process, mostly off. A lot of things happened during this year and I got busy with work, travel and prepping for a big move (that still didn't happen). A lot of the free time I had also went into other things I like - mostly videogames. That's fine! I never want any personal project to be anything more than a hobby. So I don't feel bad at all for how long it took.

So the biggest chunks of my work on the new website were in short burst of hyperfocusing on it. Focusing can be my superpower quite often. For one or two weeks at a time, I'd wake up thinking about it, have breakfast thinking about it, work thinking about it, and then finally work on it while thinking about it, usually during the evenings. I don't recall any dreams about the website but I wouldn't be surprised if that happened.

Design

I think I started working on the design itself right after that blog post, at the end of March/beginning of April, 2024. I started out with something much more similar to what I had before. My initial plan was to use Figma to rebuild what I had, then start experimenting inside the tool.

However, after working on this for a bit, I reflected on what I said on that redesign post:

I want my personal website to reflect a bit of who I am. Am I the same person I was 3-4 years ago?

And the answer is: not really. While I've not completely changed as a person, I like to think I've improved quite a bit since then. Some tastes changed, a lot of opinions evolved, the hair got whiter, and the back pains are now an almost daily visitor. And more importantly, I got bored of the old design. It was fun for a while but I eventually got tired and felt restricted by it.

As I became an even bigger fan of pastel colors since then, I decided I'd take the colors of my favorite code theme, Catppuccin, and take them for a spin on my new design. I liked it so much that I just decided to use that color palette for everything!

The previous design was built with light mode in mind and then adapted to dark mode. However, I like the dark Catppuccin palette so much that this time I did the opposite: it was designed entirely in dark mode and I only got to work on the light mode after I already started building it. I still want to respect the user's theme preference above everything, so I don't default to the dark mode.

Overall, that worked, but to me it's clear that the dark mode looks much better than the light one. To me, at least. But I'm continuing to tweak light mode here and there whenever I see things I can improve.

I decided to start with just the basics: the home page, the blog archive and the blog post pages. Once I got those to a place I liked, the rest would come naturally.

Development

Once I was satisfied with the design, I let it simmer in my mind for a few months before I started building anything. After coming back to the new design a few months later, I still liked what I saw. Good sign! So it was time to start building it.

However... I'm a web developer. Not just that, web development is my hobby too. So I couldn't simply implement the new design in the existing project. The horror! Why would I keep using the code that was working well, decently organized and that would save me time?

That's why I rebuilt it from scratch!

Astro

I had been eyeing Astro for a while, and decided it was worth a shot to at least experiment. I could still reuse the code for my components, since Astro is fully compatible with Svelte. I'd just have to rework the part that did the routing, endpoints, build and data handling. Good thing that was really easy! Astro works similarly to SvelteKit (what I used before) and other popular ones like NextJS. So if you've worked with any of them, most of the principles stay the same. Just need a few implementation tweaks here and there.

You see, there was nothing wrong with SvelteKit, which I used before. It is very easy to understand, does a lot of things automatically and builds a really performant website. The thing that drew me to Astro is that it shares a lot of the same principles, but is framework-agnostic. That means I could bring over my Svelte components, which is great, but also that the knowledge I get from using it might be useful if I ever need to build a website that uses React, Vue or, I don't know, even PHP components. Astro doesn't care.

Something I noticed while developing is that I imported my Theme Toggle, a Svelte component that uses JavaScript to toggle the current theme into a page. It rendered correctly, but clicking on it wasn't doing anything.

Turns out, Astro does not ship any JavaScript by default, even from your JS framework components! That is an amazing default behavior, as it encourages progressive enhancement, decreases the size of the website (have you ever seen those 10MB+ NextJS landing pages???) and is just overall a good development pattern. If I really need JavaScript for this component, I have to explicitly add the `client` directive to it.

In my case, that theme toggle does actually need JS to work. Which is why it hides itself if JS is not available, only showing up if it has what it needs to work. But some components don't need JS, they're just better with JS. The Table of Contents in this blog post is dynamic. As you scroll down it will highlight the current chapter you're in, and if you're on mobile it will stick to the bottom of the screen and do its best to get out of your way.

However, at the end of the day it's still just a table of contents, a collection of anchor links that link to sections of this page. If JS is not available, it shouldn't break, it shouldn't hide. It just doesn't do the dynamic stuff, but it's still useful by letting you click on it. This is the kind of thought that I always have in mind when building something, and that Astro seems to encourage.

Svelte 5

I've used Svelte since v3 and loved it. It just made a lot of sense to me, I always vibed with its goals and principles, the performance gains it offered were awesome, and it was always a breath of fresh air to work with it. My previous site was using Svelte 4, which was a refinement over Svelte 3. I loved it.

On this rebuild, I naturally upgraded to Svelte 5, which came out recently. Svelte 5 is a big update, bringing some syntax changes, performance gains, and big things under the hood.

... I'm not sure I like it.

You see, to me what was magical about Svelte is that its syntax was just some sugar on top of JS and HTML. Add a $ character here and there for reactivity, a {#each} over there for looping over a list of items, and you're done. Svelte 5 still supports that syntax and it seems to me they will keep supporting it for a while, but they've introduced a new syntax in the form of “Runes”. I wanted to give the new stuff I try so I built everything with the new syntax.

After the initial learning curve I got used to it so it's not a big deal anymore, but the fact that there was a learning curve was a letdown. I still like it better than working with other frameworks, though.

Some notes I took during development:

• The runes stuff in Svelte 5 takes a while getting used to;
• Dealing with slots is way more complicated now; Have to use "snippets" instead, which might be more flexible but it's way harder to understand. I really miss <slot>s 😭;
• The new $props syntax is way more intuitive than the previous export let one, although more verbose;
• Feels like Svelte 3-4 were sprinkles on top of the web, while Svelte 5 is a framework like others are.

Storybook

I used to use Histoire for developing components in isolation, but it doesn't seem they support Svelte 5 and development is quite slow for my taste. So, begrudgingly, I started using Storybook for that.

I always have issues setting up Storybook, and it was no different this time. I wrote up an article about my journey to getting it to work.

What's next

So, with the redesign now live, what's next for this website? Hopefully a lot, actually!

You might notice there's a big “Under construction” banner on the home page, and for good reason: I'm not even close to finishing everything I want to do with it. Honestly, I never will. This is, after all, my playground to experiment with things and do whatever I feel like.

If you want some spoilers, here's what I think I'll work on next:

• Quick Reviews: I've been writing small reviews for movies and TV shows I've watched for a while now, and I want to set up a section on the website just for those;
• A /now page: kind of a trendy thing among bloggers, the idea is a page that shows the things I'm doing currently, like what I'm working on, games I'm playing, music I'm listening, etc.
• A /uses page: a centralized version of my yearly Default Apps posts, possibly including hardware as well.

To be honest, I'll probably come up with something else before I'm done with those three. Who knows?

Wrapping up

Thanks for reading it all the way down here! If you're interested in seeing the code to see how everything works, everything is open source and available on GitHub.