Merge pull request 'feat(content): reposition for security engineer, expand services' (#4 ) from feat/timeline into dev

Reviewed-on: #4
ci: auto-tag CalVer after deploy if commit untagged
2026-04-17 01:24:22 +00:00 · 2026-04-16 21:16:01 -04:00 · 2026-04-16 21:06:18 -04:00 · 2026-04-16 18:03:33 -04:00 · 2026-04-16 18:01:19 -04:00
16 changed files with 447 additions and 164 deletions
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -41,3 +41,30 @@ jobs:
             docker stop portfolio 2>/dev/null || true && \
             docker rm portfolio 2>/dev/null || true && \
             docker run -d --name portfolio -p 80:80 --restart unless-stopped portfolio"
+
+      - name: Tag release (CalVer)
+        run: |
+          git fetch --tags
+          if git describe --exact-match --tags HEAD 2>/dev/null; then
+            echo "Commit already tagged, skipping."
+          else
+            YEAR=$(date +%Y)
+            MONTH=$(date +%m)
+            LATEST=$(git tag --sort=-v:refname | grep -E '^[0-9]{4}\.[0-9]{2}\.[0-9]+$' | head -1)
+            if [ -n "$LATEST" ]; then
+              LATEST_YEAR=$(echo "$LATEST" | cut -d. -f1)
+              LATEST_MONTH=$(echo "$LATEST" | cut -d. -f2)
+              LATEST_MICRO=$(echo "$LATEST" | cut -d. -f3)
+              if [ "$YEAR" = "$LATEST_YEAR" ] && [ "$MONTH" = "$LATEST_MONTH" ]; then
+                MICRO=$((LATEST_MICRO + 1))
+              else
+                MICRO=1
+              fi
+            else
+              MICRO=1
+            fi
+            NEW_TAG="${YEAR}.$(printf '%02d' $MONTH).${MICRO}"
+            git tag "$NEW_TAG"
+            git push origin "$NEW_TAG"
+            echo "Tagged $NEW_TAG"
+          fi
--- a/src/app/archive/page.tsx
+++ b/src/app/archive/page.tsx
@@ -11,22 +11,17 @@ export default function ArchivePage() {
  return (
    <>
      <div className="mb-16">
-        <div className="flex items-center gap-3 mb-4">
-          <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
-            archive
-          </span>
-          <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
-        </div>
-        <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
-          Earlier Work
-        </h1>
-        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
+        <p className="font-mono text-base font-bold text-[var(--color-text)] mb-3">
+          <span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
+          tyler/projects/archive
+        </p>
+        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
          Experiments, browser extensions, and bootcamp projects. Kept here for context — not
          representative of current work.
        </p>
      </div>

-      <Widget title="projects" badge={archiveProjects.length} as="section">
+      <Widget title="tyler/projects/archive" badge={archiveProjects.length} as="section">
        <div className="flex flex-col gap-px bg-[var(--color-border)]">
          {archiveProjects.map((project) => (
            <a
@@ -47,7 +42,7 @@ export default function ArchivePage() {
                    {project.title}
                  </span>
                </div>
-                <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                  {project.description}
                </p>
                <div className="flex flex-wrap gap-x-3 gap-y-0.5">
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,17 +3,24 @@
@variant dark (&:where(.dark, .dark *));

@theme {
-  /* Terminal-Noir palette */
-  --color-bg:             #0a0a0a;
-  --color-surface:        #111111;
-  --color-surface-raised: #1a1a1a;
-  --color-border:         #2a2a2a;
-  --color-border-bright:  #444444;
-  --color-text:           #e8e8e8;
-  --color-text-label:     #666666;
-  --color-text-dim:       #444444;
-  --color-accent-green:   #00cc44;
-  --color-accent-red:     #cc2200;
+  /* macOS Classic Dark (default) */
+  --color-bg:             #131313;
+  --color-surface:        #1e1d1e;
+  --color-surface-raised: #272727;
+  --color-border:         #3a3a3a;
+  --color-border-bright:  #404040;
+  --color-text:           #caccca;
+  --color-text-label:     #9e9e9e;
+  --color-text-dim:       #8f8f8f;
+  --color-accent-green:   #62ba46;
+  --color-accent-red:     #c74028;
+
+  /* Timeline type colors — dark */
+  --color-timeline-career:    #62ba46;
+  --color-timeline-education: #c28b12;
+  --color-timeline-cert:      #c75828;
+  --color-timeline-project:   #c72855;
+  --color-timeline-homelab:   #e1d797;

  /* Typography */
  --font-mono: "Source Code Pro", ui-monospace, monospace;
@@ -34,11 +41,15 @@
 /* Base */
 html {
  scroll-behavior: smooth;
+  font-size: 14px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
 }

+@keyframes blink { 50% { opacity: 0; } }
+.animate-cursor { animation: blink 1s step-start infinite; }
+
@layer base {
  * {
    box-sizing: border-box;
@@ -47,6 +58,26 @@ html {
  }
 }

+/* macOS Classic Light overrides */
+:root:not(.dark) {
+  --color-bg:             #ffffff;
+  --color-surface:        #f9f9f9;
+  --color-surface-raised: #f7f7f7;
+  --color-border:         #e0e0e0;
+  --color-border-bright:  #d2d2d2;
+  --color-text:           #000000;
+  --color-text-label:     #505050;
+  --color-text-dim:       #929292;
+  --color-accent-green:   #036a07;
+  --color-accent-red:     #d21f07;
+
+  --color-timeline-career:    #036a07;
+  --color-timeline-education: #0433ff;
+  --color-timeline-cert:      #957931;
+  --color-timeline-project:   #6f42c1;
+  --color-timeline-homelab:   #0000a2;
+}
+
 /* Default transitions — linear, fast */
 a,
 button {
--- a/src/app/homelab/page.tsx
+++ b/src/app/homelab/page.tsx
@@ -74,6 +74,11 @@ const adrs = [
      "act_runner v0.3.1 on Gitea LXC (10.99.0.22). Push to dev → node:22-alpine container builds Next.js → rsync out/ to Portfolio LXC → SSH docker rebuild.",
    why: "Keeps the full pipeline internal — no GitHub Actions, no external runners. Build runs in an isolated Alpine container so the Gitea LXC isn't polluted. Portfolio LXC (10.99.0.23) just serves pre-built static files via nginx.",
  },
+  {
+    title: "Authentik over Authelia",
+    decision: "Authentik as the SSO provider across all self-hosted services.",
+    why: "Full OIDC provider + forward auth in one. Lets services like Outline, Gitea, and Vikunja use real SSO rather than just a login gate. Authelia is forward-auth only — no OIDC provider capability.",
+  },
 ];

 export default function HomelabPage() {
@@ -81,16 +86,11 @@ export default function HomelabPage() {
    <>
      {/* Header */}
      <div className="mb-16">
-        <div className="flex items-center gap-3 mb-4">
-          <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
-            lerkolabs
-          </span>
-          <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
-        </div>
-        <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
-          Home Infrastructure Lab
-        </h1>
-        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
+        <p className="font-mono text-base font-bold text-[var(--color-text)] mb-3">
+          <span className="text-[var(--color-accent-green)] select-none mr-2" aria-hidden="true">❯</span>
+          homelab
+        </p>
+        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
          Personal infrastructure environment for learning, self-hosting, and operational
          practice. Running 24/7 on production-grade hardware with real network segmentation,
          SSO, monitoring, and IaC-style documentation.
@@ -98,7 +98,7 @@ export default function HomelabPage() {
      </div>

      {/* At a Glance */}
-      <Widget title="at a glance" badge={glanceStats.length} as="section">
+      <Widget title="homelab/overview" badge={glanceStats.length} as="section">
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
          {glanceStats.map(({ label, value }) => (
            <div
@@ -116,7 +116,7 @@ export default function HomelabPage() {

      {/* VLAN table */}
      <Widget
-        title="network"
+        title="homelab/network"
        meta="8 isolated vlans · default deny inter-vlan"
        as="section"
      >
@@ -151,7 +151,7 @@ export default function HomelabPage() {
                  <td className="font-mono text-[var(--color-text-label)] py-2.5 pr-6">
                    {v.subnet}
                  </td>
-                  <td className="font-sans text-sm text-[var(--color-text)] py-2.5 opacity-80">{v.purpose}</td>
+                  <td className="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">{v.purpose}</td>
                </tr>
              ))}
            </tbody>
@@ -161,7 +161,7 @@ export default function HomelabPage() {

      {/* Services */}
      <Widget
-        title="services"
+        title="homelab/services"
        badge={services.length}
        as="section"
      >
@@ -187,7 +187,7 @@ export default function HomelabPage() {
                        <p className="font-mono text-xs text-[var(--color-text)] mb-0.5">
                          {svc.name}
                        </p>
-                        <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+                        <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                          {svc.description}
                        </p>
                      </div>
@@ -202,7 +202,7 @@ export default function HomelabPage() {

      {/* ADRs */}
      <Widget
-        title="architecture decisions"
+        title="homelab/ADRs"
        meta="why things are configured the way they are"
        badge={adrs.length}
        as="section"
@@ -214,11 +214,11 @@ export default function HomelabPage() {
              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-4 py-4"
            >
              <p className="font-mono text-sm text-[var(--color-text)] mb-2">{adr.title}</p>
-              <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed mb-1.5 opacity-75">
+              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-1.5 opacity-75">
                <span className="text-[var(--color-text-label)] opacity-100">decision: </span>
                {adr.decision}
              </p>
-              <p className="font-sans text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+              <p className="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
                <span className="text-[var(--color-text-label)] opacity-100">why: </span>
                {adr.why}
              </p>
@@ -228,16 +228,16 @@ export default function HomelabPage() {
      </Widget>

      {/* GitHub CTA */}
-      <section className="border-t border-[var(--color-border)] pt-6">
-        <p className="font-mono text-sm text-[var(--color-text-label)] mb-1">lerkolabs on GitHub</p>
-        <p className="font-sans text-sm text-[var(--color-text)] mb-3 opacity-75">
-          Full documentation: VLAN maps, runbooks, service registry, config exports, and setup guides.
+      <section className="pt-2">
+        <p className="font-mono text-sm text-[var(--color-text-dim)] mb-1">homelab/docs → github.com/lerko96/homelab-wip</p>
+        <p className="font-mono text-sm text-[var(--color-text)] mb-3 opacity-75">
+          VLAN maps, runbooks, service registry, config exports, and setup guides.
        </p>
        <a
          href="https://github.com/lerko96/homelab-wip"
          target="_blank"
          rel="noopener noreferrer"
-          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)]"
        >
          ↗ github.com/lerko96/homelab-wip
        </a>
--- 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">
+            Security Operations · Self-Hosted Infrastructure
+          </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">
+          Security operations and self-hosted infrastructure. Homelab runs 37
+          services across segmented VLANs — pfSense, Authentik SSO, full
+          observability stack. Write software too: mobile apps, Go backends,
+          open protocols. Daily drivers, all of it.{' '}
+          <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,27 +18,44 @@ 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>
          )}
+          {project.externalUrl && (
+            <a
+              href={project.externalUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`View ${project.title} externally`}
+              className="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+            >
+              ↗
+            </a>
+          )}
          <a
            href={project.githubUrl}
            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">
+      {project.statusBadge && (
+        <span className="font-mono text-xs text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1.5 py-0.5 w-fit opacity-80">
+          {project.statusBadge}
+        </span>
+      )}
+
+      <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/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -3,7 +3,7 @@ import Widget from "@/components/Widget";
 const skillGroups = [
  {
    label: "Languages",
-    skills: ["JavaScript", "TypeScript", "HTML", "CSS"],
+    skills: ["Go", "JavaScript", "TypeScript", "HTML", "CSS"],
  },
  {
    label: "Frontend",
@@ -27,16 +27,14 @@ const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);

 export default function Skills() {
  return (
-    <Widget title="skills" badge={totalCount} as="section">
+    <Widget title="tyler/skills" badge={totalCount} as="section">
      <div className="flex flex-col">
-        {skillGroups.map(({ label, skills }, i) => (
+        {skillGroups.map(({ label, skills }) => (
          <div
            key={label}
-            className={`flex flex-col xs:flex-row gap-1 xs:gap-6 py-4 ${
-              i < skillGroups.length - 1 ? "border-b border-[var(--color-border)]" : ""
-            }`}
+            className="flex flex-col xs:flex-row gap-1 xs:gap-6 py-3"
          >
-            <span className="font-mono text-xs text-[var(--color-text-dim)] w-28 shrink-0 uppercase tracking-wider">
+            <span className="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
              {label}
            </span>
            <span className="font-mono text-sm text-[var(--color-text)]">
--- 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>
+  )
+}
--- a/src/components/Widget.tsx
+++ b/src/components/Widget.tsx
@@ -15,22 +15,22 @@ export default function Widget({
  className,
  children,
 }: WidgetProps) {
+  const slashIdx = title.lastIndexOf("/");
+  const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
+  const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
+
  return (
    <Tag className={`mb-16 ${className ?? ""}`}>
-      <div className="flex items-center gap-3 mb-8">
-        <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 items-center gap-2 mb-8">
+        {prefix && (
+          <span className="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
        )}
-        <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
+        <span className="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
        {badge !== undefined && (
-          <span className="font-mono text-xs text-[var(--color-text-dim)] whitespace-nowrap">
-            {badge}
-          </span>
+          <span className="font-mono text-xs text-[var(--color-text-dim)]">[{badge}]</span>
+        )}
+        {meta && (
+          <span className="font-mono text-xs text-[var(--color-text-dim)] ml-1">— {meta}</span>
        )}
      </div>
      {children}
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -7,6 +7,8 @@ export type Project = {
  tier: "featured" | "archive";
  stats?: string;
  year?: number;
+  statusBadge?: string;
+  externalUrl?: string;
 };

 export const projects: Project[] = [
@@ -20,6 +22,8 @@ export const projects: Project[] = [
    githubUrl: "https://github.com/lerko96/golf-book-mobile",
    tier: "featured",
    stats: "211 commits",
+    statusBadge: "Pending App Store Approval",
+    externalUrl: "#",
  },
  {
    slug: "plaiground",
@@ -28,7 +32,8 @@ export const projects: Project[] = [
      "Cross-platform desktop AI chat app for developers. Supports OpenAI, Anthropic Claude, and Google Gemini in a single interface with real-time cost tracking, conversation export, and automatic code explanation.",
    tags: ["Electron", "Node.js", "OpenAI", "Claude", "Gemini"],
    githubUrl: "https://github.com/lerko96/plaiground",
-    tier: "featured",
+    tier: "archive",
+    year: 2025,
  },
  {
    slug: "service-monitor",
@@ -37,7 +42,8 @@ export const projects: Project[] = [
      "Web dashboard for tracking uptime across multiple services with 30-second polling, status history visualization, JWT-authenticated API, and Docker + nginx deployment.",
    tags: ["React 18", "Vite", "Express", "SQLite", "Docker", "JWT"],
    githubUrl: "https://github.com/lerko96/service-monitor",
-    tier: "featured",
+    tier: "archive",
+    year: 2025,
  },
  {
    slug: "tht-1.2",
@@ -46,10 +52,40 @@ export const projects: Project[] = [
      "3D visualization platform for exploring and organizing thoughts using a radio-tuning metaphor. Filter ideas by frequency and bandwidth in an instanced Three.js scene with persistent local storage.",
    tags: ["React", "TypeScript", "Three.js", "React Three Fiber", "Zustand"],
    githubUrl: "https://github.com/lerko96/tht-1.2",
+    tier: "archive",
+    year: 2025,
+  },
+
+  {
+    slug: "open-pact",
+    title: "open-pact",
+    description:
+      "Open protocol for AI agent identity, delegation, and portable memory. Ed25519 keypair identity, signed delegation warrants, portable signed memory facts. No central registry.",
+    tags: ["TypeScript", "Ed25519", "DID", "npm", "CC0"],
+    githubUrl: "https://github.com/lerko96/open-pact",
+    tier: "featured",
+  },
+  {
+    slug: "helm",
+    title: "helm",
+    description:
+      "Full-stack personal productivity dashboard. Go backend with chi router and SQLite, React + TypeScript frontend. Notes, todos, calendar (CalDAV), clipboard, bookmarks, memos. Self-hosted, single-user, daily use.",
+    tags: ["Go", "React", "TypeScript", "SQLite", "CalDAV"],
+    githubUrl: "https://github.com/lerko96/helm",
    tier: "featured",
  },

  // --- Archive ---
+  {
+    slug: "risk-ops",
+    title: "risk-ops",
+    description:
+      "Browser-based strategy dashboard for Risk: Global Domination (SMG Studio). Open one HTML file — no install needed.",
+    tags: ["HTML", "JavaScript"],
+    githubUrl: "#",
+    tier: "archive",
+    year: 2026,
+  },
  {
    slug: "twitter-thread-ext",
    title: "twitter-thread-ext",
--- a/src/data/services.ts
+++ b/src/data/services.ts
@@ -7,10 +7,13 @@ export type Service = {

 export const services: Service[] = [
  // Infrastructure
-  { name: "pfSense", description: "Firewall, DHCP, routing, WireGuard VPN", category: "infrastructure", icon: "fas fa-shield-halved" },
+  { name: "pfSense", description: "Firewall, DHCP, routing gateway on N100", category: "infrastructure", icon: "fas fa-shield-halved" },
  { name: "Caddy", description: "Reverse proxy with automatic wildcard TLS via Cloudflare DNS-01", category: "infrastructure", icon: "fas fa-globe" },
  { name: "Pi-hole", description: "Network-wide DNS + ad blocking", category: "infrastructure", icon: "fas fa-filter" },
-  { name: "WireGuard", description: "VPN — 600–900 Mbps on N100, full LAN access for clients", category: "infrastructure", icon: "fas fa-lock" },
+  { name: "WireGuard", description: "VPN — full LAN access for remote clients", category: "infrastructure", icon: "fas fa-lock" },
+  { name: "mail relay", description: "Outbound SMTP relay for self-hosted service notifications", category: "infrastructure", icon: "fas fa-envelope" },
+  { name: "gluetun", description: "VPN container routing download client traffic", category: "infrastructure", icon: "fas fa-shield" },
+  { name: "Home Assistant", description: "Smart home automation and device management", category: "infrastructure", icon: "fas fa-house" },

  // Security / Auth
  { name: "Authentik", description: "SSO provider — OIDC + forward auth across all services", category: "security", icon: "fas fa-id-badge" },
@@ -34,11 +37,21 @@ export const services: Service[] = [
  { name: "Traggo", description: "Time tracking", category: "productivity", icon: "fas fa-clock" },
  { name: "Baikal", description: "CalDAV / CardDAV server", category: "productivity", icon: "fas fa-calendar" },
  { name: "Grist", description: "Spreadsheets and structured data", category: "productivity", icon: "fas fa-table" },
+  { name: "Glance", description: "Self-hosted start page with feeds and service status", category: "productivity", icon: "fas fa-gauge" },
+  { name: "Filebrowser", description: "Web-based file manager", category: "productivity", icon: "fas fa-folder-open" },

  // Media
-  { name: "Plex + Jellyfin", description: "Media streaming", category: "media", icon: "fas fa-film" },
-  { name: "Sonarr / Radarr / Lidarr", description: "Automated media management", category: "media", icon: "fas fa-download" },
-  { name: "Calibre-Web", description: "Book library with auto-ingest", category: "media", icon: "fas fa-book-open" },
+  { name: "Plex", description: "Media streaming — movies, TV, music", category: "media", icon: "fas fa-film" },
+  { name: "Jellyfin", description: "Open-source media streaming", category: "media", icon: "fas fa-play" },
+  { name: "Sonarr", description: "Automated TV show management", category: "media", icon: "fas fa-tv" },
+  { name: "Radarr", description: "Automated movie management", category: "media", icon: "fas fa-video" },
+  { name: "Lidarr", description: "Automated music management", category: "media", icon: "fas fa-music" },
+  { name: "Prowlarr", description: "Indexer manager and proxy for the *arr stack", category: "media", icon: "fas fa-magnifying-glass" },
+  { name: "Bazarr", description: "Automatic subtitle download and management", category: "media", icon: "fas fa-closed-captioning" },
+  { name: "nzbget", description: "Usenet downloader", category: "media", icon: "fas fa-download" },
+  { name: "qBittorrent", description: "Torrent client with web UI", category: "media", icon: "fas fa-magnet" },
+  { name: "Kavita", description: "Self-hosted manga and book reader", category: "media", icon: "fas fa-book-open" },
+  { name: "Openshelf", description: "Book library with auto-ingest", category: "media", icon: "fas fa-book-open" },
 ];

 export const categoryOrder: Service["category"][] = [
--- a/src/data/timeline.ts
+++ b/src/data/timeline.ts
@@ -0,0 +1,75 @@
+export type TimelineType = 'career' | 'cert' | 'project' | 'homelab' | 'education'
+
+export interface TimelineEntry {
+  date: string
+  title: string
+  type: TimelineType
+  description: string
+  tags?: string[]
+}
+
+export const timeline: TimelineEntry[] = [
+  {
+    date: '2026',
+    title: 'CompTIA Network+ — in progress',
+    type: 'cert',
+    description: 'Studying for Network+ to formalize networking knowledge built through the homelab.',
+    tags: ['networking', 'certification'],
+  },
+  {
+    date: '2025',
+    title: 'Portfolio Site v2',
+    type: 'project',
+    description: 'Next.js 16 static site, self-hosted in a DMZ LXC behind Nginx, deployed via Gitea Actions CI.',
+    tags: ['next.js', 'tailwind', 'self-hosted'],
+  },
+  {
+    date: '2024',
+    title: 'CompTIA A+',
+    type: 'cert',
+    description: 'Earned A+ certification, formalizing hardware and OS fundamentals.',
+    tags: ['certification'],
+  },
+  {
+    date: '2024',
+    title: 'Project Helm',
+    type: 'project',
+    description: 'Full-stack task and project management tool built in Go + React.',
+    tags: ['go', 'react', 'typescript'],
+  },
+  {
+    date: 'ongoing',
+    title: 'Homelab — Proxmox Cluster',
+    type: 'homelab',
+    description: '8-VLAN segmented network, Proxmox VMs/LXCs, SSO via Authentik, full monitoring stack (VictoriaMetrics + Grafana + Beszel + ntfy).',
+    tags: ['proxmox', 'networking', 'monitoring', 'sso'],
+  },
+  {
+    date: '2023-10',
+    title: 'SOC Analyst I — Fortress SRM',
+    type: 'career',
+    description: 'Threat monitoring, incident triage, and client-facing security operations in a managed SOC.',
+    tags: ['soc', 'security'],
+  },
+  {
+    date: '2023-03',
+    title: 'Config Tech II — MCPc',
+    type: 'career',
+    description: 'Promoted to Config Tech II. Led imaging workflows and expanded into scripting for endpoint provisioning.',
+    tags: ['sysadmin', 'scripting'],
+  },
+  {
+    date: '2022-07',
+    title: 'Config Tech I — MCPc',
+    type: 'career',
+    description: 'Hardware configuration, OS imaging, and deployment at scale for enterprise clients.',
+    tags: ['sysadmin', 'hardware'],
+  },
+  {
+    date: '2021',
+    title: 'We Can Code IT — Java Bootcamp',
+    type: 'education',
+    description: '9-month intensive bootcamp covering Java, OOP, SQL, REST APIs, and Agile development practices.',
+    tags: ['java', 'sql', 'agile'],
+  },
+]
Author	SHA1	Message	Date
tyler	8e9fcfaeeb	Merge pull request 'feat(content): reposition for security engineer, expand services' (#4 ) from feat/timeline into dev All checks were successful Build and Deploy / deploy (push) Successful in 1m11s Details Reviewed-on: #4	2026-04-17 01:24:22 +00:00
lerko96	2946801517	ci: auto-tag CalVer after deploy if commit untagged	2026-04-16 21:16:01 -04:00
lerko96	49028e7783	feat(content): reposition for security engineer, expand services to 37 Hero subtitle and blurb rewritten to lead with security operations and homelab credentials over generic "builder" framing. Projects: archive plAIground, service-monitor, ThoughtSpace (2025); add open-pact and helm as featured; add risk-ops to archive (2026). Add statusBadge + externalUrl to Project type; wire golf-book-mobile. Services: 24 → 37 — split grouped arr/media entries, add mail relay, gluetun, Home Assistant, Glance, Filebrowser, Prowlarr, Bazarr, nzbget, qBittorrent, Kavita, Openshelf. Drop Calibre-Web. Skills: add Go to Languages. Timeline: update monitoring stack. Homelab ADRs: add Authentik over Authelia.	2026-04-16 21:06:18 -04:00
lerko96	c36cc94437	feat(ui): add timeline component; complete terminal-noir design system - introduce Timeline component with scroll-in animation and type-colored spine dots (career/edu/cert/project/homelab) - swap terminal-noir palette for macOS Classic dark/light with matching timeline color tokens in globals.css - add light mode overrides, cursor blink keyframe, font-size 14px base - update Widget header: prefix/name split, bracket badge, no divider rule - align archive and homelab page headers to ❯ prompt style - convert all font-sans prose in homelab/archive to font-mono - rename widget titles to namespaced paths (homelab/network, etc.) - skills label: uppercase tracking → plain text-sm; remove row borders	2026-04-16 18:03:33 -04:00
lerko96	6d0b4e29d8	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