refactor: update menu toggle structure and icons across multiple HTML files for improved consistency and user experience

about.html

@@ -377,22 +377,14 @@
               <span class="wave"></span>
             </div>
             <div class="menu-outline" aria-hidden="true"></div>
-            <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-              <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
-              <span class="w-1 h-1 bg-white"></span>
+            <div class="relative" id="menuGrid">
+              <img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
             </div>
             <div
               id="menuPetal"
               class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
             >
-              <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
+              <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
             </div>
           </div>
         </div>

contact.html

@@ -379,22 +379,14 @@
             <span class="wave"></span>
           </div>
           <div class="menu-outline" aria-hidden="true"></div>
-          <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
+          <div class="relative" id="menuGrid">
+            <img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
           </div>
           <div
             id="menuPetal"
             class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
           >
-            <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
+                          <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
         
@@ -961,142 +953,6 @@
       }
     </script>
 
-      // Form submission
-      const contactForm = document.getElementById("contactForm");
-      if (contactForm) {
-        contactForm.addEventListener("submit", (e) => {
-          e.preventDefault();
-          // Add your form submission logic here
-          alert(
-            "Thank you for your message! We'll get back to you within 24 hours."
-          );
-          contactForm.reset();
-        });
-      }
-
-      // Staggered entrance for hero and sections
-      window.addEventListener("load", () => {
-        const heroTitle = document.querySelector(
-          "section.relative h1.masked-reveal"
-        );
-        const heroSub = document.querySelector("section.relative div.text-xl");
-        if (heroTitle) {
-          heroTitle.style.animation =
-            "maskReveal 900ms ease-out 150ms forwards";
-        }
-        if (heroSub) {
-          heroSub.style.opacity = "0";
-          heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
-        }
-        const contactSection = document.querySelector("section.py-20.bg-white");
-        if (contactSection) {
-          contactSection.style.opacity = "0";
-          contactSection.style.animation =
-            "fadeUp 800ms ease-out 600ms forwards";
-        }
-        const mapSection = document.querySelector("section.py-20.bg-kh3-black");
-        if (mapSection) {
-          mapSection.style.opacity = "0";
-          mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
-        }
-      });
-
-      // Auto-scroll to contact section after 2.5 seconds with custom smooth animation
-      setTimeout(() => {
-        const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
-        if (contactSection) {
-          const targetPosition = contactSection.offsetTop;
-          const startPosition = window.pageYOffset;
-          const distance = targetPosition - startPosition;
-          const duration = 2000; // 2 seconds for the scroll animation
-          let start = null;
-
-          function animation(currentTime) {
-            if (start === null) start = currentTime;
-            const timeElapsed = currentTime - start;
-            const run = easeInOutCubic(
-              timeElapsed,
-              startPosition,
-              distance,
-              duration
-            );
-            window.scrollTo(0, run);
-            if (timeElapsed < duration) requestAnimationFrame(animation);
-          }
-
-          // Easing function for smooth animation
-          function easeInOutCubic(t, b, c, d) {
-            t /= d / 2;
-            if (t < 1) return (c / 2) * t * t * t + b;
-            t -= 2;
-            return (c / 2) * (t * t * t + 2) + b;
-          }
-
-          requestAnimationFrame(animation);
-        }
-      }, 2500);
-
-      // Page transition functionality
-      function handlePageTransition(e) {
-        e.preventDefault();
-        const targetUrl = e.currentTarget.href;
-        const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
-
-        // Get all elements to animate out
-        const elementsToAnimate = [
-          document.querySelector('.hero-section'),
-          document.querySelector('.contact-form-section'),
-          document.querySelector('.map-section'),
-          document.querySelector('main')
-        ].filter(el => el);
-
-        // Animate elements out in order
-        elementsToAnimate.forEach((element, index) => {
-          setTimeout(() => {
-            if (element) {
-              element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
-            }
-          }, index * 100);
-        });
-
-        // Navigate after animations complete
-        setTimeout(() => {
-          window.location.href = targetUrl;
-        }, elementsToAnimate.length * 100 + 600);
-      }
-
-      // Add event listeners for page transitions
-      document.addEventListener('DOMContentLoaded', function() {
-        const transitionLinks = document.querySelectorAll('[data-trans]');
-        transitionLinks.forEach(link => {
-          link.addEventListener('click', handlePageTransition);
-        });
-      });
-
-      // Handle back/forward navigation
-      window.addEventListener('pageshow', function(event) {
-        if (event.persisted) {
-          // Page was loaded from cache (back/forward)
-          window.location.reload();
-        }
-      });
-    </script>
-    <script>
-      // Ensure clean state on back/forward cache restores
-      window.addEventListener('pageshow', () => {
-        const nav = document.getElementById('navMenu');
-        const wrap = document.getElementById('menuWrap');
-        if (nav) nav.classList.add('hidden');
-        if (wrap) wrap.classList.remove('open');
-      });
-
-      // Cleanup before bfcache snapshot
-      window.addEventListener('pagehide', () => {
-        const nav = document.getElementById('navMenu');
-        const wrap = document.getElementById('menuWrap');
-        if (nav) nav.classList.add('hidden');
-        if (wrap) wrap.classList.remove('open');
-      });
-    </script>
+    <script src="js/contact.js"></script>
   </body>
 </html>

