ea63347cd6
- 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
60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|