Merge branch 'alumni-page' into develop

components/Header.tsx

@@ -35,17 +35,28 @@ const Header = ({darkHeader = false} : {darkHeader? :boolean}) => {
                     About
                 </div>
 
-                <div className={isActive('/People') ? styles.active : styles.inactive} onClick={() => router.push('/People')}>
-                    People
+                <div className={`${isActive('/People/People') || isActive('/People/Alumni')? styles.active : styles.inactive} ${styles.menuItem}`}
+                     onClick={() => router.push('/People/People')}>
+                    <div className={styles.itemWrapper}>
+                        People
+                        <div className={styles.arrowDown}></div>
+                    </div>
+                    <ul className={styles.dropdown}>
+                        <li className={isActive('/People/People') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/People/People')}>People</li>
+                        <li className={isActive('/People/Alumni') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/People/Alumni')}>Alumni</li>
+                        {/*<li className={isActive('/Activities/Masterclasses') ? styles.activeDropdown  : ''} onClick={() => router.push('/Activities/Masterclasses')}>Masterclasses</li>*/}
+                    </ul>
                 </div>
 
-                <div className={`${isActive('/Activities/Activities') || isActive('/Activities/Events') || isActive('/Activities/StudyGroups') || isActive('/Activities/Masterclasses') ? styles.active : styles.inactive} ${styles.menuItem}`}
-                     onClick={() => router.push('/Activities/Activities')}>
+                <div
+                    className={`${isActive('/Activities/Activities') || isActive('/Activities/Events') || isActive('/Activities/StudyGroups') || isActive('/Activities/Masterclasses') ? styles.active : styles.inactive} ${styles.menuItem}`}
+                    onClick={() => router.push('/Activities/Activities')}>
                     <div className={styles.itemWrapper}>
                         Activities
                         <div className={styles.arrowDown}></div>
                     </div>
                     <ul className={styles.dropdown}>
+                        <li className={isActive('/Activities/Activities') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/Activities/Activities')}>Activities</li>
                         <li className={isActive('/Activities/Events') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/Activities/Events')}>Events</li>
                         {/*<li className={isActive('/Activities/Masterclasses') ? styles.activeDropdown  : ''} onClick={() => router.push('/Activities/Masterclasses')}>Masterclasses</li>*/}
                         <li className={isActive('/Activities/StudyGroups') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/Activities/StudyGroups')}>Study Groups</li>

pages/AboutUs.tsx

@@ -26,10 +26,11 @@ const sections: SectionAboutUsElement[] = [
     {
         title: "Mu Nu Chapter - Today",
         description: "Today, the Mu Nu chapter of IEEE-HKN at the Polytechnic University of Turin is a vibrant reality carried forward by an ever-growing group of students passionate about computer science, electronics, and much more. For us, HKN represents a new way to acquire skills and knowledge while at the same time nurturing our passions in an inspiring and stimulating environment.",
-        year: "2023",
+        year: new Date().getFullYear().toString(),
     },
 
 ]
+
 export default function AboutUs() {
     const sectionsRef = useRef<HTMLDivElement>(null);
     const [svgWidth, setSvgWidth] = useState(0);

pages/People/Alumni.tsx

@@ -0,0 +1,248 @@
+import Layout from "../../components/Layout";
+import styles from '@/styles/People/Alumni.module.scss'
+import RoundButton from "@/components/molecules/RoundButton";
+import { useRouter } from "next/router";
+import {MouseEventHandler, useEffect, useState} from "react";
+import ArrowButton from "@/components/molecules/ArrowButton";
+
+enum BadgeType {
+    Head,
+    Board,
+    Inducted
+}
+
+// Images should be in a 4:5 ratio
+const AlumniData : AlumnoProps[] = [
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
+        {
+            type: BadgeType.Head,
+            year: 2021,
+            role: "Head of Communications"
+        },
+        {
+            type: BadgeType.Board,
+            year: 2020,
+            role: "Vice President"
+        },
+        {
+            type: BadgeType.Inducted,
+            year: 2019,
+            role: "Member of Comms"
+        }
+            ]
+    },
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
+            {
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
+            },
+            {
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
+            },
+            {
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
+        ]
+    },
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
+            {
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
+            },
+            {
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
+            },
+            {
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
+        ]
+    },
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
+            {
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
+            },
+            {
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
+            },
+            {
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
+        ]
+    },
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
+            {
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
+            },
+            {
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
+            },
+            {
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
+        ]
+    },
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
+            {
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
+            },
+            {
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
+            },
+            {
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
+        ]
+    },
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
+            {
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
+            },
+            {
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
+            },
+            {
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
+        ]
+    },
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
+            {
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
+            },
+            {
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
+            },
+            {
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
+        ]
+    },
+];
+
+export default function Alumni() {
+    const router = useRouter();
+
+    return (
+        <Layout triangles>
+
+            <div className={styles.descriptionContainer}>
+                <img className={styles.descriptionContainer__image} src="/Home/vision.jpg" alt="Vision"/>
+                <div className={styles.descriptionContainer__right}>
+                    <text className={styles.descriptionContainer__right__title}>Alumni</text>
+                    <text className={styles.descriptionContainer__right__subtitle}>ETA KAPPA MENTORING</text>
+                    <text className={styles.descriptionContainer__right__text}>Since 2017 we are dedicated to encouraging excellence in the IEEE-designated fields of interest, continuing to reinvent ourselves to meet the needs of our members and society overall</text>
+                </div>
+            </div>
+
+            <div className={styles.alumniContainer}>
+                <text className={styles.alumniContainer__directory}>Directory</text>
+                <text className={styles.alumniContainer__alumni}>Alumni</text>
+                <div className={styles.alumniContainer__grid}>
+                    {AlumniData.map((al, index) => (
+                        <Alumno alumno={al} key={index} />
+                    ))}
+                </div>
+            </div>
+
+        </Layout>
+    )
+}
+
+function Alumno({ alumno }: {
+    alumno: AlumnoProps,
+}) {
+    return (
+        <div className={styles.boardMember} onClick={() => {}}>
+            <div className={styles.boardImageContainer}>
+                <div className={styles.boardCard} />
+                <img className={styles.boardMemberImage} src={alumno.imageSrc} alt={alumno.name} loading="lazy" />
+            </div>
+            <text className={styles.boardMemberName}>{alumno.name}</text>
+        </div>
+    );
+}
+
+export interface AlumnoProps {
+    name: string,
+    imageSrc?: string,
+    linkedIn?: string,
+    badges?: Badge[],
+}
+
+interface Badge {
+    type: BadgeType,
+    year: number,
+    role: string,
+}

