Removed unused files, updated zain and alqama in alumnis, removes teams section completely, fixed search bar in opensource

components/Achievements/Achievements.module.scss

@@ -3,13 +3,15 @@
 .achYear {
   width: 100%;
   margin: 50px auto;
+
   h3 {
     text-align: center;
     width: 40%;
     margin: auto;
     color: $light;
     font-size: 1.8rem;
     border-bottom: 2px solid $light;
+
     padding: {
       bottom: 10px;
     }
@@ -24,9 +26,10 @@
     flex-wrap: wrap;
 
     .ach {
-      width: 250px;
-      height: 300px;
+      width: 300px;
+      height: 360px;
       margin: 30px;
+
       // background-color: rebeccapurple;
       .achImg {
         height: 70%;
@@ -35,6 +38,7 @@
         background-position: center;
         background-repeat: no-repeat;
       }
+
       .achName {
         padding-top: 10px;
         height: 30%;

components/Teams/Alumni/Alumni.js → components/Alumni/Alumni.js

@@ -1,7 +1,7 @@
-import Hero from '../../Hero/Hero';
+import Hero from '../Hero/Hero';
 import styles from './Alumni.module.scss';
-import Card from '../../Card/Card';
-import { AlumniList } from '../../../data';
+import Card from '../Card/Card';
+import { AlumniList } from '../../data';
 import { useState } from 'react';
 
 let updatedList = [];
@@ -88,7 +88,7 @@ const Alumni = () => {
         <input
           className={styles.search}
           type='search'
-          placeholder='Search by keyword'
+          placeholder='Search name of Alumni'
           onChange={(ev) => selKeyword(ev)}
         />
         <div className={styles.dropdown}>

components/Teams/Alumni/Alumni.module.scss → components/Alumni/Alumni.module.scss

@@ -1,4 +1,4 @@
-@import '../../variables';
+@import '../variables';
 
 .filter {
   display: flex;

components/ContributionCard/ContributionCard.js

@@ -26,7 +26,13 @@ const ContributionCard = ({
         <div className={styles.contributor}>{repoName}</div>
         <div className={styles.desc}>{description}</div>
         <div className={styles.meta}>
-          <span className={styles.competition}>{competition}</span>
+          <span
+            className={`${styles.competition} ${
+              styles[competition?.toLowerCase()] || ''
+            }`}
+          >
+            {competition}
+          </span>
         </div>
         <div className={styles.icons}>
           <GitHubLink githubLink={githubLink} />

components/ContributionCard/ContributionCard.module.scss

@@ -6,9 +6,17 @@
   min-height: 22rem;
   display: flex;
   flex-direction: column;
-  background-color: #1a1a1a;
+  background-color: rgba(26, 26, 26, 0.6);
+  backdrop-filter: blur(5px);
   border-radius: 10px;
   overflow: hidden;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: rgba(26, 26, 26, 0.8);
+    transform: translateY(-5px);
+    cursor: pointer;
+  }
 
   .top {
     height: 6rem;
@@ -73,6 +81,16 @@
         background-color: #0d0d0d;
         color: #4caf50;
         border: 1px solid #4caf50;
+
+        &.lfx {
+          color: #ff4d4d;
+          border-color: #ff4d4d;
+        }
+
+        &.ospp {
+          color: #ffeb3b;
+          border-color: #ffeb3b;
+        }
       }
     }
 

components/Teams/Opensource/Opensource.js → components/Opensource/Opensource.js

@@ -1,89 +1,93 @@
-import Hero from '../../Hero/Hero';
+import Hero from '../Hero/Hero';
 import styles from './Opensource.module.scss';
-import ContributionCard from '../../ContributionCard/ContributionCard.js';
-import { OpenSourceList } from '../../../data';
-import { useState } from 'react';
-
-let updatedList = [];
-
-const competitions = ['GSoC', 'OSPP', 'LFX', 'Other'];
+import ContributionCard from '../ContributionCard/ContributionCard.js';
+import { OpenSourceList } from '../../data';
+import { useState, useEffect, useMemo } from 'react';
 
+const competitions = ['GSoC', 'OSPP', 'LFX'];
 const years = [2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018];
 
-OpenSourceList.forEach((year) => {
-  year.contributions.forEach((contribution) => {
-    updatedList.push({
-      repoName: contribution.repoName,
-      repoIcon: contribution.repoIcon,
-      description: contribution.description,
-      prLink: contribution.prLink,
-
-      githubLink: contribution.githubLink,
-      contributor: contribution.contributor,
-      competition: contribution.competition,
-      year: year.year,
-    });
-  });
-});
-
-let filteredList = updatedList;
-
 const OpenSource = () => {
   const [clicked, setClicked] = useState(false);
   const [clickedComp, setClickedComp] = useState(false);
   const [filYear, setFilYear] = useState('Show all');
   const [filComp, setFilComp] = useState('Show all');
   const [key, setKey] = useState('');
 
-  const toggleYear = () => {
-    setClicked(!clicked);
-    setClickedComp(false);
-  };
+  // Memoize the flattened list to avoid re-calculation on every render
+  const updatedList = useMemo(() => {
+    const list = [];
+    if (OpenSourceList) {
+      OpenSourceList.forEach((year) => {
+        year.contributions.forEach((contribution) => {
+          if (competitions.includes(contribution.competition)) {
+            list.push({
+              repoName: contribution.repoName,
+              repoIcon: contribution.repoIcon,
+              description: contribution.description,
+              prLink: contribution.prLink,
+              githubLink: contribution.githubLink,
+              contributor: contribution.contributor,
+              competition: contribution.competition,
+              year: year.year,
+              language: contribution.language || '', // Ensure language exists
+            });
+          }
+        });
+      });
+    }
+    return list;
+  }, []);
 
-  const toggleComp = () => {
-    setClickedComp(!clickedComp);
-    setClicked(false);
-  };
+  const [filteredList, setFilteredList] = useState(updatedList);
 
-  const applyFilters = (year, comp, keyword) => {
-    filteredList = updatedList.filter((contribution) => {
-      const matchesYear = year === 'Show all' || contribution.year == year;
+  // Update filteredList whenever filters change
+  useEffect(() => {
+    const newList = updatedList.filter((contribution) => {
+      const matchesYear =
+        filYear === 'Show all' || contribution.year == filYear;
       const matchesComp =
-        comp === 'Show all' || contribution.competition === comp;
+        filComp === 'Show all' || contribution.competition === filComp;
+
+      const keyword = key.toLowerCase();
       const matchesKeyword =
         keyword === '' ||
-        contribution.repoName.toLowerCase().includes(keyword) ||
-        contribution.description.toLowerCase().includes(keyword) ||
-        contribution.language.toLowerCase().includes(keyword) ||
-        contribution.contributor.toLowerCase().includes(keyword);
+        (contribution.repoName &&
+          contribution.repoName.toLowerCase().includes(keyword)) ||
+        (contribution.description &&
+          contribution.description.toLowerCase().includes(keyword)) ||
+        (contribution.language &&
+          contribution.language.toLowerCase().includes(keyword)) ||
+        (contribution.contributor &&
+          contribution.contributor.toLowerCase().includes(keyword));
 
       return matchesYear && matchesComp && matchesKeyword;
     });
+    setFilteredList(newList);
+  }, [filYear, filComp, key, updatedList]);
+
+  const toggleYear = () => {
+    setClicked(!clicked);
+    setClickedComp(false);
+  };
+
+  const toggleComp = () => {
+    setClickedComp(!clickedComp);
+    setClicked(false);
   };
 
   const selYear = (year) => {
     setFilYear(year);
-    applyFilters(year, filComp, key);
     setClicked(false);
   };
 
   const selComp = (comp) => {
     setFilComp(comp);
-    applyFilters(filYear, comp, key);
     setClickedComp(false);
   };
 
   const selKeyword = (ev) => {
-    const value = ev.currentTarget.value.toLowerCase();
-    setKey(value);
-
-    if (value === '') {
-      setFilYear('Show all');
-      setFilComp('Show all');
-      filteredList = updatedList;
-    } else {
-      applyFilters(filYear, filComp, value);
-    }
+    setKey(ev.currentTarget.value);
   };
 
   return (
@@ -99,7 +103,8 @@ const OpenSource = () => {
         <input
           className={styles.search}
           type='search'
-          placeholder='Search by repo, language or contributor'
+          placeholder='Search name of the contributor'
+          value={key}
           onChange={(ev) => selKeyword(ev)}
         />
 

components/Teams/Opensource/Opensource.module.scss → components/Opensource/Opensource.module.scss

@@ -1,4 +1,4 @@
-@import '../../variables';
+@import '../variables';
 
 .filter {
   display: flex;

components/Sponsors/Sponsors.module.scss

@@ -208,6 +208,5 @@
         width: 100px;
       }
     }
-
   }
 }