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
174
index.html
174
index.html
|
|
@ -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 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");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue