What happens when you let an AI loose on your personal website with a vague brief and a dream? You get a theme switcher, a share sheet, drop caps, and about fifteen contrast bugs fixed in an hour.
This post is the companion to the video above. If you just want the highlights without watching the full session, read on.
What We Built
Theme Switcher
The site already had six themes defined in CSS - I’d built them ages ago but never exposed them to users. They just sat there, gathering digital dust. Today we finally added a dropdown that lets you switch between three of them:
- Default - The warm, approachable illustration style
- Retro - Classic computer casing vibes
- Retrowave - Bold neon 80s aesthetic (dark theme)
The implementation uses localStorage for persistence and an inline script in the <head> to prevent that annoying flash of wrong theme on page load. Nothing groundbreaking, but it works.
Social Share Sheet
Blog posts now have share buttons at the bottom. We went through a few iterations:
- Started with X, LinkedIn, Bluesky, Mastodon, and Copy Link
- Discovered the Bluesky icon needed Font Awesome 6.5.2+ (we had 6.5.1)
- Found out the Mastodon share service was clunky
- Swapped Mastodon for Threads and Facebook
The final lineup: X, LinkedIn, Bluesky, Threads, Facebook, and Copy Link. The copy button even shows a little “Copied!” tooltip.
Drop Caps
Every blog post now starts with a fancy drop cap on the first paragraph. It’s a small touch, but it makes the content feel more polished. Uses the Share Tech font in burgundy at 3.5em.
Mobile DeRP Banner
The Definitely Real Products banner system now shows ads on mobile blog posts, tucked between the tags and the content. Because even mobile users deserve to know about The Tragic 8 Ball.
The Bugs We Fixed
This is where it got interesting. Turns out using --color-black as a CSS variable name when you have dark themes is… not ideal.
The variable was mapped to --color-footer-bg, which in Retrowave is the same dark purple as the page background. So titles, hamburger menu bars, and various other elements were invisibly dark-on-dark.
We hunted down every color: var(--color-black) in the codebase and replaced them with --text-primary, which actually respects the theme’s text color. Files touched:
- BlogPostLayout.astro
- BaseLayout.astro
- blog/index.astro
- projects/index.astro
- search.astro
- code.astro
Classic case of a naming decision coming back to bite you.
The Vibecoding Process
Working with Claude Code on this was… chaotic but productive. The workflow looked something like:
- I’d describe what I wanted
- Claude would implement it
- I’d test and find issues
- We’d iterate
Sometimes Claude would go off and verify things in the browser autonomously (which burns tokens), so I had to rein that in. Other times it would spawn parallel agents to tackle multiple tasks at once, which was genuinely useful for the blog features.
The key insight: AI pair programming works best when you stay engaged. Let it do the typing, but keep your eyes on the output. The moment you stop paying attention is when it’ll implement something technically correct but aesthetically wrong.
Watch the Video
The full unedited session is on YouTube. You’ll see:
- Real-time problem solving
- CSS debugging
- Me squinting at contrast ratios
- Claude saying hello to the internet
It’s not polished. It’s not scripted. It’s just how this stuff actually gets built now.
Built with Claude Code. Theme switcher tested by switching themes approximately 47 times.