overflow-hidden on the section was clipping the section's own content.
Wrapping just the SVG in an absolute overflow-hidden div contains the
background text without affecting the hero content.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add `isolate` to section + `-z-10` to SVG so background text renders
behind in-flow content (abs-positioned elements paint over in-flow
by default without an explicit stacking context)
- Reduce fontSize 22vw → 15vw so "Jonathan" fits within max-w-5xl
without clipping
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
SVG text background of "Jonathan" in outline that slowly fills in on
page load. Uses CSS fill-opacity animation (0 → 1 over 2s, 0.3s delay)
so the stroke appears immediately and the fill bleeds in gradually.
Light mode: zinc-200/300. Dark mode: zinc-800. Both stay recessive so
the effect is atmospheric, not distracting.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add CLAUDE.md with project conventions and architecture notes
- Create Navbar (sticky, backdrop blur, mobile menu) and Footer
- Build homepage sections: Hero, FeaturedProjects, Skills, CurrentWork, CallToAction
- Add /projects, /about, and /contact pages
- Create reusable ProjectCard and Badge components
- Centralise project data in content/projects.json with featured flag
- Add class-based dark mode toggle (default dark, persisted to localStorage)
- Refactor globals.css: remove conflicting prefers-color-scheme media query
- Fix two-instance ThemeToggle sync bug in Navbar
- Fix key={index} anti-pattern in timeline, stale closure in setOpen
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Jonathan