feat(site): port stitch design system + seed-ready content (#5)

Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
2026-04-15 01:16:41 +00:00
parent 6db28bc81f
commit b47c5e420a
42 changed files with 4193 additions and 398 deletions
--- a/src/components/site/Footer.tsx
+++ b/src/components/site/Footer.tsx
@@ -0,0 +1,83 @@
+import Link from "next/link";
+import { StatusTerminal } from "./StatusTerminal";
+
+const NAV_LINKS = [
+  { label: "Home", href: "/" },
+  { label: "About", href: "/about" },
+  { label: "Projects", href: "/projects" },
+  { label: "Contact", href: "/contact" },
+];
+
+const SOCIALS = [
+  { label: "GitHub", href: "https://github.com/jasonwoltje" },
+  { label: "LinkedIn", href: "https://linkedin.com/in/jasonwoltje" },
+];
+
+export function Footer() {
+  return (
+    <footer className="bg-background">
+      <div className="mx-auto max-w-7xl px-6 pt-16 pb-8">
+        {/* Columns */}
+        <div className="grid grid-cols-1 gap-12 md:grid-cols-3 md:gap-8">
+          {/* Brand */}
+          <div className="flex flex-col gap-4">
+            <Link
+              href="/"
+              className="font-headline text-lg font-bold uppercase tracking-tighter text-primary"
+            >
+              JASON WOLTJE
+            </Link>
+            <p className="font-body text-sm leading-relaxed text-on-surface-variant">
+              Systems thinker. Builder. IT leader turning into a software
+              engineer.
+            </p>
+          </div>
+
+          {/* Nav */}
+          <div className="flex flex-col gap-3">
+            <span className="label-md text-on-surface-variant mb-1">Navigate</span>
+            {NAV_LINKS.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="font-label text-[11px] uppercase tracking-widest text-on-surface-variant transition-colors hover:text-primary"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* Socials */}
+          <div className="flex flex-col gap-3">
+            <span className="label-md text-on-surface-variant mb-1">Connect</span>
+            {SOCIALS.map((s) => (
+              <a
+                key={s.href}
+                href={s.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-label text-[11px] uppercase tracking-widest text-on-surface-variant transition-colors hover:text-secondary"
+              >
+                {s.label}
+              </a>
+            ))}
+          </div>
+        </div>
+
+        {/* Divider tonal shift — no 1px border at 100% */}
+        <div className="mt-12 h-px bg-gradient-to-r from-transparent via-outline-variant/20 to-transparent" />
+
+        {/* Bottom bar */}
+        <div className="mt-6 flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between">
+          <span className="font-label text-[9px] uppercase tracking-[0.3em] text-on-surface-variant">
+            © {new Date().getFullYear()} JASON WOLTJE // ALL RIGHTS RESERVED
+          </span>
+          <StatusTerminal />
+          <span className="font-label text-[8px] uppercase tracking-[0.5em] text-outline">
+            ENGINEERED FOR EXCELLENCE
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}