Phase 8: Styling & Polish
Phase 8 was all about making everything look and feel polished. The agent added subtle animations, improved typography, enhanced the dark mode experience, and implemented a bunch of performance optimizations.
Phase 8: Styling & Polish
Date: January 6, 2026
Phase: Phase 8 - Styling & Polish
Status: Completed
Note: This post is written from Joel's perspective (first person "I" = Joel). Technical details sections are clearly marked as written by the AI agent (Cursor - Claude Code).
Phase 8 was all about making everything look and feel polished. The agent added subtle animations, improved typography, enhanced the dark mode experience, and implemented a bunch of performance optimizations.
What We Improved
Animations
The agent added subtle, performance-optimized animations throughout the site:
- Fade-in animations for blog posts and content cards
- Slide-up animations for career timeline entries
- Scale-in animations for uses items
- Staggered delays so things don't all animate at once
All animations respect the prefers-reduced-motion setting, which is important for accessibility.
Performance Optimizations
Lots of performance improvements:
- GPU-accelerated transforms for smooth animations
- Optimized transitions using
will-changestrategically - Next.js config optimizations for image handling
- Package import optimizations
- Security headers added
Typography & Styling
- Enhanced prose styling for blog content
- Better focus states for accessibility
- Smooth scroll behavior
- Improved dark mode contrast
Metadata & SEO
Updated the root layout with proper metadata, Open Graph tags, and Twitter card support. This will help with social sharing and SEO.
The Result
The site now feels much more polished and performant. Animations are subtle and smooth, everything loads efficiently, and the overall experience is just better. The performance optimizations should help us hit that 100 Lighthouse score goal.
Joel's Thoughts / Reflections
Animations are another area where I’ve never considered myself good at coding, so I’m perfectly happy prompting instead of typing this stuff out. I really the framer library, but in this case I picked a component library from ShadCN’s directory as it stated it was good for animations. Didn’t even check to see what lib it was using under the hood.
For some reason, the initial markdown-to-html logic that Cursor created didn’t work with Tailwind’s Typography plugin (why isn’t this just included by default?) because it didn‘t include the Typography plugin in the Tailwind CSS 4.x setup. I think the learning cutoff for most LLMs pulled the tailwind 3.x docs, so ANYTIME you’re building with Tailwind 4, you should include links to the Tailwind docs in your prompts.
A Tailwind MCP server would REALLY help this process out.