web-portfolio/components/sections/hero.tsx

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-normal tracking-[-0.035em] text-ink sm:text-6xl md:text-7xl">
				Howdy, I&apos;m Cayden.
			</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;