Overhauling the Stack: Astro 7, Tailwind v4, and Converting to AI-Assisted Engineering

Back in late 2025, when I first spun up this website, I wrote a post about falling down the static-site rabbit hole. The goal back then was simple: get a clean, automated pipeline going with Astro, push markdown to git, and let the cloud handle the rest. It did the job, but like any side project left running for a while, dependencies fell behind, layout patterns aged poorly, and the technical debt started piling up.

Over the past few hours, I sat down to do what was supposed to be a quick maintenance pass. That quick pass turned into a major overhaul: upgrading to Astro 7, migrating to Tailwind CSS v4, implementing a dark mode toggle, auditing SEO, and completely restructuring the layout.

More importantly, it’s the project that officially converted me to AI-assisted engineering.

What Changed Under the Hood

A lot has shifted in the frontend ecosystem over the last year. The update wasn’t just bumping version numbers in package.json; it was a fundamental architectural cleanup:

• Upgrading to Astro 7: Astro 7 brings Rolldown/rs-compiler builds that compile all static pages of this site in under 750 milliseconds. However, Astro 7 is much stricter about component AST boundaries. The legacy pattern of opening <html> and <body> tags in Head.astro and closing them in Footer.astro broke completely under the new compiler. We refactored everything into a unified, clean BaseLayout.astro that wraps pages self-contained.
• Tailwind CSS v4 Migration: Tailwind v4 moves away from the old tailwind.config.js model into a purely CSS-native architecture via @import "tailwindcss";. We configured @custom-variant dark (&:where(.dark, .dark *)); in our global styles to support class-based dark mode cleanly.
• Real Dark Mode & Theme Toggle: Added a theme toggle to the navigation (and mobile menu) that flips between Sun and Moon icons via pure CSS, remembers user preference in localStorage, and runs a small inline script in <head> to eliminate any flash of unstyled theme (FOUT).
• SVG & Design Polish: Converted the static logo SVG into a native Astro component (<Logo />) with fill="currentColor", allowing it to respond directly to Tailwind fill-* and text-* classes. The navigation now dynamically tracks the active page category with an amber underline while inactive links highlight gray on hover.
• SEO & Structured Data: Wired up dynamic Open Graph meta tags, Twitter card summaries, and schema.org JSON-LD schemas (BlogPosting, Person, WebSite) across every page.
• Cutting the Corporate Fluff: Stripped out the generic, buzzword-heavy AI copy on the Home and About pages, rewriting it in my own voice to reflect my actual background in systems infrastructure and life here in Japan.

The Shift: From Skeptic to Convert

I’ve held a dose of skepticism toward AI coding tools.

Most demos look impressive until you put them in front of a real, messy codebase with broken builds, mismatched peer dependencies, and custom build pipelines. Too often, generative tools spit out generic code snippets, hallucinate non-existent API methods, or write copy that reads like a zealot.

This project was the first time I experienced true agentic pair programming, and it completely changed my perspective.

Instead of copying and pasting prompts into a web chat window, I had an agent working directly inside my workspace terminal and file tree:

1. Navigating breaking compiler errors: When Astro 7 rejected unbalanced JSX tags in legacy layouts, the assistant diagnosed the exact AST failure, created a clean unified layout, and migrated every single page template across the site.
2. Handling build environments: When macOS sandbox keychain checks crashed Node processes during package updates, it identified the root cause and systematically verified every change with local production builds.
3. Connecting external context: By hooking into the Google Drive CLI directly from the terminal, the assistant read through my actual resumes, cover letters, and interview notes to understand my real engineering background, allowing us to collaboratively rewrite the site’s copy in a voice that actually sounds like me.

The Takeaway

I used to think of AI in software development as either an autocomplete gimmick or an autopilot that writes mediocre boilerplate. I now see it as an extraordinary force multiplier.

It doesn’t replace foundational engineering knowledge—you still need to know how the DOM works, how compilers parse ASTs, how networking and DNS propagate, and how to spot bad code. But when you combine hands-on domain experience with an agent that can execute multi-file refactors, verify builds, and handle tedious pipeline glue in seconds, the development velocity is unlike anything I’ve seen before.

I’m officially converted.