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,67 @@
+---
+import type { Project } from "@/data/projects";
+
+interface Props {
+  project: Project;
+}
+
+const { project } = Astro.props;
+---
+
+<article class="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
+  <div class="flex items-start justify-between gap-1ch">
+    <a
+      href={project.githubUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
+    >
+      {project.title}
+    </a>
+    <div class="flex items-center gap-1ch shrink-0">
+      {project.stats && (
+        <span class="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`}
+          class="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`}
+        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      >
+        ↗
+      </a>
+    </div>
+  </div>
+
+  {project.statusBadge && (
+    <span class="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
+      {project.statusBadge}
+    </span>
+  )}
+
+  <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
+    {project.description}
+  </p>
+
+  <div class="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
+    {project.tags.map((tag) => (
+      <span class="font-mono text-sm text-[var(--color-text-dim)]">
+        {tag}
+      </span>
+    ))}
+  </div>
+</article>