From a36cec04c79425b2c3f5e16aa04dc45c5129f183 Mon Sep 17 00:00:00 2001
From: Denshooter <dennis@konkol.net>
Date: Sat, 22 Feb 2025 23:16:36 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20responsive=20masonry?=
 =?UTF-8?q?=20layout=20for=20projects=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/Projects.tsx | 59 +++++++++++++++++++------------------
 app/globals.css             | 19 +++++++++++-
 package-lock.json           |  9 +++++-
 package.json                |  3 +-
 4 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index 5fec402..e084a34 100644
--- a/app/components/Projects.tsx
+++ b/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>
   );
diff --git a/app/globals.css b/app/globals.css
index c2b3259..c59bd8e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -196,4 +196,21 @@ body {
 
 .animate-fade-out {
     animation: fadeOut 3s forwards;
-}
\ No newline at end of file
+}
+
+.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);
+}
diff --git a/package-lock.json b/package-lock.json
index 59346b2..79c241a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "node-fetch": "^3.3.2",
         "nodemailer": "^6.10.0",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-responsive-masonry": "^2.7.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -9249,6 +9250,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-responsive-masonry": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.7.1.tgz",
+      "integrity": "sha512-Q+u+nOH87PzjqGFd2PgTcmLpHPZnCmUPREHYoNBc8dwJv6fi51p9U6hqwG8g/T8MN86HrFjrU+uQU6yvETU7cA==",
+      "license": "MIT"
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index e6b8cab..7ec56f7 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "node-fetch": "^3.3.2",
     "nodemailer": "^6.10.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-responsive-masonry": "^2.7.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",