index.html

@@ -385,25 +385,22 @@
                 <span class="wave"></span>
               </div>
               <div class="menu-outline" aria-hidden="true"></div>
-              <div
-                class="grid grid-cols-3 gap-1 w-6 h-6 relative"
-                id="menuGrid"
-              >
-                <span class="w-1 h-1 bg-white"></span>
-                <span class="w-1 h-1 bg-white"></span>
-                <span class="w-1 h-1 bg-white"></span>
-                <span class="w-1 h-1 bg-white"></span>
-                <span class="w-1 h-1 bg-white"></span>
-                <span class="w-1 h-1 bg-white"></span>
-                <span class="w-1 h-1 bg-white"></span>
-                <span class="w-1 h-1 bg-white"></span>
-                <span class="w-1 h-1 bg-white"></span>
+              <div class="relative" id="menuGrid">
+                <img
+                  src="assets/icons/closed_petal.png"
+                  alt="closed petal"
+                  class="w-6 h-6"
+                />
               </div>
               <div
                 id="menuPetal"
                 class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
               >
-                <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
+                <img
+                  src="assets/icons/open_petal.png"
+                  alt="petal"
+                  class="w-8 h-8"
+                />
               </div>
             </div>
 

js/contact.js

@@ -0,0 +1,63 @@
+// Contact page specific scripts
+
+// Form submission
+document.addEventListener("DOMContentLoaded", () => {
+  const contactForm = document.getElementById("contactForm");
+  if (contactForm) {
+    contactForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+      alert(
+        "Thank you for your message! We'll get back to you within 24 hours."
+      );
+      contactForm.reset();
+    });
+  }
+
+  // Staggered entrance for hero and sections
+  window.addEventListener("load", () => {
+    const heroTitle = document.querySelector(
+      "section.relative h1.masked-reveal"
+    );
+    const heroSub = document.querySelector("section.relative div.text-xl");
+    if (heroTitle) {
+      heroTitle.style.animation = "maskReveal 900ms ease-out 150ms forwards";
+    }
+    if (heroSub) {
+      heroSub.style.opacity = "0";
+      heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
+    }
+
+    const contactSectionFade = document.querySelector("section.py-20.bg-white");
+    if (contactSectionFade) {
+      contactSectionFade.style.opacity = "0";
+      contactSectionFade.style.animation =
+        "fadeUp 800ms ease-out 600ms forwards";
+    }
+
+    const mapSection = document.querySelector("section.py-20.bg-kh3-black");
+    if (mapSection) {
+      mapSection.style.opacity = "0";
+      mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
+    }
+  });
+
+  // Gentle auto-scroll like WHAT page: nudge ~1.1vh after 3s with easing
+  setTimeout(() => {
+    const startScroll = window.pageYOffset;
+    const targetScroll = window.innerHeight * 1.0;
+    const distance = targetScroll - startScroll;
+    const duration = 2000;
+    let start = null;
+
+    function animateScroll(ts) {
+      if (start === null) start = ts;
+      const elapsed = ts - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+      window.scrollTo(0, startScroll + distance * easeOutQuart);
+      if (progress < 1) requestAnimationFrame(animateScroll);
+    }
+
+    requestAnimationFrame(animateScroll);
+  }, 3000);
+});

