fix: change menu nav names
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
George Birikorang 2025-08-29 18:42:22 -04:00
parent 1c9a335d26
commit 1d80addd7a
8 changed files with 2452 additions and 700 deletions

View file

@ -175,11 +175,13 @@
id="navMenu"
>
<div class="p-8 flex flex-col h-full">
<!-- Logo -->
<!-- Logo -->
<div class="flex items-center gap-3 mb-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" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div>
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</a>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
@ -368,6 +370,47 @@
>
</a>
<!-- WHO - New position -->
<a
href="who.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">WHO</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>W</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
@ -462,7 +505,7 @@
<!-- Static Logo and Menu (copied from about.html) -->
<div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img
src="assets/images/kh3_logo_dark.png"
alt="KH3"
@ -472,7 +515,7 @@
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span
>
</div>
</a>
</div>
<!-- Menu Toggle with Transparent Background -->
@ -1153,6 +1196,35 @@
window.location.reload();
}
});
// Auto-scroll to content after 3 seconds
setTimeout(() => {
// Scroll just slightly to hint at content below (1.1 viewport heights)
const targetScroll = window.innerHeight * 1.1;
// Create a smooth, gradual scroll animation
const startScroll = window.pageYOffset;
const distance = targetScroll - startScroll;
const duration = 4000; // 4 seconds for slower, smoother animation
let start = null;
function animateScroll(currentTime) {
if (start === null) start = currentTime;
const timeElapsed = currentTime - start;
const progress = Math.min(timeElapsed / duration, 1);
// Easing function for smooth deceleration
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
window.scrollTo(0, startScroll + distance * easeOutQuart);
if (progress < 1) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
}, 3000);
</script>
<script src="js/main.js"></script>
<script>