From 8cbf3d42e09f1ca1085b0977a80826a1eb4783da Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan@jger.nl>
Date: Thu, 26 Mar 2026 22:58:46 +0100
Subject: [PATCH] Move overflow-hidden off section onto SVG wrapper

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

diff --git a/components/Hero.tsx b/components/Hero.tsx
index 71c83af..69deba9 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -2,28 +2,30 @@ import Link from 'next/link'
 
 export default function Hero() {
   return (
-    <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">
+    <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 */}
-      <svg
-        aria-hidden="true"
-        className="pointer-events-none absolute inset-0 -z-10 h-full w-full"
-        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"
+      <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+        <svg
+          aria-hidden="true"
+          className="h-full w-full"
+          preserveAspectRatio="xMidYMid meet"
         >
-          Jonathan
-        </text>
-      </svg>
+          <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">