pages/People.tsx → pages/People/People.tsx

@@ -1,4 +1,4 @@
-import Layout from "../components/Layout";
+import Layout from "../../components/Layout";
 import styles from '@/styles/People/People.module.scss'
 import RoundButton from "@/components/molecules/RoundButton";
 import { useRouter } from "next/router";

styles/Activities/Activities.module.scss

@@ -294,6 +294,13 @@
             text-transform: uppercase;
             background-color: #061E33;
             margin-top: 20px;
+            color: #F2F2F2;
+        }
+
+        &__button:hover {
+            background: transparent;
+            border-color: #061E33;
+            color: #061E33;
         }
     }
 

styles/Home/Home.module.css

@@ -35,7 +35,8 @@
 .vision, .origins, .project {
     font-weight: 400;
     font-size: 24px;
-    margin: 15px 0 35px 0;
+    margin: 0 0 35px 0;
+    padding-top: 30px;
 }
 
 .titleButtons,.visionButtons {

styles/People/Alumni.module.scss

@@ -0,0 +1,61 @@
+.descriptionContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  width: 85%;
+  max-width: 1450px;
+  margin-top: 50px;
+  overflow: hidden;
+
+  &__image {
+    margin: 0 3vw;
+    object-fit: cover;
+    width: 45%;
+    height: 400px;
+    border-radius: 20px;
+
+    @media (max-width: 800px) {
+      display: none;
+    }
+  }
+
+  &__right {
+    display: flex;
+    margin: 0 1vw;
+    flex-direction: column;
+
+    &__title {
+      font-weight: 600;
+      font-size: 63px;
+      line-height: 63px;
+
+      @media (max-width: 550px) {
+        font-size: 50px;
+        line-height: 50px;
+      }
+    }
+
+    &__subtitle {
+      font-weight: 500;
+      font-size: 23px;
+
+      @media (max-width: 550px) {
+        font-size: 19px;
+      }
+    }
+
+    &__text {
+      font-weight: 300;
+      font-size: 24px;
+      margin: 0 0 35px 0;
+      padding-top: 30px;
+
+      @media (max-width: 550px) {
+        font-size: 17px;
+        padding-top: 10px;
+      }
+    }
+
+  }
+}