Added projects tab; first project

app/projects/page.tsx

@@ -0,0 +1,109 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { Metadata } from "next";
+import graphAttentionImage from "@/public/images/graph-attention-topology/model-architecture.png";
+
+const projects = [
+  {
+    href: "/projects/graph-attention-topology",
+    title: "Graph Attention Inference of Network Topology",
+    eyebrow: "MECC 2024 / Multi-Agent Systems",
+    description:
+      "Inferring hidden interaction graphs from multi-agent trajectories by training attention to predict each agent's next state.",
+    status: "Paper project",
+    year: "2024",
+    image: graphAttentionImage,
+    imageAlt: "Graph attention model architecture diagram",
+    tags: ["Graph attention", "Topology inference", "Kuramoto oscillators"],
+  },
+];
+
+export const metadata: Metadata = {
+  title: "Projects",
+  description: "Research projects and paper pages by Akshay Kolli.",
+  openGraph: {
+    title: "Projects",
+    description: "Research projects and paper pages by Akshay Kolli.",
+  },
+};
+
+export default function ProjectsPage() {
+  return (
+    <div className="page-frame py-20 sm:py-24">
+      <div className="mx-auto max-w-[72rem] space-y-10">
+        <header className="grid gap-6 border-b border-line pb-10 lg:grid-cols-[minmax(0,1fr)_16rem] lg:items-end">
+          <div className="space-y-4">
+            <p className="eyebrow">Projects</p>
+            <h1 className="max-w-[44rem] text-balance font-sans text-5xl font-medium leading-[0.96] text-ink sm:text-6xl lg:text-7xl">
+              Research pages and technical artifacts.
+            </h1>
+            <p className="max-w-[36rem] text-[1rem] leading-8 text-muted">
+              A compact index of paper pages, experiments, and systems work.
+            </p>
+          </div>
+          <p className="font-mono text-[0.72rem] uppercase leading-6 text-muted-strong lg:text-right">
+            {projects.length} active {projects.length === 1 ? "project" : "projects"}
+          </p>
+        </header>
+
+        <div className="grid gap-6">
+          {projects.map((project) => (
+            <article
+              key={project.href}
+              className="group grid overflow-hidden rounded-md border border-line bg-paper-strong transition-colors hover:border-line-strong md:grid-cols-[minmax(0,1fr)_18rem]"
+            >
+              <div className="flex min-h-[21rem] flex-col justify-between gap-8 p-6 sm:p-8">
+                <div className="space-y-5">
+                  <div className="flex flex-wrap items-center gap-x-4 gap-y-2 font-mono text-[0.72rem] uppercase text-muted-strong">
+                    <span>{project.eyebrow}</span>
+                    <span>{project.year}</span>
+                    <span>{project.status}</span>
+                  </div>
+
+                  <div className="space-y-3">
+                    <Link href={project.href} className="block">
+                      <h2 className="max-w-[42rem] text-balance font-sans text-[2rem] font-medium leading-tight text-ink transition-colors group-hover:text-accent sm:text-[2.6rem]">
+                        {project.title}
+                      </h2>
+                    </Link>
+                    <p className="max-w-[38rem] text-[1rem] leading-8 text-muted">
+                      {project.description}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+                  <Link
+                    href={project.href}
+                    className="font-medium text-ink underline decoration-line-strong underline-offset-4 transition-colors hover:text-accent hover:decoration-accent"
+                  >
+                    Open project
+                  </Link>
+                  <div className="flex flex-wrap gap-3 font-mono text-[0.68rem] uppercase text-muted-strong">
+                    {project.tags.map((tag) => (
+                      <span key={tag}>{tag}</span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <Link
+                href={project.href}
+                aria-label={`Open ${project.title}`}
+                className="relative min-h-[18rem] border-t border-line bg-white md:border-l md:border-t-0"
+              >
+                <Image
+                  src={project.image}
+                  alt={project.imageAlt}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 18rem"
+                  className="object-contain p-5 transition-transform duration-300 group-hover:scale-[1.025]"
+                />
+              </Link>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}