---
import Layout from "../../layouts/Layout.astro";
import Section from "../../components/Section.astro";
import ProjectCard from "../../components/ProjectCard.astro";
import { getCollection } from "astro:content";

const projects = (await getCollection("projects")).sort(
  (a, b) => a.data.order - b.data.order,
);
---

<Layout title="Projects" path="/projects" description="Selected platform & infrastructure projects by Jonathon Wright.">
  <Section id="all-projects" eyebrow="Projects" index="*" title="Some bytes I'm proud of - a starting line, not a trophy shelf.">
    <p class="lead projects__intro" data-reveal>
      Edge Kubernetes, GPU inference, self-hosted AI, productionised network automation, and
      the infrastructure rigour that ties it together - each with the problem, the design, and
      the outcome. More always cooking.
    </p>
    <div class="grid">
      {projects.map((entry, i) => <ProjectCard entry={entry} index={i + 1} />)}
    </div>
  </Section>
</Layout>

<style>
  .projects__intro {
    max-width: 52ch;
    margin-bottom: var(--space-6);
  }
  .grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  }
</style>