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="w-full py-32 text-center text-5xl font-extrabold text-white">
        Projects
    </h1>

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

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