diff --git a/about.html b/about.html index d7e6bbd..4c7a1a0 100644 --- a/about.html +++ b/about.html @@ -367,7 +367,7 @@
- - @@ -457,7 +454,7 @@ class="w-3 h-3 bg-kh3-red transform rotate-45 -mt-1.5" >
- +
Why - Contacts -
- + > + + @@ -558,7 +555,7 @@ > Why @@ -579,9 +576,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 9d18121..bcb1f9f 100644 --- a/js/main.js +++ b/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 = ` - - - - - - - - - - `; - 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 = ` - - - - - - - - - - `; - 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,58 +72,37 @@ 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 = ` - - - - - - - - - - `; + // Show closed petal, hide open petal + if (menuPetal) { + menuGrid.style.opacity = "1"; + menuPetal.style.opacity = "0"; + } 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"); - // Transform back to grid - menuGrid.innerHTML = ` - - - - - - - - - - `; + // Show closed petal, hide open petal + if (menuPetal) { + menuGrid.style.opacity = "1"; + menuPetal.style.opacity = "0"; + } 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"); - // Transform back to grid - menuGrid.innerHTML = ` - - - - - - - - - - `; + // Show closed petal, hide open petal + if (menuPetal) { + menuGrid.style.opacity = "1"; + menuPetal.style.opacity = "0"; + } isMenuOpen = false; } }); diff --git a/projects.html b/projects.html index 63440be..d25e309 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 @@ >
-
-
+ +