Dev (#45)

* 🚀 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

@@ -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 ${

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,14 +48,18 @@ 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">
+      <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 }}
+          >
+            <Masonry gutter="16px">
               {projects.map((project, index) => (
                 <Link
                   key={project.id}
@@ -65,23 +70,21 @@ export default function Projects() {
                   className="cursor-pointer"
                 >
                   <div
-              className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+                    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>
+                    <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>
+          </ResponsiveMasonry>
+        )}
       </div>
     </section>
   );

app/globals.css

@@ -197,3 +197,20 @@ 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);
+}

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",

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",