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";

const projects = [
    {
        name: "HyX",
        link: "https://www.google.com/",
        desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quaerat.",
    },
];
---

<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-all">
                                {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]"
                                    />
                                    <p>4</p>
                                </div>
                                <div class="flex gap-1">
                                    {" "}
                                    <img
                                        src="/icons/code-fork-solid.svg"
                                        alt=""
                                        class="w-[21px] h-[21px]"
                                    />
                                    <p>9</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>