js/main.js

@@ -21,42 +21,49 @@ function initNavigation() {
 
   // Only initialize if elements exist
   if (menuToggle && navMenu && menuGrid) {
+    console.log("Navigation elements found:", {
+      menuToggle,
+      navMenu,
+      menuGrid,
+    });
     let isMenuOpen = false;
+    const menuPetal = document.getElementById("menuPetal");
+    console.log("menuPetal element:", menuPetal);
+    const menuWrap = document.getElementById("menuWrap");
+
+    // Force a known initial state: closed menu shows closed petal
+    if (menuWrap) menuWrap.classList.remove("open");
+    try {
+      if (menuGrid) menuGrid.style.opacity = "1";
+      if (menuPetal) menuPetal.style.opacity = "0";
+    } catch (e) {}
 
     menuToggle.addEventListener("click", () => {
+      console.log("Menu clicked! Current state:", isMenuOpen);
+      console.log("menuPetal element:", menuPetal);
+      console.log("navMenu element:", navMenu);
+
       if (isMenuOpen) {
         // Close menu
+        console.log("Closing menu...");
         navMenu.classList.add("hidden");
-        // Transform back to full grid
-        menuGrid.innerHTML = `
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-        `;
-        menuGrid.style.transform = "scale(1)";
+        // Show closed petal, hide open petal
+        if (menuPetal) {
+          menuGrid.style.opacity = "1";
+          menuPetal.style.opacity = "0";
+          console.log("Showing closed petal, hiding open petal");
+        }
         isMenuOpen = false;
       } else {
         // Open menu
+        console.log("Opening menu...");
         navMenu.classList.remove("hidden");
-        // Transform to compressed state - only center 5 dots, corner dots disappear
-        menuGrid.innerHTML = `
-          <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
-        `;
-        menuGrid.style.transform = "scale(0.8)";
+        // Hide closed petal, show open petal
+        if (menuPetal) {
+          menuGrid.style.opacity = "0";
+          menuPetal.style.opacity = "1";
+          console.log("Hiding closed petal, showing open petal");
+        }
         isMenuOpen = true;
       }
     });
@@ -65,18 +72,11 @@ function initNavigation() {
     document.addEventListener("click", (e) => {
       if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
         navMenu.classList.add("hidden");
-        // Transform back to grid
-        menuGrid.innerHTML = `
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-        `;
+        // Show closed petal, hide open petal
+        if (menuPetal) {
+          menuGrid.style.opacity = "1";
+          menuPetal.style.opacity = "0";
+        }
         isMenuOpen = false;
       }
     });
@@ -85,18 +85,11 @@ function initNavigation() {
     navLinks.forEach((link) => {
       link.addEventListener("click", function () {
         navMenu.classList.add("hidden");
-        // Transform back to grid
-        menuGrid.innerHTML = `
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-        `;
+        // Show closed petal, hide open petal
+        if (menuPetal) {
+          menuGrid.style.opacity = "1";
+          menuPetal.style.opacity = "0";
+        }
         isMenuOpen = false;
       });
     });
@@ -105,18 +98,11 @@ function initNavigation() {
     document.addEventListener("keydown", function (e) {
       if (e.key === "Escape" && !navMenu.classList.contains("hidden")) {
         navMenu.classList.add("hidden");
-        // Transform back to grid
-        menuGrid.innerHTML = `
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-          <span class="w-1 h-1 bg-white rounded-full"></span>
-        `;
+        // Show closed petal, hide open petal
+        if (menuPetal) {
+          menuGrid.style.opacity = "1";
+          menuPetal.style.opacity = "0";
+        }
         isMenuOpen = false;
       }
     });

projects.html

@@ -376,22 +376,22 @@
             <span class="wave"></span>
             </div>
           <div class="menu-outline" aria-hidden="true"></div>
-          <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
+          <div class="relative" id="menuGrid">
+            <img
+              src="assets/icons/closed_petal.png"
+              alt="closed petal"
+              class="w-6 h-6"
+            />
           </div>
           <div
             id="menuPetal"
             class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
           >
-            <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
+            <img
+              src="assets/icons/open_petal.png"
+              alt="petal"
+              class="w-8 h-8"
+            />
         </div>
       </div>
 

services.html

@@ -560,22 +560,14 @@
             <span class="wave"></span>
           </div>
           <div class="menu-outline" aria-hidden="true"></div>
-          <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
+          <div class="relative" id="menuGrid">
+            <img src="assets/icons/closed_petal.png" alt="closed petal" class="w-6 h-6" />
           </div>
           <div
             id="menuPetal"
             class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
           >
-            <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
+                          <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
         

who.html

@@ -354,12 +354,9 @@
     <!-- Static Logo and Menu -->
     <div class="fixed top-6 left-8 z-40">
       <div class="flex items-center gap-3">
-        <img
-                      src="assets/images/kh3_logo.png"
-          alt="KH3"
-          class="w-12 h-12"
-        />
-        
+        <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
+          <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
+        </a>
       </div>
     </div>
 
@@ -368,7 +365,7 @@
       class="fixed top-6 right-8 md:bottom-12 md:left-12 md:top-auto md:right-auto z-50"
     >
       <div class="cursor-pointer" id="menuToggle">
-        <!-- Desktop view: menuWrap with waves and outline -->
+        <!-- Desktop view: menuWrap with waves and outline (wrapped like WHY page) -->
         <div class="relative inline-block hidden md:block" id="menuWrap">
           <div class="menu-waves" aria-hidden="true">
             <span class="wave"></span>
@@ -376,22 +373,14 @@
             <span class="wave"></span>
           </div>
           <div class="menu-outline" aria-hidden="true"></div>
-          <div class="grid grid-cols-3 gap-1 w-6 h-6 relative" id="menuGrid">
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
-            <span class="w-1 h-1 bg-white"></span>
+          <div class="relative z-20" id="menuGrid" style="opacity: 1;">
+            <img src="assets/icons/closed_petal.png" alt="closed petal" class="block w-6 h-6" />
           </div>
           <div
             id="menuPetal"
-            class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity"
+            class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity z-0"
           >
-            <img src="assets/icons/petal.png" alt="petal" class="w-8 h-8" />
+            <img src="assets/icons/open_petal.png" alt="petal" class="w-8 h-8" />
           </div>
         </div>
         
@@ -1716,16 +1705,12 @@
         const grid = document.getElementById("menuGrid");
         if (nav) nav.classList.add("hidden");
         if (grid) {
-          grid.innerHTML = `
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>
-            <span class=\"w-1 h-1 bg-white rounded-full\"></span>`;
+          // Ensure closed state on snapshot
+          grid.style.opacity = "1";
+          const wrap = document.getElementById("menuWrap");
+          if (wrap) wrap.classList.remove("open");
+          const petal = document.getElementById("menuPetal");
+          if (petal) petal.style.opacity = "0";
         }
       });
 
@@ -1739,16 +1724,12 @@
         const grid = document.getElementById("menuGrid");
         if (nav) nav.classList.add("hidden");
         if (grid) {
-          grid.innerHTML = `
-            <span class="w-1 h-1 bg-white rounded-full"></span>
-            <span class="w-1 h-1 bg-white rounded-full"></span>
-            <span class="w-1 h-1 bg-white rounded-full"></span>
-            <span class="w-1 h-1 bg-white rounded-full"></span>
-            <span class="w-1 h-1 bg-white rounded-full"></span>
-            <span class="w-1 h-1 bg-white rounded-full"></span>
-            <span class="w-1 h-1 bg-white rounded-full"></span>
-            <span class="w-1 h-1 bg-white rounded-full"></span>
-            <span class="w-1 h-1 bg-white rounded-full"></span>`;
+          // Ensure closed state on restore
+          grid.style.opacity = "1";
+          const wrap = document.getElementById("menuWrap");
+          if (wrap) wrap.classList.remove("open");
+          const petal = document.getElementById("menuPetal");
+          if (petal) petal.style.opacity = "0";
         }
       });