Merge branch 'EshaanAgg:main' into main

src/components/Footer.astro

@@ -39,17 +39,17 @@ import COPSLogo from "../assets/images/cops_logo.png";
             class="logo-camera"
             src={COPSLogo}
             alt="COPS Logo"
-            width={100}
-            height={100}
+            width={200}
+            height={200}
           />
         </a>
       </span>
 
-      <span class="text-2xl text-gray-500 text-center dark:text-gray-400">
+      <span class="text-5xl text-gray-500 text-center dark:text-gray-400">
         <a href="https://sdg.copsiitbhu.co.in/" class="glitch" target="_blank">
-          <span class="mainText skew hover:underline"
+          <span class="mainText skew"
             >COPS SDG
-            <span class="backText glitch hover:underline">COPS SDG</span>
+            <span class="backText glitch">COPS SDG</span>
           </span>
         </a>
       </span>

src/components/home/OrganizationCard.astro

@@ -11,12 +11,14 @@ const { id, name, logoUrl, skills } = Astro.props;
 //We will only display the non-empty and (at max) the most frequent 6 skills
 
 const filtertedSkills = skills.filter((skill) => skill != "").slice(0, 6);
+if (skills.length > filtertedSkills.length) filtertedSkills.push("...");
+
 const description =
   "CNCF is the open source, vendor-neutral hub of cloud native computing, hosting projects....";
 ---
 
 <div
-  class="lg:w-[380px] lg:h-[450px] sm:w-[380px] sm:h-[450px] rounded-md bg-dark-blue mx-auto py-auto border-[3px] border-highlight-blue card hover:border-[5px] flex flex-col"
+  class="lg:w-[380px] sm:w-[380px] rounded-3xl bg-dark-blue mx-auto py-auto border-[3px] border-highlight-blue card hover:border-[5px] flex flex-col justify-center"
 >
   <div class="flex flex-col justify-center items-center p-4 gap-5 mx-auto">
     <!-- Logo -->
