Site2

The site is now feature-complete.

Every route also picked up real per-page metadata and a generated social preview image, and a first Lighthouse run came back with accessibility and SEO scores near-perfect site-wide.

The new site isn’t perfect by any stretch of the imagination, but I am so pleased with the improvements made to the speed. New functionality will be much easier to add now too. This satisfies my goals for the project.

The homepage finally has its hero.

An animated, dithered wave background now fills the screen, reacting to cursor movement.

Below it, I wrote a short bio section, and a “Currently” section that surfaces whatever's actually being read, watched, or built right now, pulling in real cover art straight from Books, Binge, and Builds.

A sixth page, Bugs, went in during this same stretch too, which is very similar to Books and Binge, but for Video Games. With the completion of the homepage, the site is visually complete top to bottom.

The site's project showcase is live.

Each build now gets its own card. Cover image, project type, status, and a compact progress bar with a Grid/List toggle for browsing. Open one up and there's a full phase roadmap, a gently pulsing status dot for anything still in progress, and an inline timeline of real updates, all built on the same fade-up motion system from earlier phases rather than a new scroll effect.

Blog got attention too: its own visual identity instead of borrowing Builds' look, a real reading-time estimate, and a mobile pass so tag lists collapse behind a tap instead of crowding a small screen.

The site's main hero is next.

Books, Binge, and Blog are now real pages running on real data.

Books settled into a cover-image grid split across two shelves, with tag filtering and sort options. Binge matched that shape once its own cards existed, complete with live poster art pulled in from TMDB. Both share the same detail view, now rebuilt on Radix's dialog primitive. Blog moved from a static grid into a full board with switchable list and grid views, category icons, and its own filtering.

With Books, Binge, and Blog all live and sharing the same detail view and filter components, Builds is next, and it gets to build on top of all of this instead of starting from scratch.

The site can now render more than plain text.

Notion page content such as headings, lists, quotes, code blocks, images, and toggles now all render correctly. Images now route through a small proxy that re-resolves a fresh URL and reads the real dimensions on every request, so nothing breaks or stretches out of shape.

The bigger addition is a registered system for interactive embeds. Custom components can now be dropped in and rendered live, with each one safely isolated so a crash in one embed can't take down the rest of the page.

The site now has a shell and a voice.

Every route shares the same navigation and footer, the real typography system is loaded. EB Garamond for body text, Geist Mono for labels, and a self-hosted Clash Display for the hero. A signature fade-up entrance and staggered list reveals, both handling reduced-motion preferences correctly.

The homepage's real hero is still a few phases out, so an animated wordmark is standing in for now.

One of the goals here was making every later phase easier. Because the nav, footer, fonts, and motion system now exist once at the root, upcoming pages inherit all of it automatically and only need to build their own content.

Rather than rendering pages straight away, this phase was about teaching the application how to communicate with Notion. The site can now fetch, filter, sort, and normalise data.

The data layer was successfully deployed and verified against production. The site now has access to real books, blog posts, builds, and watch history, all ready for the interface that will arrive in the next phases.

This isn't work visitors can see yet, but it makes every feature built on top of it simpler, cleaner, and more reliable.

The foundation of the new site is now complete.

The project now has a clean, fully typed Next.js 16 application with all planned routes in place, Tailwind CSS v4 configured with the site's design tokens, core dependencies installed, and a development workflow that passes type checking, linting, formatting, and production builds without warnings. The dark visual theme is already wired into the project, even if the actual design work comes later.

One of the biggest goals for this phase was reducing future friction. Decisions like introducing shared utility helpers, configuring Radix UI from the beginning, and keeping the design token system intentionally minimal means later phases can focus on building features rather than revisiting infrastructure.

I believe the current website does a good job of showcasing the media I'm consuming, and a decent job of presenting my blog and the projects I'm currently working on.

But that's about it.

There have been multiple occasions where I've wanted to add more ambitious interactive or visual elements, only to discover that the site's underlying structure simply isn't capable of supporting them.

Beyond functionality, performance has also become a concern. The current site is slow to load assets, making the experience feel sluggish and less satisfying.

For that reason, I've decided to rebuild the site from the ground up using a modern framework. My goal is to preserve everything the current site does well while making significant improvements to its aesthetics, functionality, performance, and responsiveness.