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

1. Clone or download the project

   git clone <repository-url>
   cd kh3_website
   

2. Install Tailwind CSS

   npm install
   

3. Generate the optimized CSS

   npm run build
   

4. 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:

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

To modify the design:

1. Change Tailwind classes in HTML files
2. Regenerate CSS with the CLI command
3. 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:

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

License

MIT License