Modified Executive Committee page

src/pages/executive-committee.astro

@@ -2,7 +2,6 @@
 import Layout from '../layouts/Layout.astro';
 import '../styles/executive-committee.scss';
 
-// MAKE SURE THESE FILES EXIST BEFORE BUILDING, or comment them out!
 import execomm_banner from '../assets/images/execomm/execomm_banner.png';
 import pres from '../assets/images/execomm/pres.png';
 import vp_acad from '../assets/images/execomm/vp_acad.png';
@@ -18,12 +17,10 @@ import vp_sec from '../assets/images/execomm/vp_sec.png';
   <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>
@@ -35,4 +32,37 @@ import vp_sec from '../assets/images/execomm/vp_sec.png';
       <div class="photo-card"><img src={vp_sec.src} alt="Vice President for Secretariat" /></div>
     </div>
   </section>
+
+  <div id="image-modal" class="image-modal">
+    <span class="close-modal">&times;</span>
+    <img class="modal-content" id="full-image">
+  </div>
 </Layout>
+
+<script>
+  const modal = document.getElementById("image-modal");
+  const modalImg = document.getElementById("full-image") as HTMLImageElement;
+  const cards = document.querySelectorAll(".photo-card img");
+  const closeBtn = document.querySelector(".close-modal");
+
+  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
+    });
+  });
+
+  closeBtn.addEventListener("click", () => {
+    modal.style.display = "none";
+    document.body.style.overflow = "auto";
+  });
+
+  // Close if user clicks outside the image
+  modal.addEventListener("click", (e) => {
+    if (e.target === modal) {
+      modal.style.display = "none";
+      document.body.style.overflow = "auto";
+    }
+  });
+</script>