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:
+21
-19
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user