Added previous execomm

src/pages/executive-committee.astro

@@ -11,16 +11,137 @@ import vp_log from '../assets/images/execomm/vp_log.png';
 import vp_marfin from '../assets/images/execomm/vp_marfin.png';
 import vp_pub from '../assets/images/execomm/vp_pub.png';
 import vp_sec from '../assets/images/execomm/vp_sec.png';
+
+// Historical Execomm Data
+const pastCommittees = [
+  { year: "AY 2024-2025", members: [
+    { role: "President", name: "Allysa Shaine Peñamante" },
+    { role: "Vice President for Academic Affairs", name: "Daenniel John Estavillo" },
+    { role: "Vice President for External Affairs", name: "Clarence Morales" },
+    { role: "Vice President for Internal Affairs", name: "Celgie Asuncion" },
+    { role: "Vice President for Logistics", name: "Jhafer Chrisnand Alday" },
+    { role: "Vice President for Marketing and Finance", name: "Edmark Renz Manayoba" },
+    { role: "Vice President for Publicity", name: "Charles Wincel Abello" },
+    { role: "Vice President for Secretariat", name: "Vince Harvey Ty" }
+  ]},
+  { year: "AY 2023-2024", members: [
+    { role: "President", name: "Patrick John Santisidad" },
+    { role: "Vice President for Academic Affairs", name: "Wynne Angelo Arcilla" },
+    { role: "Vice President for External Affairs", name: "Kier Quiambao" },
+    { role: "Vice President for Internal Affairs", name: "Hannah Isabel Basbas" },
+    { role: "Vice President for Logistics", name: "Vittorio Mercurio" },
+    { role: "Vice President for Marketing and Finance", name: "Kimberly Claire Paynor" },
+    { role: "Vice President for Publicity", name: "Angelica Cielo Doctor" },
+    { role: "Vice President for Secretariat", name: "Vince Harvey Ty" }
+  ]},
+  { year: "AY 2022-2023", members: [
+    { role: "President", name: "Rodney Golpe" },
+    { role: "Vice President for Academic Affairs", name: "Andre Mikhail Serra" },
+    { role: "Vice President for External Affairs", name: "Karl Clarence Camitan" },
+    { role: "Vice President for Internal Affairs", name: "Andrea Zefaniah Timpug" },
+    { role: "Vice President for Logistics", name: "Mikel Antonella Valeriano" },
+    { role: "Vice President for Marketing and Finance", name: "Elyssa Nicole Pablo" },
+    { role: "Vice President for Publicity", name: "Marc Andrei Salar" },
+    { role: "Vice President for Secretariat", name: "Jessica Marie Rondaris" }
+  ]},
+  { year: "AY 2021-2022", members: [
+    { role: "President", name: "Emil Tanciongco" },
+    { role: "Vice President for Academic Affairs", name: "Michelle Anne Agpalza" },
+    { role: "Vice President for External Affairs", name: "Jessica Marie Rondaris" },
+    { role: "Vice President for Internal Affairs", name: "Allen Joshua Dalangin" },
+    { role: "Vice President for Logistics", name: "Jomari Ganhinhin" },
+    { role: "Vice President for Marketing and Finance", name: "Ginzy Javier" },
+    { role: "Vice President for Publicity", name: "Mikel Antonella Valeriano" },
+    { role: "Vice President for Secretariat", name: "Jobelle Garces" }
+  ]},
+  { year: "AY 2020-2021", members: [
+    { role: "President", name: "Robert Allan Pesa" },
+    { role: "Vice President for Academic Affairs", name: "Federico Jose Dino" },
+    { role: "Vice President for External Affairs", name: "Emil Tanciongco" },
+    { role: "Vice President for Internal Affairs", name: "Patrick Domantay" },
+    { role: "Vice President for Logistics", name: "Jomari Ganhinhin" },
+    { role: "Vice President for Marketing and Finance", name: "Melchizedek Fermill" },
+    { role: "Vice President for Publicity", name: "Mikel Antonella Valeriano" },
+    { role: "Vice President for Secretariat", name: "Jan Marvin Moyco" }
+  ]},
+  { year: "AY 2019-2020", members: [
+    { role: "President", name: "Erwin Joshua Encisa" },
+    { role: "Vice President for Academic Affairs", name: "Seth Kelvin Escobedo" },
+    { role: "Vice President for External Affairs", name: "Moira Kelly Boloyos" },
+    { role: "Vice President for Internal Affairs", name: "Pauline Patricia Cristal" },
+    { role: "Vice President for Logistics", name: "Anne Nicole Peñaranda" },
+    { role: "Vice President for Marketing and Finance", name: "Gervionne Azizah Ferreras" },
+    { role: "Vice President for Publicity", name: "Anthony John Norona" },
+    { role: "Vice President for Secretariat", name: "Pauline Joy Roa" }
+  ]},
+  { year: "AY 2018-2019", members: [
+    { role: "President", name: "Pauline Patricia Cristal" },
+    { role: "Vice President for Academic Affairs", name: "Seth Kelvin Escobedo" },
+    { role: "Vice President for External Affairs", name: "Moira Kelly Boloyos" },
+    { role: "Vice President for Internal Affairs", name: "Carlo Jimenez" },
+    { role: "Vice President for Logistics", name: "Harvey John De Chavez" },
+    { role: "Vice President for Marketing and Finance", name: "Mary Joshua Santos" },
+    { role: "Vice President for Publicity", name: "Anthony John Norona" },
+    { role: "Vice President for Secretariat", name: "Pauline Joy Roa" }
+  ]},
+  { year: "AY 2017-2018", members: [
+    { role: "President", name: "Jason Patrick Hipolito" },
+    { role: "Vice President for Academic Affairs and Logistics", name: "Jazmine Day Vallejos" },
+    { role: "Vice President for External Affairs", name: "Pauline Patricia Cristal" },
+    { role: "Vice President for Internal Affairs", name: "Belle Sermeno" },
+    { role: "Vice President for Marketing and Finance", name: "Yna Ignacio" },
+    { role: "Vice President for Publicity", name: "Rodrigo Rafael Cruz" },
+    { role: "Vice President for Secretariat", name: "Ada Katrina Gascon" }
+  ]},
+  { year: "AY 2016-2017", members: [
+    { role: "President", name: "Charlton Paul Dy" },
+    { role: "Vice President for Academic Affairs and Logistics", name: "Jason Patrick Hipolito" },
+    { role: "Vice President for External Affairs", name: "Carl Allen Lim" },
+    { role: "Vice President for Internal Affairs", name: "Joshua Reginal Luzon" },
+    { role: "Vice President for Marketing and Finance", name: "Karen Astrud Eliza Avanzado" },
+    { role: "Vice President for Publicity", name: "Alvin Sanchez" },
+    { role: "Vice President for Secretariat", name: "Dan Lemuel Salado" }
+  ]},
+  { year: "AY 2015-2016", members: [
+    { role: "President", name: "Millianne Patriz Chaves" },
+    { role: "Vice President for Academic Affairs and Logistics", name: "Rommel Joshua Ortega" },
+    { role: "Vice President for External Affairs", name: "Carl Allen Lim" },
+    { role: "Vice President for Internal Affairs", name: "Ma. Cristina Anne Astudillo" },
+    { role: "Vice President for Marketing and Finance", name: "Francis Panganiban" },
+    { role: "Vice President for Publicity", name: "Deniel Aiden Go" },
+    { role: "Vice President for Secretariat", name: "Charlton Paul Dy" }
+  ]},
+  { year: "AY 2014-2015", members: [
+    { role: "President", name: "Vanessa Tan" },
+    { role: "Vice President for Academic and Logistics", name: "Joash Rodriguez" },
+    { role: "Vice President for External Affairs", name: "Vergel Villanueva" },
+    { role: "Vice President for Internal Affairs", name: "Gabriel dela Cruz" },
+    { role: "Vice President for Marketing and Finance", name: "Anthony Gonzaga" },
+    { role: "Vice President for Publicity", name: "Kevin Martin" },
+    { role: "Vice President for Secretariat", name: "Janette Salvatus" }
+  ]},
+  { year: "AY 2013-2014", members: [
+    { role: "President", name: "Rupert Calvin Sievert" },
+    { role: "Vice President for Academic Affairs", name: "Steven Matthew Cheng" },
+    { role: "Vice President for External Affairs", name: "Leur Labrador" },
+    { role: "Vice President for Internal Affairs", name: "Bryan Edward Esteves" },
+    { role: "Vice President for Marketing and Finance", name: "Mikhail Eñano" },
+    { role: "Vice President for Publicity", name: "Leur Labrador" }, /* Adjusted based on data provided */
+    { role: "Vice President for Secretariat", name: "Elaine Lee Ramos" }
+  ]}
+];
 ---
 
 <Layout title="Executive Committee | UP IECEP">
   <section class="execomm-section">
     <h1>Executive Committee</h1>
     
