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

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")