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>
This commit is contained in:
2026-03-26 22:58:46 +01:00
parent a2183b13ce
commit 8cbf3d42e0
+21 -19
View File
@@ -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">