Imaginalab

---

A premium, high-performance web application tailored for a stunning personal gallery experience.
Built with cutting-edge tools to transform your photo collection into a fluid, adaptive, and visually captivating interface.

---

💎 Features at a Glance

🎨 High-End Aesthetics

• Fluid Motion: Seamless animations powered by GSAP, Framer Motion, and React Spring for a true cinematic feel.
• Modern Glassmorphism: Layered frosted panels and depth cues across the gallery UI.
• Masonry Layout: A dynamic grid that intelligently organizes your photos based on their natural aspect ratio.
• Dark Mode Native: Designed from the ground up to look incredible in low-light environments.

⚡ Performance Optimized

• Adaptive Quality: Automatically switches image resolution based on your connection quality (3G/4G/WiFi).
• Smart Virtualization: Efficiently renders large volumes of data using react-window without affecting browser performance.
• Next-Gen Formats: Instant loading via ImageKit with automatic WebP conversion and caching.

🛡️ Personal Privacy

• Access Gate: Simple and effective password protection for personal privacy.
• Browsing Security: Built-in "Security Blur" mode for browsing your private photos in public spaces.

---

🛠️ Built With

Category	Tools & Technologies
Frontend	React 19, TypeScript, Vite
Styling	Tailwind CSS, Lucide Icons, Glassmorphism
Animations	GSAP, Framer Motion, React Spring, Vanilla Tilt
Media & Delivery	ImageKit.io, React Infinite Scroll
Utilities	Virtualization, Custom Security Hooks

---

🚀 Getting Started

1. Installation

Ensure you have pnpm installed, then run:

pnpm install

2. Environment Setup

Create a .env file in the root directory:

# Access Password
VITE_PASSWORD_HERE=your_secure_password

# ImageKit Credentials
VITE_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/your_id/
VITE_IMAGEKIT_PATH_PREFIX=/YourFolderName/
VITE_IMAGEKIT_PUBLIC_KEY=your_public_key
VITE_IMAGEKIT_PRIVATE_KEY=your_private_key

3. Development

Fire up the local server:

pnpm dev

---

📁 Project Structure

src/
├── components/         # 🧩 Modular React components
│   ├── Gallery/        # 🖼️ Main gallery logic
│   ├── ImageGrid/      # 📱 Masonry grid implementation
│   └── ImageModal/     # 🔍 Immersive image viewer
├── hooks/              # 🪝 Logic & Security hooks
├── services/           # 🌐 ImageKit & API integration
└── App.tsx             # 🏗️ Core Application

---

Licensed under the MIT License.