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>

src/styles/executive-committee.scss

@@ -18,8 +18,8 @@
 
   .banner-container {
     width: 100%;
-    max-width: 1200px; /* Prevents the banner from getting absurdly wide */
-    margin: 0 auto 4rem auto; /* Centers the banner and keeps the bottom gap */
+    max-width: 1200px;
+    margin: 0 auto 4rem auto;
     border-radius: 1.5rem;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
@@ -37,6 +37,7 @@
     gap: 2rem;
     
     .photo-card {
+      cursor: pointer; // Show pointer to indicate clickable
       width: 100%;
       border-radius: 1rem;
       overflow: hidden;
@@ -58,16 +59,47 @@
   }
 }
 
+/* Modal Styles */
+.image-modal {
+  display: none; 
+  position: fixed;
+  z-index: 9999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.9);
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+
+  .modal-content {
+    max-width: 90%;
+    max-height: 90%;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(255,255,255,0.1);
+  }
+
+  .close-modal {
+    position: absolute;
+    top: 30px;
+    right: 40px;
+    color: #f1f1f1;
+    font-size: 60px;
+    font-weight: bold;
+    cursor: pointer;
+    line-height: 1;
+  }
+}
+
 /* --- Responsive Adjustments --- */
 
 @media screen and (max-width: 1024px) {
-  .execomm-section {
-    .photo-grid {
+  .execomm-section .photo-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
   }
 }
-}
 
 @media screen and (max-width: 768px) {
   .execomm-section {
@@ -85,13 +117,18 @@
       border-radius: 1rem;
     }
   }
+
+  .image-modal .close-modal {
+    top: 20px;
+    right: 25px;
+    font-size: 50px;
+  }
 }
 
 @media screen and (max-width: 480px) {
-  .execomm-section {
-    .photo-grid {
-      grid-template-columns: repeat(1, 1fr);
-      gap: 1.5rem;
-    }
+  .execomm-section .photo-grid {
+    /* MAINTAINED 2 COLUMNS ON PHONE */
+    grid-template-columns: repeat(2, 1fr); 
+    gap: 1rem;
   }
 }