# 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.
Canonical: https://gsapvault.com/templates/photography-portfolio-template
Live demo: https://gsapvault.com/demos/photography-portfolio-template/index.html
| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | hover-effect, cursor-effects, magnifier, scroll-reveal, parallax, stagger |
| Uses Lenis | Yes |
## Overview
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.
## Features
- 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
## Use Cases
- 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.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Copy the folder.** Everything is static. There is no build step.
```
photography-portfolio-template/
├── index.html
├── README.md # these notes
├── LICENSE.txt # your licence, keep it
└── assets/
├── style.css
├── script.js # readable source, what index.html loads
├── img-manifest.json # image recipe (see Photography below)
└── img/ # baked WebP derivatives
```
**2. Deploy.** Upload to any static host: Netlify, Vercel, Cloudflare Pages, S3, or plain shared hosting.
**3. Replace the content.** Search `index.html` for `Ines Marchetti` and work down the page. Every section is plain, commented HTML.
**4. Optional: minify before you go live.** `assets/script.js` is the readable source and is what `index.html` loads. It is around 18KB, which is fine to ship as-is. If you would rather serve it minified, produce it yourself once your edits are done:
```bash
bunx terser assets/script.js -c -m -o assets/script.min.js
```
Then point the last `
```
GSAP core and ScrollTrigger are required. **Lenis is optional** — delete the tag and the page scrolls natively; the script detects its absence. The Lenis block in `script.js` is marked with comments if you want to remove it entirely.
---
## What You Get
- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library
## Get the Code
This is a premium template. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.
- [Buy Photography Portfolio Template](https://gsapvault.com/templates/photography-portfolio-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)
---
From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt