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

<Layout title="Projects">
  <main>
    <h1 class="text-4xl font-semibold text-center py-6">Projects</h1>
    <p class="text-center mb-4">
      Here are some of my projects. I love tinkering with stuff so for a more complete list, visit my <a class="font-bold" href="https://github.com/pinapelz">Github</a>
      <br/>
      Also visit here for some <a class="font-bold" href="/contributions">open source stuff</a>
    </p>
    <ul role="list" class="link-card-grid">
      <Card
        href="https://github.com/pinapelz/ytmp3AutoTag"
        title="ytID3AutoTag"
        body="JSwing application that downloads YouTube videos as MP3 and automatically tags the ID3 fields throughing inferring the video metadata"
        language="Java"
        languageColor="#b07219"
        year="2022"
        tags={["Java", "Swing"]}
      />
      <Card
        href="https://github.com/Patchwork-Archive/Patchwork-Karaoke"
        title="lrc-karaoke-player"
        body="A client-side web app that allows the playback of video files synchronzied with both .lrc lyrics and YouTube srv3 styled subtitles"
        language="Typescript"
        languageColor="#3178c6"
        year="2023"
        tags={["Typescript", "React"]}
      />
      <Card
        href="https://github.com/pinapelz/NijiTrack"
        title="Nijitrack"
        body="Python and Next application that records and collects historical subscriber count for any subset of YouTube channels."
        language="Python"
        languageColor="#3572A5"
        year="2023"
        tags={["Python", "Next", "Tailwind", "SSR"]}
      />
      <Card
      href="https://github.com/pinapelz/JHolodex"
      title="JHolodex"
      body="Object-Oriented Java wrapper for the Holodex API written with Retrofit2. Published on Maven Central"
      language="Java"
      languageColor="#b07219"
      year="2023"
      tags={["Java", "Retrofit2", "Maven"]}
    />
      <Card
        href="https://github.com/Patchwork-Archive"
        title="Patchwork Archive"
        body="An archival system to help streamline the preservation of any subset of YouTube videos. Fully featured frontend, backend, and worker system for archival"
        language="Javascript"
        languageColor="#f1e05a"
        year="2023"
        tags={["React", "Python", "MySQL" , "S3 Storage", "Tailwind"]}
      />
      <Card
        href="https://github.com/pinapelz/yet-another-lavaplayer-bot"
        title="Yet Another Lavaplayer Bot"
        body="Self-hosted JDA Discord music bot that uses Lavaplayer to play music from YouTube, Soundcloud, etc in Discord voice channels"
        language="Java"
        languageColor="#b07219"
        year="2022"
        tags={["Java", "JDA"]}
      />
      <Card
        href="https://github.com/pinapelz/link-shortener-moe-vercel"
        title="Moe Link Shortener"
        body="A fully serverless Flask link shortener that can be customized and deployed to Vercel with 1 click.Deploys as a fullstack app on Vercel"
        language="HTML"
        languageColor="#e34c26"
        year="2023"
        tags={["HTML", "Flask", "Python", "PostgreSQL"]}
      />
      <Card
        href="https://github.com/pinapelz/vtuber-captcha"
        title="Vtuber Captcha"
        body="A bring your own UI captcha API that uses VTuber images to verify that the user is human. Verifies answers server-side!"
        language="Python"
        languageColor="#3572A5"
        year="2023"
        tags={["Python", "Flask", "Postgres", "Redis"]}
      />
      <Card
        href="https://github.com/pinapelz.com"
        title="Personal Website"
        body="This website! Fully built using Astro, a superset of HTML (and so is my blog linked in the buttons down below)"
        language="Astro"
        languageColor="#ff5a03",
        year="2023"
        tags={["Astro", "HTML", "Tailwind", "Javascript"]}
      />
    </ul>
  </main>
  <SocialNavbar />
  <style>
    main {
      margin: auto;
      padding: 1rem;
      max-width: 1200px;
      color: white;
      font-size: 20px;
      line-height: 1.6;
    }
    a{
      color: white;
    }
    .link-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(24ch, 1fr));
      gap: 2rem;
      padding: 0;
    }
    @media (max-width: 1020px) {
      .link-card-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(24ch, 1fr));
        gap: 2rem;
        padding: 0;
        width: 100%;
      }
    }
  </style>
</Layout>