Photography Portfolio Template
A complete one-page photographer's portfolio on a mid-tone gallery-wall ground, with a signature loupe: a circular magnifier that tracks the cursor across a desaturated contact sheet and is the only place colour appears.
About This Template
A production-ready one-page site for photographers, art directed as a gallery wall rather than a portfolio grid: a mid-tone cool slate ground, near-black ink, off-white paper, and no accent colour anywhere, so the only chroma on the page comes from the photographs themselves. The structure is built around how photographers actually present work: a full-bleed photographic hero, a contact-sheet index of selected frames, two long-form series shown at scale, a practice statement, print editions, and contact.
Read the full template overview
The signature moment is the loupe: the contact sheet sits desaturated, and moving the cursor across it reveals a magnified, full-colour crop that tracks the pointer like a real loupe on a light box.
What's Included
- Complete deployable one-page site: nav, photographic hero, contact-sheet index, two series sections, practice, print editions, contact, and footer
- Signature loupe magnifier that tracks the cursor and reveals full colour over an otherwise desaturated contact sheet
- Tap-to-reveal fallback on touch, lighting one frame at a time, with keyboard support
- Full-colour sheet under reduced motion and without JavaScript, so no photograph is ever hidden
- Mid-tone slate ground with no accent colour, a deliberate counterpoint to light-or-dark portfolio templates
- Bodoni Moda didone display paired with Courier Prime contact-sheet annotation for frame numbers, locations, and exposure data
- Offset series layouts that present plates at scale with scrubbed parallax inside every frame
- Bundled placeholder photography as optimised WebP files with a warm filmic colour grade baked in, under 1.2MB in total
- Lenis smooth scrolling wired in and fully optional
- Accessible: keyboard focus settles the loupe on each frame, and every section is independently deletable
Perfect For
- Documentary, landscape, and editorial photographer portfolios
- Photojournalists and long-form series presenting bodies of work
- Print sales and commission pages for working photographers
- Galleries and studios showing a single artist's series
- Any image-led portfolio that needs photographs to carry all the colour
How It Works
Structure
One script initialises each section with a single setup and teardown path and one motion branch covering fine-pointer, touch, and reduced motion.
The loupe
The loupe builds one reusable circular element containing a copy of the hovered photograph scaled up by a configurable zoom factor; on every pointermove it positions the glass at the cursor and offsets the magnified image by the cursor's position within the frame multiplied by that zoom, so the point under the pointer always sits dead centre in the glass. Tracking is deliberately rigid rather than eased, because a lagging magnifier would drift out of register with the crop it is showing.
Colour and reveals
The desaturation is a CSS filter applied only by the class the script adds, so reduced-motion and no-JS visitors get the sheet in full colour instead. Scroll reveals, a batched contact-sheet stagger, and scrubbed plate parallax round out the page, and every section guards its own querySelector so buyers can delete any of them.
Questions about this template
What happens to the loupe on a phone?
It becomes tap-to-reveal, lighting one frame at a time rather than tracking a cursor that does not exist. Keyboard users get the same thing via focus, and under reduced motion or with JavaScript off the contact sheet renders in full colour, so no photograph is ever hidden behind an interaction.
Will my photographs work if they are not warm-graded?
Yes, more easily than most templates here. The ground is a neutral mid-tone slate with no accent colour, chosen so the photographs carry all the colour on the page. The bundled placeholders have a warm filmic grade, but the design does not depend on it the way a duotone template would.
How many images can the contact sheet hold?
As many as you have. It is a grid, so it reflows at any count, and the loupe works off cursor position rather than per-frame listeners. In practice the constraint is page weight, not the effect: the bundled set runs under 1.2MB for the whole page.
Can I sell prints through it?
There is a print editions section designed for it, but no checkout. Point the buttons at your existing shop, a Stripe payment link, or an enquiry form. Commission and print sales pages are an explicit use case; taking the payment is not the template's job.
Can I drop the sections I do not need?
Yes, every section is independently deletable. A photographer with one long-running series can keep the hero, one series section and contact, and remove the rest without leaving broken layout or dead navigation behind.
