Jonathan
607e378eb9
SVG text background of "Jonathan" in outline that slowly fills in on page load. Uses CSS fill-opacity animation (0 → 1 over 2s, 0.3s delay) so the stroke appears immediately and the fill bleeds in gradually. Light mode: zinc-200/300. Dark mode: zinc-800. Both stay recessive so the effect is atmospheric, not distracting. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
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">
|
|
|
|
{/* Background name — outline fills in on load */}
|
|
<svg
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 h-full w-full"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
>
|
|
<text
|
|
x="50%"
|
|
y="55%"
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
fontFamily="var(--font-geist-sans), sans-serif"
|
|
fontSize="22vw"
|
|
fontWeight="700"
|
|
strokeWidth="1"
|
|
className="name-outline-fill"
|
|
>
|
|
Jonathan
|
|
</text>
|
|
</svg>
|
|
|
|
{/* Eyebrow label */}
|
|
<div className="mb-10 flex items-center gap-4">
|
|
<span className="h-px w-10 bg-zinc-300 dark:bg-zinc-700" />
|
|
<span className="font-mono text-xs uppercase tracking-[0.2em] text-zinc-500">
|
|
Software Engineer
|
|
</span>
|
|
<span className="h-px w-10 bg-zinc-300 dark:bg-zinc-700" />
|
|
</div>
|
|
|
|
{/* Name */}
|
|
<h1 className="text-7xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-8xl">
|
|
Jonathan
|
|
</h1>
|
|
|
|
{/* Tagline */}
|
|
<p className="mt-6 max-w-md text-base leading-7 text-zinc-600 dark:text-zinc-400">
|
|
I build clean, fast web applications — focused on great user
|
|
experiences and solid engineering.
|
|
</p>
|
|
|
|
{/* Actions */}
|
|
<div className="mt-12 flex flex-wrap items-center justify-center gap-4">
|
|
<Link
|
|
href="/projects"
|
|
className="rounded-sm bg-zinc-900 px-8 py-3 text-sm font-semibold text-white transition-colors hover:bg-zinc-700 dark:bg-white dark:text-zinc-950 dark:hover:bg-zinc-200"
|
|
>
|
|
View Projects
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="rounded-sm border border-zinc-300 px-8 py-3 text-sm font-medium text-zinc-700 transition-colors hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-900 dark:hover:text-white"
|
|
>
|
|
Contact Me
|
|
</Link>
|
|
</div>
|
|
|
|
</section>
|
|
)
|
|
}
|