+    <!-- Banner Image -->
     <div class="banner-container">
       <img src={execomm_banner.src} alt="Executive Committee Banner" />
     </div>
 
+    <!-- 4x2 Photo Grid -->
     <div class="photo-grid">
       <div class="photo-card"><img src={pres.src} alt="President" /></div>
       <div class="photo-card"><img src={vp_acad.src} alt="Vice President for Academic Affairs" /></div>
@@ -31,8 +152,31 @@ import vp_sec from '../assets/images/execomm/vp_sec.png';
       <div class="photo-card"><img src={vp_pub.src} alt="Vice President for Publicity" /></div>
       <div class="photo-card"><img src={vp_sec.src} alt="Vice President for Secretariat" /></div>
     </div>
+
+    <!-- Past Committees Section -->
+    <div class="past-committees-wrapper">
+      <h2>Past Executive Committees</h2>
+      <div class="accordion-container">
+        {pastCommittees.map((committee) => (
+          <details class="committee-accordion">
+            <summary>{committee.year}</summary>
+            <div class="accordion-content">
+              <ul>
+                {committee.members.map((member) => (
+                  <li>
+                    <span class="role">{member.role}</span>
+                    <span class="name">{member.name}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </details>
+        ))}
+      </div>
+    </div>
   </section>
 
+  <!-- Modal Script stays exactly the same down here -->
   <div id="image-modal" class="image-modal">
     <span class="close-modal">&times;</span>
     <img class="modal-content" id="full-image">
@@ -45,13 +189,12 @@ import vp_sec from '../assets/images/execomm/vp_sec.png';
   const cards = document.querySelectorAll(".photo-card img");
   const closeBtn = document.querySelector(".close-modal");
 
-  // This simple check satisfies TypeScript's strict rules!
   if (modal && closeBtn && modalImg) {
     cards.forEach(img => {
       img.addEventListener("click", () => {
         modal.style.display = "flex";
         modalImg.src = (img as HTMLImageElement).src;
-        document.body.style.overflow = "hidden"; // Prevent scrolling when open
+        document.body.style.overflow = "hidden"; 
       });
     });
 
@@ -60,7 +203,6 @@ import vp_sec from '../assets/images/execomm/vp_sec.png';
       document.body.style.overflow = "auto";
     });
 
-    // Close if user clicks outside the image
     modal.addEventListener("click", (e) => {
       if (e.target === modal) {
         modal.style.display = "none";

src/styles/executive-committee.scss

@@ -92,6 +92,108 @@
   }
 }
 
+/* Past Committees Accordion Styles */
+.past-committees-wrapper {
+  margin-top: 6rem;
+  max-width: 900px;
+  margin-inline: auto;
+
+  h2 {
+    text-align: center;
+    color: $primary;
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+  }
+
+  .accordion-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .committee-accordion {
+    background-color: $background-accent;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+
+    &[open] {
+      summary {
+        border-bottom: 1px solid rgba(0,0,0,0.1);
+        &::after {
+          content: '−'; /* Minus sign when open */
+        }
+      }
+    }
+
+    summary {
+      padding: 1.5rem 2rem;
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: $dark;
+      cursor: pointer;
+      list-style: none; /* Hides the default browser arrow */
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      transition: background-color 0.2s ease;
+
+      /* Custom plus sign */
+      &::after {
+        content: '+';
+        font-size: 1.5rem;
+        color: $primary;
+        font-weight: 400;
+      }
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.02);
+      }
+
+      /* Safari fix to hide the default arrow */
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+
+    .accordion-content {
+      padding: 1.5rem 2rem;
+      background-color: #fff;
+
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+          display: flex;
+          justify-content: space-between;
+          padding-block: 0.75rem;
+          border-bottom: 1px dashed rgba(0,0,0,0.1);
+
+          &:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+          }
+
+          .role {
+            font-weight: 700;
+            color: $primary;
+            font-size: 0.95rem;
+            max-width: 50%;
+          }
+
+          .name {
+            color: #4a4a4a;
+            font-size: 1rem;
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+}
+
 /* --- Responsive Adjustments --- */
 
 @media screen and (max-width: 1024px) {
@@ -123,6 +225,31 @@
     right: 25px;
     font-size: 50px;
   }
+
+  /* Mobile fix for the accordion (Put this inside your existing @media max-width: 768px block) */
+  .past-committees-wrapper {
+    margin-top: 4rem;
+
+    h2 { font-size: 1.75rem; }
+
+    .committee-accordion summary {
+      padding: 1rem 1.25rem;
+      font-size: 1.1rem;
+    }
+
+    .committee-accordion .accordion-content {
+      padding: 1rem 1.25rem;
+
+      ul li {
+        flex-direction: column; /* Stacks the Role above the Name on small phones */
+        align-items: flex-start;
+        gap: 0.25rem;
+
+        .role { max-width: 100%; }
+        .name { text-align: left; }
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 480px) {