refactor(ui): enforce terminal metaphor, unify secondary opacity

- drop headshot photo (coherence break vs. full terminal aesthetic) - replace FA icons with plain-text brackets ([github], [linkedin], [email]) - remove Font Awesome CDN dependency - nav logo tk → ~/; theme toggle fa-sun/fa-moon → [light]/[dark] - reorder home sections: projects before skills/journey - add font-mono + opacity-70 to timeline descriptions (#2 bug + #8 polish) - uniform opacity-70 across hero bio, project desc, timeline desc - add hover:bg-surface-raised to ProjectCard article - drop journey badge count (noise) - change status ● online → ● available
2026-04-16 18:01:19 -04:00
parent 7d9b300d84
commit 6d0b4e29d8
7 changed files with 183 additions and 92 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,12 +27,6 @@ export default function RootLayout({
    <html lang="en" className="dark">
      <head>
        <ThemeScript />
-        <link
-          rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
-          crossOrigin="anonymous"
-          referrerPolicy="no-referrer"
-        />
      </head>
      <body
        className={`${sourceCodePro.variable} bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen`}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Hero from "@/components/Hero";
 import Skills from "@/components/Skills";
+import Timeline from "@/components/Timeline";
 import ProjectCard from "@/components/ProjectCard";
 import Widget from "@/components/Widget";
 import { featuredProjects } from "@/data/projects";
@@ -15,14 +16,15 @@ export default function Home() {
  return (
    <>
      <Hero />
-      <Skills />
-      <Widget title="projects" badge={featuredProjects.length}>
+      <Widget title="tyler/projects" badge={featuredProjects.length}>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {featuredProjects.map((project) => (
            <ProjectCard key={project.slug} project={project} />
          ))}
        </div>
      </Widget>
+      <Skills />
+      <Timeline />
    </>
  );
 }
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ export default function Footer() {
  return (
    <footer className="border-t border-[var(--color-border)] py-5 mt-8">
      <div className="px-8 flex items-center justify-between">
-        <span className="font-mono text-xs text-[var(--color-text-dim)]">
+        <span className="font-mono text-sm text-[var(--color-text-dim)]">
          &copy; {new Date().getFullYear()} Tyler Koenig
        </span>
        <div className="flex items-center gap-5">
@@ -11,20 +11,18 @@ export default function Footer() {
            target="_blank"
            rel="noopener noreferrer"
            aria-label="GitHub"
-            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
-            <i className="fab fa-github mr-1.5" aria-hidden="true" />
-            github
+            [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)]"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
-            <i className="fab fa-linkedin mr-1.5" aria-hidden="true" />
-            linkedin
+            [linkedin]
          </a>
        </div>
      </div>
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,75 +1,54 @@
-import Image from "next/image";
-
 export default function Hero() {
  return (
    <section className="mb-16">
-      {/* 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={56}
-          height={56}
-          className="shrink-0 object-cover"
-          priority
-        />
-
-        <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)] leading-relaxed max-w-lg opacity-80">
-            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.
+      <div className="flex flex-col gap-3">
+        <div>
+          <p className="font-mono text-base font-bold text-[var(--color-text)]">
+            <span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
+            tyler koenig
          </p>
+          <p className="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
+            SOC Helpdesk I · Homelab Operator
+          </p>
+        </div>

-          <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>
+        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-lg opacity-70">
+          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.{' '}
+          <span className="animate-cursor text-[var(--color-accent-green)]" aria-hidden="true">█</span>
+        </p>
+
+        <div className="flex flex-wrap items-center gap-x-5 gap-y-1">
+          <span className="font-mono text-sm text-[var(--color-accent-green)]">
+            ● available
+          </span>
+          <a
+            href="https://github.com/lerko96"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [github]
+          </a>
+          <a
+            href="https://www.linkedin.com/in/tyler-koenig"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="LinkedIn"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [linkedin]
+          </a>
+          <a
+            href="mailto:tylerkoenig96@gmail.com"
+            aria-label="Email"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+          >
+            [email]
+          </a>
        </div>
      </div>
    </section>
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -2,26 +2,28 @@

 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useTheme } from "@/context/ThemeContext";

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

 export default function Nav() {
  const pathname = usePathname();
+  const { isDark, toggle } = useTheme();
  return (
    <header className="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
      <nav className="max-w-[740px] mx-auto px-8 h-11 flex items-center justify-between">
        <Link
          href="/"
-          className="font-mono text-sm font-bold text-[var(--color-text)] tracking-widest hover:text-[var(--color-text-label)]"
+          className="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
        >
-          tk
+          ~/
        </Link>

-        <ul className="flex gap-6">
+        <ul className="flex items-center gap-6">
          {links.map(({ href, label }) => {
            const active =
              pathname === href || pathname === href.replace(/\/$/, "");
@@ -30,7 +32,7 @@ export default function Nav() {
                <Link
                  href={href}
                  aria-current={active ? "page" : undefined}
-                  className={`font-mono text-xs tracking-widest ${
+                  className={`font-mono text-sm ${
                    active
                      ? "text-[var(--color-text)]"
                      : "text-[var(--color-text-label)] hover:text-[var(--color-text)]"
@@ -41,6 +43,15 @@ export default function Nav() {
              </li>
            );
          })}
+          <li>
+            <button
+              onClick={toggle}
+              aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+              className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
+            >
+              {isDark ? "[light]" : "[dark]"}
+            </button>
+          </li>
        </ul>
      </nav>
    </header>
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -6,7 +6,7 @@ type Props = {

 export default function ProjectCard({ project }: Props) {
  return (
-    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] hover:border-[var(--color-border-bright)] flex flex-col gap-4 p-5">
+    <article className="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-4 p-5 hover:bg-[var(--color-surface-raised)]">
      <div className="flex items-start justify-between gap-3">
        <a
          href={project.githubUrl}
@@ -18,7 +18,7 @@ export default function ProjectCard({ project }: Props) {
        </a>
        <div className="flex items-center gap-3 shrink-0">
          {project.stats && (
-            <span className="font-mono text-xs text-[var(--color-text-dim)]">
+            <span className="font-mono text-sm text-[var(--color-text-dim)]">
              {project.stats}
            </span>
          )}
@@ -27,18 +27,18 @@ export default function ProjectCard({ project }: Props) {
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`View ${project.title} on GitHub`}
-            className="font-mono text-xs text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
          >
            ↗
          </a>
        </div>
      </div>

-      <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-75">
+      <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
        {project.description}
      </p>

-      <div className="flex flex-wrap gap-x-3 gap-y-1 pt-2 border-t border-[var(--color-border)]">
+      <div className="flex flex-wrap gap-x-3 gap-y-1 mt-1">
        {project.tags.map((tag) => (
          <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
            {tag}
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -0,0 +1,107 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import Widget from '@/components/Widget'
+import { timeline, type TimelineType } from '@/data/timeline'
+
+const typeColor: Record<TimelineType, string> = {
+  career:    'var(--color-timeline-career)',
+  education: 'var(--color-timeline-education)',
+  cert:      'var(--color-timeline-cert)',
+  project:   'var(--color-timeline-project)',
+  homelab:   'var(--color-timeline-homelab)',
+}
+
+const typeLabel: Record<TimelineType, string> = {
+  career:    'career',
+  education: 'education',
+  cert:      'cert',
+  project:   'project',
+  homelab:   'homelab',
+}
+
+export default function Timeline() {
+  const listRef = useRef<HTMLOListElement>(null)
+
+  useEffect(() => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+    const entries = listRef.current?.querySelectorAll<HTMLLIElement>('[data-tl-entry]')
+    if (!entries) return
+
+    const observer = new IntersectionObserver(
+      (observed) => {
+        observed.forEach((entry) => {
+          if (entry.isIntersecting) {
+            ;(entry.target as HTMLElement).style.opacity = '1'
+            ;(entry.target as HTMLElement).style.transform = 'translateY(0)'
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      { threshold: 0.15 },
+    )
+
+    entries.forEach((el) => {
+      el.style.opacity = '0'
+      el.style.transform = 'translateY(8px)'
+      el.style.transition = 'opacity 240ms linear, transform 240ms linear'
+      observer.observe(el)
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <Widget title="tyler/journey">
+      <ol ref={listRef} className="relative border-l border-[var(--color-border)] ml-1.5 flex flex-col gap-0">
+        {timeline.map((entry, i) => (
+          <li key={i} data-tl-entry className="pl-6 pb-8 last:pb-0 relative">
+            {/* Spine dot */}
+            <span
+              className="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
+              style={{ backgroundColor: typeColor[entry.type] }}
+              aria-hidden="true"
+            />
+
+            {/* Date + type badge */}
+            <div className="flex items-center gap-2 mb-1">
+              <span className="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
+              <span
+                className="font-mono text-[10px] uppercase tracking-wider px-1 rounded-sm border"
+                style={{
+                  color: typeColor[entry.type],
+                  borderColor: typeColor[entry.type],
+                  opacity: 0.7,
+                }}
+              >
+                {typeLabel[entry.type]}
+              </span>
+            </div>
+
+            {/* Title */}
+            <p className="font-mono text-sm font-semibold text-[var(--color-text)] mb-1">
+              {entry.title}
+            </p>
+
+            {/* Description */}
+            <p className="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-2">
+              {entry.description}
+            </p>
+
+            {/* Tags */}
+            {entry.tags && entry.tags.length > 0 && (
+              <div className="flex flex-wrap gap-x-3 gap-y-1">
+                {entry.tags.map((tag) => (
+                  <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </li>
+        ))}
+      </ol>
+    </Widget>
+  )
+}