website/src/pages/projects.astro

---
import Layout from "../layouts/Layout.astro";
import Navbar from "../components/widgets/Navbar.astro";
import Container from "../components/atoms/Container.astro";

interface Project {
    name: string;
    link: string;
    desc: string;
    stats?: {
        forks: number;
        stars: number;
    };
}

const projects: Project[] = [
    {
        name: "HyLib",
        link: "https://github.com/xHyroM/HyLib",
        desc: "Source code for HyLib, a paper plugin and powerful library.",
    },
    {
        name: "HyChat",
        link: "https://github.com/xHyroM/HyChat",
        desc: "Source code for HyChat, a paper plugin.",
    },
    {
        name: "HyX",
        link: "https://github.com/xHyroM/HyX",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quaerat.",
    },
    {
        name: "Mashe",
        link: "https://github.com/xHyroM/mashe",
        desc: "Simple, fast, and easy to use Event Handling for Java.",
    },
    {
        name: "Mumblum",
        link: "https://github.com/xHyroM/mumblum",
        desc: "Mumblum is a simple, modern discord bot in JDA.",
    },
    {
        name: "setup-bun",
        link: "https://github.com/xHyroM/setup-bun",
        desc: "Set up your GitHub Actions workflow with a specific version of Bun.",
    },
    {
        name: "Roles Bot",
        link: "https://github.com/xHyroM/roles-bot",
        desc: "Discord bot for \"button\" roles, using Cloudflare Workers.",
    },
    {
        name: "Bun Discord Bot",
        link: "https://github.com/xHyroM/bun-discord-bot",
        desc: "Official serverless discord bot for bun discord server."
    },
    {
        name: "hykord",
        link: "https://github.com/xHyroM/hykord",
        desc: "My @discord client modification."
    },
    {
        name: "frog",
        link: "https://github.com/xHyroM/frog",
        desc: "Frog is an extremely simple language based on the monkey language."
    }
];

for (const project of projects) {
    const repository = await (await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
        headers: {
            'Authorization': `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`
        }
    })).json();

    project.stats = {
        forks: repository.forks,
        stars: repository.stargazers_count
    }
}
---

<Layout>
    <Navbar />
    <h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
        Projects
    </h1>

    <Container>
        <main class="flex gap-12 flex-wrap justify-center">
            {
                projects.map((project) => (
                    <section class="flex flex-col md:w-96 w-80 min-h-max border-[1px] border-neutral-800 bg-gray p-6 rounded-md">
                        <div class="flex">
                            <h2 class="text-3xl font-bold text-white mb-4 break-words">
                                {project.name}
                            </h2>
                            <div class="bg-neutral-800 text-neutral-300 flex justify-center items-center h-fit rounded-lg py-1 px-4 ml-4 gap-2 translate-y-1">
                                <div class="flex gap-1">
                                    <img
                                        src="/icons/star.svg"
                                        alt=""
                                        class="w-[21px] h-[21px] translate-y-[1px]"
                                    />
                                    <p>{project.stats!.stars}</p>
                                </div>
                                <div class="flex gap-1">
                                    {" "}
                                    <img
                                        src="/icons/code-fork-solid.svg"
                                        alt=""
                                        class="w-[21px] h-[21px] translate-y-[1px]"
                                    />
                                    <p>{project.stats!.forks}</p>
                                </div>
                            </div>
                        </div>

                        <p class="text-neutral-300 mb-6 break-all">
                            {project.desc}
                        </p>
                        <div>
                            <a
                                href={project.link}
                                class="inline-flex  bottom-0 w-fit py-2 px-6 text-neutral-300 bg-neutral-800 rounded-md hover:bg-neutral-700 transition-colors duration-100 [&_img]:hover:translate-x-[2px] [&_img]:transition-all"
                            >
                                GitHub{" "}
                                <img
                                    src="/icons/arrow-up-right.svg"
                                    class="ml-2 w-5 mt-[1px] "
                                    alt=""
                                />
                            </a>
                            <a
                                href={project.link}
                                class=" translate-y-[6px] inline-flex  bottom-0 w-fit py-2 px-6 text-neutral-300 transition-all duration-100 hover:text-neutral-200 hover:-translate-y-[-4px]"
                            >
                                <img
                                    src="/icons/book-open.svg"
                                    class="w-5 mr-2 "
                                    alt=""
                                />
                                Docs{" "}
                            </a>
                        </div>
                    </section>
                ))
            }
        </main>
    </Container>
</Layout>