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

feat: complete projects page

Browse source
This commit is contained in:
George Birikorang 2025-08-28 20:16:11 -04:00
parent 2595c7571e
commit ddc015cffb
11 changed files with 3473 additions and 564 deletions
Download patch file Download diff file Expand all files Collapse all files

415
about.html
View file

@ -37,19 +37,19 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">HOME</span>
<span
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
@ -57,9 +57,8 @@
"
>H</span
>
<span
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
@ -69,7 +68,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
@ -79,7 +77,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
@ -90,31 +87,104 @@
</a>
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>ABOUT US</a
>
>
<span class="md:hidden">ABOUT US</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES - More right -->
<a
href="services.html"
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">SERVICES</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
@ -124,7 +194,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
@ -134,7 +203,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
@ -144,7 +212,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
@ -154,7 +221,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
@ -164,7 +230,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
@ -174,7 +239,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
@ -184,7 +248,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
@ -203,8 +266,82 @@
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>PROJECTS</a
data-trans="crossfade"
>
<span class="md:hidden">PROJECTS</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS - More right -->
<a
@ -215,8 +352,82 @@
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>CONTACTS</a
data-trans="crossfade"
>
<span class="md:hidden">CONTACTS</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div>
</div>
</div>
@ -262,7 +473,7 @@
<!-- Main Content -->
<main class="pt-20">
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
<section class="relative bg-kh3-black">
<section class="relative bg-kh3-black hero-section">
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
<!-- Left dark panel -->
<div class="relative bg-kh3-black flex items-center">
@ -333,7 +544,7 @@
</section>
<!-- Dream Design Deliver Section -->
<section class="py-20 bg-kh3-black text-white relative">
<section class="py-20 bg-kh3-black text-white relative dream-design-deliver">
<div class="container mx-auto px-8 max-w-6xl">
<div class="text-center">
<!-- Elegant horizontal layout -->
@ -433,7 +644,7 @@
</section>
<!-- Mission & Vision Section -->
<section class="py-32 bg-kh3-grey text-kh3-black">
<section class="py-32 bg-kh3-grey text-kh3-black mission-vision">
<div class="container mx-auto px-8 max-w-7xl">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
<!-- Mission Card -->
@ -567,8 +778,8 @@
</div>
</section>
<!-- Values Section -->
<section class="py-32 bg-white text-kh3-black">
<!-- Values Section -->
<section class="py-32 bg-white text-kh3-black values-section">
<div class="container mx-auto px-8 max-w-6xl">
<div class="text-center mb-20">
<h2
@ -743,7 +954,7 @@
</section>
<!-- Team Section -->
<section class="py-32 bg-kh3-black text-white">
<section class="py-32 bg-kh3-black text-white team-section">
<div class="container mx-auto px-8 max-w-7xl">
<div class="text-center mb-20">
<!-- Main Title -->
@ -1648,11 +1859,11 @@
@keyframes staggerFadeOut {
0% {
opacity: 1;
transform: translateY(0);
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-20px);
transform: translateY(-20px) scale(0.95);
}
}
@ -1764,39 +1975,46 @@
}
.diamond-pulse {
animation: diamondPulse 4s ease-in-out infinite;
animation: diamondPulse 2s ease-in-out infinite;
}
.diamond-pulse:nth-child(1) {
animation-delay: 0s;
.diamond-pulse:nth-child(1) { animation-delay: 0s; }
.diamond-pulse:nth-child(2) { animation-delay: 0.2s; }
.diamond-pulse:nth-child(3) { animation-delay: 0.4s; }
.diamond-pulse:nth-child(4) { animation-delay: 0.6s; }
.diamond-pulse:nth-child(5) { animation-delay: 0.8s; }
/* Page transition animations */
@keyframes staggerFadeOut {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
}
.diamond-pulse:nth-child(2) {
animation-delay: 0.5s;
/* Section classes for targeting */
.hero-section {
/* This class will be added to the hero section for targeting */
}
.diamond-pulse:nth-child(3) {
animation-delay: 1s;
.dream-design-deliver {
/* This class will be added to the dream design deliver section for targeting */
}
.diamond-pulse:nth-child(4) {
animation-delay: 1.5s;
.mission-vision {
/* This class will be added to the mission vision section for targeting */
}
.diamond-pulse:nth-child(5) {
animation-delay: 2s;
.values-section {
/* This class will be added to the values section for targeting */
}
.diamond-pulse:nth-child(6) {
animation-delay: 2.5s;
}
.diamond-pulse:nth-child(7) {
animation-delay: 3s;
}
.diamond-pulse:nth-child(8) {
animation-delay: 3.5s;
.team-section {
/* This class will be added to the team section for targeting */
}
</style>
@ -1863,6 +2081,15 @@
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
@ -1874,14 +2101,8 @@
<span class="w-1 h-1 bg-white rounded-full"></span>
<span class="w-1 h-1 bg-white rounded-full"></span>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
@ -1889,7 +2110,8 @@
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>`;
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
@ -1897,21 +2119,23 @@
closeBtnEl.remove();
closeBtnEl = null;
}
menuGrid.innerHTML = `
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>`;
isMenuOpen = false;
});
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});
}
// Custom cursor functionality
@ -2073,6 +2297,53 @@
teamObserver.observe(teamSection);
}
// Page transition functionality
function handlePageTransition(e) {
e.preventDefault();
const targetUrl = e.currentTarget.href;
const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
// Get all elements to animate out
const elementsToAnimate = [
document.querySelector('.hero-section'),
document.querySelector('.dream-design-deliver'),
document.querySelector('.mission-vision'),
document.querySelector('.values-section'),
document.querySelector('.team-section'),
document.querySelector('main')
].filter(el => el);
// Animate elements out in order
elementsToAnimate.forEach((element, index) => {
setTimeout(() => {
if (element) {
element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
}
}, index * 100);
});
// Navigate after animations complete
setTimeout(() => {
window.location.href = targetUrl;
}, elementsToAnimate.length * 100 + 600);
}
// Add event listeners for page transitions
document.addEventListener('DOMContentLoaded', function() {
const transitionLinks = document.querySelectorAll('[data-trans]');
transitionLinks.forEach(link => {
link.addEventListener('click', handlePageTransition);
});
});
// Handle back/forward navigation
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
// Page was loaded from cache (back/forward)
window.location.reload();
}
});
</script>
</body>
</html>

516
contact.html
View file

@ -39,19 +39,397 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a href="index.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">HOME</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<!-- ABOUT US - Slightly right -->
<a href="about.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.2s; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">ABOUT US</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES - More right -->
<a href="services.html" class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.35s; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">SERVICES</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PROJECTS - Most right -->
<a href="projects.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.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
<a
href="projects.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.55s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">PROJECTS</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS - More right -->
<a href="contact.html" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
<a
href="contact.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>
<span class="md:hidden">CONTACTS</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div>
</div>
@ -92,7 +470,7 @@
</div>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center">
<section class="relative h-screen flex items-center justify-center hero-section">
<!-- Background Image -->
<div class="absolute inset-0">
<img
@ -125,7 +503,7 @@
</section>
<!-- Contact Section -->
<section class="relative min-h-screen flex items-center">
<section class="relative min-h-screen flex items-center contact-form-section">
<!-- Background Image with Overlay -->
<div class="absolute inset-0">
<img
@ -337,7 +715,7 @@
</section>
<!-- Map Section -->
<section class="py-20 bg-kh3-black text-white">
<section class="py-20 bg-kh3-black text-white map-section">
<div class="container mx-auto px-8 max-w-6xl">
<h2
class="text-4xl font-bold text-center mb-16 opacity-0"
@ -543,6 +921,36 @@
.masked-reveal {
clip-path: inset(0 100% 0 0);
}
/* Request quote button hover effect */
.bg-kh3-red:hover {
box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
}
/* Page transition animations */
@keyframes staggerFadeOut {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
}
/* Section classes for targeting */
.hero-section {
/* This class will be added to the hero section for targeting */
}
.contact-form-section {
/* This class will be added to the contact form section for targeting */
}
.map-section {
/* This class will be added to the map section for targeting */
}
</style>
<script>
@ -559,17 +967,6 @@
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
@ -578,6 +975,19 @@
} else {
// Open menu
navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X
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>
`;
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
@ -595,22 +1005,23 @@
closeBtnEl.remove();
closeBtnEl = null;
}
menuGrid.innerHTML = `
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
<span class=\"w-1 h-1 bg-white\"></span>
`;
isMenuOpen = false;
});
isMenuOpen = true;
}
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});
}
// Form submission
@ -687,6 +1098,51 @@
requestAnimationFrame(animation);
}
}, 2500);
// Page transition functionality
function handlePageTransition(e) {
e.preventDefault();
const targetUrl = e.currentTarget.href;
const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
// Get all elements to animate out
const elementsToAnimate = [
document.querySelector('.hero-section'),
document.querySelector('.contact-form-section'),
document.querySelector('.map-section'),
document.querySelector('main')
].filter(el => el);
// Animate elements out in order
elementsToAnimate.forEach((element, index) => {
setTimeout(() => {
if (element) {
element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
}
}, index * 100);
});
// Navigate after animations complete
setTimeout(() => {
window.location.href = targetUrl;
}, elementsToAnimate.length * 100 + 600);
}
// Add event listeners for page transitions
document.addEventListener('DOMContentLoaded', function() {
const transitionLinks = document.querySelectorAll('[data-trans]');
transitionLinks.forEach(link => {
link.addEventListener('click', handlePageTransition);
});
});
// Handle back/forward navigation
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
// Page was loaded from cache (back/forward)
window.location.reload();
}
});
</script>
<script>
// Ensure clean state on back/forward cache restores

18
data/approach.json
View file

@ -1,18 +0,0 @@
[
{
"number": "01",
"title": "Professional",
"description": "We maintain the highest standards of professionalism in every aspect of our work. From initial consultation to project completion, our team demonstrates expertise, reliability, and unwavering commitment to quality. We adhere to international best practices and local regulations, ensuring your project meets all requirements while exceeding expectations."
},
{
"number": "02",
"title": "Innovative",
"description": "Innovation drives everything we do at KH3. We embrace cutting-edge technologies, sustainable practices, and creative solutions to deliver exceptional results. Our approach combines traditional construction wisdom with modern methodologies, creating spaces that are both timeless and forward-thinking."
},
{
"number": "03",
"title": "Caring",
"description": "We care deeply about our clients, our team, and the communities we serve. This commitment to care manifests in our attention to detail, our dedication to client satisfaction, and our responsibility to environmental stewardship. We build relationships that last beyond project completion."
}
]

15
data/brands.json
View file

@ -1,15 +0,0 @@
[
{
"name": "Symphony",
"blurb": "Symphony specializes in premium audio-visual integration and smart building solutions. We transform spaces with cutting-edge technology that enhances user experience and operational efficiency.",
"logo": "images/brands/symphony-logo.png",
"url": "https://symphony-gh.com"
},
{
"name": "Knock",
"blurb": "Knock delivers innovative door and access solutions for commercial and residential projects. Our products combine security, aesthetics, and functionality to create seamless entry experiences.",
"logo": "images/brands/knock-logo.png",
"url": "https://knock-gh.com"
}
]

294
data/projects.json
View file

@ -1,145 +1,203 @@
[
{
"slug": "accra-corporate-tower",
"title": "Accra Corporate Tower",
"id": "proj-001",
"name": "ACCRA CORPORATE TOWER",
"category": "Corporate",
"location": "Accra, Ghana",
"client": "Ghana Investment Promotion Centre",
"typeOfWork": "Turnkey Design & Fit-out",
"sizeM2": 2500,
"year": 2023,
"coverImage": "images/projects/accra-corporate-tower-cover.jpg",
"gallery": [
"images/projects/accra-corporate-tower-1.jpg",
"images/projects/accra-corporate-tower-2.jpg",
"images/projects/accra-corporate-tower-3.jpg",
"images/projects/accra-corporate-tower-4.jpg",
"images/projects/accra-corporate-tower-5.jpg",
"images/projects/accra-corporate-tower-6.jpg"
"description": "A state-of-the-art 15-story corporate tower featuring modern office spaces, executive suites, and premium amenities. The project showcases innovative construction techniques and sustainable design principles.",
"client": "Accra Development Consortium",
"typeOfWork": "Construction & Project Management",
"size": "25,000 SQM",
"duration": "18 months",
"completionDate": "2023",
"images": [
"assets/images/room.png",
"assets/images/chair.png",
"assets/images/google.png",
"assets/images/room.png"
],
"summary": "A state-of-the-art corporate headquarters featuring modern workspace design, sustainable materials, and cutting-edge technology integration.",
"story": {
"challenge": "Create a prestigious corporate environment that reflects Ghana's economic growth while incorporating sustainable design principles.",
"approach": "Implemented modular workspace design with natural lighting, local materials, and flexible meeting spaces.",
"outcome": "Delivered a 2,500 sqm premium office space that increased employee productivity by 40% and achieved LEED certification."
}
"highlights": [
"LEED Gold certification",
"Smart building technology integration",
"Premium office fit-outs",
"Executive lounge and conference facilities"
],
"details_url": "/projects/accra-corporate-tower.html"
},
{
"slug": "kumasi-university-library",
"title": "Kumasi University Library",
"category": "Education",
"location": "Kumasi, Ghana",
"client": "Kwame Nkrumah University of Science and Technology",
"typeOfWork": "Design & Build",
"sizeM2": 1800,
"year": 2023,
"coverImage": "images/projects/kumasi-library-cover.jpg",
"gallery": [
"images/projects/kumasi-library-1.jpg",
"images/projects/kumasi-library-2.jpg",
"images/projects/kumasi-library-3.jpg",
"images/projects/kumasi-library-4.jpg"
"id": "proj-002",
"name": "KH3 HEADQUARTERS",
"category": "Corporate",
"location": "Accra, Ghana",
"description": "Our own headquarters building featuring contemporary design with open-plan workspaces, collaborative zones, and modern amenities. A showcase of our design and construction capabilities.",
"client": "KH3 Group",
"typeOfWork": "Design Development & Fit-out",
"size": "1,200 SQM",
"duration": "6 months",
"completionDate": "2024",
"images": [
"assets/images/chair.png",
"assets/images/google.png",
"assets/images/room.png",
"assets/images/chair.png"
],
"summary": "Modern academic library designed to foster learning and research with flexible study spaces and digital integration.",
"story": {
"challenge": "Transform traditional library spaces into modern learning environments that support both individual study and collaborative research.",
"approach": "Designed flexible zones with movable furniture, digital workstations, and natural lighting to create an inspiring academic atmosphere.",
"outcome": "Created a 1,800 sqm learning hub that increased student engagement and became a model for modern academic facilities in West Africa."
}
"highlights": [
"Modern open-plan design",
"Collaborative workspace zones",
"Premium materials and finishes",
"Integrated technology systems"
],
"details_url": "/projects/kh3-headquarters.html"
},
{
"slug": "tema-harbor-hotel",
"title": "Tema Harbor Hotel",
"category": "Hospitality",
"location": "Tema, Ghana",
"client": "Tema Development Corporation",
"typeOfWork": "Interior Design & Fit-out",
"sizeM2": 3200,
"year": 2022,
"coverImage": "images/projects/tema-hotel-cover.jpg",
"gallery": [
"images/projects/tema-hotel-1.jpg",
"images/projects/tema-hotel-2.jpg",
"images/projects/tema-hotel-3.jpg",
"images/projects/tema-hotel-4.jpg",
"images/projects/tema-hotel-5.jpg"
"id": "proj-003",
"name": "LABONE PREMIUM APARTMENTS",
"category": "Residential",
"location": "Accra, Ghana",
"description": "Luxury residential development featuring 24 premium apartments with high-end finishes, modern amenities, and sophisticated design. Each unit showcases quality craftsmanship and attention to detail.",
"client": "Labone Properties Ltd",
"typeOfWork": "Construction & Interior Fit-out",
"size": "8,500 SQM",
"duration": "14 months",
"completionDate": "2023",
"images": [
"assets/images/google.png",
"assets/images/room.png",
"assets/images/chair.png",
"assets/images/google.png",
"assets/images/room.png"
],
"summary": "Luxury hotel interior featuring coastal-inspired design, premium finishes, and world-class amenities for business and leisure travelers.",
"story": {
"challenge": "Create a luxury hotel experience that celebrates Ghana's coastal heritage while meeting international hospitality standards.",
"approach": "Integrated local cultural elements with modern luxury design, using sustainable materials and creating seamless indoor-outdoor connections.",
"outcome": "Delivered a 3,200 sqm luxury hotel that achieved 4-star rating and became a landmark destination in Tema's hospitality sector."
}
"highlights": [
"Premium residential fit-outs",
"High-end kitchen and bathroom designs",
"Integrated smart home systems",
"Luxury amenities and facilities"
],
"details_url": "/projects/labone-apartments.html"
},
{
"slug": "accra-mall-retail",
"title": "Accra Mall Retail Expansion",
"id": "proj-004",
"name": "EAST LEGON SHOPPING CENTER",
"category": "Retail",
"location": "Accra, Ghana",
"client": "Accra Mall Management",
"typeOfWork": "Retail Fit-out & Design",
"sizeM2": 1500,
"year": 2022,
"coverImage": "images/projects/accra-mall-cover.jpg",
"gallery": [
"images/projects/accra-mall-1.jpg",
"images/projects/accra-mall-2.jpg",
"images/projects/accra-mall-3.jpg",
"images/projects/accra-mall-4.jpg"
"description": "Modern retail development featuring boutique shops, restaurants, and entertainment spaces. The project includes comprehensive fit-out services for multiple retail tenants with diverse design requirements.",
"client": "East Legon Retail Group",
"typeOfWork": "Retail Fit-out & Project Management",
"size": "12,000 SQM",
"duration": "10 months",
"completionDate": "2023",
"images": [
"assets/images/room.png",
"assets/images/chair.png",
"assets/images/google.png",
"assets/images/room.png"
],
"summary": "Modern retail spaces designed to enhance customer experience and maximize sales potential for premium brands.",
"story": {
"challenge": "Transform existing mall spaces into premium retail environments that attract international brands and enhance customer experience.",
"approach": "Implemented modular retail design with flexible layouts, premium lighting, and customer flow optimization.",
"outcome": "Created 1,500 sqm of premium retail space that increased foot traffic by 60% and attracted major international brands."
}
"highlights": [
"Multiple retail tenant fit-outs",
"Modern shopping center design",
"Restaurant and entertainment spaces",
"Premium retail finishes"
],
"details_url": "/projects/east-legon-shopping.html"
},
{
"slug": "takoradi-office-complex",
"title": "Takoradi Office Complex",
"id": "proj-005",
"name": "KUMASI BUSINESS HUB",
"category": "Corporate",
"location": "Kumasi, Ghana",
"description": "Innovative business center designed to support startups and established companies. Features flexible office spaces, meeting rooms, and collaborative areas with modern technology integration.",
"client": "Kumasi Business Development Authority",
"typeOfWork": "Design & Construction Management",
"size": "6,500 SQM",
"duration": "12 months",
"completionDate": "2024",
"images": [
"assets/images/chair.png",
"assets/images/google.png",
"assets/images/room.png",
"assets/images/chair.png"
],
"highlights": [
"Flexible coworking spaces",
"Modern meeting facilities",
"Technology-enabled environments",
"Sustainable design features"
],
"details_url": "/projects/kumasi-business-hub.html"
},
{
"id": "proj-006",
"name": "TAKORADI PORT OFFICE COMPLEX",
"category": "Corporate",
"location": "Takoradi, Ghana",
"client": "Ghana National Petroleum Corporation",
"typeOfWork": "Design & Build",
"sizeM2": 2800,
"year": 2021,
"coverImage": "images/projects/takoradi-office-cover.jpg",
"gallery": [
"images/projects/takoradi-office-1.jpg",
"images/projects/takoradi-office-2.jpg",
"images/projects/takoradi-office-3.jpg",
"images/projects/takoradi-office-4.jpg",
"images/projects/takoradi-office-5.jpg"
"description": "Professional office complex for port operations and maritime services. Features robust construction, modern office fit-outs, and specialized facilities for port management and logistics operations.",
"client": "Ghana Ports and Harbours Authority",
"typeOfWork": "Construction & Office Fit-out",
"size": "15,000 SQM",
"duration": "16 months",
"completionDate": "2023",
"images": [
"assets/images/google.png",
"assets/images/room.png",
"assets/images/chair.png",
"assets/images/google.png"
],
"summary": "Modern office complex designed for the energy sector, featuring collaborative workspaces and advanced technology integration.",
"story": {
"challenge": "Design a corporate headquarters that reflects the energy sector's innovation while creating productive work environments.",
"approach": "Created open-plan offices with collaborative zones, advanced AV systems, and sustainable energy features.",
"outcome": "Delivered a 2,800 sqm office complex that improved team collaboration and became a benchmark for corporate design in Ghana's energy sector."
}
"highlights": [
"Specialized port facilities",
"Modern office environments",
"Operational control centers",
"Durable construction materials"
],
"details_url": "/projects/takoradi-port.html"
},
{
"slug": "cape-coast-school",
"title": "Cape Coast International School",
"category": "Education",
"id": "proj-007",
"name": "CAPE COAST HOTEL RENOVATION",
"category": "Hospitality",
"location": "Cape Coast, Ghana",
"client": "Cape Coast Education Trust",
"typeOfWork": "Turnkey Design & Build",
"sizeM2": 2200,
"year": 2021,
"coverImage": "images/projects/cape-coast-school-cover.jpg",
"gallery": [
"images/projects/cape-coast-school-1.jpg",
"images/projects/cape-coast-school-2.jpg",
"images/projects/cape-coast-school-3.jpg",
"images/projects/cape-coast-school-4.jpg"
"description": "Comprehensive renovation and fit-out of a historic hotel, modernizing facilities while preserving architectural heritage. Includes guest room upgrades, restaurant renovations, and amenity improvements.",
"client": "Cape Coast Hospitality Group",
"typeOfWork": "Renovation & Hospitality Fit-out",
"size": "8,000 SQM",
"duration": "8 months",
"completionDate": "2024",
"images": [
"assets/images/room.png",
"assets/images/chair.png",
"assets/images/google.png",
"assets/images/room.png"
],
"summary": "International school campus featuring modern classrooms, science labs, and sports facilities designed for 21st-century learning.",
"story": {
"challenge": "Create an educational environment that meets international standards while incorporating local cultural elements and sustainable design.",
"approach": "Designed flexible learning spaces with integrated technology, outdoor learning areas, and community gathering spaces.",
"outcome": "Built a 2,200 sqm school campus that enhanced learning outcomes and became a model for modern education facilities in Ghana."
}
"highlights": [
"Historic preservation",
"Modern hospitality fit-outs",
"Restaurant and bar renovations",
"Premium guest amenities"
],
"details_url": "/projects/cape-coast-hotel.html"
},
{
"id": "proj-008",
"name": "TEMA INDUSTRIAL WAREHOUSE",
"category": "Industrial",
"location": "Tema, Ghana",
"description": "Large-scale industrial warehouse facility designed for manufacturing and logistics operations. Features high-bay storage systems, loading docks, and specialized industrial fit-outs for efficient operations.",
"client": "Tema Industrial Development Corporation",
"typeOfWork": "Industrial Construction & Fit-out",
"size": "35,000 SQM",
"duration": "20 months",
"completionDate": "2023",
"images": [
"assets/images/chair.png",
"assets/images/google.png",
"assets/images/room.png",
"assets/images/chair.png"
],
"highlights": [
"High-bay storage systems",
"Industrial-grade construction",
"Efficient logistics design",
"Modern office facilities"
],
"details_url": "/projects/tema-warehouse.html"
}
]

54
data/services.json
View file

@ -1,54 +0,0 @@
[
{
"slug": "design",
"title": "Design",
"intro": "Our comprehensive design services transform your vision into detailed, buildable plans that optimize space, functionality, and aesthetics.",
"bullets": [
"Site assessment and feasibility studies",
"Conceptual design and space planning",
"Detailed architectural drawings and specifications",
"MEP (Mechanical, Electrical, Plumbing) design",
"Interior design and material selection",
"Lighting design and acoustic planning",
"3D visualization and virtual walkthroughs",
"Building Information Modeling (BIM)",
"Value engineering and cost optimization",
"Regulatory compliance and permit documentation"
]
},
{
"slug": "build",
"title": "Build",
"intro": "From groundbreaking to completion, our construction management expertise ensures projects are delivered on time, within budget, and to the highest quality standards.",
"bullets": [
"Project management and coordination",
"Construction planning and scheduling",
"Quality control and assurance",
"Health and safety management",
"Subcontractor management and coordination",
"Material procurement and logistics",
"Progress monitoring and reporting",
"Change order management",
"Commissioning and handover",
"Post-construction support and maintenance"
]
},
{
"slug": "furnish",
"title": "Furnish",
"intro": "Complete your space with our comprehensive furnishing services, from custom furniture design to complete fit-out solutions that bring your vision to life.",
"bullets": [
"Custom furniture design and manufacturing",
"Procurement and supply chain management",
"Installation and fit-out services",
"Workplace consultancy and optimization",
"Furniture layout and space planning",
"Audio-visual and technology integration",
"Signage and branding implementation",
"Soft furnishings and accessories",
"Maintenance and aftercare services",
"Sustainable and ergonomic solutions"
]
}
]

67
data/team.json
View file

@ -1,67 +0,0 @@
{
"team": [
{
"name": "Kwame Asante",
"role": "Managing Director",
"photo": "images/team/kwame-asante.jpg",
"bio": "With over 15 years of experience in construction project management, Kwame leads KH3's strategic vision and oversees all major projects. His expertise spans corporate, hospitality, and educational sectors across West Africa."
},
{
"name": "Ama Osei",
"role": "Head of Design",
"photo": "images/team/ama-osei.jpg",
"bio": "Ama brings 12 years of architectural and interior design experience to KH3. She specializes in sustainable design solutions and has led award-winning projects in Ghana's corporate and hospitality sectors."
},
{
"name": "Kofi Mensah",
"role": "Construction Manager",
"photo": "images/team/kofi-mensah.jpg",
"bio": "Kofi manages all construction operations with a focus on quality, safety, and timely delivery. His background in civil engineering and project management ensures excellence in every build."
},
{
"name": "Efua Addo",
"role": "Project Coordinator",
"photo": "images/team/efua-addo.jpg",
"bio": "Efua coordinates project delivery across all phases, from initial planning to final handover. Her attention to detail and client communication skills ensure seamless project execution."
},
{
"name": "Yaw Darko",
"role": "Senior Architect",
"photo": "images/team/yaw-darko.jpg",
"bio": "Yaw leads our architectural team with expertise in modern design principles and sustainable building practices. His innovative approach has shaped many of Ghana's landmark projects."
},
{
"name": "Akosua Boateng",
"role": "Interior Designer",
"photo": "images/team/akosua-boateng.jpg",
"bio": "Akosua creates inspiring interior spaces that balance functionality with aesthetics. Her work spans corporate offices, luxury hotels, and educational facilities across Ghana."
}
],
"partners": [
{
"name": "Ghana Investment Promotion Centre",
"logo": "images/partners/gipc-logo.png"
},
{
"name": "Kwame Nkrumah University of Science and Technology",
"logo": "images/partners/knust-logo.png"
},
{
"name": "Ghana National Petroleum Corporation",
"logo": "images/partners/gnpc-logo.png"
},
{
"name": "Tema Development Corporation",
"logo": "images/partners/tdc-logo.png"
},
{
"name": "Accra Mall Management",
"logo": "images/partners/accra-mall-logo.png"
},
{
"name": "Cape Coast Education Trust",
"logo": "images/partners/cape-coast-trust-logo.png"
}
]
}

174
index.html
View file

@ -39,12 +39,16 @@
<!-- HOME - Top -->
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>
<span class="md:hidden">HOME</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
@ -54,7 +58,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
@ -64,7 +67,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
@ -74,7 +76,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
@ -87,14 +88,19 @@
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">ABOUT&nbsp;US</span>
<span class="md:hidden">ABOUT US</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.15s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
@ -102,9 +108,8 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.175s;
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
@ -112,9 +117,8 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
@ -122,9 +126,8 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.225s;
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
@ -132,9 +135,8 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.25s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
@ -142,9 +144,8 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.275s;
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
@ -152,9 +153,8 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.3s;
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
@ -162,9 +162,8 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.325s;
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
@ -175,12 +174,17 @@
<!-- SERVICES - More right -->
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">SERVICES</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
@ -190,7 +194,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
@ -200,7 +203,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
@ -210,7 +212,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
@ -220,7 +221,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
@ -230,7 +230,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
@ -240,7 +239,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
@ -250,7 +248,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
@ -263,12 +260,17 @@
<!-- PROJECTS - Most right -->
<a
href="projects.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"
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.55s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">PROJECTS</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
@ -278,7 +280,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
@ -288,7 +289,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
@ -298,7 +298,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
@ -308,7 +307,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
@ -318,7 +316,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
@ -328,7 +325,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
@ -338,7 +334,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
@ -351,12 +346,17 @@
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">CONTACTS</span>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
@ -366,7 +366,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
@ -376,7 +375,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
@ -386,7 +384,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
@ -396,7 +393,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
@ -406,7 +402,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
@ -416,7 +411,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
@ -426,7 +420,6 @@
>
<span
class="hidden md:inline"
class="inline-block opacity-0 animate-fade-in-left"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
@ -444,7 +437,9 @@
<!-- Main Layout -->
<div class="min-h-screen relative">
<section class="relative min-h-screen flex flex-col md:flex-row">
<section
class="relative min-h-screen flex flex-col md:flex-row hero-section"
>
<!-- KH3 Logo -->
<div
class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
@ -502,7 +497,7 @@
<!-- LEFT COLUMN -->
<div
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-8 pt-24 md:pt-8 opacity-0 animate-fade-in-left"
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-8 pt-24 md:pt-8 opacity-0 animate-fade-in-left dream-design-deliver"
style="animation-delay: 0.8s; animation-fill-mode: forwards"
>
<div class="max-w-xl space-y-2">
@ -709,11 +704,32 @@
}
}
@keyframes staggerFadeOut {
to {
opacity: 0;
transform: translateY(10px) scale(0.98);
/* 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 */
@keyframes staggerFadeOut {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
}
/* Hero section class for targeting */
.hero-section {
/* This class will be added to the hero section for targeting */
}
@keyframes slideOutLeft {
@ -976,6 +992,52 @@
});
}
// Page transition functionality
function handlePageTransition(e) {
e.preventDefault();
const targetUrl = e.currentTarget.href;
const transitionType =
e.currentTarget.getAttribute("data-trans") || "crossfade";
// Get all elements to animate out
const elementsToAnimate = [
document.querySelector(".hero-section"),
document.querySelector(".dream-design-deliver"),
document.querySelector("main"),
].filter((el) => el);
// Animate elements out in order
elementsToAnimate.forEach((element, index) => {
setTimeout(() => {
if (element) {
element.style.animation =
"staggerFadeOut 0.6s ease-in-out forwards";
}
}, index * 100);
});
// Navigate after animations complete
setTimeout(() => {
window.location.href = targetUrl;
}, elementsToAnimate.length * 100 + 600);
}
// Add event listeners for page transitions
document.addEventListener("DOMContentLoaded", function () {
const transitionLinks = document.querySelectorAll("[data-trans]");
transitionLinks.forEach((link) => {
link.addEventListener("click", handlePageTransition);
});
});
// Handle back/forward navigation
window.addEventListener("pageshow", function (event) {
if (event.persisted) {
// Page was loaded from cache (back/forward)
window.location.reload();
}
});
// Loading screen with improved timing
window.addEventListener("load", () => {
const loadingScreen = document.getElementById("loadingScreen");

1789
projects.html
View file

File diff suppressed because it is too large Load diff

520
services.html
View file

@ -149,6 +149,23 @@
opacity: 1;
}
}
/* Page transition animations */
@keyframes staggerFadeOut {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
}
/* Hero section class for targeting */
.hero-section {
/* This class will be added to the hero section for targeting */
}
</style>
</head>
<body class="bg-kh3-black text-white font-montserrat">
@ -173,27 +190,395 @@
<!-- HOME - Top -->
<a
href="index.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.05s; animation-fill-mode: forwards; animation-duration: 0.3s;">HOME</a>
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">HOME</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.05s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>H</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.075s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.1s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>M</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.125s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
</a>
<!-- ABOUT US - Slightly right -->
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.2s; animation-fill-mode: forwards; animation-duration: 0.3s;">ABOUT US</a>
<a
href="about.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">ABOUT US</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.2s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.225s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>B</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.25s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.275s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.325s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>&nbsp;</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>U</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- SERVICES - More right -->
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.35s; animation-fill-mode: forwards; animation-duration: 0.3s;">SERVICES</a>
<a
href="services.html"
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
>
<span class="md:hidden">SERVICES</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.35s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.375s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.425s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>V</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.45s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>I</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.475s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.525s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- PROJECTS - Most right -->
<a
href="projects.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.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
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.55s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">PROJECTS</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.55s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>P</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.575s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>R</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.625s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>J</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.65s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>E</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.675s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.725s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.3s;
"
data-trans="crossfade"
>
<span class="md:hidden">CONTACTS</span>
<span
class="hidden md:inline"
style="
animation-delay: 0.75s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.775s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>O</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>N</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.825s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.85s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>A</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.875s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>C</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>T</span
>
<span
class="hidden md:inline"
style="
animation-delay: 0.925s;
animation-fill-mode: forwards;
animation-duration: 0.15s;
"
>S</span
>
</a>
</div>
</div>
</div>
@ -239,7 +624,7 @@
<!-- Main Content -->
<main class="pt-20">
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
<section class="relative bg-kh3-black">
<section class="relative bg-kh3-black hero-section">
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
<!-- Left dark panel -->
<div class="relative bg-kh3-black flex items-center justify-center">
@ -431,7 +816,7 @@
</section>
<!-- Services Overview (hidden) -->
<section class="py-32 bg-white hidden">
<section class="py-32 bg-white hidden" id="serviceDetails">
<!-- Construction Project Management -->
<section
id="construction"
@ -782,40 +1167,59 @@
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));
})();
// Menu toggle functionality (copied behavior from about.html)
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
if (isMenuOpen) {
// Close menu
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Keep the grid icon as is, don't transform to X
menuGrid.innerHTML = `
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-5 h-5 text-kh3-red" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</div>
<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>
`;
// 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 = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
});
isMenuOpen = true;
}
});
@ -824,23 +1228,57 @@
document.addEventListener("click", (e) => {
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.add("hidden");
menuGrid.innerHTML = `
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
<span class="w-1 h-1 bg-white"></span>
`;
if (closeBtnEl) {
closeBtnEl.remove();
closeBtnEl = null;
}
isMenuOpen = false;
}
});
// Ensure grid icon is static (no custom animation transforms)
if (menuGrid) menuGrid.style.transform = "none";
}
// Page transition functionality
function handlePageTransition(e) {
e.preventDefault();
const targetUrl = e.currentTarget.href;
const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
// Get all elements to animate out
const elementsToAnimate = [
document.querySelector('.hero-section'),
document.querySelector('main')
].filter(el => el);
// Animate elements out in order
elementsToAnimate.forEach((element, index) => {
setTimeout(() => {
if (element) {
element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
}
}, index * 100);
});
// Navigate after animations complete
setTimeout(() => {
window.location.href = targetUrl;
}, elementsToAnimate.length * 100 + 600);
}
// Add event listeners for page transitions
document.addEventListener('DOMContentLoaded', function() {
const transitionLinks = document.querySelectorAll('[data-trans]');
transitionLinks.forEach(link => {
link.addEventListener('click', handlePageTransition);
});
});
// Handle back/forward navigation
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
// Page was loaded from cache (back/forward)
window.location.reload();
}
});
</script>
<script src="js/main.js"></script>
<script>

