---
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";
import Card from "../../components/Card.astro";
---

<Layout
  title="Fun Side Projects"
  description="See demos of opensource side projects Ayo Ayco created"
>
  <main>
    <h1>Fun <span class="text-gradient">Side Projects</span></h1>
    <ul role="list">
      <Card
        newTab
        href="https://kaboom.ayco.io"
        title="Kaboom!"
        body="A simple physics simulation with Matter.js 👨🏻‍🔬"
      />
      <Card
        newTab
        href="https://mnswpr.com"
        title="Minesweeper"
        body="Recreated the classic game that Microsoft discontinued 💣"
      />
      <Card
        href="/showcase/astro-reactive-form"
        title="Astro Reactive Form"
        body="The reactive form component for Astro 🔥"
      />
      <Card
        href="/showcase/astro-github-stats"
        title="Astro GitHub Stats"
        body="Embed GitHub stats on your Astro page ✨"
      />
    </ul>
    <Footer />
  </main>
</Layout>

<style>
  ul {
    list-style: none;
    display: grid;
    gap: 1rem;
    padding: 0;
  }
</style>
