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,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>
   );

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);
+}