From 318b13bcf61fcbb92e1c37122277f985286a67e0 Mon Sep 17 00:00:00 2001
From: aaron-6960 <138325645+aaron-6960@users.noreply.github.com>
Date: Wed, 18 Sep 2024 19:35:56 +0530
Subject: [PATCH] fixed: issue #237

---
 src/Components/CollabFooter/CollabFooter.scss |  2 +-
 src/Pages/Developers/DeveloperCard.js         |  2 +-
 src/Pages/Developers/Developers.js            | 17 +++++++++++++++++
 src/Pages/Developers/Developers.scss          |  6 +++---
 src/Pages/Projects/Projects.js                | 17 +++++++++++++++++
 5 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/Components/CollabFooter/CollabFooter.scss b/src/Components/CollabFooter/CollabFooter.scss
index 9b6dbce7..def3c069 100644
--- a/src/Components/CollabFooter/CollabFooter.scss
+++ b/src/Components/CollabFooter/CollabFooter.scss
@@ -1,7 +1,7 @@
 // File: iedc-collab/src/Components/CollabFooter.scss
 
 .footer__main {
-  position: fixed; /* Ensures the footer stays at the bottom */
+  position: relative; /* Ensures the footer stays at the bottom */
   bottom: 0;
   width: 100%; /* Takes full width of the viewport */
   padding: 10px 20px; /* Adjusted padding for smaller size */
diff --git a/src/Pages/Developers/DeveloperCard.js b/src/Pages/Developers/DeveloperCard.js
index 0edc0d90..6c268c40 100644
--- a/src/Pages/Developers/DeveloperCard.js
+++ b/src/Pages/Developers/DeveloperCard.js
@@ -12,7 +12,7 @@ const DeveloperCard = ({ user, handleClick }) => {
   const username = user.name !== undefined ? user.name.toLowerCase() : null
   return (
     <div
-      data-aos="zoom-in"
+      //data-aos="zoom-in"
       className="developer-card"
       key={user.id}
       style={{ cursor: "pointer" }}
diff --git a/src/Pages/Developers/Developers.js b/src/Pages/Developers/Developers.js
index d615e722..551bb0d5 100644
--- a/src/Pages/Developers/Developers.js
+++ b/src/Pages/Developers/Developers.js
@@ -9,6 +9,8 @@ import SuspenseLoader from "../../Components/SuspenseLoader/SuspenseLoader";
 import { ProjectContext } from "../../contexts/ProjectContext";
 import { Pagination } from "@mui/material";
 import { ThemeContext } from "../../App";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const Developers = () => {
   const { developers, loading, setSelectedDevelopers } = useContext(
@@ -50,6 +52,21 @@ const Developers = () => {
     setFilteredDevelopers(filteredDevs);
   };
 
+  useEffect(() => {
+    AOS.init();
+    let resizeTimeout;
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        AOS.refresh();
+      }, 200);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   useEffect(() => {
     if (!developers) return;
 
diff --git a/src/Pages/Developers/Developers.scss b/src/Pages/Developers/Developers.scss
index 569c773b..45d0f049 100644
--- a/src/Pages/Developers/Developers.scss
+++ b/src/Pages/Developers/Developers.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  overflow-x: hidden;
+  overflow: hidden;
   padding-bottom: 5%;
 }
 .drawer__container button:focus {
@@ -28,14 +28,14 @@
   column-gap: 10%;
   justify-content: center;
   /* Set a fixed height */
-  height: calc(4.1 * (107px + 30px)); /* Adjust based on your card height and row gap */
-  overflow-y: scroll; /* Enable vertical scrolling */
+  height: fit-content; /* Adjust based on your card height and row gap */
 }
 .developer-column{
   display:flex;
   align-items: center;
   justify-content: space-around;
   flex-direction: column;
+  gap: 50px;
 }
 .developer-card {
   width: 528px;
diff --git a/src/Pages/Projects/Projects.js b/src/Pages/Projects/Projects.js
index 0f261291..37055cd5 100644
--- a/src/Pages/Projects/Projects.js
+++ b/src/Pages/Projects/Projects.js
@@ -9,6 +9,8 @@ import { ProjectContext } from "../../contexts/ProjectContext";
 import { Pagination } from "@mui/material";
 import Drawer from "../Developers/Drawer";
 import { ThemeContext } from "../../App";
+import AOS from "aos";
+import "aos/dist/aos.css";
 const Projects = () => {
   // const [projects, setProjects] = useState([]);
   const { projects, loading } = useContext(ProjectContext);
@@ -68,6 +70,21 @@ const Projects = () => {
     setPages(Math.ceil(filteredProjects.length / 12));
   };
 
+    useEffect(() => {
+      AOS.init();
+      let resizeTimeout;
+      const handleResize = () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          AOS.refresh();
+        }, 200);
+      };
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }, []);
+
   useEffect(() => {
     filterProjects();
     // eslint-disable-next-line react-hooks/exhaustive-deps