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

Update project and index pages by modifying project filtering functionality, removing category filters, and enhancing introductory text for better user engagement.

Browse source
This commit is contained in:
George Birikorang 2025-09-19 20:26:04 -07:00
parent 38db6e6744
commit e7d7a83c14
3 changed files with 24 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

4
about.html
View file

@ -625,7 +625,7 @@
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
>
<span class="text-white text-2xl font-bold drop-shadow-lg"
>02</span
>01</span
>
</div>
@ -689,7 +689,7 @@
class="w-16 h-16 bg-gradient-to-br from-kh3-red to-red-700 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg group-hover:shadow-red-500/50 transition-all duration-300 transform group-hover:scale-110"
>
<span class="text-white text-2xl font-bold drop-shadow-lg"
>01</span
>02</span
>
</div>

19
index.html
View file

@ -366,9 +366,12 @@
>
<a
href="index.html"
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
class="flex flex-col items-start gap-2 animate-logo-float hover:opacity-80 transition-opacity"
>
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
<h1 class="text-lg md:text-xl font-semibold text-white">
KH3 Group
</h1>
</a>
</div>
@ -425,20 +428,6 @@
</div>
</div>
<!-- Floating Text - Center -->
<div
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 opacity-0"
style="animation: fadeInScale 1s ease-out 0.6s forwards"
>
<div class="text-center">
<h1
class="text-4xl md:text-6xl font-semibold text-white animate-logo-float"
>
KH3 Group Limited
</h1>
</div>
</div>
<!-- LEFT COLUMN -->
<div
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-4 pt-8 md:p-8 md:pt-8 h-[20vh] md:h-auto shrink-0 opacity-0 animate-fade-in-left dream-design-deliver"

79
projects.html
View file

@ -500,45 +500,24 @@
<!-- Projects Grid Section -->
<section class="py-32 bg-kh3-black">
<div class="container mx-auto px-8 max-w-7xl">
<!-- Category Filters -->
<!-- Introductory Text -->
<div class="mb-16 text-center">
<div class="flex flex-wrap justify-center gap-4 mb-8">
<button
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300 active"
data-category="all"
<div class="max-w-4xl mx-auto">
<h2
class="text-2xl md:text-3xl font-light text-white mb-4 opacity-0 animate-fade-in-up"
style="animation-delay: 0.2s; animation-fill-mode: forwards"
>
ALL PROJECTS
</button>
<button
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
data-category="Corporate"
Browse through our past projects
</h2>
<p
class="text-lg text-neutral-400 leading-relaxed opacity-0 animate-fade-in-up"
style="animation-delay: 0.4s; animation-fill-mode: forwards"
>
CORPORATE
</button>
<button
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
data-category="Residential"
>
RESIDENTIAL
</button>
<button
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
data-category="Retail"
>
RETAIL
</button>
<button
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
data-category="Hospitality"
>
HOSPITALITY
</button>
<button
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"
data-category="Industrial"
>
INDUSTRIAL
</button>
Discover the diverse portfolio of inspiring spaces we've created
across Ghana and West Africa. Each project represents our
commitment to excellence, innovation, and transforming visions
into reality.
</p>
</div>
</div>
@ -1216,7 +1195,6 @@
<script>
// Projects page functionality
let projectsData = [];
let currentCategory = "all";
let currentProject = null;
let currentImageIndex = 0;
@ -1231,7 +1209,6 @@
const elementsToAnimate = [
document.querySelector(".hero-section"),
document.querySelector("#projectsGrid"),
document.querySelector(".category-filter"),
document.querySelector("main"),
].filter((el) => el);
@ -1310,12 +1287,8 @@
// Render projects
function renderProjects() {
const grid = document.getElementById("projectsGrid");
const filteredProjects =
currentCategory === "all"
? projectsData
: projectsData.filter(
(project) => project.category === currentCategory
);
// Show all projects since filters are hidden
const filteredProjects = projectsData;
grid.innerHTML = filteredProjects
.map(
@ -1513,26 +1486,10 @@
});
}
// Category filter functionality
// Initialize projects (no filters needed)
document.addEventListener("DOMContentLoaded", function () {
loadProjects();
// Category filter buttons
document.querySelectorAll(".category-filter").forEach((button) => {
button.addEventListener("click", function () {
// Remove active class from all buttons
document
.querySelectorAll(".category-filter")
.forEach((btn) => btn.classList.remove("active"));
// Add active class to clicked button
this.classList.add("active");
// Update current category and re-render
currentCategory = this.dataset.category;
renderProjects();
});
});
// Close modal functionality
document
.getElementById("closeModal")