mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
feat: complete projects page
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
2595c7571e
commit
ddc015cffb
11 changed files with 3473 additions and 564 deletions
415
about.html
415
about.html
|
|
@ -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;
|
||||
"
|
||||
> </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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue