---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PageHead from '@/components/PageHead.astro'
import ProjectCard from '@/components/ProjectCard.astro'
import Layout from '@/layouts/Layout.astro'
import { getAllProjects } from '@/lib/data-utils'

const projects = await getAllProjects()
---

<Layout>
  <PageHead slot="head" title="About" />
  <Breadcrumbs items={[{ label: 'About', icon: 'lucide:info' }]} />

  <section>
    <div class="min-w-full">
      <div class="prose mb-8">
        <p>how did we get here??????????</p>
      </div>

      <h2 class="mb-4 text-2xl font-medium">Projects I'm most proud of</h2>
      <div class="flex flex-col gap-4">
        {projects.map((project) => <ProjectCard project={project} />)}
      </div>
    </div>
  </section>
</Layout>
