📸 Imaze

A responsive image gallery built with HTML, CSS, and JavaScript. The application integrates the Pexels REST API to fetch curated and searchable high-quality images. Users can browse, search, preview, and download images through a clean and responsive interface.

🚀 This was my first JavaScript project and helped me learn DOM manipulation, API integration, asynchronous JavaScript, LocalStorage, and responsive web development.

---

Features

• 🔍 Search images by keyword
• 🖼️ Browse curated images
• 🔎 Lightbox image preview
• ⬇️ Download images
• 🌙 Dark / Light theme
• 💾 Theme preference saved using LocalStorage
• 📱 Responsive design for all devices
• ♿ Accessible and keyboard-friendly interface

---

Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)
• Pexels REST API
• LocalStorage

---

Project Structure

Imaze/
│
├── index.html
├── style.css
├── script.js
├── about.html
├── explore.html
├── contact.html
├── login.html
├── architecture.html
├── people.html
├── nature.html
├── abstract.html
└── README.md

---

Getting Started

1. Clone the repository

git clone https://github.com/Vaishnavi252-ai/Imaze.git

2. Open the project folder.

3. Open index.html in your browser.

No installation or build tools are required.

---

API Used

Pexels REST API

The application uses the Pexels API to:

• Fetch curated images
• Search images by keyword
• Display image information
• Download high-quality images

Documentation: https://www.pexels.com/api/

---

Learning Outcomes

This project helped me learn:

• DOM Manipulation
• Fetch API
• REST API Integration
• Async/Await
• Event Handling
• Responsive Web Design
• LocalStorage
• Error Handling
• Theme Management

---

Future Improvements

• Infinite scrolling
• Category filters
• Favorite images
• Better loading animations
• Environment variables for API key

---

Author

Vaishnavi Misal

My first JavaScript project built to strengthen my frontend development skills.