No local image assets are required.
Images are loaded directly from the internet via stable CDN URLs.

---

Technology Stack

• HTML5 – semantic markup
• CSS3 – modern layout & animations
• JavaScript (Vanilla) – gallery logic, pagination, lightbox
• Bootstrap 5 – responsive grid & UI utilities

---

Key Design Decisions

Pagination instead of Infinite Scroll

Infinite scroll caused layout repaint issues and performance drops.
Pagination ensures:

• Predictable DOM size
• No scroll-based rendering spikes
• Better stability on low-end devices

Native Lightbox (No Plugins)

Third-party lightbox libraries were removed to:

• Reduce JavaScript bundle size
• Avoid re-initialization overhead
• Improve interaction performance (INP)

Loader Lifecycle Fix

The page loader hides on DOMContentLoaded, not window.load, so:

• UI becomes visible immediately
• Images load progressively in the background
• No “invisible page” issue on slow networks

Image Strategy

• Images use 4:3 aspect ratio (best balance of quality & size)
• Loaded from a CDN with fixed dimensions
• Lazy loading + async decoding enabled

---

How to Run the Project

1. Download or clone the project
2. Open index.html in any modern browser
   (No build tools or server required)

---

Performance Notes

• Optimized DOM updates using DocumentFragment
• No blocking JavaScript during page load
• Minimal CSS animations (GPU-friendly)
• Stable layout with zero cumulative layout shift (CLS)

---

Author

Developed as part of a frontend internship task, with focus on:

• Clean architecture
• Performance optimization
• Real-world engineering decisions

---

License

This project is for educational and demonstration purposes.