✨ feat: add responsive masonry layout for projects display

app/components/Projects.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 
 interface Project {
   slug: string;
@@ -47,41 +48,41 @@ export default function Projects() {
     fetchProjects();
   }, []);
 
-  const numberOfProjects = projects.length;
   return (
     <section
       id="projects"
       className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
     >
       <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
-      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-        {projects.map((project, index) => (
-          <Link
-            key={project.id}
-            href={{
-              pathname: `/projects/${project.slug}`,
-              query: { project: JSON.stringify(project) },
-            }}
-            className="cursor-pointer"
-          >
-            <div
-              className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-              style={{ animationDelay: `${index * 0.1}s` }}
-            >
-              <h3 className="text-2xl font-bold text-gray-800">
-                {project.title}
-              </h3>
-              <p className="mt-2 text-gray-500">{project.meta_description}</p>
-            </div>
-          </Link>
-        ))}
-        <div
-          className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-          style={{ animationDelay: `${(numberOfProjects + 1) * 0.1}s` }}
-        >
-          <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
-          <p className="mt-2 text-gray-500">...</p>
-        </div>
+      <div className="mt-6">
+        <ResponsiveMasonry
+                columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
+                gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}        >
+          <Masonry >
+            {projects.map((project, index) => (
+              <Link
+                key={project.id}
+                href={{
+                  pathname: `/projects/${project.slug}`,
+                  query: { project: JSON.stringify(project) },
+                }}
+                className="cursor-pointer w-full"
+              >
+                <div
+                  className="project-card"
+                  style={{ animationDelay: `${index * 0.1}s` }}
+                >
+                  <h3 className="text-2xl font-bold text-gray-800">
+                    {project.title}
+                  </h3>
+                  <p className="mt-2 text-gray-500">
+                    {project.meta_description}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </Masonry>
+        </ResponsiveMasonry>
       </div>
     </section>
   );

app/globals.css

@@ -196,4 +196,21 @@ body {
 
 .animate-fade-out {
     animation: fadeOut 3s forwards;
-}
+}
+
+.project-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: rgba(255, 255, 255, 0.45);
+    border-radius: 16px;
+    padding: 16px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    width: 100%;
+    height: auto;
+}
+
+.project-card:hover {
+    transform: translateY(-5px);
+}