It’s been a while
Thirteen months, to be exact. Last time I posted I had just done a “Major Project Cleanup and Performance Boost” and promised myself I’d keep the momentum going. Then, predictably, life happened and the site sat untouched while npm outdated quietly grew a wall of red text.
This time I finally sat down and did the thing properly: updated everything, fixed a bunch of bugs I didn’t even know existed, and gave the whole site a redesign instead of just patching the green theme one more time.
What Changed
Dependency Updates
Astro 5 → 7, Tailwind 3 → 4, TypeScript → 6. None of these are drop-in bumps.
@astrojs/tailwind doesn’t support Astro 7 or Tailwind v4 at all (it’s frozen on tailwindcss@^3), so that meant migrating to @tailwindcss/vite and rewriting tailwind.config.mjs into CSS-based @theme config.- Astro 7 also swapped its default Markdown processor, which broke my
remark-reading-time plugin until I moved it onto the new unified() processor API.
- TypeScript 7 just shipped, but
@astrojs/check hasn’t caught up to it yet, so I settled for 6 for now.
The React That Never Was
Remember when I said I “resolved build warnings” last year by “using only React for all interactive components”? Turns out that consolidation never actually happened. I went looking and found react, react-dom, framer-motion, lucide-react, and four separate @radix-ui packages sitting in package.json, completely unused. Not a single .tsx file in the whole project. Everything interactive on this site — the theme toggle, the typing test, the timeline animations — has been plain Astro and vanilla JS the entire time.
Removed all of it. Install went from ~700 packages to 362.
Bugs I Didn’t Know I Had
The best part of finally sitting down and reading through your own year-old CSS is finding out how much of it was quietly broken:
- My theme variables were wrapped in
hsl(var(--background)) everywhere, except --background was never an HSL triple — it was a plain hex code. The browser just silently dropped the invalid declarations, which is why the contact form’s borders, the post tags, and half my buttons never looked quite right and I never figured out why.
- The dark-mode CSS mixed a media query and a CSS selector in the same
@media block (@media (prefers-color-scheme: dark), :root[data-theme="dark"]), which isn’t valid syntax. Manual dark-mode toggling was probably never fully working.
.content ul was declared twice in global.css, the second time with list-decimal. Every bullet list in every blog post — including this one, until now — was rendering as a numbered list.- The tools page linked to
/contact, a page that doesn’t exist.
None of these threw errors. They just quietly made the site slightly worse for over a year. Lesson relearned: npm run build succeeding means nothing about whether your CSS actually does what you think.
The Redesign
I’ve been sitting on this green color scheme since the very first version of this site and honestly never loved it. This time I went with something completely different: a warm, cream-paper palette with a typewriter font (Special Elite for headings, Courier Prime for body text), torn-paper edges on cards, little pieces of washi tape, and a wolf-logo “polaroid” in the hero instead of a photo.
| Old | New |
|---|
| background | #f5f5f5 | #ece1cb |
| primary | #618b3c | #4a3423 |
| accent | #a9da81 | #b98a44 |
There’s also a typewriter animation cycling through my roles in the hero (“Software Developer”, “CS Student”, “Hobby Programmer”), and blog post titles now type themselves out as they scroll into view. Both respect prefers-reduced-motion, so nobody’s forced to watch text type itself if they don’t want to.
Retiring the Mood Board
The old “Musical Mood Board Generator” tool never really fit — it was just a handful of raw oscillator tones with no real use beyond a novelty. I replaced it with The Typewriter: a distraction-free writing page with live word count, reading time, and page estimates, plus a synthesized mechanical key-clack and a margin bell for old times’ sake. Given I’m supposedly writing a fantasy book somewhere in the background, this felt like a tool I’d actually reach for.
The typing speed test stuck around, just redesigned to match, and I fixed a real bug in it too — time-mode tests could run out of words before the timer ran out if you typed fast enough.
Cleaning Up TypeScript
I finally ran astro check properly for the first time in a while and found 138 errors, almost all implicit any types in inline <script> tags that had apparently always been there, just reported as warnings on the older TypeScript version. Went through and typed all of it properly instead of ignoring it — DOM lookups, event handlers, the works. astro check now reports zero errors, zero warnings.
Why
Mostly because I was tired of opening this repo and immediately feeling like I had to apologize to it. A site that’s supposed to prove “I actually know the stuff I’m talking about” probably shouldn’t have three unused UI libraries and a CSS bug from launch day still sitting in it.
Future Goals