# 🧠 HeadacheOS

> **"A beautiful mess bad UX."**

Welcome to **HeadacheOS**! a chaotic, retro-inspired OS on web desktop environment. This project is a playground for interactive experiment. Whether you're here to explore, learn, or just vibe with the absurd, HeadacheOS welcomes you with... idk.

---

## ⚙️ Tech Stack

HeadacheOS is built using:

* **[Astro](https://astro.build/)** : for lightning-fast static site generation and clean island architecture.
* **[React](https://reactjs.org/)** : to power the dynamic components and stateful interactions within the OS experience.
* **[TailwindCSS + DaisyUI](https://daisyui.com/)** : for utility-first styling and responsive UI elements.
* **[Zustand](https://github.com/pmndrs/zustand)** : a minimal, scalable state manager.
* **[GSAP](https://greensock.com/gsap/)** : animating everything.
* **[Kaplay.js](https://kaplayjs.com/)** : for canvas stuff, for now its just a clock.

## 🖼️ Preview

<div align="center" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem;">

  <div style="max-width: 300px;">
    <img src="footages/ss (1).png" width="100%" style="border-radius: 8px;" />
    <p><strong>Desktop View</strong><br/>The main OS window interface and the gambling music player.</p>
  </div>

  <div style="max-width: 300px;">
    <img src="footages/ss (3).png" width="100%" style="border-radius: 8px;" />
    <p><strong>Apps</strong><br/>To use calculator, solve math first. And clock from the future.</p>
  </div>

  <div style="max-width: 300px;">
    <img src="footages/ss (4).png" width="100%" style="border-radius: 8px;" />
    <p><strong>Wallpaper Manager</strong><br/>Change your wallpaper easily.</p>
  </div>

  <div style="max-width: 300px;">
    <img src="footages/ss (6).png" width="100%" style="border-radius: 8px;" />
    <p><strong>More Apps</strong><br/>Try our WPM test, and Image Explorer with Quick Time Event.</p>
  </div>

  <div style="max-width: 300px;">
    <img src="footages/ss (7).png" width="100%" style="border-radius: 8px;" />
    <p><strong>You Can Code Here</strong><br/>Rotate your screen to code.</p>
  </div>

</div>

---

## 🚀 Getting Started

Wanna run HeadacheOS locally? Here's how:

```bash
# 1. Clone the repository
git clone https://github.com/nabeellagi/headacheos.git

# 2. Move into the project directory
cd headacheos

# 3. Install dependencies
npm install

# 4. Start the development server
npm run dev
```

Then open your browser and visit **[http://localhost:4321](http://localhost:4321)**

> 🧠 **Note:** Make sure you have Node.js installed!

---

## 🧪 Bonus Tip

If you want to build the site:

```bash
npm run build
```

And to preview the production build locally:

```bash
npm run preview
```

---

🎯 **Curious?**
FIND ALL THE EASTER EGGS AND FEATURES!  
Go check it out: [https://headacheos.netlify.app/](https://headacheos.netlify.app/)