ui: updated hero image

Author: christopher-altman

…ts/accuracy-vs-identifiability-dark.jpeg …curacy-vs-identifiability-dark copy.jpegassets/accuracy-vs-identifiability-dark.jpeg renamed to assets/accuracy-vs-identifiability-dark copy.jpeg assets/accuracy-vs-identifiability-dark.jpeg renamed to assets/accuracy-vs-identifiability-dark copy.jpeg

@@ -49,7 +49,7 @@
 
     <!-- Preload hero images -->
     <link rel="preload" href="assets/accuracy-vs-identifiability-light.jpeg" as="image" type="image/jpeg" />
-    <link rel="preload" href="assets/accuracy-vs-identifiability-dark.jpeg" as="image" type="image/jpeg" />
+    <link rel="preload" href="assets/accuracy-vs-identifiability-dark.png" as="image" type="image/png" />
 
     <link rel="stylesheet" href="styles.css" />
 
@@ -213,7 +213,10 @@ <h3 class="hero-hook reveal" data-delay="400">
             <img
               id="heroFigure"
               class="hero-figure-img"
-              src="assets/accuracy-vs-identifiability-light.jpeg"
+              src="assets/accuracy-vs-identifiability-dark.png"
+              data-hero-default="assets/accuracy-vs-identifiability-dark.png"
+              data-hero-light="assets/accuracy-vs-identifiability-light.jpeg"
+              data-hero-dark="assets/accuracy-vs-identifiability-dark.png"
               alt="Accuracy vs Identifiability"
               decoding="async"
             />

assets/accuracy-vs-identifiability-dark.png

@@ -505,18 +505,19 @@ function updateCurrentYear() {
   document.getElementById('currentYear').textContent = new Date().getFullYear();
 }
 
-// Hero Image Theme Swap (JPEG only for sharp text)
+// Keep the landing hero on its default asset; only repo cards are theme-swapped.
 function initializeHeroImageSwap() {
   const heroFigure = document.getElementById('heroFigure');
 
   const updateHeroImage = () => {
     const currentTheme = document.documentElement.dataset.theme || 'light';
     const variant = currentTheme === 'dark' ? 'dark' : 'light';
 
-    // Update main hero figure (JPEG only for sharp text)
+    // Preserve the default landing hero image from the markup.
     if (heroFigure) {
-      heroFigure.src = `assets/accuracy-vs-identifiability-${variant}.jpeg`;
-      heroFigure.alt = `Accuracy vs Identifiability (${variant} mode)`;
+      const defaultSrc = heroFigure.dataset.heroDefault || heroFigure.getAttribute('src');
+      heroFigure.src = defaultSrc;
+      heroFigure.alt = 'Accuracy vs Identifiability';
     }
 
     // Update repo card hero images

index.html

@@ -15,7 +15,7 @@ set -e
 
 ASSETS_DIR="assets"
 LIGHT_JPEG="${ASSETS_DIR}/accuracy-vs-identifiability-light.jpeg"
-DARK_JPEG="${ASSETS_DIR}/accuracy-vs-identifiability-dark.jpeg"
+DARK_JPEG="${ASSETS_DIR}/accuracy-vs-identifiability-dark.png"
 
 # Color codes for output
 GREEN='\033[0;32m'

script.js

@@ -13,7 +13,7 @@ set -e
 
 ASSETS_DIR="assets"
 LIGHT_JPEG="${ASSETS_DIR}/accuracy-vs-identifiability-light.jpeg"
-DARK_JPEG="${ASSETS_DIR}/accuracy-vs-identifiability-dark.jpeg"
+DARK_JPEG="${ASSETS_DIR}/accuracy-vs-identifiability-dark.png"
 
 # Color codes
 GREEN='\033[0;32m'