georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: replace dark logo with light logo across all pages and update menu toggle animations

Browse source
This commit is contained in:
George Birikorang 2025-08-31 22:47:28 -04:00
parent 1d80addd7a
commit a2fe128ff7
10 changed files with 121 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

59
about.html
View file

@ -356,7 +356,7 @@
<div class="fixed top-6 left-8 z-40"> <div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo.png"
alt="KH3" alt="KH3"
class="w-12 h-12" class="w-12 h-12"
/> />
@ -370,7 +370,7 @@
<!-- Menu Toggle with Transparent Background --> <!-- Menu Toggle with Transparent Background -->
<div class="fixed top-6 right-8 z-40"> <div class="fixed top-6 right-8 z-40">
<div <div
class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3" class="cursor-pointer bg-black/30 backdrop-blur-sm rounded-lg p-3 transition-transform duration-300"
id="menuToggle" id="menuToggle"
> >
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid"> <div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
@ -955,7 +955,7 @@
<div class="text-center"> <div class="text-center">
<a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center"> <a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo.png"
alt="KH3" alt="KH3"
class="w-16 h-16" class="w-16 h-16"
/> />
@ -1437,6 +1437,19 @@
if (isMenuOpen) { if (isMenuOpen) {
// Close menu // Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
// Transform back to full grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full transition-opacity duration-300"></span>
`;
menuToggle.style.transform = "scale(1)";
if (closeBtnEl) { if (closeBtnEl) {
closeBtnEl.remove(); closeBtnEl.remove();
closeBtnEl = null; closeBtnEl = null;
@ -1445,18 +1458,20 @@
} else { } else {
// Open menu // Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X // Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = ` menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full opacity-0 transition-opacity duration-300"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`; `;
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 // Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button"); closeBtnEl = document.createElement("button");
@ -1471,6 +1486,19 @@
navMenu.appendChild(closeBtnEl); navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => { closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
// Transform back to full grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
menuGrid.style.transform = "scale(1)";
if (closeBtnEl) { if (closeBtnEl) {
closeBtnEl.remove(); closeBtnEl.remove();
closeBtnEl = null; closeBtnEl = null;
@ -1485,6 +1513,19 @@
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) { if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
// Transform back to full grid
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
menuGrid.style.transform = "scale(1)";
if (closeBtnEl) { if (closeBtnEl) {
closeBtnEl.remove(); closeBtnEl.remove();
closeBtnEl = null; closeBtnEl = null;

BIN
assets/images/kh3_logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Before After
Before After

BIN
assets/images/kh3_logo1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 186 KiB

0
assets/images/kh3_logo_dark.png → assets/images/kh3_logo_darkk.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB

Before After
Before After

17
contact.html
View file

@ -359,7 +359,7 @@
<div class="fixed top-6 left-8 z-40"> <div class="fixed top-6 left-8 z-40">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity"> <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo.png"
alt="KH3" alt="KH3"
class="w-12 h-12" class="w-12 h-12"
/> />
@ -695,7 +695,7 @@
> >
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity"> <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo.png"
alt="KH3" alt="KH3"
class="w-12 h-12" class="w-12 h-12"
/> />
@ -892,18 +892,19 @@
} else { } else {
// Open menu // Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X // Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = ` menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`; `;
menuGrid.style.transform = "scale(0.8)";
// Place red X close button at the bottom of the menu panel // Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button"); closeBtnEl = document.createElement("button");

25
index.html
View file

@ -371,13 +371,9 @@
href="index.html" href="index.html"
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity" class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
> >
<img <img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
src="assets/images/kh3_logo_dark.png"
alt="KH3"
class="w-16 h-16"
/>
<span <span
class="hidden sm:inline text-white text-2xl font-bold tracking-wider animate-logo-glow" class="hidden sm:inline text-white text-2xl font-bold tracking-wider"
>KH3</span >KH3</span
> >
</a> </a>
@ -574,11 +570,7 @@
href="index.html" href="index.html"
class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center"
> >
<img <img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
src="assets/images/kh3_logo_dark.png"
alt="KH3"
class="w-16 h-16"
/>
<span class="text-4xl font-bold tracking-wider">KH3</span> <span class="text-4xl font-bold tracking-wider">KH3</span>
</a> </a>
<div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden"> <div class="w-64 h-1 bg-neutral-800 rounded-full overflow-hidden">
@ -632,17 +624,6 @@
} }
} }
/* Logo glow animation */
@keyframes logoGlow {
0%,
100% {
filter: drop-shadow(0 0 5px rgba(220, 38, 38, 0.3));
}
50% {
filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.6));
}
}
/* Page transition animations */ /* Page transition animations */
@keyframes staggerFadeOut { @keyframes staggerFadeOut {
0% { 0% {

18
js/main.js
View file

@ -27,7 +27,7 @@ function initNavigation() {
if (isMenuOpen) { if (isMenuOpen) {
// Close menu // Close menu
navMenu.classList.add("hidden"); navMenu.classList.add("hidden");
// Transform back to grid // Transform back to full grid
menuGrid.innerHTML = ` menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
@ -39,16 +39,24 @@ function initNavigation() {
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span> <span class="w-1 h-1 bg-white rounded-full"></span>
`; `;
menuGrid.style.transform = "scale(1)";
isMenuOpen = false; isMenuOpen = false;
} else { } else {
// Open menu // Open menu
navMenu.classList.remove("hidden"); navMenu.classList.remove("hidden");
// Transform to red X // Transform to compressed state - only center 5 dots, corner dots disappear
menuGrid.innerHTML = ` menuGrid.innerHTML = `
<svg class="w-6 h-6 text-kh3-red hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> <span class="w-1 h-1 bg-white rounded-full"></span>
</svg> <span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full opacity-0"></span>
`; `;
menuGrid.style.transform = "scale(0.8)";
isMenuOpen = true; isMenuOpen = true;
} }
}); });

6
projects.html
View file

@ -362,11 +362,7 @@
href="index.html" href="index.html"
class="flex items-center gap-3 hover:opacity-80 transition-opacity" class="flex items-center gap-3 hover:opacity-80 transition-opacity"
> >
<img <img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
src="assets/images/kh3_logo_dark.png"
alt="KH3"
class="w-12 h-12"
/>
<span <span
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg" class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"
>KH3</span >KH3</span

6
services.html
View file

@ -178,7 +178,7 @@
<!-- Logo --> <!-- Logo -->
<div class="flex items-center gap-3 mb-12"> <div class="flex items-center gap-3 mb-12">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity"> <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" /> <img src="assets/images/kh3_logo.png" alt="KH3" class="w-20 h-20" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span> <span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</a> </a>
</div> </div>
@ -507,9 +507,9 @@
<div class="fixed top-6 left-8 z-40"> <div class="fixed top-6 left-8 z-40">
<a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity"> <a href="index.html" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo.png"
alt="KH3" alt="KH3"
class="w-12 h-12" class="w-20 h-20"
/> />
<span <span
class="text-white text-2xl font-bold tracking-wider drop-shadow-lg" class="text-white text-2xl font-bold tracking-wider drop-shadow-lg"

4
who.html
View file

@ -356,7 +356,7 @@
<div class="fixed top-6 left-8 z-40"> <div class="fixed top-6 left-8 z-40">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo.png"
alt="KH3" alt="KH3"
class="w-12 h-12" class="w-12 h-12"
/> />
@ -1052,7 +1052,7 @@
<div class="text-center"> <div class="text-center">
<a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center"> <a href="index.html" class="flex items-center gap-3 mb-8 hover:opacity-80 transition-opacity justify-center">
<img <img
src="assets/images/kh3_logo_dark.png" src="assets/images/kh3_logo.png"
alt="KH3" alt="KH3"
class="w-16 h-16" class="w-16 h-16"
/> />