Photographer Portfolio

Build a personal homepage styled as a photographer's portfolio: a dark gallery wall where the page opens on a full-viewport photograph, sections are numbered series, and every image is a plate with a museum label beneath it. The pictures carry the page; the type is quiet, catalogue-like and always legible.

Use a `1440px` max wrap with a responsive gutter. The navigation is a thin bar fixed over the hero: transparent with a top-down black gradient behind it so its light text reads over any photo, turning into a `90%` ground-coloured bar with a `10px` backdrop blur and a hairline once the page scrolls, and sliding up out of view while the reader scrolls down (but never while it holds focus). Links are small, with the current one marked by an underline.

Set display type in **Instrument Serif** at weight 400, headings and captions too; body in **Inter** at `17px` to `18px`; and only the EXIF lines, plate numbers and labels in **IBM Plex Mono** at `13px`, uppercase and tracked, separated by middle dots. The dark default uses ground `#0f0f0e`, surfaces `#181817` and `#222220`, lines `#2e2d2a`, bone ink `#f2f0eb`, stone muted text `#a8a59d`, a pale slate accent `#9db6d0` and amber `#e0a458` for small signals. The light print mode is warm paper `#faf9f6` with ink `#171715`; persist the choice in `localStorage` inside try/catch.

The intro is a `100svh` section with the portrait as an absolutely positioned cover image and two gradients over it: one from the right (`rgba(8,8,7,.9)` to transparent at 62%) and one from the bottom, so the copy can sit on the right half at `max-width: min(40rem, 48%)`. The copy is an EXIF line (Plate 00, place, name), an H1 at `clamp(3rem, 6.2vw, 6.2rem)` in light serif with its second half in italic, and a lede in `#dcd9d1`. Along the bottom runs a foot row above a `1px` `rgba(255,255,255,.22)` rule: a solid bone button and two quieter text links on the left, and a mono stat line on the right. A soft text shadow (`0 1px 24px rgba(0,0,0,.35)`) keeps the type crisp over the photo. Repeat the idea further down as a shorter `64svh` plate introducing the projects, with a bottom gradient only.

Between the plates, label each section Series 01, Series 02 and so on in mono above a serif H2, with a short right-aligned link. Show curated picks in an asymmetric 12-column spread (one extra-large plate, one small, one wide); recent posts as a CSS-columns masonry wall; the short-story series as a scroll-snap filmstrip with prev and next buttons; the archive as a contact-sheet list of rows with mono dates; and services as caption tiles. Every plate is a button that opens a shared native-dialog lightbox with prev, next, arrow keys, swipe, an `NN / NN` counter and a caption that links through, returning focus to the plate on close. Under each plate the museum label is always visible: number, serif title, one line of description, and a mono line of collection and ISO date. Posts without an image get a typographic no-photograph frame with sprocket-hole rules rather than fake art.

Close with a stat row, a contact sheet of side projects, and a full-bleed closing plate for Work with me, with a small tilted contact print of a second photo inset at native size; never upscale a small photo.

The design depends on two things: photographs at full bleed with honest gradients, and captions that are never hover-only. Do not add frames, drop shadows or hover zoom to the plates. Below `860px` the intro stops overlaying: the photo becomes a `62svh` block and the copy follows below it on near-black, the spread and masonry fall to one column, the filmstrip scrolls with snap, and nothing scrolls sideways at `400px`. There is no ambient animation; the bar's slide and the lightbox open are the only motion, both instant under `prefers-reduced-motion`.