path: root/src/pages/projects.astro

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

<Layout title="Projects">
    <main>
        <div class="header-container">
            <h1 class="text-4xl font-semibold text-center py-6">Projects</h1>
            <p class="text-center mb-8">
                Here are some of my projects. I love tinkering with stuff so for
                a more complete list, visit my <a
                    class="font-bold hover:underline hover:text-blue-300 transition-colors"
                    href="https://github.com/pinapelz">Github</a
                >
                <br />
                <a
                    href="https://github.com/pulls/search?q=is%3Apr+is%3Amerged+author%3Apinapelz+-repo%3Apinapelz%2Fupptime+-repo%3Apinapelz%2Fpinapelz+-user%3Apinapelz+-org%3AAntAvionics"
                    class="mt-6 inline-block hover:underline text-center font-bold text-2xl animate-pulse hover:text-blue-300 transition-colors"
                    >Open Source Contributions</a
                >
            </p>
        </div>

        <ul role="list" class="project-grid">
            <!-- 2026 -->
            <Card
                href="https://github.com/pinapelz/auto-live-tl"
                title="auto-live-tl"
                body={`• Local real-time subtitle translation for a PCM audio input using faster-whisper ASR
• Optional LLM post-processing for cleanup and de-duplication
• Live transcription with server-sent-events streaming to clients
• Algorithmic filter for removing potential hallucinations and repetitions`}
                language="Python"
                languageColor="#3572A5"
                image="/auto-livetl.png"
                imagAlt="Auto Live TL subtitle demo using a YouTube Userscript client (French -> English)"
                year="2026"
                tags={[
                    "Python",
                    "OpenAI-Whisper",
                    "ASR",
                    "LLM"
                ]}
            />
            <Card
              href="https://github.com/pinapelz/lrc-karaoke-player"
              title="lrc-karaoke-player"
              body={`• Client-side web app for LRC-based karaoke playback and tooling
• LRC-Player: synchronized scrolling lyrics with karaoke-style highlighting, with dual audio mixing
• LRC-Type: typing game inspired by Typing-Tube using song lyrics as input
• Shareable, codes, Fully client-side, no user data stored`}
              language="TypeScript"
              languageColor="#3178C6"
              image="/lrc.png"
              imagAlt="LRC Karaoke Player interface"
              year="2026"
              tags={[
                "Next.js",
                "TypeScript",
                "LRC",
                "Karaoke",
                "Web Audio",
                "Client-side"
              ]}
            />
            <!-- 2025 -->
            <Card
                href="https://github.com/pinapelz/tiny-time-tracker"
                title="tiny-time-tracker"
                body={`• Lightweight game time tracker for Windows
• Uses native APIs for event-based detection
• Web-based dashboard with responsive design
• Tracks detailed gaming statistics and playtime
• Built with Rust and styled with Tailwind CSS`}
                language="Rust"
                languageColor="#dea584"
                image="/ttt.png"
                imagAlt="Tiny Time Tracker Web UI"
                year="2025"
                tags={["Rust", "Askama", "Tailwind", "Windows API", "SQLite"]}
            />

            <Card
                href="https://github.com/pinapelz/brokenithm-evolved-ios-umi"
                title="brokenithm-evolved-ios-umi"
                body={`• Bridge app for iOS rhythm game controllers
• Real-time input translation with minimal latency
• Interfaces with chuniio hardware and UMIGURI LEDs
• Translates LED signals for iOS compatibility
• Enables arcade-style gaming on mobile devices`}
                language="Python"
                languageColor="#3572A5"
                image="/brokenithm.png"
                imageAlt="Brokenithm-SwiftUI bridged via USB MUX into UMIGURI"
                year="2025"
                tags={["Python", "C#"]}
            />

            <Card
                href="https://github.com/pinapelz/573-updates"
                title="573-UPDATES"
                body={`• Web scraper for arcade gaming news and updates
• Tracks patch notes, announcements, and community posts
• Python backend with React frontend for browsing
• Extensible architecture for adding new sources
• Automated deployment pipelines for content updates`}
                language="Typescript"
                languageColor="#3178c6"
                image="/573.png"
                imageAlt="573-UPDATES site screenshot"
                year="2025"
                tags={["React", "TypeScript", "Python", "Web Scraping"]}
            />

            <!-- 2024 -->
            <Card
                href="https://github.com/pinapelz/Mirage"
                title="Mirage"
                body={`• Tracks rhythm game scores across multiple titles
• Supports niche games without official metadata
• Import and backup game progress from different games
• Multi-user system with customizable permissions
• Pre-loaded trackers for several popular rhythm games`}
                language="TypeScript"
                languageColor="#3178c6"
                image="/mirage.png"
                imageAlt="Mirage score tracker interface screenshot"
                year="2024"
                tags={[
                    "React",
                    "TypeScript",
                    "Express",
                    "Prisma ORM",
                    "PostgreSQL",
                ]}
            />

            <Card
                href="https://github.com/pinapelz/ffxiv-chronowatcher"
                title="ffxiv-chronowatcher"
                body={`• Rust library for FFXIV time and weather calculations
• Implements Eorzean Time system with perfect accuracy
• Weather forecasting for all game zones
• Comprehensive unit testing for reliability
• Published on crates.io for easy integration`}
                language="Rust"
                languageColor="#dea584"
                image="/chronowatcher.png"
                imageAlt="Crates.io FFXIV-Chronowatcher"
                year="2024"
                tags={["Rust", "Crates.io"]}
            />

            <!-- 2023 -->
            <Card
                href="https://patchwork.moekyun.me"
                title="Patchwork Archive"
                body={`• Scalable system for archiving YouTube videos
• React frontend for managing requests and archives
• Distributed workers for processing archival jobs
• Automatic metadata extraction and thumbnail storage
• Efficient storage using S3-compatible backends`}
                language="Javascript"
                languageColor="#f1e05a"
                image="/patchwork.png"
                imageAlt="Screenshot of Patchwork Archive site"
                year="2023"
                tags={["React", "Python", "MySQL", "S3 Storage", "TailwindCSS"]}
            />

            <Card
                href="https://github.com/pinapelz/NijiTrack"
                title="Nijitrack"
                body={`• Analytics platform for YouTube channel metrics
• Tracks subscribers, views, and historical trends
• Python backend with Next.js frontend and interactive charts
• Dashboard for comparing multiple channels
• Tools for growth analysis and performance insights`}
                language="Python"
                languageColor="#3572A5"
                image="/phase-tracker.png"
                year="2023"
                tags={[
                    "Python",
                    "Next.js",
                    "Tailwind",
                    "SSR",
                    "Chart.js",
                    "PostgreSQL",
                    "YouTube API",
                ]}
            />

            <Card
                href="https://github.com/pinapelz/JHolodex"
                title="JHolodex"
                body={`• Java wrapper for the Holodex API
• Simplifies access to VTuber and creator data
• Built with Retrofit2 for efficient HTTP calls
• Exposes video metadata and live stream info
• Published on Maven Central with docs and tests`}
                language="Java"
                languageColor="#b07219"
                image="/jholodex.png"
                imageAlt="JHolodex Central Repository"
                year="2023"
                tags={["Java", "Retrofit2", "Maven Central", "REST API"]}
            />

            <Card
                href="https://blog.pinapelz.com"
                title="Personal Blog"
                body={`• Performance-focused blog built with Astro
• Combines MDX with React components for richer posts
• Technical tutorials, project write-ups, and demos
• Optimized for SEO and fast loading times`}
                language="Astro"
                languageColor="#ff5a03"
                image="/blog.png"
                imageAlt="Personal Blog Site Screenshot"
                year="2023"
                tags={["Astro", "MDX", "React"]}
            />

            <Card
                href="https://github.com/pinapelz/ffxiv-malmstone"
                title="Malmstone Calculator"
                body={`• FFXIV Dalamud plugin for PvP progression tracking
• Calculates matches needed to reach player goals
• Real-time goal tracking and match history analysis
• Built with ImGui for in-game UI integration
• Provides time-to-completion estimates based on win rate`}
                language="C#"
                languageColor="#178600"
                image="/malmstone.png"
                imageAlt="FFXIV Malmstone Plugin Screenshot"
                year="2023"
                tags={["C#", "ImGui"]}
            />

            <!-- 2022 -->
            <Card
                href="https://github.com/pinapelz/ytmp3AutoTag"
                title="ytID3AutoTag"
                body={`• Java Swing app for YouTube-to-MP3 conversion
• Automatically tags ID3 metadata from video info
• Batch processing for many files at once
• Preserves audio quality during conversion
• GUI optimized for quick metadata edits`}
                language="Java"
                languageColor="#b07219"
                image="/yt.png"
                imageAlt="ytId3AutoTag Swing Metadata Editing GUI"
                year="2022"
                tags={["Java", "Swing"]}
            />

            <Card
                href="https://github.com/pinapelz/yet-another-lavaplayer-bot"
                title="Yet Another Lavaplayer Bot"
                body={`• Self-hosted Discord music bot with multi-source playback
• Supports YouTube, SoundCloud, Bandcamp, and more
• Advanced queue management and audio filtering
• Built with JDA and Lavaplayer for reliable streaming
• Includes permission controls and moderation features`}
                language="Java"
                languageColor="#b07219"
                image="/lavaplayer.png"
                imageAlt="Example usage of Discord bot. Able to search + play songs on YouTube"
                year="2022"
                tags={[
                    "Java",
                    "JDA",
                    "Discord Bot",
                    "Lavaplayer",
                    "Audio Streaming",
                    "Async Programming",
                ]}
            />
        </ul>

        <div class="text-center my-12">
            <a
                href="https://knowledge.pinapelz.com/personal/tools"
                class="inline-block hover:underline text-2xl animate-pulse transition-all hover:text-blue-300"
                >and also a few smaller tools...</a
            >
        </div>
    </main>

    <SocialNavbar />

    <!-- Image Modal -->
    <div id="imageModal" class="modal">
        <span class="close-modal">&times;</span>
        <img class="modal-content" id="modalImage" />
        <div id="modalCaption"></div>
    </div>

    <style>
        main {
            margin: auto;
            padding: 2rem 1.5rem;
            max-width: 1300px;
            color: white;
            font-size: 18px;
            line-height: 1.6;
        }
        a {
            color: white;
            transition: all 0.2s ease;
        }
        .header-container {
            margin-bottom: 2.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 1rem;
        }
        .project-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 2.5rem;
            padding: 0;
            list-style: none;
            margin-bottom: 2rem;
        }

        /* Bullet point styling */
        .bullet-style {
            position: relative;
            padding-left: 1.25rem;
            margin-bottom: 0.5rem;
            line-height: 1.5;
        }

        .bullet-style::before {
            content: "•";
            position: absolute;
            left: 0;
            color: rgb(139, 92, 246);
            font-weight: bold;
        }

        @media (min-width: 768px) {
            .project-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem 2.5rem;
            }
        }

        @media (min-width: 1200px) {
            .project-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 3rem;
            }
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1500;
            padding-top: 50px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.9);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-visible {
            opacity: 1;
            display: block;
        }

        .modal-content {
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 80vh;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-content-visible {
            opacity: 1;
        }

        .close-modal {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
            z-index: 1001;
        }

        .close-modal:hover,
        .close-modal:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        #modalCaption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }
    </style>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Get all project images
            const projectImages = document.querySelectorAll(".image-container");
            const modal = document.getElementById("imageModal");
            const modalImg = document.getElementById("modalImage");
            const modalCaption = document.getElementById("modalCaption");
            const closeBtn = document.querySelector(".close-modal");

            // Add click event to each project image
            projectImages.forEach((imgContainer) => {
                imgContainer.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    const img = this.querySelector("img");
                    modal.style.display = "block";
                    setTimeout(() => {
                        modal.classList.add("modal-visible");
                    }, 10);

                    modalImg.src = img.src;
                    modalImg.alt = img.alt;
                    setTimeout(() => {
                        modalImg.classList.add("modal-content-visible");
                    }, 50);

                    modalCaption.textContent = img.alt;

                    return false;
                });
            });

            // Close modal when clicking the X
            closeBtn.addEventListener("click", closeModal);

            // Close modal when clicking outside the image
            modal.addEventListener("click", function (event) {
                if (event.target === modal) {
                    closeModal();
                }
            });

            // Close modal with Escape key
            document.addEventListener("keydown", function (event) {
                if (event.key === "Escape" && modal.style.display === "block") {
                    closeModal();
                }
            });

            function closeModal() {
                modal.classList.remove("modal-visible");
                modalImg.classList.remove("modal-content-visible");
                setTimeout(() => {
                    modal.style.display = "none";
                }, 300);
            }
        });
    </script>
</Layout>