---
import Demo from "../../components/Demo.astro";
import ProjectPage from "../../components/ProjectPage.astro";

export const metadata = {
    title: "flackie",
    description:
        "A portable FLAC player built with C++ and Python for Raspberry Pi. Custom UI, hardware controls, e-ink display, and a 3D printed case.",
    date: "October 2025",
    slug: "flackie",
    image: "/flackie-icon.svg",
    github: "https://github.com/hex248/flackie",
    hidden: true,
    tags: ["Raspberry Pi", "Python", "C++", "CMake", "Electronics", "Pillow", "Image Generation"],
    type: "personal",
};
---

<ProjectPage metadata={metadata}>
    <p>
        "flackie" is a portable FLAC music player I built using a Raspberry Pi
        Zero 2 W, a small e-ink display, and some physical buttons. The device
        features a custom Python UI for browsing and playing FLAC files. The
        case was designed in CAD and 3D printed to house all the components
        neatly.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-ayu-highlight p-4 rounded mt-4">
            <h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
            <ul class="list-disc list-inside space-y-1">
                <li>Portable design with a compact form factor</li>
                <li>Custom Python UI for easy navigation</li>
                <li>Physical buttons for playback control</li>
                <li>3D printed case</li>
                <li>Supports FLAC audio playback</li>
            </ul>
        </div>

        <div class="bg-ayu-highlight p-4 rounded mt-4">
            <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
            <ul class="list-disc list-inside space-y-1">
                <li>C++</li>
                <li>CMake</li>
                <li>Python</li>
                <li>Pillow</li>
                <li>Raspberry Pi Zero 2 W</li>
                <li>E-ink display</li>
                <li>3D printing</li>
            </ul>
        </div>
    </div>

    <div class="mt-4">
        <h2 class="text-2xl text-ayu-accent mb-3">Pictures</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Demo image="/images/flackie/1.png" title="1" type="boxed" />
            <Demo image="/images/flackie/2.png" title="2" type="boxed" />
            <Demo image="/images/flackie/3.png" title="3" type="boxed" />
            <Demo image="/images/flackie/4.png" title="4" type="boxed" />
        </div>
    </div>
</ProjectPage>
