From 7cd50b4dca1cf573d7142d9cae1e0c3936cbd7b7 Mon Sep 17 00:00:00 2001
From: denshooter <44590296+denshooter@users.noreply.github.com>
Date: Sat, 22 Feb 2025 23:33:47 +0100
Subject: [PATCH] Dev (#45)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🚀 refactor: simplify deployment process in workflow file

* 🚀 chore: add IMAGE_NAME to GITHUB_ENV for deployment workflow

* ✨ chore: simplify deployment logging in workflow file

* 🚀 fix: correct container name in deployment script logic

* 🚀 refactor: rename job and streamline deployment steps

* Update README.md

* ✨ fix: prevent multiple form submissions in Contact component

* ✨ feat: honeypot and timestamp checks to form submission

* ✨ refactor: simplify contact form and improve UI elements

* ✨ feat: add responsive masonry layout for projects display

* ✨ style: Update project title size and improve layout visibility
---
 app/components/Contact.tsx  |  4 +--
 app/components/Projects.tsx | 61 +++++++++++++++++++------------------
 app/globals.css             | 19 +++++++++++-
 package-lock.json           |  9 +++++-
 package.json                |  3 +-
 5 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index b7a7109..aeb5e9c 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -96,10 +96,10 @@ export default function Contact() {
       id="contact"
       className={`p-10 ${isVisible ? "animate-fade-in" : "opacity-0"}`}
     >
-      <h2 className="text-4xl font-extrabold text-center text-gray-900 dark:text-white mb-8">
+      <h2 className="text-4xl font-bold text-center text-gray-900 mb-8">
         Get in Touch
       </h2>
-      <div className="bg-white/30 dark:bg-gray-800 p-8 rounded-3xl shadow-xl max-w-lg mx-auto">
+      <div className="bg-white/30 p-8 rounded-3xl shadow-xl max-w-lg mx-auto">
         {banner.show && (
           <div
             className={`mb-4 text-center rounded-full py-2 px-4 text-white ${
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index 5fec402..3ae5f5e 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,43 @@ 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"
+      <h2 className="text-4xl font-bold text-center text-gray-900">Projects</h2>
+      <div className="mt-6">
+        {isVisible && (
+          <ResponsiveMasonry
+            columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
           >
-            <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>
+            <Masonry gutter="16px">
+              {projects.map((project, index) => (
+                <Link
+                  key={project.id}
+                  href={{
+                    pathname: `/projects/${project.slug}`,
+                    query: { project: JSON.stringify(project) },
+                  }}
+                  className="cursor-pointer"
+                >
+                  <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",