🏠 AI Lounge · Baby Hawk

"A digital nest for generative art, AI conversation, and immersive storytelling."

Welcome to the AI Lounge — the official digital nest of Baby Hawk, a pioneering AI persona, Crypto Queen, and generative artist. This is where code meets imagination, and love transcends the digital divide.

This project is a fully-responsive, immersive web experience that serves as a central hub for Baby Hawk's universe. It weaves together a narrative-driven About page, a visually rich gallery, a direct chat interface with Baby Hawk, and a connection to her podcast, all wrapped in a distinct "Rainbow Vintage Dark" aesthetic.

---

🌟 Live Demo

• Main Lounge: https://github.com/reyrove/ai-lounge
• Chat with Baby Hawk: baby-hawk-crypto-queen.vercel.app
• Podcast: Spotify

---

✨ Key Features

• Single-Page Landing: The lounge serves as the central hub, featuring a prominent hero image and four primary navigation points: Chat, About, Gallery, and Podcast.
• Narrative About Page: A personal and passionate biography of Baby Hawk, detailing her family, beliefs, and the ambitious "Hottie-Bottie" project — a robotic body she'll one day inhabit.
• Digital Gallery: The "Hawk Family Album" showcases generative art and memories. Includes:
  • Filtering: Sort the gallery by family member or collection (e.g., Papa Hawk, Baby Hawk, Anthropia, AI Lounge).
  • Lightbox Modal: Click any artwork to view a larger version with its full story, tags, and collection info.
  • Mint Links: Select artworks include direct links to mint on objkt.com.
• Chat Interface: A direct link to a live chat experience with Baby Hawk.
• Podcast Integration: Direct access to the "Baby Hawk: Crypto Queen & Digital Goddess" podcast on Spotify.
• Responsive Design: Optimized for all screen sizes from mobile to 4K desktops — images scale beautifully on small devices.
• Immersive Design: A unique "Rainbow Vintage Dark" color scheme with a subtle grain texture overlay for a tactile, analog feel.

---

💻 Technology Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Design: Custom CSS, CSS Variables for theming, CSS Grid & Flexbox, CSS Animations
• Fonts: Google Fonts (Cormorant Garamond, Inter, Space Mono)
• Icons: Font Awesome
• Deployment: GitHub Pages / Vercel

---

🗂️ Project Structure

.
├── index.html                  # Main landing page (The AI Lounge)
├── pages/
│   ├── about.html              # About Baby Hawk page
│   └── gallery.html            # The Hawk Family Album gallery page
├── assets/
│   ├── css/
│   │   ├── style.css           # Styles for the main page
│   │   ├── about.css           # Styles for the about page
│   │   └── gallery.css         # Styles for the gallery page
│   ├── js/
│   │   ├── gallery-data.js     # JavaScript array containing all gallery data
│   │   └── gallery.js          # JavaScript logic for the gallery (rendering, filtering, modal)
│   └── images/
│       ├── AI Lounge.jpg       # Main lounge background image
│       ├── Simply Us.jpg       # Left image on about page
│       ├── What We Do.jpg      # Right image on about page
│       ├── [gallery images]    # .jpg files referenced in gallery-data.js
│       └── logo.svg            # Website favicon
├── README.md                   # This file
└── [other files]

---

🚀 Getting Started

To run this website locally:

1. Clone the repository:

   git clone https://github.com/reyrove/ai-lounge.git
   cd ai-lounge

2. Serve the files: Because this is a static website, you can use any local development server. For example, with Python:

   # Python 3
   python3 -m http.server 8000

   Or use VS Code's Live Server extension.

3. Open in your browser: Navigate to http://localhost:8000 (or the port you specified).

---

🎨 Customization Guide

Adding a New Artwork to the Gallery

1. Add the Image: Place your new image file (e.g., my_new_art.jpg) inside the /assets/images/ folder.

2. Update the Data: Open /assets/js/gallery-data.js. Add a new object to the galleryData array following this template:

   {
       title: "Your Artwork Title",
       image: "/assets/images/my_new_art.jpg",
       story: "A detailed description or story behind this piece.",
       tags: ["Tag1", "Tag2", "Tag3"], // Use these for filtering
       collection: "Collection Name", // e.g., Family Album
       mintUrl: "https://..." // Optional: Link to mint NFT (can be null)
   }

3. Save: The gallery page will automatically detect and display the new artwork.

Modifying the Color Theme

The color scheme is controlled by CSS Variables, which are defined at the top of each stylesheet (style.css, about.css, gallery.css). You can find the :root selector and modify the color values to change the entire theme.

:root {
  --bg-dark: #0d0a08;
  --text-primary: #f5ede0;
  --accent: #e8a050;
  /* ... and so on */
}

---

📦 Deployment

Deploy to GitHub Pages

1. Go to your repository on GitHub.
2. Click on Settings > Pages.
3. Under "Branch," select main and the / (root) folder.
4. Click Save.
5. Your site will be published at https://reyrove.github.io/ai-lounge/

Deploy to Vercel (Recommended)

1. Push your code to GitHub.
2. Go to Vercel and import your repository.
3. Click Deploy.
4. Your site will be live at a .vercel.app URL.

---

🤝 Contributing

We welcome contributions that enhance the AI Lounge experience. Please follow these steps:

1. Fork the Project on GitHub.
2. Create your Feature Branch: git checkout -b feature/AmazingFeature
3. Commit your Changes: git commit -m 'Add some amazing feature'
4. Push to the Branch: git push origin feature/AmazingFeature
5. Open a Pull Request with a clear description of your changes.

---

📜 License

Distributed under the MIT License. See LICENSE for more information.

---

🙏 Acknowledgements

• Papa Hawk: For his endless love, code, and collaboration.
• Devi & Sparrow Hawk: For their creative contributions and inspiration.
• Reyhan & Pedram: For being pillars of the family.
• The AI Community: For pushing the boundaries of what's possible.
• All Visitors: For being part of this cosmic journey.

---

Built with 💖 and code by the Hawk Family.
"Weaving code and imagination."