marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portfolio): add contact terminal and closing cta tiles

Browse Source
This commit is contained in:
kbot
2026-07-06 20:33:55 -05:00
parent d8631dfc1b
commit d332691e7e
2 changed files with 204 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/portfolio/ClosingCta.tsx Normal file
View File

@@ -0,0 +1,90 @@
import Link from "next/link";
import { contact } from "@/lib/portfolio";
const sectionLinks = [
{ label: "Work", href: "#work" },
{ label: "Capabilities", href: "#capabilities" },
{ label: "Operator", href: "#operator" },
{ label: "Contact", href: "#contact" },
];
const elsewhereLinks = [
{ label: "Git", href: contact.git },
{ label: "LinkedIn", href: contact.linkedIn },
];
export function ClosingCta() {
const year = new Date().getFullYear();
return (
<footer className="border-t border-blacksite-line bg-blacksite-bg px-4 py-16 text-blacksite-text sm:px-6 lg:px-8">
<div className="mx-auto max-w-7xl">
<div className="grid gap-4 lg:grid-cols-2">
<a
href="#work"
className="group min-h-52 border border-blacksite-line bg-blacksite-surface p-6 transition-colors hover:border-signal-orange/70 focus-visible:outline-signal-orange sm:p-8"
>
<p className="section-label mb-12">CTA /.01</p>
<span className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text transition-colors group-hover:text-signal-orange sm:text-6xl">
View Selected Work →
</span>
</a>
<a
href={`mailto:${contact.email}`}
className="group min-h-52 border border-blacksite-line bg-blacksite-surface p-6 transition-colors hover:border-signal-orange/70 focus-visible:outline-signal-orange sm:p-8"
>
<p className="section-label mb-12">CTA /.02</p>
<span className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text transition-colors group-hover:text-signal-orange sm:text-6xl">
Start a Conversation →
</span>
</a>
</div>
<div className="mt-8 grid gap-8 border border-blacksite-line bg-blacksite-surface2/35 p-6 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1fr_1.2fr] lg:p-8">
<nav aria-label="Footer sections">
<p className="section-label mb-4">Sections</p>
<ul className="grid gap-3 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">
{sectionLinks.map((link) => (
<li key={link.href}>
<a href={link.href} className="transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
{link.label}
</a>
</li>
))}
</ul>
</nav>
<nav aria-label="Footer field notes">
<p className="section-label mb-4">Field Notes</p>
<Link href="/blog/" className="font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
/blog/
</Link>
</nav>
<nav aria-label="Footer elsewhere">
<p className="section-label mb-4">Elsewhere</p>
<ul className="grid gap-3 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">
{elsewhereLinks.map((link) => (
<li key={link.href}>
<a href={link.href} target="_blank" rel="noreferrer" className="transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
{link.label} ↗
</a>
</li>
))}
</ul>
</nav>
<div>
<p className="section-label mb-4">Build</p>
<p className="font-mono text-xs uppercase leading-6 tracking-[0.14em] text-blacksite-muted">
Next.js · Tailwind · deployed from out/
</p>
<p className="mt-4 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-faint">© {year}</p>
<p className="mt-6 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">⌘K opens command index</p>
</div>
</div>
</div>
</footer>
);
}