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

<Layout
  title="Stuff: Smaller Building Blocks"
  description="See demos of side projects Ayo Ayco created"
>
  <main>
    <h1 class="text-gradient">Stuff</h1>
    <p>Because software is not just a huge pile of code, but a combination of small, reusable stuff...</p>
    <ul>
      <Card
        newTab
        href="https://ayco.io/n/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://ayco.io/n/@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://ayco.io/n/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"
      />
    </ul>
    <Footer />
  </main>
</Layout>

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