A new year, a new home ─ nuro

So, it’s been a while huh?

It’s been just over a year since I last actually touched anything to do with this site and as of late I have felt that it’s been long overdue needing an update & a fresh coat of paint.

I finally found a weekend or 2 free to build something new from scratch that I am happy with. With this I thought it would be a good opportunity to break down some of the key details about the re-design for things such as content I wanted to keep, the tech stack, the design & more.

You’re coming with me

There wasn’t a huge amount to my old site design, which I have now archived, but there were a few key items that I wanted to port to this new site & maintain backwards compatibility as much as possible.

The main items being:

📕 Posts: All of my previous posts have been ported over to this new site. The originals will always be available in the old archived repository but I wanted to bring them over to this new site to keep the content alive, even if some of the old functionality is missing or broken.
🔌 Lanyard: I adore Lanyard & used it to build the /status page on my old site. I wanted to keep this cool functionality for this new site & so I ported it over in a new form factor as 2 widgets. A “Building” widget to show what I am working on in Visual Studio Code at that given moment, as well as a “Listening” widget to show what songs I am currently listening to on Spotify.
📆 Events: There’s a lot that happens in life & I previously had a /timeline page that showed a number of key events in my life. Everything from starting & finishing university, my first job, etc. I loved this “Life overview” design & so I brought it over in a new “Events” widget that keeps the vertical timeline approach.

A framework for the future

In the past I’ve used Next.js for almost all projects because it’s a true kitchen-sink framework that does “literally everything”. However, as of late I have found it more of a pain to work with, namely from things not working as I expect them to, and for the use case here of building a portfolio website with a blog it seems like there may be better options available.

So, what’s the alternative? Enter Astro

In my opinion Astro is currently the perfect all round framework for almost any scenario you may need, and here is why:

Powered by Vite: Under the hood Astro uses Vite, which is a super fast build tool that is perfect for building modern web applications.
💙 TypeScript-first: Everything about Astro has been built to be TypeScript-first oriented, rather than feeling like an afterthought.
🔌 Integrations: Astro has a native plugin / integration system that allows you to extend the functionality of Astro with ease.
🔨 SSR & SSG: Out of the box Astro supports not just server-side rendering & static-site generation, but it also offers a hybrid mode where you can mix & match the two.
Adapters: No matter where you’re deploying. Static, Node.js, Bun, Deno, Cloudflare, etc. There is probably an adapter to run Astro in whatever environment you need.
☁️ Astro Syntax: Astro has its own server syntax that is super easy to use & many would say looks like PHP.
Islands: If you need client-side JavaScript, add it as you need it with islands. Add one or multiple UI frameworks at once.
Content Collections: Managing & consuming local JSON or Markdown data in your project, like blog posts, is easy with Content Collections.
✍️ Markdown: Astro has built-in support for Markdown files, which makes it easy to write content in a familiar format.
💨 View Transitions: Astro is one of the few frameworks right now that supports the new View Transitions API to make page transitions look seemless.
📕 Documentation: If you’ve not already read any of the links above, I recommend just reading through their documentation to see how nicely everything is explained.
‍💻 Community: There is already a massive & helpful of community of people already using Astro.

There is so much to Astro & what it can do. Everything from a static blog, to a full SSR MPA, or even an embedded SPA. It’s a framework that is perfect for almost any scenario you may need. Exactly what I need for this site.

To the cloud(flare)

Along with the switch from Next.js to Astro, I also took this as an opportunity to look into trying something other than Vercel for hosting my site.

Now, Vercel has been fine for the most part. I use their free tier for my personal site which has been fairly generous in the past but there were a few caveats that made me want to try something new.

After a bit of research I ended up switching to Cloudflare Pages because it offers a similar DX (Excluding a few quirks compared to Vercel) but the value for the price is 100x better. Namely that with Cloudflare you get unlimited web analytics, no bandwidth limits & Cloudflare’s amazing global CDN & edge network.

So far the experience has been great! The build times are pretty fast, around 1 minute per build, and the deployment process is easy. I’m happy with the switch & as long as nothing glaring crops up in the future I’ll likely be switching to Cloudflare for all future projects.

Linting with Rome Biome

For the longest time the go-to for formatting a codebase has been Prettier & similarly for linting it has been ESLint. However, with time they’ve shown their age in terms of performance & are now days fairly slow compared to other modern tools like ESBuild, Bun, etc.

Now, a while back there was a project named Rome that wanted to fix this issue, among many others, by building the same or similar functionality of Prettier & ESLint all into one tool. Kind of like how Deno & Rust have their own built in formatting & linting tools. However development of Rome seems to have been cancelled, the website taken down & all repositories archived.

With this a new community fork of the Rome project emerged named Biome. Biome is meant to be what Rome was always mean’t to be. A modern & fast all-in-one tool for formatting & linting your codebase. So far it seems to be living up to its name as I used it for this project & it’s been a breeze to use both in terms of ease of set up & performance.

It’s raining meteors

Similar to my old site with the animated particles background, I wanted to add some kind of “unique element” to make the site feel more alive or active than a static page. Usually other sites achieve this in the form of fancy graphics, svg’s or animations.

After a bit of research on some possible options but I eventually settled on the idea of creating a night sky kind of vibe with shooting stars or a meteor shower effect.

To implement this I found this post from Manu Arora on how to create a meteor effect with React & TailwindCSS. It seemed like the near perfect implementation of what I wanted however there were a few tweaks that I needed to make it as perfect as I wanted.

The key changes I made from the original post are:

💯 Meteor count: The total number of meteors on screen has been decreased to both limit the performance impact of this component, as well from an aesthetic point-of-view it looked cleaner to see a meteor on rare occasion.
🎨 Meteor colour: The colour of the meteors has been changed from a white to a light gray in light mode & darker gray in dark mode, based on the users system theme.
⬅️ Meteor offset: By default the meteors all originate in the top left corner with a slight offset to the right. However I wanted these to cover the entire top portion of the page so I tweaked it to use the full width of the page but also include an offset to the left since the meteors are moving to the bottom right of the page & so it looks more natural to fade in from off-screen.
Accessibility: While they may look pretty, some users do not / cannot handle excessive animations on a page. So I added an aria-hidden attribute & added the motion-reduce:hidden Tailwind CSS classes to make it hide the meteors when the user has enabled the “Reduce motion” setting in their operating system.

Build your own

Now, for all of my previous personal websites that I have built, I have always open sourced the code base for others to view, study & learn from.

However, this project is different & feels like enough of a refined product that I, for now anyway, won’t be open sourcing the code & instead be forking the project with a few modifications to bundle as a Astro theme to sell as part of my Astro theme store: Buttery Themes.

I may change my mind about this at a later date & open source it anyway, but for now I think I will keep it closed source & see how it goes.

More soon

My previous blog didn’t get a huge amount of love after I launched it since I got caught up in other projects & work at the time.

I’ve got a number of post ideas in mind & started a few drafts for posts that I want to finish writing & publish in the coming weeks & months.

So, stay tuned for more soon 👋