diff --git a/src/pages/executive-committee.astro b/src/pages/executive-committee.astro index dea8dc0..b75fe9e 100644 --- a/src/pages/executive-committee.astro +++ b/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" } + ]} +]; ---

Executive Committee

+ +
President
Vice President for Academic Affairs
@@ -31,8 +152,31 @@ import vp_sec from '../assets/images/execomm/vp_sec.png';
Vice President for Publicity
Vice President for Secretariat
+ + +
+

Past Executive Committees

+
+ {pastCommittees.map((committee) => ( +
+ {committee.year} +
+
    + {committee.members.map((member) => ( +
  • + {member.role} + {member.name} +
  • + ))} +
+
+
+ ))} +
+
+
× @@ -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"; diff --git a/src/styles/executive-committee.scss b/src/styles/executive-committee.scss index 0dcad7d..d912185 100644 --- a/src/styles/executive-committee.scss +++ b/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) {