diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d742a1f --- /dev/null +++ b/.gitignore @@ -0,0 +1,66 @@ +# Dependencies +node_modules/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Build outputs +dist/ +build/ +*.min.css +*.min.js + +# Environment variables +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# IDE and editor files +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# OS generated files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Logs +logs +*.log + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Coverage directory used by tools like istanbul +coverage/ + +# Temporary folders +tmp/ +temp/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity diff --git a/README.md b/README.md index ae9f59a..427c228 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,107 @@ # 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 + 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 diff --git a/about.html b/about.html deleted file mode 100644 index f7810b3..0000000 --- a/about.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - About - My Website - - - -
- -
- -
-
-
-

About Us

-

Learn more about our company and mission

-
-
- -
-
-
-
-

Our Story

-

- Founded in 2020, we've been passionate about delivering - exceptional services to our clients. Our journey began with a - simple mission: to make a difference in the digital world. -

-

- Today, we're proud to serve clients across the globe, helping - them achieve their goals and bring their visions to life. -

-
-
-
-

500+

-

Happy Clients

-
-
-

1000+

-

Projects Completed

-
-
-

5+

-

Years Experience

-
-
-
-
-
- -
-
-

Our Team

-
-
-

John Doe

-

CEO & Founder

-

- Visionary leader with 10+ years of experience in the industry. -

-
-
-

Jane Smith

-

Creative Director

-

Passionate designer who brings creativity to every project.

-
-
-

Mike Johnson

-

Lead Developer

-

Technical expert who turns ideas into reality.

-
-
-
-
-
- - - - - - diff --git a/assets/images/KHY logo.png b/assets/images/KHY logo.png new file mode 100644 index 0000000..453d678 Binary files /dev/null and b/assets/images/KHY logo.png differ diff --git a/contact.html b/contact.html deleted file mode 100644 index ce7c818..0000000 --- a/contact.html +++ /dev/null @@ -1,129 +0,0 @@ - - - - - - Contact - My Website - - - -
- -
- -
-
-
-

Contact Us

-

Get in touch with us today

-
-
- -
-
-
-
-

Get In Touch

-

- Ready to start your next project? We'd love to hear from you. - Send us a message and we'll respond as soon as possible. -

- -
-
-

Address

-

123 Business Street
City, State 12345

-
- -
-

Email

-

- contact@example.com -

-
- -
-

Phone

-

+1 (234) 567-890

-
- -
-

Hours

-

- Monday - Friday: 9:00 AM - 6:00 PM
- Saturday: 10:00 AM - 4:00 PM -

-
-
-
- -
-

Send Message

-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- - -
-
-
-
-
- -
-
-

Find Us

-
-

Map would be embedded here

-

You can add Google Maps or any other mapping service

-
-
-
-
- - - - - - diff --git a/example-with-partials.html b/example-with-partials.html deleted file mode 100644 index 584d7d4..0000000 --- a/example-with-partials.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - Example with Partials - MySite - - - - - -
- - -
- -
-
-
-

Example Page with Partials

-

This shows how to use the shared header and footer partials

-
-
- -
-
-

How to Use Partials

-

- Since you're not using build tools, you'll need to manually copy and - paste the partial content into each page. Here's how: -

- -
-

For Header:

-
    -
  1. Open partials/header.html
    2. -
  2. Copy the content
    3. -
  3. - Paste it at the top of your page's - <body> section -
    4. -
- -

For Footer:

-
    -
  1. Open partials/footer.html
    2. -
  2. Copy the content
    3. -
  3. - Paste it at the bottom of your page's - <body> section -
    4. -
-
- -
-

Benefits of This Approach:

-
    -
  • ✅ Consistent header and footer across all pages
    • -
  • ✅ Easy to maintain - update one file, copy to all pages
    • -
  • ✅ No build tools required
    • -
  • ✅ Works with any static hosting
    • -
-
-
-
-
- - - - - - - - diff --git a/index.html b/index.html index a4ea9ee..666ba70 100644 --- a/index.html +++ b/index.html @@ -5,56 +5,153 @@ My Website + - -
-