diff --git a/about.html b/about.html index 4c7a1a0..0007b38 100644 --- a/about.html +++ b/about.html @@ -367,7 +367,7 @@
- +
Why - Contacts -
- + > + + @@ -555,7 +558,7 @@ > Why @@ -576,9 +579,9 @@ WHO
- + - +
{ - 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); -}); diff --git a/js/main.js b/js/main.js index bcb1f9f..9d18121 100644 --- a/js/main.js +++ b/js/main.js @@ -21,49 +21,42 @@ 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"); - // Show closed petal, hide open petal - if (menuPetal) { - menuGrid.style.opacity = "1"; - menuPetal.style.opacity = "0"; - console.log("Showing closed petal, hiding open petal"); - } + // Transform back to full grid + menuGrid.innerHTML = ` + + + + + + + + + + `; + menuGrid.style.transform = "scale(1)"; isMenuOpen = false; } else { // Open menu - console.log("Opening menu..."); navMenu.classList.remove("hidden"); - // Hide closed petal, show open petal - if (menuPetal) { - menuGrid.style.opacity = "0"; - menuPetal.style.opacity = "1"; - console.log("Hiding closed petal, showing open petal"); - } + // Transform to compressed state - only center 5 dots, corner dots disappear + menuGrid.innerHTML = ` + + + + + + + + + + `; + menuGrid.style.transform = "scale(0.8)"; isMenuOpen = true; } }); @@ -72,37 +65,58 @@ function initNavigation() { document.addEventListener("click", (e) => { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { navMenu.classList.add("hidden"); - // Show closed petal, hide open petal - if (menuPetal) { - menuGrid.style.opacity = "1"; - menuPetal.style.opacity = "0"; - } + // Transform back to grid + menuGrid.innerHTML = ` + + + + + + + + + + `; isMenuOpen = false; - } - }); + } + }); - // Close navigation when clicking on a link - navLinks.forEach((link) => { - link.addEventListener("click", function () { + // Close navigation when clicking on a link + navLinks.forEach((link) => { + link.addEventListener("click", function () { navMenu.classList.add("hidden"); - // Show closed petal, hide open petal - if (menuPetal) { - menuGrid.style.opacity = "1"; - menuPetal.style.opacity = "0"; - } + // Transform back to grid + menuGrid.innerHTML = ` + + + + + + + + + + `; isMenuOpen = false; }); - }); + }); - // Close navigation with Escape key - document.addEventListener("keydown", function (e) { + // Close navigation with Escape key + document.addEventListener("keydown", function (e) { if (e.key === "Escape" && !navMenu.classList.contains("hidden")) { navMenu.classList.add("hidden"); - // Show closed petal, hide open petal - if (menuPetal) { - menuGrid.style.opacity = "1"; - menuPetal.style.opacity = "0"; - } + // Transform back to grid + menuGrid.innerHTML = ` + + + + + + + + + + `; isMenuOpen = false; } }); diff --git a/projects.html b/projects.html index d25e309..63440be 100644 --- a/projects.html +++ b/projects.html @@ -31,7 +31,7 @@ > KH3 -
+ - +
@@ -361,7 +361,7 @@ > KH3 -
+
-
+ - -
@@ -577,7 +577,7 @@ id="modalCategory" class="text-kh3-red text-sm font-medium tracking-wider" >

-
+ - +
@@ -618,8 +618,8 @@ >
-
-
+ +