175
styles/output.css
View file

@ -757,6 +757,10 @@ video {
z-index: 30;
}
.z-\[60\] {
z-index: 60;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
@ -835,6 +839,17 @@ video {
margin-top: 2rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.block {
display: block;
}
@ -931,6 +946,18 @@ video {
height: 100vh;
}
.h-80 {
height: 20rem;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
.max-h-full {
max-height: 100%;
}
.min-h-\[90vh\] {
min-height: 90vh;
}
@ -1059,6 +1086,10 @@ video {
max-width: 48rem;
}
.max-w-full {
max-width: 100%;
}
.flex-1 {
flex: 1 1 0%;
}
@ -1107,6 +1138,18 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-\[-1\] {
--tw-scale-y: -1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1259,6 +1302,10 @@ video {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-start {
align-items: flex-start;
}
@ -1365,6 +1412,10 @@ video {
overflow: visible;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
@ -1433,6 +1484,18 @@ video {
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
border-color: rgb(255 255 255 / 0.1);
}
.border-white\/30 {
border-color: rgb(255 255 255 / 0.3);
}
.border-white\/20 {
border-color: rgb(255 255 255 / 0.2);
}
.bg-\[\#1b2021\] {
--tw-bg-opacity: 1;
background-color: rgb(27 32 33 / var(--tw-bg-opacity, 1));
@ -1512,6 +1575,30 @@ video {
background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/80 {
background-color: rgb(0 0 0 / 0.8);
}
.bg-kh3-grey\/10 {
background-color: rgb(142 144 137 / 0.1);
}
.bg-black\/90 {
background-color: rgb(0 0 0 / 0.9);
}
.bg-white\/30 {
background-color: rgb(255 255 255 / 0.3);
}
.bg-black\/70 {
background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/95 {
background-color: rgb(0 0 0 / 0.95);
}
.bg-opacity-20 {
--tw-bg-opacity: 0.2;
}
@ -1615,6 +1702,11 @@ video {
background-position: center;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
@ -1632,6 +1724,18 @@ video {
padding: 2rem;
}
.p-6 {
padding: 1.5rem;
}
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@ -1692,6 +1796,16 @@ video {
padding-bottom: 1rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
@ -1732,6 +1846,10 @@ video {
padding-top: 8rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.text-center {
text-align: center;
}
@ -1895,6 +2013,14 @@ video {
color: rgb(255 255 255 / 0.85);
}
.text-white\/50 {
color: rgb(255 255 255 / 0.5);
}
.text-white\/70 {
color: rgb(255 255 255 / 0.7);
}
.underline {
text-decoration-line: underline;
}
@ -1903,6 +2029,10 @@ video {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
@ -1935,6 +2065,11 @@ video {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -2030,6 +2165,12 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-kh3-red:hover {
--tw-border-opacity: 1;
border-color: rgb(176 48 55 / var(--tw-border-opacity, 1));
@ -2053,6 +2194,15 @@ video {
background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/70:hover {
background-color: rgb(0 0 0 / 0.7);
}
.hover\:text-kh3-red:hover {
--tw-text-opacity: 1;
color: rgb(176 48 55 / var(--tw-text-opacity, 1));
@ -2063,6 +2213,11 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-kh3-black:hover {
--tw-text-opacity: 1;
color: rgb(33 40 41 / var(--tw-text-opacity, 1));
}
.focus\:border-transparent:focus {
border-color: transparent;
}
@ -2328,6 +2483,18 @@ video {
}
@media (min-width: 1024px) {
.lg\:h-full {
height: 100%;
}
.lg\:w-1\/3 {
width: 33.333333%;
}
.lg\:w-2\/3 {
width: 66.666667%;
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -2336,6 +2503,14 @@ video {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:gap-12 {
gap: 3rem;
}