Photography Portfolio Template

Quick Start

1. Unzip and open index.html in a browser, or serve the folder with any static server (npx serve .).
2. The pages are plain HTML files: index.html (home archive), work.html, project.html (every project, from assets/projects.js), about.html and contact.html. upriver.html only forwards old links to project.html?p=upriver.
3. Every page shares assets/style.css and assets/script.js. Home and Work also load assets/archive-layout.js straight after the archive; the project page loads assets/projects.js and assets/project-page.js. There is no build step.
4. Deploy the folder as it is to any static host.

Using It With Your Own Design

• Colours: four values at the top of assets/style.css: --paper, --ink, --flood (the yellow) and --slab (the red name block). The comment above them lists the measured contrast of each pair. Four more presets follow (see Palettes). Choose a flood colour that dark type reads on, or set --on-flood to white for a deep colour.
• Type: Crimson Pro (every statement, the controls and the name) and Public Sans (facts, captions and the form), self-hosted in assets/fonts/. Change the @font-face rules, the two font preloads in each page's head, and --font-display and --font-body.
• Photographs: the archive works with any mix of shapes. Keep thumbnails about 240 pixels tall; the archive's weight is the number of frames times one thumbnail.
• Another kind of work: rename the four categories and the archive suits a wedding photographer, a videographer's stills, an illustrator or a small studio with several photographers.

Pages and Configuration

Every feature looks for its own markup and returns when it is missing, so you can delete a section, or a page and its links, without editing the script.

The archive (Home and Work)

Each frame is one item in <ul class="archive" data-archive>:

Code snippet omitted: it ships with the download.

• data-cat must match one of the filter buttons' data-filter values (portrait, editorial, commercial, personal). Rename both together, or add a button for a new category. In the example it is the project's category.
• --ar is the image's width divided by its height. The frame's width is the row height times this value, so nothing is cropped.
• The image's alt is the caption the strip shows on hover, focus or tap; data-job is the client line after it.
• Every frame links to its project: <a class="tile-link" href="project.html?p=westerly&amp;f=r27">. p names the project in assets/projects.js; f makes that frame the lead image.
• The counts are buttons with data-count="36", "60" and "all". Their row heights are --row-36, --row-60 and --row-all in :root (and again in the phone media query). Change the numbers on the buttons and the script follows.
• The first frames load eagerly and the rest lazily; keep the eager ones to what fills the first screen.
• Rows are justified by assets/archive-layout.js: one fixed gutter (--tile-gap), and each row's height nudged around the target so it fills the width exactly; the last row stays at the target height. It loads as a plain script right after the list so the rows are sized before the first paint, and script.js calls it again after each filter, count change or resize. Remove it and the tiles keep the target height with a ragged right edge.

On the Work page the same frames also appear as <ol class="index" data-index>: one <li class="row"> per frame with the same data-k and data-cat. The preview that follows the pointer reuses the archive thumbnail with the matching data-k.

Projects (assets/projects.js and project.html)

Every commission and series is one entry in assets/projects.js; the comment at the top of that file lists the fields. project.html draws:

• project.html: the list of all projects (the projects tab).
• project.html?p=kiln: that project, led by its cover frame.
• project.html?p=kiln&f=e4: the same project, led by frame e4. Archive tiles and Work index rows link this way.
• An unknown p: a short note and the list.

Each frame is { k, w, h, cap, who?, col? }. k names its two files, assets/img/plate-<k>.webp (the large frame, w by h) and assets/img/t-<k>.webp (the archive thumbnail). col places it on the twelve-column book grid ("1 / -1" is full width); frames without one are laid out in alternating pairs and singles. Add prints: { note, sizes } to a project for a prints block; the example only sells prints from Upriver.

assets/project-page.js draws the page as a plain script straight after its root, before the first paint, so the lead image is ready for the view transition: the archive frame you opened carries view-transition-name: lead, the same as .lead-img, and supporting browsers grow one into the other (and back on Back). Without JavaScript the <noscript> block in project.html shows the Upriver project and the list of every project. When you add a project, add its frames' tiles to index.html and work.html too.

