It always brings a wry smile to my face when I read the post I wrote about the previous iteration of this website. A lot has changed in those couple of years, both in web technologies and what I know about them. So I guess it’s a good sign that I gently shake my head at it, because that is a marker of progress!
Whilst I had made valid points about how the original site was bloated, overengineered and unnecessary, there’s definitely some irony in saying that and then going off and using Next.js along with writing my own front-matter + MDX setup. But if I were to continue to chase this train of thought, I’d end up with a singular, unstyled HTML document — and that wouldn’t be much fun.
The focus of this rewrite was to once again try out some new things, but to also see if I could simplify the existing design and clean it up. So for this version of my personal site, not much has changed visually. If you have a keen eye and memory you might notice most of the spacing and interactions have been tightened up to be more uniform, but other than that most of the changes have happened in code.
I’ve ditched Next.js, in favour of Astro. I’ve actually gone a step further than that, and dropped React completely for this site. Sure, it was fast to write before, but this site could easily be done with just HTML and CSS if I really wanted, considering there are no complex interactions or features.
Astro with vanilla javascript has been a joy to write. It feels like the perfect balance of handling all the annoying things for me — MDX setup, routing, SEO — whilst not hiding things behind weird APIs and patterns that take ages to learn.
I’m still using Tailwind (albeit more responsibly now), so most components were carried over with minimal changes. There were a few more challenging components - such as the naive summarisation example, but this was overcome with a few <script> tags.
Another fun one to replace was the framer-motion animations. When I originally added the library, I had hoped to use it for more interactions around the site but it pretty much ended up only being used to aniamte the theme toggle in the navbar. Now, the theme toggle animations are vanilla css! They’re not completely the same, but I had quite a bit of fun replicating the framer animations I had previously.
For the MDX side of things, using Astro’s content collections along with dynamic routes made it extremely easy. Paired with zod validation and native front-matter integration, the DX is dreamy.
The biggest change I’ve made visually would be view transitions. Astro provides a really easy way to do this which uses the View Transitions API, so now I can have these cool fade animations between pages. They definitely didn’t come without some small headaches involving some weird interaction bugs, but hopefully these have been squashed now.
One of my favourite parts about this entire rewrite was that I reduced the codebase by 2000~ LoC! This is a result of optimising tailwind practices, removing unnecessary components and Astro being much lighter in the way that I’ve used it for this site.
So yeah, I’m definitely aboard the Astro train when it comes to content sites. I guess I’ll see you again in a few years where I’ll talk about how silly and naive this approach was!
