Added projects tab; first project

app/globals.css

@@ -265,6 +265,146 @@ a {
   font-weight: 600;
 }
 
+.graph-project {
+  --graph-paper: #f4f1e8;
+  --graph-panel: #fffdf6;
+  --graph-ink: #161512;
+  --graph-soft: #39362d;
+  --graph-muted: #6d675a;
+  --graph-line: rgba(22, 21, 18, 0.16);
+  --graph-accent: #0f6f77;
+  --graph-accent-strong: #0c4f58;
+  --graph-warm: #e28f45;
+  --graph-code: #171813;
+  --graph-code-text: #f2ead9;
+  background:
+    linear-gradient(90deg, rgba(22, 21, 18, 0.04) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(22, 21, 18, 0.035) 1px, transparent 1px),
+    var(--graph-paper);
+  background-size: 4.5rem 4.5rem;
+  color: var(--graph-ink);
+}
+
+:root[data-theme="dark"] .graph-project {
+  --graph-paper: #111315;
+  --graph-panel: #181c1d;
+  --graph-ink: #f5f0e6;
+  --graph-soft: #ddd5c5;
+  --graph-muted: #a9a091;
+  --graph-line: rgba(245, 240, 230, 0.15);
+  --graph-accent: #78c7cf;
+  --graph-accent-strong: #93dbe2;
+  --graph-warm: #e3a15f;
+  --graph-code: #0d0f10;
+  --graph-code-text: #f5f0e6;
+}
+
+.graph-project .text-graph-ink {
+  color: var(--graph-ink);
+}
+
+.graph-project .text-graph-soft {
+  color: var(--graph-soft);
+}
+
+.graph-project .text-graph-muted {
+  color: var(--graph-muted);
+}
+
+.graph-project .text-graph-accent {
+  color: var(--graph-accent);
+}
+
+.graph-project .text-graph-code-text {
+  color: var(--graph-code-text);
+}
+
+.graph-project .bg-graph-paper {
+  background-color: var(--graph-paper);
+}
+
+.graph-project .bg-graph-panel {
+  background-color: var(--graph-panel);
+}
+
+.graph-project .bg-graph-line {
+  background-color: var(--graph-line);
+}
+
+.graph-project .bg-graph-code {
+  background-color: var(--graph-code);
+}
+
+.graph-project .border-graph-line {
+  border-color: var(--graph-line);
+}
+
+.graph-project .bg-graph-accent {
+  background-color: var(--graph-accent);
+}
+
+.graph-project .hover\:text-graph-accent:hover {
+  color: var(--graph-accent);
+}
+
+.graph-project .hover\:border-graph-accent:hover {
+  border-color: var(--graph-accent);
+}
+
+.graph-hero {
+  background:
+    radial-gradient(42rem 24rem at 16% 18%, rgba(226, 143, 69, 0.18), transparent 70%),
+    radial-gradient(38rem 24rem at 82% 10%, rgba(15, 111, 119, 0.16), transparent 72%);
+}
+
+.graph-hero-card {
+  overflow: hidden;
+  border: 1px solid var(--graph-line);
+  border-radius: 0.5rem;
+  background: var(--graph-panel);
+  box-shadow: 0 34px 80px rgba(22, 21, 18, 0.12);
+}
+
+.graph-card-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--graph-line);
+  padding: 0.85rem 1rem;
+  color: var(--graph-muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+
+.graph-matrix {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  width: min(17rem, 58vw);
+  overflow: hidden;
+  border: 1px solid var(--graph-line);
+  background: #202f33;
+}
+
+.graph-matrix span {
+  aspect-ratio: 1;
+  border-right: 1px solid rgba(244, 241, 232, 0.14);
+  border-bottom: 1px solid rgba(244, 241, 232, 0.14);
+  background: #275b63;
+}
+
+.graph-matrix span.is-hot {
+  background: #f0d83a;
+}
+
+.graph-kicker {
+  color: var(--graph-muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
 @media (min-width: 1280px) {
   .side-note {
     float: right;

app/page.tsx

@@ -30,6 +30,9 @@ export default function Home() {
             <Link href={latestPostHref} className="transition-colors hover:text-accent">
               Latest essay
             </Link>
+            <Link href="/projects" className="transition-colors hover:text-accent">
+              Projects
+            </Link>
             <Link href="/blog" className="transition-colors hover:text-accent">
               Writing
             </Link>

app/projects/graph-attention-topology/page.tsx

@@ -0,0 +1,307 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { Metadata } from "next";
+import architectureImage from "@/public/images/graph-attention-topology/model-architecture.png";
+import simulationImage from "@/public/images/graph-attention-topology/simulation-dynamics.png";
+import resultsImage from "@/public/images/graph-attention-topology/f1-results.png";
+import attentionImage from "@/public/images/graph-attention-topology/attention-training.png";
+
+const paperLinks = [
+  { href: "https://arxiv.org/abs/2408.15449", label: "arXiv" },
+  { href: "https://arxiv.org/pdf/2408.15449", label: "PDF" },
+  { href: "https://doi.org/10.48550/arXiv.2408.15449", label: "DOI" },
+];
+
+const highlights = [
+  {
+    value: "No known graph",
+    label: "Learns topology without prior adjacency examples.",
+  },
+  {
+    value: "Unknown dynamics",
+    label: "Uses observed states instead of hand-specified equations.",
+  },
+  {
+    value: "Attention as edges",
+    label: "Interprets learned attention scores as the graph estimate.",
+  },
+];
+
+const steps = [
+  "Embed every agent into a shared latent space.",
+  "Project embeddings into key/query vectors and compute pairwise attention.",
+  "Translate observed agent states into values.",
+  "Predict the next state and read the attention matrix as topology.",
+];
+
+export const metadata: Metadata = {
+  title: "Graph Attention Topology Inference",
+  description:
+    "Project page for Graph Attention Inference of Network Topology in Multi-Agent Systems.",
+  openGraph: {
+    title: "Graph Attention Inference of Network Topology in Multi-Agent Systems",
+    description:
+      "A graph-attention approach for inferring hidden network topology from multi-agent trajectories.",
+    type: "article",
+    publishedTime: "2024-10-26",
+    images: [
+      {
+        url: "/images/graph-attention-topology/model-architecture.png",
+        width: architectureImage.width,
+        height: architectureImage.height,
+        alt: "Graph attention model architecture",
+      },
+    ],
+  },
+};
+
+function ExternalLink({ href, label }: { href: string; label: string }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="rounded-full border border-graph-line bg-graph-panel px-4 py-2 text-sm font-medium text-graph-ink transition-colors hover:border-graph-accent hover:text-graph-accent"
+    >
+      {label}
+    </a>
+  );
+}
+
+function Figure({
+  src,
+  alt,
+  caption,
+  className = "",
+}: {
+  src: typeof architectureImage;
+  alt: string;
+  caption: string;
+  className?: string;
+}) {
+  return (
+    <figure className={`overflow-hidden border border-graph-line bg-graph-panel ${className}`}>
+      <div className="bg-white">
+        <Image
+          src={src}
+          alt={alt}
+          sizes="(max-width: 768px) 100vw, 58rem"
+          className="h-auto w-full"
+        />
+      </div>
+      <figcaption className="border-t border-graph-line px-4 py-3 font-mono text-[0.72rem] leading-5 text-graph-muted">
+        {caption}
+      </figcaption>
+    </figure>
+  );
+}
+
+export default function GraphAttentionProjectPage() {
+  return (
+    <div className="graph-project min-h-screen bg-graph-paper text-graph-ink">
+      <section className="graph-hero px-5 pb-14 pt-24 sm:px-6 sm:pb-20 sm:pt-28">
+        <div className="mx-auto grid max-w-[78rem] gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(23rem,32rem)] lg:items-end">
+          <div className="space-y-7">
+            <div className="flex flex-wrap items-center gap-3 font-mono text-[0.72rem] uppercase text-graph-muted">
+              <Link href="/projects" className="transition-colors hover:text-graph-accent">
+                Projects
+              </Link>
+              <span className="h-px w-8 bg-graph-line" />
+              <span>MECC 2024</span>
+              <span className="h-px w-8 bg-graph-line" />
+              <span>Multi-Agent Systems</span>
+            </div>
+
+            <div className="space-y-5">
+              <h1 className="max-w-[54rem] text-balance font-sans text-[clamp(3.1rem,8vw,7.6rem)] font-semibold leading-[0.86] tracking-normal text-graph-ink">
+                Graph Attention Inference of Network Topology
+              </h1>
+              <p className="max-w-[43rem] text-[1.12rem] leading-8 text-graph-soft sm:text-[1.25rem]">
+                Inferring the hidden graph behind a multi-agent system by training attention to predict what each agent does next.
+              </p>
+            </div>
+
+            <div className="flex flex-wrap gap-2 text-[0.95rem] text-graph-soft">
+              <span>Akshay Kolli</span>
+              <span>/</span>
+              <span>Reza Azadeh</span>
+              <span>/</span>
+              <span>Kshitij Jerath</span>
+            </div>
+
+            <div className="flex flex-wrap gap-3">
+              {paperLinks.map((link) => (
+                <ExternalLink key={link.href} {...link} />
+              ))}
+            </div>
+          </div>
+
+          <div className="graph-hero-card">
+            <div className="graph-card-top">
+              <span>attention matrix</span>
+              <span>unknown graph</span>
+            </div>
+            <div className="grid grid-cols-[1fr_auto] gap-4 p-4">
+              <div className="graph-matrix" aria-hidden>
+                {Array.from({ length: 36 }).map((_, index) => (
+                  <span
+                    key={index}
+                    className={(index % 7 === 0 || [2, 11, 15, 22, 29, 34].includes(index)) ? "is-hot" : ""}
+                  />
+                ))}
+              </div>
+              <div className="flex flex-col justify-between py-1 font-mono text-[0.68rem] uppercase text-graph-muted">
+                <span>query</span>
+                <span>key</span>
+                <span>edge</span>
+              </div>
+            </div>
+            <div className="border-t border-graph-line bg-white p-3">
+              <Image
+                src={architectureImage}
+                alt="Graph attention model architecture"
+                priority
+                sizes="(max-width: 1024px) 92vw, 32rem"
+                className="mx-auto h-auto max-h-[30rem] w-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="border-y border-graph-line bg-graph-panel px-5 py-5 sm:px-6">
+        <div className="mx-auto grid max-w-[78rem] gap-4 md:grid-cols-3">
+          {highlights.map((item) => (
+            <div key={item.value} className="space-y-2 border-l border-graph-line pl-4">
+              <p className="text-[1.05rem] font-semibold text-graph-ink">{item.value}</p>
+              <p className="text-[0.92rem] leading-6 text-graph-muted">{item.label}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <div className="mx-auto max-w-[78rem] px-5 py-14 sm:px-6 sm:py-20">
+        <div className="grid gap-12 lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-16">
+          <aside className="hidden lg:block">
+            <nav className="sticky top-24 space-y-3 font-mono text-[0.72rem] uppercase text-graph-muted">
+              <a href="#overview" className="block transition-colors hover:text-graph-accent">Overview</a>
+              <a href="#method" className="block transition-colors hover:text-graph-accent">Method</a>
+              <a href="#results" className="block transition-colors hover:text-graph-accent">Results</a>
+              <a href="#citation" className="block transition-colors hover:text-graph-accent">Citation</a>
+            </nav>
+          </aside>
+
+          <div className="space-y-20">
+            <section id="overview" className="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(18rem,0.7fr)]">
+              <div className="space-y-5">
+                <p className="graph-kicker">Overview</p>
+                <h2 className="max-w-[42rem] text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
+                  Predict the next state, then read the graph from what the model attended to.
+                </h2>
+                <div className="space-y-5 text-[1.02rem] leading-8 text-graph-soft">
+                  <p>
+                    The paper studies a practical problem in networked multi-agent systems: the agents move, synchronize, or converge, but the interaction graph behind that behavior is not given.
+                  </p>
+                  <p>
+                    The model is trained on state trajectories from consensus dynamics and Kuramoto oscillators. During prediction, attention scores between agent embeddings become an interpretable approximation of the adjacency matrix.
+                  </p>
+                </div>
+              </div>
+
+              <Figure
+                src={simulationImage}
+                alt="Consensus and Kuramoto simulation examples with adjacency matrices"
+                caption="Simulation examples: consensus dynamics and Kuramoto oscillators paired with their hidden adjacency matrices."
+                className="rounded-md"
+              />
+            </section>
+
+            <section id="method" className="space-y-8">
+              <div className="grid gap-8 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1fr)] lg:items-start">
+                <div className="space-y-5">
+                  <p className="graph-kicker">Method</p>
+                  <h2 className="text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
+                    A topology estimate falls out of the attention layer.
+                  </h2>
+                  <p className="text-[1.02rem] leading-8 text-graph-soft">
+                    Instead of supervising the graph directly, the model learns to forecast the system. The attention matrix is then thresholded and compared with the true graph.
+                  </p>
+                </div>
+
+                <ol className="grid gap-3">
+                  {steps.map((step, index) => (
+                    <li key={step} className="flex gap-4 border-t border-graph-line py-4">
+                      <span className="font-mono text-sm text-graph-accent">
+                        {(index + 1).toString().padStart(2, "0")}
+                      </span>
+                      <span className="text-[1rem] leading-7 text-graph-soft">{step}</span>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+
+              <Figure
+                src={architectureImage}
+                alt="Architecture diagram showing agent embeddings, key-query attention, values, predictions, and loss"
+                caption="Architecture: embeddings produce key/query vectors; observed states produce values; the attention matrix approximates adjacency."
+                className="rounded-md"
+              />
+            </section>
+
+            <section id="results" className="space-y-8">
+              <div className="max-w-[46rem] space-y-5">
+                <p className="graph-kicker">Results</p>
+                <h2 className="text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
+                  Strongest graph recovery appears with smaller systems, and more simulations help larger systems.
+                </h2>
+                <p className="text-[1.02rem] leading-8 text-graph-soft">
+                  F1 link-prediction scores are above a random baseline for both tested dynamics. Consensus dynamics are easier than Kuramoto oscillators, while additional simulation data improves larger-agent inference.
+                </p>
+              </div>
+
+              <Figure
+                src={resultsImage}
+                alt="F1 score results for consensus dynamics and Kuramoto oscillators"
+                caption="F1 results across system size and number of simulations for consensus dynamics and Kuramoto oscillators."
+                className="rounded-md"
+              />
+
+              <div className="grid gap-6 md:grid-cols-[minmax(0,0.78fr)_minmax(0,1fr)] md:items-start">
+                <div className="rounded-md border border-graph-line bg-graph-panel p-5">
+                  <p className="font-mono text-[0.72rem] uppercase text-graph-muted">training behavior</p>
+                  <p className="mt-3 text-[1.02rem] leading-8 text-graph-soft">
+                    Attention first learns the obvious self-dependencies, then gradually recovers inter-agent structure as training progresses.
+                  </p>
+                </div>
+                <Figure
+                  src={attentionImage}
+                  alt="Attention matrices over training epochs and predicted graphs"
+                  caption="Attention values through training stages, from true graph to predicted graph."
+                  className="rounded-md"
+                />
+              </div>
+            </section>
+
+            <section id="citation" className="space-y-5 border-t border-graph-line pt-10">
+              <p className="graph-kicker">Citation</p>
+              <h2 className="text-3xl font-semibold leading-tight text-graph-ink">Paper</h2>
+              <p className="max-w-[46rem] text-[1.02rem] leading-8 text-graph-soft">
+                Graph Attention Inference of Network Topology in Multi-Agent Systems. Akshay Kolli, Reza Azadeh, and Kshitij Jerath. Accepted at the Modeling and Estimation Control Conference, 2024.
+              </p>
+              <pre className="overflow-x-auto rounded-md border border-graph-line bg-graph-code p-5 text-sm leading-7 text-graph-code-text">
+{`@misc{kolli2024graphattentioninference,
+  title={Graph Attention Inference of Network Topology in Multi-Agent Systems},
+  author={Kolli, Akshay and Azadeh, Reza and Jerath, Kshitij},
+  year={2024},
+  eprint={2408.15449},
+  archivePrefix={arXiv},
+  primaryClass={cs.MA}
+}`}
+              </pre>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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>
+  );
+}

app/sitemap.ts

@@ -12,6 +12,8 @@ export default function sitemap(): MetadataRoute.Sitemap {
 
     return [
         { url: 'https://akkolli.net', lastModified: latestPostDate },
+        { url: 'https://akkolli.net/projects', lastModified: new Date('2024-10-26') },
+        { url: 'https://akkolli.net/projects/graph-attention-topology', lastModified: new Date('2024-10-26') },
         { url: 'https://akkolli.net/blog', lastModified: latestPostDate },
         { url: 'https://akkolli.net/resume' },
         ...blogEntries,