57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import { SITE } from '@/lib/config';
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative min-h-[100dvh] flex items-center noise overflow-hidden" aria-labelledby="hero-name">
|
|
{/* Dot grid */}
|
|
<div className="absolute inset-0 dot-grid opacity-[0.35] pointer-events-none" aria-hidden="true" />
|
|
{/* Radial vignette */}
|
|
<div className="absolute inset-0 pointer-events-none"
|
|
style={{ background: 'radial-gradient(ellipse 80% 70% at 50% 60%, transparent 30%, #070707 100%)' }}
|
|
aria-hidden="true" />
|
|
|
|
<div className="relative z-10 w-full max-w-5xl mx-auto px-6 pt-28 pb-24">
|
|
<div className="flex flex-col gap-8 max-w-3xl">
|
|
{/* Status pill */}
|
|
<div className="flex items-center gap-2 self-start">
|
|
<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium text-white/50
|
|
bg-white/[0.04] border border-white/[0.07]">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-white/50 animate-pulse" aria-hidden="true" />
|
|
Software Engineer
|
|
</span>
|
|
</div>
|
|
|
|
{/* Name */}
|
|
<h1 id="hero-name"
|
|
className="text-[clamp(3.5rem,10vw,8rem)] font-black leading-[0.9] tracking-[-0.05em] text-white">
|
|
William<br />
|
|
<span className="text-white/25">March</span>
|
|
</h1>
|
|
|
|
{/* Tagline */}
|
|
<p className="text-[clamp(1rem,2vw,1.25rem)] text-white/40 max-w-[44ch] leading-relaxed font-light">
|
|
{SITE.tagline}
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-wrap gap-3">
|
|
<a href="#projects" className="btn btn-primary">
|
|
View work
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#contact" className="btn btn-ghost">Get in touch</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll hint */}
|
|
<div className="absolute bottom-10 left-6 flex items-center gap-2 text-white/20 text-xs font-mono" aria-hidden="true">
|
|
<span className="w-[1px] h-8 bg-gradient-to-b from-transparent to-white/20" />
|
|
scroll
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|