130 lines
3.1 KiB
Markdown
130 lines
3.1 KiB
Markdown
# 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
|