From a2183b13ceb867241025238a60fbdcbeb6022218 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan@jger.nl>
Date: Thu, 26 Mar 2026 22:56:50 +0100
Subject: [PATCH] Fix hero name animation: z-index and font size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 components/Hero.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Hero.tsx b/components/Hero.tsx
index 2246c60..71c83af 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -2,12 +2,12 @@ import Link from 'next/link'
 
 export default function Hero() {
   return (
-    <section className="relative overflow-hidden 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 overflow-hidden 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 */}
       <svg
         aria-hidden="true"
-        className="pointer-events-none absolute inset-0 h-full w-full"
+        className="pointer-events-none absolute inset-0 -z-10 h-full w-full"
         preserveAspectRatio="xMidYMid meet"
       >
         <text
@@ -16,7 +16,7 @@ export default function Hero() {
           textAnchor="middle"
           dominantBaseline="middle"
           fontFamily="var(--font-geist-sans), sans-serif"
-          fontSize="22vw"
+          fontSize="15vw"
           fontWeight="700"
           strokeWidth="1"
           className="name-outline-fill"