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() { export default function Hero() {
return ( 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 */} {/* Background name — outline fills in on load */}
<svg <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
aria-hidden="true" <svg
className="pointer-events-none absolute inset-0 -z-10 h-full w-full" aria-hidden="true"
preserveAspectRatio="xMidYMid meet" className="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"
> >
Jonathan <text
</text> x="50%"
</svg> 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 */} {/* Eyebrow label */}
<div className="mb-10 flex items-center gap-4"> <div className="mb-10 flex items-center gap-4">