---
import Layout from '../layouts/Layout.astro'
import Footer from '../components/Footer.astro'
import Card from '../components/Card.astro'
---

<Layout
  title="Fun Hobby Projects"
  description="See demos of hobby projects Ayo Ayco created"
>
  <main>
    <h1><span class="text-gradient">Hobby Projects</span></h1>
    <p>
      See more of my previous projects at <a href="https://ayos.blog/projects"
        >my blog</a
      >.
    </p>
    <ul>
      <Card
        href="/tech-bsky-fedi"
        title="Tech Bsky ↔ Fedi"
        body="Celebrating bsky folks who bridged their accounts to the fediverse!"
      />
      <Card
        newTab
        href="https://www.npmjs.com/package/@ayco/astro-sw"
        title="Astro SW"
        body="Astro integration to use your own authored service worker"
      />
      <Card
        newTab
        href="https://www.npmjs.com/package/web-component-base"
        title="Web Component Base"
        body="This provides a minimal vanilla JS base class that aims to reduce the complexity of creating reactive custom elements."
      />
      <Card
        newTab
        href="https://www.npmjs.com/package/@ayco/astro-resume"
        title="Astro Resume"
        body="Utilities for serializing data from server for use in the client with types preserved across components."
      />
      <Card
        newTab
        href="https://www.npmjs.com/package/generate-timezone-json"
        title="Time Zone JSON Generator"
        body="Generate a JSON file containing time zones from the official IANA Database or your own zone.tab file"
      />
      <Card
        newTab
        href="https://cozy.pub"
        title="Cozy 🧸"
        body="Your modern-day reading assistant"
      />
      <Card
        newTab
        href="https://kaboom.ayco.io"
        title="Kaboom!"
        body="Simple physics simulation with Matter.js 👨🏻‍🔬"
      />
      <Card
        newTab
        href="https://mnswpr.com"
        title="Minesweeper"
        body="Recreated the classic game for the web 💣"
      />
      <Card
        href="/showcase/astro-reactive-form"
        title="Reactive Form"
        body="The reactive form component for Astro 🔥"
      />
      <Card
        href="/showcase/astro-github-stats"
        title="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>
