69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import Image from 'next/image';
|
|
import { about, site, stack } from '@/lib/site';
|
|
|
|
const Hero = () => (
|
|
<section id="about" className="container-page py-20 md:pt-28 md:pb-24">
|
|
<div className="max-w-2xl">
|
|
<p className="mb-4 flex items-center gap-3 font-mono text-xs tracking-[0.2em] text-aurora uppercase">
|
|
<span aria-hidden className="h-px w-6 bg-aurora" />
|
|
<span>{site.role}</span>
|
|
</p>
|
|
<h1 className="font-display text-5xl font-semibold tracking-[-0.035em] text-ink sm:text-6xl md:text-7xl">
|
|
Howdy, I'm {site.name}.
|
|
</h1>
|
|
<p className="mt-4 max-w-xl text-lg leading-relaxed text-ink/85 md:text-xl">
|
|
{site.tagline}
|
|
</p>
|
|
|
|
<div className="mt-8 flex flex-wrap gap-3 text-sm font-medium">
|
|
<a href="#work" className="btn-primary">
|
|
Selected work ↓
|
|
</a>
|
|
<a
|
|
href={site.gitlab}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="btn-ghost"
|
|
>
|
|
GitLab ↗
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-16 grid panel md:mt-20 md:grid-cols-[14rem_1fr]">
|
|
<div className="border-b border-white/12 p-5 md:border-r md:border-b-0 md:p-6">
|
|
<div className="relative aspect-[8/7] overflow-hidden border border-white/12 bg-obsidian/60">
|
|
<Image
|
|
src="/cayden-portrait.png"
|
|
alt="Cayden"
|
|
fill
|
|
loading="eager"
|
|
sizes="(min-width: 768px) 13rem, 90vw"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col justify-between">
|
|
<div className="space-y-4 p-6 text-[15.5px] leading-relaxed text-ink/85 md:p-8">
|
|
{about.map((paragraph) => (
|
|
<p key={paragraph}>{paragraph}</p>
|
|
))}
|
|
</div>
|
|
|
|
<ul className="flex flex-wrap gap-x-6 gap-y-2 border-t border-white/12 px-6 py-3.5 font-mono text-xs text-crest/80 md:px-8">
|
|
{stack.map((tech) => (
|
|
<li
|
|
key={tech}
|
|
className="transition-colors hover:text-aurora"
|
|
>
|
|
{tech}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
export default Hero;
|