@@ -49,8 +51,8 @@ const description =
     <!-- Skills -->
     {
       filtertedSkills.length !== 0 && (
-        <div class="flex flex-col mx-auto pl-5">
-          <h2 class="text-white">Required Skills</h2>
+        <div class="flex flex-col mx-auto p-2">
+          <h2 class="text-white flex justify-center">Required Skills</h2>
           <div class="flex flex-wrap items-center justify-self-center gap-[10px] pt-2">
             {filtertedSkills.map((skill) => (
               <button class="inline-flex items-center px-3 py-1 text-sm font-medium text-center text-white bg-highlight-blue rounded-3xl">
@@ -63,7 +65,7 @@ const description =
     }
 
     <!-- Link to Organization page -->
-    <div class="flex mt-4 space-x-3 md:mt-6">
+    <div class="flex space-x-3">
       <a
         href=`/org/${id}`
         class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue border border-white rounded-3xl hover:bg-white hover:text-dark-blue hover:border-highlight-blue"

src/components/organization/PastProjectCard.tsx

@@ -1,45 +1,43 @@
 import React from "react";
-import { programTermToDisplayString } from "../../utilities/utilities";
 
 export const PastProjectCard = (props: ProjectThumbnail) => {
-  const { id, name, skills, programTerm, description, projectUrl } = props;
+  const { id, name, skills, description, projectUrl } = props;
   return (
-    <div className="lg:w-[380px] lg:h-[450px] sm:w-[380px] sm:h-[450px] rounded-md overflow-hidden bg-dark-blue mx-auto border-[3px] border-highlight-blue  card hover:border-[5px]">
+    <div className="lg:w-[380px] sm:w-[380px] rounded-3xl bg-dark-blue mx-auto border-[3px] border-highlight-blue card hover:border-[5px] flex flex-row justify-center">
       <div className="flex flex-col justify-center items-center p-6 gap-5 mx-auto">
+        {/* Project Name */}
         <div className="h-[50px]">
           <h5 className="mb-1 text-xl font-semibold leading-6 text-center text-white">
             {name}
           </h5>
         </div>
-        <div className="flex flex-col md:flex-row gap-2 md:gap-6 md:items-center md:justify-center pt-[30px]">
-          <button
-            type="button"
-            className="inline-flex items-center px-6 py-1 text-sm font-medium text-center text-highlight-blue bg-dark-blue border border-highlight-blue"
-          >
-            {programTermToDisplayString(programTerm)}
-          </button>
-        </div>
-
+        {/* Project Description */}
         <div>
-          <p className="text-fade-grey h-[70px] text-sm text-center pt-[10px]">
+          <p className="text-fade-grey text-sm text-center p-[8px]">
             {description.length > 100
               ? description.substring(0, 100) + "..."
               : description}
           </p>
         </div>
+
+        {/* Skills listed for the project */}
         {skills.length !== 0 && (
           <div className="flex flex-col mx-auto pl-5">
-            <h2 className="text-white">Required Skills</h2>
+            <h2 className="text-white flex justify-center">Required Skills</h2>
             <div className="flex flex-wrap items-center justify-self-center gap-[10px] pt-2">
               {skills.map((skill) => (
-                <button className="inline-flex items-center px-3 py-1 text-sm font-medium text-center text-white bg-highlight-blue rounded-3xl">
+                <button
+                  className="inline-flex items-center px-3 py-1 text-sm font-medium text-center text-white bg-highlight-blue rounded-3xl"
+                  key={skill}
+                >
                   {skill}
                 </button>
               ))}
             </div>
           </div>
         )}
 
+        {/* Project Details button */}
         <div className="flex flex-col md:flex-row gap-2 md:gap-6 md:items-center md:justify-center">
           <a href={`/project/${id}`} target="_blank">
             <button
@@ -50,6 +48,7 @@ export const PastProjectCard = (props: ProjectThumbnail) => {
             </button>
           </a>
 
+          {/* View project on LFX button */}
           <a href={projectUrl} target="_blank">
             <button
               type="button"

src/components/organization/ProjectNavbar.tsx

@@ -9,43 +9,73 @@ interface PropType {
   allProjects: ProjectThumbnail[];
 }
 
-export const ProjectNavbar = ({ allProjects }: PropType) => {
-  const projectYears = extractUniqueValues(
+const getProjectTerms = (
+  allProjects: ProjectThumbnail[],
+  activeYear: number,
+): ("Term 1" | "Term 2" | "Term 3")[] => {
+  return extractUniqueValues(
     allProjects
-      .map((proj: ProjectThumbnail) => proj.programYear)
+      .filter((proj: ProjectThumbnail) => proj.programYear === activeYear)
+      .map((proj: ProjectThumbnail) => proj.programTerm)
       .sort(function (a, b) {
-        return b - a; // Compare in descending order
+        return programTermToIndex(a) - programTermToIndex(b); // Compare in ascending order
       }),
   );
+};
 
-  const projectTerms = extractUniqueValues(
+const getProjects = (
+  allProjects: ProjectThumbnail[],
+  activeYear: number,
+  activeTerm: string,
+) => {
+  return allProjects.filter(
+    (proj) => proj.programYear == activeYear && proj.programTerm == activeTerm,
+  );
+};
+
+export const ProjectNavbar = ({ allProjects }: PropType) => {
+  const projectYears = extractUniqueValues(
     allProjects
-      .map((proj: ProjectThumbnail) => proj.programTerm)
+      .map((proj: ProjectThumbnail) => proj.programYear)
       .sort(function (a, b) {
-        return programTermToIndex(a) - programTermToIndex(b); // Compare in ascending order
+        return b - a; // Compare in descending order
       }),
   );
 
   const [activeYear, setActiveYear] = useState(projectYears[0]);
+  const [projectTerms, setProjectTerms] = useState(
+    getProjectTerms(allProjects, activeYear),
+  );
   const [activeTerm, setActiveTerm] = useState(projectTerms[0]);
-  const [activeProjects, setActiveProjects] = useState<ProjectThumbnail[]>([]);
+  const [activeProjects, setActiveProjects] = useState(
+    getProjects(allProjects, activeYear, activeTerm),
+  );
 
   useEffect(() => {
-    setActiveProjects(
-      allProjects.filter(
-        (proj) =>
-          proj.programYear == activeYear && proj.programTerm == activeTerm,
-      ),
+    const filteredTerms = getProjectTerms(allProjects, activeYear);
+    const filteredProjects = getProjects(
+      allProjects,
+      activeYear,
+      filteredTerms[0],
     );
-  }, [activeYear, activeTerm]);
+
+    setProjectTerms(filteredTerms);
+    setActiveTerm(filteredTerms[0]);
+    setActiveProjects(filteredProjects);
+  }, [activeYear]);
+
+  // Update the active projects based on the project term and year
+  useEffect(() => {
+    setActiveProjects(getProjects(allProjects, activeYear, activeTerm));
+  }, [activeTerm]);
 
   return (
     <div>
       {/* Year Navigation Bar */}
       <div className="relative">
         <div className="navYear flex justify-center gap-[70px]">
           {projectYears.map((year) => (
-            <div
+            <button
               key={year}
               onClick={() => {
                 setActiveYear(year);
@@ -57,7 +87,7 @@ export const ProjectNavbar = ({ allProjects }: PropType) => {
               } pb-10`}
             >
               {year}
-            </div>
+            </button>
           ))}
         </div>
       </div>
@@ -66,7 +96,7 @@ export const ProjectNavbar = ({ allProjects }: PropType) => {
       <div className="flex justify-center gap-[40px] pb-[40px]">
         {projectTerms.map((term) => (
           <button
-            key={term}
+            key={`${activeYear}-${term}`}
             onClick={() => {
               setActiveTerm(term);
             }}
@@ -84,7 +114,7 @@ export const ProjectNavbar = ({ allProjects }: PropType) => {
       {/* Render the project cards */}
       <div className=" flex flex-wrap justify-center gap-[20px] ">
         {activeProjects.map((project) => (
-          <PastProjectCard {...project} />
+          <PastProjectCard {...project} key={project.id} />
         ))}
       </div>
     </div>

src/data/team.json

@@ -3,7 +3,7 @@
     "name": "Eshaan Aggarwal",
     "image": "EshaanAgg.jpg",
     "role": "maintainer",
-    "description": "I love making software break.",
+    "description": "I love breaking software.",
     "skills": ["Go", "Rust", "TypeScript"],
     "socials": {
       "github": "https://github.com/EshaanAgg",