Photography Portfolio Template 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. 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
One script initialises each section inside a single gsap.context with gsap.matchMedia branches for fine-pointer, touch, and reduced motion. 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. 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.