KH3 Website

A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS for KH3 - Building Inspiring Spaces.

Quick Start

Prerequisites

Node.js (for Tailwind CSS CLI)
npm (comes with Node.js)

Setup Instructions

Clone or download the project

git clone <repository-url>
cd kh3_website

Install Tailwind CSS
```
npm install
```
Generate the optimized CSS
```
npm run build
```
Open the website
- Open index.html in your web browser
- Or serve it with a local server

Project Structure

kh3_website/
├─ index.html          # Main website page
├─ about.html          # About Us page
├─ contact.html        # Contact page
├─ src/
│  └─ input.css        # Tailwind directives
├─ styles/
│  └─ main.css         # Generated optimized CSS
├─ js/
│  └─ main.js          # JavaScript functionality
├─ assets/images/      # Image assets
├─ tailwind.config.js  # Tailwind configuration
├─ package.json        # Dependencies
└─ README.md           # This file

Development

For Active Development

If you're making frequent changes to the HTML, you can use watch mode to automatically regenerate CSS:

npm run watch

Keep this running in a terminal while you work. It will automatically rebuild the CSS whenever you save changes to your HTML files.

Manual Regeneration

If watch mode doesn't work or you prefer manual control:

# One-time build
npm run build

# Watch mode (auto-regenerate on changes)
npm run watch

Note: If watch mode doesn't work, just run the one-time build command after each change.

What This Does

Scans your HTML files for used Tailwind classes
Generates only the CSS you need (purges unused styles)
Creates a tiny, optimized CSS file (~1KB vs ~3MB CDN)

Features

Clean, minimal design with Tailwind CSS
Optimized performance with purged CSS
Responsive layout that works on all devices
No build tools required for production
Easy maintenance with Tailwind utility classes
Custom animations for logo, menu grid, and buttons
Auto-switching hero images with slide+zoom transitions
Staggered loading animations
Enhanced page transitions
Letter-by-letter menu animations

To add new Tailwind classes:

Add the classes to your HTML
Run the CSS generation command
The new styles will be included in the output

To modify the design:

Change Tailwind classes in HTML files
Regenerate CSS with the CLI command
Refresh your browser to see changes

Custom Colors & Animations

The website uses custom KH3 brand colors and animations defined in tailwind.config.js:

Colors: kh3-black, kh3-red, kh3-gold, kh3-darkGold, kh3-lightGold
Animations: logo-float, text-float, border-glow, menu-grid-cycle, fade-in variants

Production

For production deployment:

Run npm run build to generate the final CSS
Upload all files to your web server
The website will work without Node.js in production

License

MIT License

3.1 KiB Raw Permalink Blame History