Fix hero SVG overflow clipping in animation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -25,13 +25,19 @@ No test runner is configured.
 
 This is a portfolio site built with the Next.js App Router. All routes live under `app/`. Global styles and theme variables are in `app/globals.css`. Fonts (Geist Sans/Mono) are loaded in `app/layout.tsx` and injected as CSS variables.
 
-Reusable UI components should go in `components/`. There is no `components/` directory yet — create it when adding the first component.
+Reusable UI components live in `components/`. Project data (e.g. `projects.json`) lives in `content/`.
+
+## Git Workflow
+
+- **`development`** is the working branch — all new work starts here
+- **`main`** is deployment-only — never commit directly to `main`
+- Merge `development` → `main` only when code is ready to deploy
 
 ## Project Rules
 
 - Functional components only — no class components
 - All styling via Tailwind utility classes — no CSS modules or inline styles
-- Dark mode by default; use Tailwind dark-mode utilities and the CSS vars (`--background`, `--foreground`) defined in `globals.css`
+- Dark mode by default; use Tailwind dark-mode utilities
 - Keep components small and single-purpose
 - Prefer readability over cleverness
 - Do not add features unless explicitly asked

app/globals.css

@@ -9,3 +9,20 @@
 body {
   font-family: var(--font-sans);
 }
+
+@keyframes name-fill-in {
+  from { fill-opacity: 0; }
+  to   { fill-opacity: 1; }
+}
+
+.name-outline-fill {
+  fill: #e4e4e7;           /* zinc-200 */
+  stroke: #d4d4d8;         /* zinc-300 */
+  fill-opacity: 0;
+  animation: name-fill-in 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
+}
+
+.dark .name-outline-fill {
+  fill: #27272a;            /* zinc-800 */
+  stroke: #27272a;          /* zinc-800 */
+}

components/Hero.tsx

@@ -2,7 +2,30 @@ import Link from 'next/link'
 
 export default function Hero() {
   return (
-    <section className="mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
+    <section className="relative isolate mx-auto flex min-h-[72vh] max-w-5xl flex-col items-center justify-center px-6 py-32 text-center">
+
+      {/* Background name — outline fills in on load */}
+      <div className="pointer-events-none absolute inset-0 -z-10">
+        <svg
+          aria-hidden="true"
+          className="h-full w-full overflow-visible"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <text
+            x="50%"
+            y="55%"
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontFamily="var(--font-geist-sans), sans-serif"
+            fontSize="15vw"
+            fontWeight="700"
+            strokeWidth="1"
+            className="name-outline-fill"
+          >
+            Jonathan
+          </text>
+        </svg>
+      </div>
 
       {/* Eyebrow label */}
       <div className="mb-10 flex items-center gap-4">