This repository has no description
Something went wrong. Try again.
2.5 kB · 59 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960import Image from 'next/image'import siteConfig from '@/lib/site-config'
const portraitSrc = siteConfig.hero?.image?.src ?? '/images/chris-arter-pen.png'const portraitAlt = siteConfig.hero?.image?.alt ?? 'Portrait of Chris Arter'
export function Hero() { return ( <section className="border-hair-2 overflow-hidden border-b py-14 md:py-20"> <div className="max-w-shell mx-auto grid items-center gap-10 px-5 md:grid-cols-[220px_1fr] md:gap-14 md:px-10"> <div className="max-w-[260px]"> <div className="aspect-square w-full"> <Image src={portraitSrc} alt={portraitAlt} width={260} height={260} className="block h-full w-full object-contain" /> </div> </div> <div> <h1 className="text-ink mb-7 font-serif text-[clamp(52px,7vw,88px)] leading-[0.95] font-normal tracking-[-0.03em]"> Artisan, <br /> Tinkerer, <br /> <em className="text-ink-2 italic">Builder</em>. </h1> <p className="text-ink-2 m-0 max-w-[54ch] text-[17px] leading-relaxed text-pretty"> Hey there, I'm <strong>Chris Arter</strong>, a software engineer in Raleigh, North Carolina. I write about software, life, and the best sports car ever made: the Mazda Miata. </p> <dl className="border-hair mt-8 grid grid-cols-2 gap-6 border-t pt-5 font-mono md:grid-cols-4"> <div> <dt className="text-ink-3 mb-1.5 text-[10px] tracking-widest uppercase">Based</dt> <dd className="text-ink m-0 text-[12.5px] tracking-wide">Raleigh, NC</dd> </div> <div> <dt className="text-ink-3 mb-1.5 text-[10px] tracking-widest uppercase"> Writing since </dt> <dd className="text-ink m-0 text-[12.5px] tracking-wide">2014</dd> </div> <div> <dt className="text-ink-3 mb-1.5 text-[10px] tracking-widest uppercase">Stack</dt> <dd className="text-ink m-0 text-[12.5px] tracking-wide"> Laravel · Typescript · Docker </dd> </div> <div> <dt className="text-ink-3 mb-1.5 text-[10px] tracking-widest uppercase">Status</dt> <dd className="text-ink m-0 text-[12.5px] tracking-wide">Open to say hello</dd> </div> </dl> </div> </div> </section> )}