upriver.html is kept only so old links still work: it forwards to project.html?p=upriver with a meta refresh and, where JavaScript runs, keeps the f frame. Delete it on a new site.

About reel

<ul class="reel" data-reel> holds six buttons, each with data-cap for the caption line. Change the number of items freely; the chosen one opens to roughly three times the width of the others. Its link goes to project.html?p=upriver.

Contact

• The chooser buttons carry data-type, matching the <option> values of the form's job-type select and the data-guide-for paragraphs. contact.html?type=prints arrives with that type chosen (the series page's print link uses it).
• The form is not wired to anything. It validates name, email and message, then shows a confirmation saying nothing was sent. Connect it before going live: give the <form> an action for Formspree, Netlify Forms or your own endpoint and remove the submit handler in initEnquiry in assets/script.js, or replace that handler's final lines with a fetch() to your endpoint.

Phone menu

Below 900px the tabs give way to a red Menu block. It is a <details> element in the markup, so it opens without JavaScript; the script turns it into a button with aria-expanded that opens a full-height yellow sheet, moves focus into it, closes on Escape and returns focus.

Palettes

Five presets ship. The default lives in :root; the others are :root[data-palette="..."] blocks in assets/style.css that restate every colour token, its RGB triple and the display face. Set one on the finished site with <html data-palette="pink">, or copy a block's values into :root and delete the rest. The measured contrast for every pair is in the stylesheet comments.

Shared tokens:

The name block is never text and never sits on the flood. When the header sits on a flood page top (the Contact page, class top--flood), the block turns ink. The live demo has a colour picker; it is preview chrome and is not part of the download.

Accessibility and Fallbacks

• Without JavaScript every frame shows at the middle size, the filter, count and layout controls are hidden, the project page shows the Upriver project and the list of every project, and the menu opens as a native details element.
• If the GSAP CDN is blocked, every control still works as an instant change.
• Reduced motion keeps every control but changes instantly, and turns off the page transitions and the lead image morph.
• The archive controls are buttons with aria-pressed; the frame count is announced in a polite live region. Archive images carry their captions as alt text, and the Work index lists every caption as text.
• Focus rings show for keyboard use only (:focus-visible).

Dependencies

• GSAP 3.15.0 with Flip (Home, Work, Project) and ScrollTrigger (all pages but Contact), from jsDelivr. Works with GSAP 3.12+.
• No smooth-scrolling library: the archive pages are short at high density and read better with native scrolling.
• Fonts: Crimson Pro and Public Sans, plus one display face per preset, self-hosted (see Images and Credits).

Images and Credits

Bundled photographs are WebP derivatives in assets/img/, cropped, resized and lightly desaturated, listed with their source URLs in assets/img-manifest.json: t-* are the archive thumbnails (about 7KB each), plate-* the large project frames (about 60KB each), about-bea and contact-studio the page photographs. All 170 files come to about 5.8MB; each page loads only what it shows. Rebuild them with bun scripts/build-template-assets.ts photography-portfolio-template --force (in the GSAP Vault repo), or replace a file with your own at the same name.

• All photographs are by cottonbro studio on Pexels, under the Pexels licence; each source page is https://www.pexels.com/photo/<id>/ with the id from the manifest URL. The people in them are models and are not the fictional sitters, clients or anglers they are captioned as; the places are not the places named, and the fishing pictures were not taken on the Wye.
• Replace them with your own work before going live: a photographer's portfolio has to show the photographer's pictures.
• Fonts in assets/fonts/ are the latin files of Crimson Pro, Public Sans, Bricolage Grotesque, DM Serif Display, IBM Plex Mono and Young Serif, as served by Google Fonts, unmodified, under the SIL Open Font License 1.1; the copyright lines and licence texts are in assets/fonts/OFL.txt.

Bea Farrant, her clients, the publications, the sitters, the stylists, Dai and Owen Pryce, the Leadworks Gallery, the address, phone number, email and prices are fictional. Spike Island, Bristol, Rhayader, the River Wye and the other places named are real.