Aperture — Free Photography Portfolio Website Template
Aperture puts the photographs first and everything else out of the way. It ships with a filterable CSS-columns masonry grid wired to a zero-dependency lightbox — click to enlarge, arrow-key or swipe between frames, Esc to close — so a photographer can drop in a set of images and have a working portfolio the same afternoon. Built on Bootstrap 5 with no jQuery, a darkroom-monochrome palette, and film-style EXIF captions baked into every tile.
Features
- Filterable masonry gallery (All / Portrait / Wedding / Landscape) using pure CSS columns
- Hand-written vanilla lightbox: click to open, prev/next, keyboard arrows, Esc, touch-swipe, focus return
- Full-bleed hero and a cinematic featured-story band that let the imagery lead
- Packages & pricing section with three real, all-in tiers
- Space Mono EXIF-style captions (film stock, focal length, aperture) on every frame
- Front-end-validated contact form with session type and date fields
- Animated stat counters, scroll-reveal, and a scrollspy nav — all IntersectionObserver-based
- Fully responsive 360px → 1440px, prefers-reduced-motion aware, skip link and semantic landmarks
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Darkroom-monochrome, editorial, image-first
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Aperture really free to use commercially?
Yes. Use it for client work or your own studio site, free for personal and commercial projects. An attribution link back to uiCookies is appreciated but not required.
Does it use jQuery or any paid plugins?
No. Everything — the lightbox, gallery filter, mobile menu, form validation, counters and scroll effects — is hand-written vanilla JavaScript. The only bundled library is Bootstrap 5, self-hosted locally.
How do I add my own photos?
Drop your JPEGs into the `img/` folder and update each `<figure class="ap-tile">` in `index.html`: point the `<img src>` and the button's `data-full` to your file, and edit the `data-caption`, `data-exif`, and `data-cat` (portrait / wedding / landscape) attributes.
Can I change the accent colour and fonts?
Yes. The palette and type are defined as CSS custom properties at the top of `css/style.css` (`–cyan`, `–ink`, `–paper`, and the `–f-*` font variables), so a whole re-skin is a few edits in one place.
