# 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**

   ```bash
   git clone <repository-url>
   cd kh3_website
   ```

2. **Install Tailwind CSS**

   ```bash
   npm install
   ```

3. **Generate the optimized CSS**

   ```bash
   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:

```bash
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:

```bash
# 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