Webserver/app/projects/page.tsx

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:
      "A graph-attention model that recovers hidden interaction graphs from trajectory data while learning to predict the next state.",
    status: "Published paper",
    year: "2024",
    image: graphAttentionImage,
    imageAlt: "Graph attention model architecture diagram",
    tags: ["Graph attention", "Topology inference", "Kuramoto oscillators"],
  },
];

export const metadata: Metadata = {
  title: "Projects",
  description: "Selected projects on world models, ML hardware, GPUs, deep learning, and the occasional multi-agent systems paper.",
  openGraph: {
    title: "Projects",
    description: "Selected projects on world models, ML hardware, GPUs, deep learning, and the occasional multi-agent systems paper.",
  },
};

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">
              World models, GPUs, and deep learning systems.
            </h1>
            <p className="max-w-[36rem] text-[1rem] leading-8 text-muted">
              Most of my current work sits around ML hardware, deep learning models,
              and world models for RL. This topology paper is the multi-agent exception.
            </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"
                  >
                    Read 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>
  );
}