migrate CRA to Next.js 16 + React 19 + TypeScript + Tailwind v4

- replace CRA scaffold with Next.js static export config
- add app router pages: home, homelab, archive
- add components: Nav, Footer, Hero, Skills, ProjectCard, ThemeScript
- add ThemeContext for dark mode with FOUC prevention
- add data layer: projects.ts, services.ts
- update .gitignore for Next.js (ignore .next/, out/, next-env.d.ts)
- add docs: handoff plan, homelab decisions, style reference

src/app/archive/page.tsx

@@ -0,0 +1,59 @@
+import type { Metadata } from "next";
+import { archiveProjects } from "@/data/projects";
+
+export const metadata: Metadata = {
+  title: "Archive | Tyler Koenig",
+  description: "Earlier projects and experiments — browser extensions, canvas apps, and bootcamp work.",
+};
+
+export default function ArchivePage() {
+  return (
+    <>
+      <div className="mb-14">
+        <p className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-2">
+          Archive
+        </p>
+        <h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] mb-4">
+          Earlier Work
+        </h1>
+        <p className="text-[var(--color-grey-3)] text-sm leading-relaxed max-w-xl">
+          Experiments, browser extensions, and bootcamp projects. Kept here for context — not representative of current work.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+        {archiveProjects.map((project) => (
+          <a
+            key={project.slug}
+            href={project.githubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group border border-[var(--color-grey-1)] rounded-lg p-6 bg-[var(--color-bg)] hover:border-[var(--color-green-darker)] transition-colors flex flex-col gap-4"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <h2 className="font-mono text-sm font-semibold text-[var(--color-text-light)] group-hover:text-[var(--color-green)] transition-colors">
+                {project.title}
+              </h2>
+              <i className="fas fa-arrow-up-right-from-square text-xs text-[var(--color-grey-2)] shrink-0 mt-0.5 group-hover:text-[var(--color-green)] transition-colors" aria-hidden="true" />
+            </div>
+
+            <p className="text-xs text-[var(--color-grey-3)] leading-relaxed flex-1">
+              {project.description}
+            </p>
+
+            <div className="flex flex-wrap gap-1.5">
+              {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>
+          </a>
+        ))}
+      </div>
+    </>
+  );
+}