feat(site): migrate from Next.js to Astro

Replace Next.js 16 + React 19 with Astro 5. Same visual design, same deploy pipeline, zero client-side framework. - All components rewritten as .astro files - Dark mode via inline scripts (no React context) - Timeline animation via IntersectionObserver script - Nav active state computed at build time - Self-hosted Source Code Pro woff2 fonts - Drop Font Awesome (icons were never loaded) - Drop unused headshot PNG (1MB, unreferenced) - Fix pfSense hardware refs (Netgate 1100, not N100) - Output: 212KB static HTML vs 2.6MB before - JS shipped: ~700 bytes inline vs ~130KB React runtime
2026-05-18 20:07:24 -04:00
parent d34f9f136c
commit 0c5d9e03b1
47 changed files with 4898 additions and 6345 deletions
@@ -0,0 +1,77 @@
+---
+import Base from "@/layouts/Base.astro";
+import Nav from "@/components/Nav.astro";
+import Footer from "@/components/Footer.astro";
+import Widget from "@/components/Widget.astro";
+import ProjectCard from "@/components/ProjectCard.astro";
+import { featuredProjects, archiveProjects } from "@/data/projects";
+---
+
+<Base
+  title="Projects | Tyler Koenig"
+  description="Featured projects and earlier work — homelab, open-pact, helm, and bootcamp/experiment archive."
+>
+  <Nav slot="nav" />
+
+  <div class="mb-4lh">
+    <p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
+      <span class="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
+      projects
+    </p>
+    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
+      Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
+    </p>
+  </div>
+
+  <Widget title="projects/featured" badge={featuredProjects.length} as="section">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
+      {featuredProjects.map((project) => (
+        <ProjectCard project={project} />
+      ))}
+    </div>
+  </Widget>
+
+  <Widget title="projects/archive" badge={archiveProjects.length} as="section">
+    <div class="flex flex-col gap-px bg-[var(--color-border)]">
+      {archiveProjects.map((project) => (
+        <a
+          href={project.githubUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-2ch px-2ch py-1lh group"
+        >
+          <div class="flex flex-col gap-1ch flex-1 min-w-0">
+            <div class="flex items-center gap-1ch">
+              {project.year && (
+                <span class="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
+                  {project.year}
+                </span>
+              )}
+              <span class="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
+                {project.title}
+              </span>
+            </div>
+            <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
+              {project.description}
+            </p>
+            <div class="flex flex-wrap gap-x-1ch gap-y-0.5">
+              {project.tags.map((tag) => (
+                <span class="font-mono text-sm text-[var(--color-text-dim)]">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+          <span
+            class="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
+            aria-hidden="true"
+          >
+            ↗
+          </span>
+        </a>
+      ))}
+    </div>
+  </Widget>
+
+  <Footer slot="footer" />
+</Base>