# khy_website

A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS.

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

2. **Install Tailwind CSS**

   ```bash
   npm install -D tailwindcss@^3.4.0
   ```

3. **Generate the optimized CSS**

   ```bash
   npx tailwindcss -i ./src/input.css -o ./styles/main.css
   ```

4. **Open the website**
   - Open `index.html` in your web browser
   - Or serve it with a local server

## Project Structure

```
my-site/
├─ index.html          # Main website page
├─ src/
│  └─ input.css        # Tailwind directives
├─ styles/
│  └─ main.css         # Generated optimized CSS
├─ scripts/
│  └─ main.js          # JavaScript functionality
├─ assets/
│  ├─ images/          # Image assets
│  └─ fonts/           # Font assets
├─ tailwind.config.js  # Tailwind configuration
└─ package.json        # Dependencies
```

## Development

### For Active Development

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

```bash
npx tailwindcss -i ./src/input.css -o ./styles/main.css --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
npx tailwindcss -i ./src/input.css -o ./styles/main.css

# Watch mode (auto-regenerate on changes)
npx tailwindcss -i ./src/input.css -o ./styles/main.css --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

## Customization

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 `index.html`
2. Regenerate CSS with the CLI command
3. Refresh your browser to see changes