This repository has no description
Something went wrong. Try again.
6.4 kB · 164 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165import siteConfig from '@/lib/site-config'
export function Footer() { const socialLinks = siteConfig.socialLinks ?? [] const year = new Date().getFullYear() // Post count will be wired in Phase 8 when data helpers are available const paddedCount = '000'
return ( <footer className="border-ink-4 bg-paper-2 mt-[120px] border-t"> <div className="max-w-shell mx-auto grid grid-cols-1 gap-8 px-5 pt-10 pb-8 sm:grid-cols-2 md:grid-cols-[1.4fr_1fr_1fr_1fr] md:gap-12 md:px-10 md:pt-14"> <div> <p className="text-ink-3 border-hair m-0 mb-4 border-b pb-2.5 font-mono text-[10px] tracking-widest uppercase"> Colophon </p> <p className="text-ink m-0 mb-3.5 font-serif text-[34px] leading-tight tracking-[-0.02em]"> Written & wrenched<br />from Raleigh, NC. </p> <p className="text-ink-2 m-0 mb-5 max-w-[36ch] text-[13.5px] leading-normal"> This site is my field notebook. Occasional essays on software, the long game of learning, and (sometimes) a Miata that refuses to die. </p> <div className="text-ink-3 font-mono text-[11px] leading-[1.9] tracking-[0.02em]"> <div> <b className="text-ink font-medium">Since</b> 2014 </div> <div> <b className="text-ink font-medium">Posts</b> {paddedCount} </div> <div> <b className="text-ink font-medium">Built with</b> Payload </div> </div> </div>
<div> <p className="text-ink-3 border-hair m-0 mb-4 border-b pb-2.5 font-mono text-[10px] tracking-widest uppercase"> Navigate </p> <ul className="m-0 list-none p-0"> <li className="py-1"> <a className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors" href="/blog" > <span className="text-ink-4" aria-hidden="true"> · </span>{' '} Writing </a> </li> <li className="py-1"> <a className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors" href="/projects" > <span className="text-ink-4" aria-hidden="true"> · </span>{' '} Projects </a> </li> <li className="py-1"> <a className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors" href="/about" > <span className="text-ink-4" aria-hidden="true"> · </span>{' '} About </a> </li> <li className="py-1"> <a className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors" href="/hire-me" > <span className="text-ink-4" aria-hidden="true"> · </span>{' '} Hire Me </a> </li> <li className="py-1"> <a className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors" href="/tags" > <span className="text-ink-4" aria-hidden="true"> · </span>{' '} Tags </a> </li> <li className="py-1"> <a className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors" href="/rss.xml" > <span className="text-ink-4" aria-hidden="true"> · </span>{' '} RSS </a> </li> </ul> </div>
<div> <p className="text-ink-3 border-hair m-0 mb-4 border-b pb-2.5 font-mono text-[10px] tracking-widest uppercase"> Elsewhere </p> <ul className="m-0 list-none p-0"> {socialLinks.map((link) => ( <li key={link.href} className="py-1"> <a href={link.href} target="_blank" rel="noopener noreferrer" className="text-ink-2 hover:text-ink inline-flex items-center gap-3 font-mono text-xs tracking-[0.04em] transition-colors" > <span className="text-ink-4" aria-hidden="true"> ↗ </span>{' '} {link.text} </a> </li> ))} </ul> </div>
<div> <p className="text-ink-3 border-hair m-0 mb-4 border-b pb-2.5 font-mono text-[10px] tracking-widest uppercase"> Contact </p> <p className="text-ink-2 m-0 mb-2.5 max-w-[36ch] text-[13.5px] leading-normal"> Questions, collaborations, or a shared appreciation of well-composed code. </p> <div className="text-ink-3 font-mono text-[11px] leading-[1.9] tracking-[0.02em]"> <div> <a className="text-ink-3 hover:text-ink no-underline transition-colors" href="mailto:chris@arter.dev" > <b className="text-ink font-medium">chris@</b>arter.dev </a> </div> <div> <b className="text-ink font-medium">tz</b> America/New_York </div> </div> </div> </div>
<div className="border-hair max-w-shell text-ink-3 mx-auto flex flex-col gap-1.5 border-t px-5 py-5 font-mono text-[10.5px] tracking-wider uppercase sm:flex-row sm:justify-between md:px-10"> <span> © {year} <b className="text-ink-3 font-medium">Chris Arter</b> </span> <span>All rights reserved</span> </div> </footer> )}