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: "YesLib",
        link: "https://www.google.com/",
        desc: "dwadwadwa",
    },
    {
        name: "UltimateHYX+++UPGRADEDplus",
        link: "https://www.google.com/",
        desc: "dwadwadwdwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwadwaa",
    },
];
---

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

    <Container>
        <main class="flex gap-14 flex-wrap justify-center">
            {
                projects.map((project) => (
                    <section class="w-96 border-[1px] border-neutral-800 bg-gray p-6 rounded-md">
                        <h2 class="text-3xl font-bold text-white mb-4 break-all">
                            {project.name}
                        </h2>
                        <p class="text-neutral-300 mb-6 break-all">
                            {project.desc}
                        </p>
                        <a
                            href={project.link}
                            class="flex w-fit py-2 px-6 text-neutral-300 bg-neutral-800 rounded-md hover:bg-neutral-700 transition-colors duration-100"
                        >
                            Visit{" "}
                            <img
                                src="/icons/arrow-up-right.svg"
                                class="ml-2 w-5 mt-[1px]"
                                alt=""
                            />
                        </a>
                    </section>
                ))
            }
        </main>
    </Container>
</Layout>