A personal photo gallery web app built for collecting and showcasing weekly color-themed photography. Each week has a color theme — you upload your best shots tagged to that week, browse them in a stunning 3D carousel lightbox, and track your growing archive over time.
View the website here: Netlify link
- Masonry grid layout with smooth hover overlays
- 4 display modes — Grid, Coverflow, Stack, and Reel — switchable from the filter bar
- Week filter — filter photos by color week
- Gallery info bar — shows caption, uploader, and date for the active card in non-grid modes
- All photos arranged on a true 3D rotating ring
- Mouse-steered — move your cursor left/right to spin the ring; up/down tilts it
- Fly-in animation — each card animates in from a random 3D position on open
- Click any card to snap it to the front
- Arrow keys / nav buttons / swipe to step through photos
- Active card glow — front card highlights with the week's accent colour
- Info panel — updates in real time as cards rotate to the front
- Create color weeks with a name, hex color, and date range
- Each photo is tagged to a week
- Week badge shown in the gallery and lightbox info panel
- Background behavior — static, parallax scroll, or fixed
- Hero font picker — choose from curated Google Fonts
- Dark aesthetic — pure black base with accent color theming
- Photos stored in IndexedDB (survives page refreshes, no server needed)
- App state (weeks, settings, gallery mode) stored in localStorage
- Fully offline-capable — no backend required
| Layer | Technology |
|---|---|
| Structure | HTML5 (semantic) |
| Styling | Vanilla CSS (custom properties, glassmorphism, animations) |
| Logic | Vanilla JavaScript (ES2020+) |
| 3D Animations | GSAP 3 (GreenSock) |
| Storage | IndexedDB + localStorage |
| Fonts | Google Fonts |
No frameworks. No build step. Just open index.html.
python -m http.server 3000
# then open http://localhost:3000npx serve .Install the Live Server extension and click Go Live.
⚠️ Openingindex.htmldirectly as afile://URL may block IndexedDB in some browsers. Use a local server instead.
Color Hunt/
├── index.html # App shell — all HTML structure
├── styles.css # All styling (design system, components, lightbox)
├── app.js # All logic (gallery, lightbox, weeks, settings, DB)
└── README.md
- Create a Week — click the
+FAB (bottom-left) to add a color week with a name and hex color - Upload Photos — click Upload in the nav, fill in the form, pick your photo, and submit
- Browse — switch gallery modes from the control bar; click any photo to open the 3D carousel lightbox
- Navigate the lightbox — move your mouse, use arrow keys, or click the nav buttons
- Delete — use the trash icon in the lightbox topbar
- Accent color is lime green (
#c8ff00) by default, dynamically overridden per week - Glassmorphism panels with
backdrop-filter: blur() - All interactions use a custom cursor (
cursor: none+ JS-tracked dot) - Smooth micro-animations throughout via CSS keyframes and GSAP
- 3D carousel technique inspired by John Blazek's TweenMax pen
- 3D animations powered by GSAP
- Icons from inline SVG (no icon library dependency)
Made with ♥ for Color Hunters