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

fix: standardize indentation and improve layout consistency across multiple HTML files

Browse source
This commit is contained in:
George Birikorang 2025-08-31 23:58:25 -04:00
parent 9111542693
commit 4dc84a9e11
7 changed files with 79 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

25
projects.html
View file

@ -392,15 +392,15 @@
<!-- Main Content -->
<main class="pt-20">
<!-- Hero Section -->
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
<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 justify-center">
<div class="relative bg-kh3-black flex items-center">
<!-- Vertical timeline with diamonds -->
<div
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
style="animation-delay: 1200ms; animation-fill-mode: forwards"
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
style="animation: fadeInUp 800ms ease-out 1200ms forwards"
>
<div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
@ -412,10 +412,10 @@
</div>
<!-- Title with horizontal ruler -->
<div class="pl-28 pr-6 w-full relative overflow-visible z-30">
<div class="pl-28 pr-6 w-full">
<div
class="flex items-center gap-6 opacity-0 animate-fade-in-up"
style="animation-delay: 1600ms; animation-fill-mode: forwards"
class="flex items-center gap-6 opacity-0"
style="animation: fadeInUp 800ms ease-out 1600ms forwards"
>
<div class="flex-1 h-px bg-white"></div>
<h1
@ -429,13 +429,12 @@
</div>
<!-- Right image panel -->
<div class="relative overflow-hidden pt-20 z-10">
<!-- Current image -->
<div class="relative overflow-hidden">
<img
id="projectsCurrentImg"
src="assets/images/room.png"
alt="KH3 Projects"
class="w-full h-full object-cover opacity-0 absolute inset-0"
class="w-full h-full object-cover opacity-0"
style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
/>
<!-- Next image (for transitions) -->
@ -448,8 +447,8 @@
<!-- Down arrow prompt -->
<button
id="projectsScrollArrow"
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0 animate-fade-in-up"
style="animation-delay: 1900ms; animation-fill-mode: forwards"
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
style="animation: fadeInUp 800ms ease-out 1900ms forwards"
>
<span class="text-xs tracking-widest mb-2">SCROLL</span>
<svg
@ -482,7 +481,7 @@
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"
>
ALL WHAT
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"