Updated site completely

src/components/ui/ImageModal.astro

@@ -2,25 +2,44 @@
 // ImageModal.astro - A reusable modal component for displaying enlarged images
 ---
 
-<div id="image-modal" class="fixed inset-0 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out">
+<div
+  id="image-modal"
+  class="fixed inset-0 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out"
+>
   <!-- Backdrop overlay -->
-  <div id="modal-backdrop" class="absolute inset-0 bg-black bg-opacity-75 backdrop-blur-sm transition-opacity duration-300"></div>
-  
+  <div
+    id="modal-backdrop"
+    class="absolute inset-0 bg-black bg-opacity-75 backdrop-blur-sm transition-opacity duration-300"
+  >
+  </div>
+
   <!-- Modal container with animation -->
-  <div id="modal-container" class="relative max-w-4xl mx-auto p-4 transform scale-95 transition-all duration-300 ease-in-out flex flex-col items-center">
+  <div
+    id="modal-container"
+    class="relative max-w-4xl mx-auto p-4 transform scale-95 transition-all duration-300 ease-in-out flex flex-col items-center"
+  >
     <!-- Close button -->
-    <button 
-      id="modal-close" 
+    <button
+      id="modal-close"
       class="absolute top-2 right-2 z-10 bg-white dark:bg-gray-800 rounded-full p-2 shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
       aria-label="Close modal"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6 text-gray-600 dark:text-gray-300"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
       </svg>
     </button>
-    
+
     <!-- Image container -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden" style="min-height: 300px; max-height: 75vh;">
+    <div
+      class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden"
+      style="min-height: 300px; max-height: 75vh;"
+    >
       <div class="flex items-center justify-center h-full w-full">
         <img
           id="modal-image"
@@ -31,7 +50,7 @@
         />
       </div>
     </div>
-    
+
     <!-- Caption -->
     <div id="modal-caption" class="mt-2 text-center text-white text-lg font-medium"></div>
   </div>
@@ -53,77 +72,77 @@
     const modalImage = document.getElementById('modal-image') as HTMLImageElement;
     const modalCaption = document.getElementById('modal-caption');
     const closeButton = document.getElementById('modal-close');
-    
+
     // Function to open the modal with a specific image
     function openModal(imgSrc, imgAlt) {
       if (!modal || !modalImage || !modalCaption) return;
-      
+
       // Create a temporary image to get the natural dimensions
       const tempImg = new Image();
-      tempImg.onload = function() {
+      tempImg.onload = function () {
         // Calculate the certification section height (75% of viewport height as defined in the container)
         const certSectionHeight = window.innerHeight * 0.75;
         const maxHeight = certSectionHeight * 0.75; // 75% of the certification section height
-        
+
         // If the natural image height is smaller than the max height, use the natural height
         if (tempImg.height < maxHeight) {
           modalImage.style.setProperty('--cert-max-height', `${tempImg.height}px`);
         } else {
           modalImage.style.setProperty('--cert-max-height', `${maxHeight}px`);
         }
-        
+
         // Set the image source and alt text
         modalImage.src = imgSrc;
         modalCaption.textContent = imgAlt;
-        
+
         // Make the modal visible
         modal.classList.remove('opacity-0', 'pointer-events-none');
         modal.classList.add('opacity-100', 'pointer-events-auto');
-        
+
         // Animate the container
         if (modalContainer) {
           modalContainer.classList.remove('scale-95');
           modalContainer.classList.add('scale-100');
         }
-        
+
         // Set focus to the close button for accessibility
         if (closeButton) {
           setTimeout(() => closeButton.focus(), 100);
         }
       };
-      
+
       // Start loading the image
       tempImg.src = imgSrc;
-      
+
       // Prevent scrolling on the body
       document.body.style.overflow = 'hidden';
     }
-    
+
     // Function to close the modal
     function closeModal() {
       if (!modal || !modalContainer) return;
-      
+
       // Hide the modal with animation
       modal.classList.remove('opacity-100', 'pointer-events-auto');
       modal.classList.add('opacity-0', 'pointer-events-none');
-      
+
       // Animate the container
       modalContainer.classList.remove('scale-100');
       modalContainer.classList.add('scale-95');
-      
+
       // Re-enable scrolling
       document.body.style.overflow = '';
-      
+
       // Clear the image source after animation completes
       setTimeout(() => {
         if (modalImage) modalImage.src = '';
         if (modalCaption) modalCaption.textContent = '';
       }, 300);
     }
-    
+
     // Register the openImageModal function globally so it can be called from anywhere
     window.openImageModal = openModal;
-    
+
     // Close modal when clicking the close button
     if (closeButton) {
       closeButton.addEventListener('click', (e) => {
@@ -131,7 +150,7 @@
         closeModal();
       });
     }
-    
+
     // Close modal when clicking outside the image container
     if (modal) {
       modal.addEventListener('click', (e) => {
@@ -141,14 +160,14 @@
         }
       });
     }
-    
+
     // Close modal when pressing Escape key
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         closeModal();
       }
     });
-    
+
     // Handle window resize to recalculate image dimensions
     let resizeTimeout;
     window.addEventListener('resize', () => {
@@ -158,7 +177,7 @@
           // Get current image source and recalculate dimensions
           const currentSrc = modalImage.src;
           const currentAlt = modalCaption?.textContent || '';
-          
+
           // Close and reopen modal to trigger recalculation
           closeModal();
           setTimeout(() => openModal(currentSrc, currentAlt), 350);
@@ -166,4 +185,4 @@
       }, 200); // Debounce resize events
     });
   });
-</script>
+</script>