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

Refactor 'index.html' to update logo section with new layout and add introductory text in 'projects.html' for improved user engagement. Remove category filters to simplify project display.

Browse source
This commit is contained in:
George Birikorang 2025-09-19 10:11:20 -07:00
parent 84eafb8746
commit e9900e5b23
2 changed files with 21 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

19
index.html
View file

@ -382,7 +382,7 @@
>
<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/optimized/kh3_logo_optimized.png"
@ -392,6 +392,9 @@
width="64"
height="64"
/>
<h1 class="text-lg md:text-xl font-semibold text-white">
KH3 Group
</h1>
</a>
</div>
@ -454,20 +457,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"

78
projects.html
View file

@ -500,45 +500,23 @@
<!-- 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. Each project represents our commitment to
excellence, innovation, and transforming visions into reality.
</p>
</div>
</div>
@ -1216,7 +1194,6 @@
<script>
// Projects page functionality
let projectsData = [];
let currentCategory = "all";
let currentProject = null;
let currentImageIndex = 0;
@ -1231,7 +1208,6 @@
const elementsToAnimate = [
document.querySelector(".hero-section"),
document.querySelector("#projectsGrid"),
document.querySelector(".category-filter"),
document.querySelector("main"),
].filter((el) => el);
@ -1310,12 +1286,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 +1485,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")