feat: terminal-noir redesign — widget system + design token overhaul

Replace cyan-green modern theme with terminal-noir aesthetic aligned to style-guide.md. Hard edges, monospace-first, linear transitions, no gradients. Introduce Widget component as the single repeatable section primitive: title bar with horizontal rule, optional badge/meta — all pages and sections now use this pattern (Glance-inspired data-driven layout). Design system changes (globals.css): - Palette: #0a0a0a bg, #111111 surface, #00cc44 status green, #cc2200 alert red - Drop Montserrat; Source Code Pro primary, system sans for prose only - Transitions: linear 120ms; no eased animations, no border-radius Component changes: - Nav: flat, border-bottom only, lowercase links - Hero: 56px square photo, status dot, @ email glyph - ProjectCard: flat bordered card, 2-col grid, no gradient tile - Skills: key-value rows with dot-separated values - Footer: minimal text links Pages: all sections wrapped in Widget; homelab uses gap-px grid for at-a-glance, services, and ADRs sections. Archive uses flat list layout. Data: remove gradient field from Project type; add optional year field
2026-04-12 19:23:50 -04:00
parent 05a32492ac
commit 088a06a51c
12 changed files with 396 additions and 377 deletions
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,35 +1,30 @@
 export default function Footer() {
  return (
-    <footer className="border-t border-[var(--color-grey-1)] py-8 mt-16">
-      <div className="max-w-5xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
-        <p className="font-mono text-xs text-[var(--color-grey-2)] tracking-widest">
+    <footer className="border-t border-[var(--color-border)] py-5 mt-8">
+      <div className="max-w-5xl mx-auto px-6 flex items-center justify-between">
+        <span className="font-mono text-xs text-[var(--color-text-dim)]">
          &copy; {new Date().getFullYear()} Tyler Koenig
-        </p>
+        </span>
        <div className="flex items-center gap-5">
          <a
            href="https://github.com/lerko96"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="GitHub"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
+            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
-            <i className="fab fa-github text-lg" aria-hidden="true" />
+            <i className="fab fa-github mr-1.5" aria-hidden="true" />
+            github
          </a>
          <a
            href="https://www.linkedin.com/in/tyler-koenig"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
+            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
-            <i className="fab fa-linkedin text-lg" aria-hidden="true" />
-          </a>
-          <a
-            href="mailto:tylerkoenig96@gmail.com"
-            aria-label="Email"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
-          >
-            <i className="fas fa-envelope text-lg" aria-hidden="true" />
+            <i className="fab fa-linkedin mr-1.5" aria-hidden="true" />
+            linkedin
          </a>
        </div>
      </div>
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -2,61 +2,74 @@ import Image from "next/image";

 export default function Hero() {
  return (
-    <section className="flex flex-col sm:flex-row items-center sm:items-start gap-8 mb-20">
-      <div className="shrink-0">
+    <section className="mb-12">
+      {/* Section header */}
+      <div className="flex items-center gap-3 mb-6">
+        <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
+          identity
+        </span>
+        <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
+      </div>
+
+      <div className="flex items-start gap-5">
        <Image
          src="/images/headshot-tyler_koenig.png"
          alt="Tyler Koenig"
-          width={120}
-          height={120}
-          className="rounded-full border-2 border-[var(--color-green-darker)]"
+          width={56}
+          height={56}
+          className="shrink-0 object-cover"
          priority
        />
-      </div>

-      <div className="flex flex-col gap-4 text-center sm:text-left">
-        <div>
-          <h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] tracking-wide">
-            Tyler Koenig
-          </h1>
-          <p className="font-mono text-sm text-[var(--color-green)] tracking-widest uppercase mt-1">
-            SOC Helpdesk I by day, building beyond the title
+        <div className="flex flex-col gap-3">
+          <div>
+            <p className="font-mono text-base font-bold text-[var(--color-text)]">
+              Tyler Koenig
+            </p>
+            <p className="font-mono text-xs text-[var(--color-text-label)] mt-0.5">
+              SOC Helpdesk I · Homelab Operator
+            </p>
+          </div>
+
+          <p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-lg">
+            I write software and run infrastructure that goes well past what my
+            job title implies. Games, AI tooling, mobile apps, and a homelab
+            running 20+ self-hosted services on segmented VLANs. Continuously
+            learning by building things that actually work.
          </p>
-        </div>

-        <p className="text-[var(--color-grey-3)] text-sm leading-relaxed max-w-lg">
-          I write software and run infrastructure that goes well past what my job
-          title implies. Games, AI tooling, mobile apps, and a homelab running
-          20+ self-hosted services on segmented VLANs. Continuously learning
-          by building things that actually work.
-        </p>
-
-        <div className="flex items-center gap-5 justify-center sm:justify-start">
-          <a
-            href="https://github.com/lerko96"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="GitHub"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
-          >
-            <i className="fab fa-github text-xl" aria-hidden="true" />
-          </a>
-          <a
-            href="https://www.linkedin.com/in/tyler-koenig"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="LinkedIn"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
-          >
-            <i className="fab fa-linkedin text-xl" aria-hidden="true" />
-          </a>
-          <a
-            href="mailto:tylerkoenig96@gmail.com"
-            aria-label="Email"
-            className="text-[var(--color-grey-2)] hover:text-[var(--color-green)] transition-colors"
-          >
-            <i className="fas fa-envelope text-xl" aria-hidden="true" />
-          </a>
+          <div className="flex flex-wrap items-center gap-x-5 gap-y-1">
+            <span className="font-mono text-xs text-[var(--color-accent-green)]">
+              ● online
+            </span>
+            <a
+              href="https://github.com/lerko96"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="GitHub"
+              className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            >
+              <i className="fab fa-github mr-1.5" aria-hidden="true" />
+              github
+            </a>
+            <a
+              href="https://www.linkedin.com/in/tyler-koenig"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="LinkedIn"
+              className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            >
+              <i className="fab fa-linkedin mr-1.5" aria-hidden="true" />
+              linkedin
+            </a>
+            <a
+              href="mailto:tylerkoenig96@gmail.com"
+              aria-label="Email"
+              className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            >
+              @ email
+            </a>
+          </div>
        </div>
      </div>
    </section>
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -3,48 +3,45 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";

-
 const links = [
-  { href: "/", label: "Home" },
-  { href: "/homelab/", label: "Homelab" },
-  { href: "/archive/", label: "Archive" },
+  { href: "/", label: "home" },
+  { href: "/homelab/", label: "homelab" },
+  { href: "/archive/", label: "archive" },
 ];

 export default function Nav() {
  const pathname = usePathname();
  return (
-    <header className="sticky top-0 z-50 bg-[var(--color-bg-deep)] border-b border-[var(--color-grey-1)]">
-      <nav className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+    <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
+      <nav className="max-w-5xl mx-auto px-6 h-11 flex items-center justify-between">
        <Link
          href="/"
-          className="font-mono text-xl font-bold text-[var(--color-green)] tracking-widest hover:opacity-80 transition-opacity"
+          className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]"
        >
          tk
        </Link>

-        <div className="flex items-center gap-6">
-          <ul className="flex gap-6">
-            {links.map(({ href, label }) => {
-              const active = pathname === href || pathname === href.replace(/\/$/, "");
-              return (
-                <li key={href}>
-                  <Link
-                    href={href}
-                    aria-current={active ? "page" : undefined}
-                    className={`text-xs font-mono tracking-widest uppercase transition-colors ${
-                      active
-                        ? "text-[var(--color-green)]"
-                        : "text-[var(--color-grey-3)] hover:text-[var(--color-grey-4)]"
-                    }`}
-                  >
-                    {label}
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-
-        </div>
+        <ul className="flex gap-6">
+          {links.map(({ href, label }) => {
+            const active =
+              pathname === href || pathname === href.replace(/\/$/, "");
+            return (
+              <li key={href}>
+                <Link
+                  href={href}
+                  aria-current={active ? "page" : undefined}
+                  className={`font-mono text-xs tracking-widest ${
+                    active
+                      ? "text-[var(--color-text)]"
+                      : "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+                  }`}
+                >
+                  {label}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
      </nav>
    </header>
  );
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -2,67 +2,48 @@ import type { Project } from "@/data/projects";

 type Props = {
  project: Project;
-  reversed?: boolean;
 };

-export default function ProjectCard({ project, reversed = false }: Props) {
+export default function ProjectCard({ project }: Props) {
  return (
-    <article className={`group flex flex-col ${reversed ? "sm:flex-row-reverse" : "sm:flex-row"} gap-6 mb-16`}>
-      {/* Gradient image tile */}
-      <a
-        href={project.githubUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="shrink-0 sm:w-56 h-36 rounded-lg overflow-hidden"
-        aria-label={`View ${project.title} on GitHub`}
-        tabIndex={-1}
-      >
-        <div
-          className={`w-full h-full bg-gradient-to-br ${project.gradient} flex items-center justify-center transition-transform duration-300 group-hover:scale-105`}
+    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-3 p-4">
+      <div className="flex items-start justify-between gap-3">
+        <a
+          href={project.githubUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
        >
-          <span className="font-mono text-xs text-[var(--color-green)] opacity-60 tracking-widest">
-            {project.slug}
-          </span>
-        </div>
-      </a>
-
-      {/* Content */}
-      <div className={`flex flex-col justify-center gap-3 ${reversed ? "sm:text-right sm:items-end" : ""}`}>
-        {/* Animated accent bar */}
-        <div
-          className={`h-0.5 w-8 bg-[var(--color-grey-1)] rounded-full transition-all duration-300 group-hover:w-16 group-hover:bg-[var(--color-green-darker)] ${reversed ? "self-end" : ""}`}
-        />
-
-        <div>
+          {project.title}
+        </a>
+        <div className="flex items-center gap-3 shrink-0">
+          {project.stats && (
+            <span className="font-mono text-xs text-[var(--color-text-dim)]">
+              {project.stats}
+            </span>
+          )}
          <a
            href={project.githubUrl}
            target="_blank"
            rel="noopener noreferrer"
-            className="font-mono text-base font-semibold text-[var(--color-text-light)] hover:text-[var(--color-green)] transition-colors"
+            aria-label={`View ${project.title} on GitHub`}
+            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
-            {project.title}
+            ↗
          </a>
-          {project.stats && (
-            <span className="font-mono text-xs text-[var(--color-green)] ml-3 opacity-70">
-              {project.stats}
-            </span>
-          )}
        </div>
+      </div>

-        <p className="text-sm text-[var(--color-grey-3)] leading-relaxed max-w-md">
-          {project.description}
-        </p>
+      <p className="font-sans text-xs text-[var(--color-text-label)] leading-relaxed flex-1">
+        {project.description}
+      </p>

-        <div className={`flex flex-wrap gap-2 ${reversed ? "justify-end" : ""}`}>
-          {project.tags.map((tag) => (
-            <span
-              key={tag}
-              className="font-mono text-xs px-2 py-0.5 border border-[var(--color-grey-1)] text-[var(--color-grey-2)] rounded"
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
+      <div className="flex flex-wrap gap-x-3 gap-y-1 pt-2 border-t border-[var(--color-border)]">
+        {project.tags.map((tag) => (
+          <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
+            {tag}
+          </span>
+        ))}
      </div>
    </article>
  );
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -1,11 +1,13 @@
+import Widget from "@/components/Widget";
+
 const skillGroups = [
  {
    label: "Languages",
    skills: ["JavaScript", "TypeScript", "HTML", "CSS"],
  },
  {
-    label: "Frontend & Mobile",
-    skills: ["React", "React Native", "Expo", "Next.js", "Three.js", "Responsive Design"],
+    label: "Frontend",
+    skills: ["React", "React Native", "Expo", "Next.js", "Three.js"],
  },
  {
    label: "Desktop & Tools",
@@ -21,34 +23,28 @@ const skillGroups = [
  },
 ];

+const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
+
 export default function Skills() {
  return (
-    <section className="mb-20" aria-labelledby="skills-heading">
-      <h2
-        id="skills-heading"
-        className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-8"
-      >
-        Skills
-      </h2>
-      <div className="flex flex-col gap-5">
-        {skillGroups.map(({ label, skills }) => (
-          <div key={label} className="flex flex-col xs:flex-row gap-2 xs:items-start">
-            <span className="font-mono text-xs text-[var(--color-grey-2)] w-36 shrink-0 pt-0.5">
+    <Widget title="skills" badge={totalCount} as="section">
+      <div className="flex flex-col">
+        {skillGroups.map(({ label, skills }, i) => (
+          <div
+            key={label}
+            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-3 ${
+              i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
+            }`}
+          >
+            <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
              {label}
            </span>
-            <div className="flex flex-wrap gap-2">
-              {skills.map((skill) => (
-                <span
-                  key={skill}
-                  className="text-xs font-mono px-3 py-1 border border-[var(--color-grey-1)] text-[var(--color-grey-3)] rounded hover:border-[var(--color-green-darker)] hover:text-[var(--color-grey-4)] transition-colors"
-                >
-                  {skill}
-                </span>
-              ))}
-            </div>
+            <span className="font-mono text-xs text-[var(--color-text)]">
+              {skills.join(" · ")}
+            </span>
          </div>
        ))}
      </div>
-    </section>
+    </Widget>
  );
 }
--- a/src/components/Widget.tsx
+++ b/src/components/Widget.tsx
@@ -0,0 +1,39 @@
+type WidgetProps = {
+  title: string;
+  badge?: string | number;
+  meta?: string;
+  as?: "section" | "div" | "article";
+  className?: string;
+  children: React.ReactNode;
+};
+
+export default function Widget({
+  title,
+  badge,
+  meta,
+  as: Tag = "section",
+  className,
+  children,
+}: WidgetProps) {
+  return (
+    <Tag className={`mb-12 ${className ?? ""}`}>
+      <div className="flex items-center gap-3 mb-6">
+        <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase whitespace-nowrap">
+          {title}
+        </span>
+        {meta && (
+          <span className="font-mono text-xs text-[var(--color-text-dim)] whitespace-nowrap">
+            {meta}
+          </span>
+        )}
+        <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
+        {badge !== undefined && (
+          <span className="font-mono text-xs text-[var(--color-text-dim)] whitespace-nowrap">
+            {badge}
+          </span>
+        )}
+      </div>
+      {children}
+    </Tag>
+  );
+}