From 9f0d845eefe1026a428859037b0da023fee6be61 Mon Sep 17 00:00:00 2001 From: George Birikorang Date: Tue, 2 Sep 2025 07:40:15 -0400 Subject: [PATCH 1/2] refactor: enhance menu toggle structure and animations across multiple HTML files for improved user experience --- about.html | 186 ++++++++++++----------------------------- assets/icons/petal.png | Bin 0 -> 19863 bytes contact.html | 176 ++++++++++++++------------------------ index.html | 128 +++++++++++----------------- projects.html | 179 ++++++++++++++++++++------------------- services.html | 109 +++++++++++------------- styles/output.css | 8 ++ who.html | 109 +++++++++++------------- 8 files changed, 360 insertions(+), 535 deletions(-) create mode 100644 assets/icons/petal.png diff --git a/about.html b/about.html index 24b9743..5f627c4 100644 --- a/about.html +++ b/about.html @@ -367,25 +367,33 @@ - -
-
@@ -1282,6 +1290,23 @@ } } + /* Homepage-style menu outline and waves */ + #menuWrap { position: relative; overflow: visible; } + .menu-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; outline: 1px solid rgba(255,255,255,0.6); outline-offset: 6px; } + .menu-waves { position: absolute; inset: -20px; z-index: 1; pointer-events: none; } + .menu-waves .wave { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transform: scale(1); animation: waveBurst 5.8s ease-in-out infinite; } + .menu-waves .wave:nth-child(2) { animation-delay: 0.3s; } + .menu-waves .wave:nth-child(3) { animation-delay: 0.6s; } + #menuWrap.open #menuPetal { opacity: 1; } + #menuWrap.open #menuGrid { opacity: 0; } + + @keyframes waveBurst { + 0%, 69% { opacity: 0; transform: scale(1); } + 77% { opacity: 0.38; transform: scale(1.18, 1.12); } + 92% { opacity: 0.22; transform: scale(1.55, 1.42); } + 100% { opacity: 0; transform: scale(1.95, 1.75); } + } + /* Diagonal mask reveal for hero image */ @keyframes diagMaskReveal { 0% { @@ -1424,112 +1449,31 @@ }); }); - // Menu toggle functionality + // Menu toggle functionality (homepage pattern) const menuToggle = document.getElementById("menuToggle"); const navMenu = document.getElementById("navMenu"); const menuGrid = document.getElementById("menuGrid"); + const menuWrap = document.getElementById("menuWrap"); if (menuToggle && navMenu && menuGrid) { let isMenuOpen = false; - let closeBtnEl = null; menuToggle.addEventListener("click", () => { if (isMenuOpen) { - // Close menu - navMenu.classList.add("hidden"); - // Transform back to full grid - menuGrid.innerHTML = ` - - - - - - - - - - `; - menuToggle.style.transform = "scale(1)"; - if (closeBtnEl) { - closeBtnEl.remove(); - closeBtnEl = null; - } + navMenu.classList.add("hidden"); + if (menuWrap) menuWrap.classList.remove("open"); isMenuOpen = false; } else { - // Open menu navMenu.classList.remove("hidden"); - // Transform to compressed state - only center 5 dots, corner dots disappear - menuGrid.innerHTML = ` - - - - - - - - - - `; - menuToggle.style.transform = "scale(0.8)"; - menuToggle.style.transition = "transform 0.3s ease"; - - // Place red X close button at the bottom of the menu panel - closeBtnEl = document.createElement("button"); - closeBtnEl.setAttribute("aria-label", "Close navigation"); - closeBtnEl.className = - "absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors"; - closeBtnEl.innerHTML = ` - - - - `; - navMenu.appendChild(closeBtnEl); - closeBtnEl.addEventListener("click", () => { - navMenu.classList.add("hidden"); - // Transform back to full grid - menuGrid.innerHTML = ` - - - - - - - - - - `; - menuGrid.style.transform = "scale(1)"; - if (closeBtnEl) { - closeBtnEl.remove(); - closeBtnEl = null; - } - isMenuOpen = false; - }); + if (menuWrap) menuWrap.classList.add("open"); isMenuOpen = true; } }); - // Close menu when clicking outside document.addEventListener("click", (e) => { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { navMenu.classList.add("hidden"); - // Transform back to full grid - menuGrid.innerHTML = ` - - - - - - - - - - `; - menuGrid.style.transform = "scale(1)"; - if (closeBtnEl) { - closeBtnEl.remove(); - closeBtnEl = null; - } + if (menuWrap) menuWrap.classList.remove("open"); isMenuOpen = false; } }); @@ -1630,20 +1574,9 @@ cover.style.opacity = "0"; } const nav = document.getElementById("navMenu"); - const grid = document.getElementById("menuGrid"); if (nav) nav.classList.add("hidden"); - if (grid) { - grid.innerHTML = ` - - - - - - - - - `; - } + const wrap = document.getElementById("menuWrap"); + if (wrap) wrap.classList.remove("open"); }); // Also ensure clean state on bfcache restore / pageshow @@ -1652,21 +1585,10 @@ cover.style.transform = "translateX(100%)"; cover.style.opacity = "0"; } - const nav = document.getElementById("navMenu"); - const grid = document.getElementById("menuGrid"); - if (nav) nav.classList.add("hidden"); - if (grid) { - grid.innerHTML = ` - - - - - - - - - `; - } + const nav2 = document.getElementById("navMenu"); + if (nav2) nav2.classList.add("hidden"); + const wrap2 = document.getElementById("menuWrap"); + if (wrap2) wrap2.classList.remove("open"); }); diff --git a/assets/icons/petal.png b/assets/icons/petal.png new file mode 100644 index 0000000000000000000000000000000000000000..fa3858fa069da1f5668aa825fca15bd68dc6cf33 GIT binary patch literal 19863 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
- -
- +
+ @@ -438,7 +444,7 @@ class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5" >
- +
Why - Contacts -
- + > + + @@ -539,7 +545,7 @@ > Why @@ -560,9 +566,9 @@ WHO
- + - +
- - - - - - - - `; - } + const wrapEl = document.getElementById("menuWrap"); + if (wrapEl) wrapEl.classList.remove("open"); }); // Enhanced slide + zoom hero image transitions @@ -967,6 +970,7 @@ const menuToggle = document.getElementById("menuToggle"); const navMenu = document.getElementById("navMenu"); const menuGrid = document.getElementById("menuGrid"); + const menuWrap = document.getElementById("menuWrap"); if (menuToggle && navMenu && menuGrid) { let isMenuOpen = false; @@ -975,21 +979,12 @@ if (isMenuOpen) { // Close menu navMenu.classList.add("hidden"); - menuGrid.innerHTML = ` - - - - - - - - - - `; + if (menuWrap) menuWrap.classList.remove("open"); isMenuOpen = false; } else { // Open menu (keep button static) navMenu.classList.remove("hidden"); + if (menuWrap) menuWrap.classList.add("open"); isMenuOpen = true; } }); @@ -998,17 +993,7 @@ document.addEventListener("click", (e) => { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { navMenu.classList.add("hidden"); - menuGrid.innerHTML = ` - - - - - - - - - - `; + if (menuWrap) menuWrap.classList.remove("open"); isMenuOpen = false; } }); @@ -1089,20 +1074,9 @@ // Close nav if it was left open and reset grid icon const navMenuEl = document.getElementById("navMenu"); - const menuGridEl = document.getElementById("menuGrid"); + const wrapEl2 = document.getElementById("menuWrap"); if (navMenuEl) navMenuEl.classList.add("hidden"); - if (menuGridEl) { - menuGridEl.innerHTML = ` - - - - - - - - - `; - } + if (wrapEl2) wrapEl2.classList.remove("open"); }); // Menu grid animation sequence diff --git a/projects.html b/projects.html index 4b98e81..45a0bd6 100644 --- a/projects.html +++ b/projects.html @@ -370,28 +370,35 @@
- +
- - -
-
- -
- +
- +
Why - Contacts -
- + > + + @@ -545,7 +545,7 @@ > Why @@ -566,9 +566,9 @@ WHO
- + - +