Lumina Gallery — Interactive Image Portfolio

A polished, zero-dependency image gallery built for developers who want something that looks intentional in a portfolio and holds up in a real interview. Responsive grid, accessible lightbox, keyboard-first UX, and lean assets — HTML, CSS, and vanilla JavaScript only.

---

Key features

Feature	What you get
Responsive grid	Fluid 4 → 3 → 2 → 1 column layout; balanced spacing from mobile to desktop.
Interactive lightbox	Full-size view, prev/next, backdrop dismiss, smooth transitions.
Keyboard accessibility	Escape to close, ← / → between images, Tab trap inside the dialog, skip link to content.
Performance-minded	Lazy-loaded thumbnails, delegated event listeners, no framework bundle; prefers-reduced-motion respected in CSS.

---

Tech stack

• HTML5 — Semantic landmarks, dialog patterns, ARIA where it matters.
• CSS3 — Grid, Flexbox, custom properties, progressive enhancement.
• JavaScript — One modular IIFE; event delegation on the grid and lightbox.

---

Project structure

Paths below use lowercase names on purpose — GitHub Pages is case-sensitive, so keep filenames as shown when you rename or add files.

.
├── LICENSE                   # MIT License
├── README.md                 # This file
└── gallery/                  # Site root for local dev & recommended Pages folder
    ├── index.html            # Entry page (SEO meta, favicon, markup)
    ├── style.css             # Design tokens & components
    ├── script.js             # Gallery + lightbox controller
    ├── favicon.svg           # Tab icon (SVG)
    └── README.md             # Short link to repo docs

Deploying from /gallery: set GitHub Pages Source to the /gallery folder (or publish only that folder) so index.html, style.css, and script.js resolve as siblings — e.g. https://<user>.github.io/<repo>/style.css when the site is served from gallery/.

---

How to run locally

cd gallery
python -m http.server 8080

Open http://localhost:8080.
(Remote demo images load more reliably over HTTP than file://.)

---

Deployment

GitHub Pages (recommended)

1. Push this repository to GitHub.
2. Settings → Pages → Build and deployment
3. Under Branch, choose your branch and set the folder to /gallery (or move index.html to the repo root and adjust paths if you prefer root deployment).
4. Save. After the build, your site URL will look like:
   https://<username>.github.io/<repository-name>/

Live demo

Live demo: Add your live site URL here

Example after publish: https://yourusername.github.io/your-repo-name/

---

Customization

1. Swap thumbnail src / data-full / data-thumb for your own assets (keep paths lowercase on GitHub Pages).
2. Replace each image alt with accurate descriptions.
3. Update aria-label strings on buttons if titles or counts change.
4. Edit gallery/index.html <title> and meta tags to match your brand.

---

Credits

Demo photos are loaded from Lorem Picsum for convenience; their license applies to those images. Fonts are served from Google Fonts.

---

License

This project is released under the MIT License. You may use, modify, and distribute it with attribution to the copyright line in LICENSE (update the name/year there if you fork).