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 0000000..fa3858f Binary files /dev/null and b/assets/icons/petal.png differ diff --git a/contact.html b/contact.html index 03c8833..544665b 100644 --- a/contact.html +++ b/contact.html @@ -369,22 +369,33 @@
- -
- +
@@ -607,6 +613,13 @@ z-index: 1; pointer-events: none; } + /* Icon swap (homepage only): show petal when wrapper has .open */ + #menuWrap.open #menuPetal { + opacity: 1; + } + #menuWrap.open #menuGrid { + opacity: 0; + } .menu-outline { position: absolute; inset: 0; @@ -883,18 +896,8 @@ const navEl = document.getElementById("navMenu"); const gridEl = document.getElementById("menuGrid"); if (navEl) navEl.classList.add("hidden"); - if (gridEl) { - gridEl.innerHTML = ` - - - - - - - - - `; - } + 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 @@ - +
- - -
-
- -
-