Projects reworked as bento grid.

src/components/ProjectCard.astro

@@ -7,23 +7,24 @@ const {
   repositoryLinks,
   projectSlug,
   technologiesList,
+  className
 } = Astro.props;
 import { Github, MonitorPlay } from "lucide-astro";
 import TechnologiesBar from "./TechnologiesBar.astro";
 ---
 
 <div
-  class="bg-white dark:text-white border-black border-2 hover:shadow-[8px_8px_0px_rgba(0,0,0,1)] rounded-md text-center"
+  class={`bg-white dark:text-white border-black border-2 hover:shadow-[8px_8px_0px_rgba(0,0,0,1)] rounded-md text-center ${className}`}
 >
   <a href={`/projects/${projectSlug}`} class="block cursor-pointer">
     <img
       src={`/images/projects/logos/${projectLogo ?? "placeholder.svg"}`}
       alt={projectTitle}
-      class="mx-auto h-32 w-auto object-contain mb-2 mt-2"
+      class="mx-auto h-auto w-auto object-contain mb-2 mt-2"
     />
   </a>
   <div
-    class="bg-main dark:bg-mainAccent min-w-full h-100 border-black border-t-2"
+    class="bg-main dark:bg-mainAccent min-w-full h-auto border-black border-t-2"
   >
     <h2 class="text-xl font-semibold text-text dark:text-darkText">
       {projectTitle}

src/components/ProjectsSection.astro

@@ -1,28 +1,38 @@
 ---
-import MainLayout from "../layouts/MainLayout.astro";
 import ProjectCard from "../components/ProjectCard.astro";
 
 const pageTitle = "Projects";
 const allProjects = await Astro.glob("../pages/projects/*.mdx");
+const cardStyles = [
+  'col-span-2 row-span-1',
+  'col-span-2 row-span-1',
+  'col-span-1 row-span-4',
+  'col-span-2 row-span-2',
+  'col-span-1 row-span-2',
+  'col-span-3 row-span-2'
+];
 ---
-
+<div class="flex items-center justify-center w-full h-full">
   <div
-    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 min-h-screen" id="projects"
+    class="grid grid-cols-4 grid-rows-4 gap-4 p-2 rounded-lg shadow-lg max-h-full" id="projects"
   >
     {
       allProjects
         .filter((project) => project.frontmatter.isPrivate === false)
-        .map((project) => {
+        .map((project, index) => {
           const projectSlug = project.url.split("/").pop().replace(".md", "");
+          const styleIndex = index % cardStyles.length; // Ensure we loop through styles if there are more projects than styles
           return (
             <ProjectCard
               projectTitle={project.frontmatter.projectTitle}
               projectLogo={project.frontmatter.projectLogo}
               repositoryLinks={project.frontmatter.repositoryLinks}
               projectSlug={projectSlug}
               technologiesList={project.frontmatter.technologiesList}
+              className={cardStyles[styleIndex]} // Apply a different style to each card
             />
           );
         })
     }
   </div>
+</div>