Photographer Portfolio - defuss-shadcn

Ines Duarte, photographer
A gallery-black palette on the page's root, a gallery-white one for the light mode (the switch in the header). A quiet Site Header; scroll it: a Parallax scene (the photograph far, the name near); Resume Header with a round portrait that opens like an iris (Motion's iris animates clip-path, so the circle is a border-radius); Portfolio Grid (masonry) whose pictures zoom into view (.parallax-reveal data-reveal='zoom') and open a page each (#/photo/before-the-tide); Diff (the edit - drag or use the arrow keys); Portfolio Grid (strip) for the series, each a page of its photographs (#/series/red-earth); a section with edge-wave-top around Availability (banner) that runs into the Site Footer.
<style>
  #pf-photographer {
    --background: oklch(0.12 0 0);
    --foreground: oklch(0.95 0 0);
    --card: oklch(0.17 0 0);
    --card-foreground: var(--foreground);
    --muted: oklch(0.2 0 0);
    --muted-foreground: oklch(0.68 0 0);
    --border: oklch(0.28 0 0);
    --input: var(--border);
    --primary: oklch(0.95 0 0);
    --primary-foreground: oklch(0.12 0 0);
    --secondary: oklch(0.22 0 0);
    --secondary-foreground: var(--foreground);
    --accent: oklch(0.22 0 0);
    --accent-foreground: var(--foreground);
    --ring: oklch(0.8 0.1 70);
    color-scheme: dark;
    display: flex;
    flex-direction: column;
    container: pf-photographer / inline-size;
    box-sizing: border-box;
    width: 100%;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
  }
  /* one view at a time: the home view, or the page of a photograph or a series */
  #pf-photographer [hidden] {
    display: none !important;
  }
  #pf-photographer .pf-home {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 8vw, 6rem);
  }
  #pf-photographer .pf-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 8vw, 6rem);
    box-sizing: border-box;
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  /* the header: the Site Header kept quiet - a name, four words, the switch */
  #pf-photographer .pf-bar {
    background: var(--background);
  }
  #pf-photographer .pf-bar .mk-header-inner {
    flex-wrap: wrap;
    gap: 0.5rem 2.5rem;
    max-width: 78rem;
    padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  }
  #pf-photographer .mk-header-brand {
    color: var(--foreground);
  }
  #pf-photographer .mk-header-name {
    color: inherit;
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 300;
    letter-spacing: 0.04em;
  }
  #pf-photographer .mk-header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.75rem;
    margin-inline-start: auto;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
  }
  #pf-photographer .mk-header-nav a {
    color: var(--muted-foreground);
    text-decoration: none;
  }
  #pf-photographer .mk-header-nav a:is(:hover, :focus-visible, [aria-current]) {
    color: var(--foreground);
  }
  @container pf-photographer (max-width: 40rem) {
    #pf-photographer .mk-header-nav {
      order: 3;
      width: 100%;
      margin-inline-start: 0;
    }
  }
  #pf-photographer .pf-opening {
    height: min(88dvh, 44rem);
    color: #fff;
  }
  #pf-photographer .pf-opening img {
    filter: brightness(0.72) contrast(1.05);
  }
  #pf-photographer .pf-opening h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(3rem, 1rem + 10vw, 9rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 0.95;
    text-align: center;
    text-shadow: 0 4px 40px rgb(0 0 0 / 0.5);
  }
  #pf-photographer .pf-opening p {
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    letter-spacing: 0.35em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgb(0 0 0 / 0.6);
  }
  #pf-photographer .pf-label {
    margin: 0 0 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  #pf-photographer .mk-resume-header {
    align-items: center;
  }
  #pf-photographer .mk-resume-header-photo {
    width: clamp(7rem, 18vw, 11rem);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  #pf-photographer .mk-resume-header-role {
    max-width: 40rem;
    font-family: var(--font-serif);
    font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem);
    font-weight: 300;
    line-height: 1.3;
  }
  #pf-photographer .mk-portfolio-grid-title {
    font-family: var(--font-serif);
    font-weight: 400;
  }
  #pf-photographer .pf-edit {
    display: grid;
    gap: 0.75rem;
    margin: 0;
  }
  #pf-photographer .pf-edit figcaption {
    color: var(--muted-foreground);
  }
  #pf-photographer .pf-clients {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    font-style: italic;
    color: var(--muted-foreground);
  }
  #pf-photographer .pf-contact {
    padding: 5rem 0 3rem;
    background: var(--card);
    --shape-edge: 2rem;
  }
  /* a photograph or a series: the picture first, the words beside the facts, then the other frames */
  #pf-photographer .pf-work {
    gap: clamp(2rem, 5vw, 3.5rem);
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
  }
  #pf-photographer .pf-work-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  #pf-photographer .pf-work-top a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
  }
  #pf-photographer .pf-work-top a:is(:hover, :focus-visible) {
    color: var(--foreground);
  }
  #pf-photographer .pf-work-top svg {
    width: 0.95rem;
    height: 0.95rem;
  }
  #pf-photographer .pf-work-head {
    display: grid;
    gap: 0.75rem;
    max-width: 48rem;
  }
  #pf-photographer .pf-work-head .pf-label {
    margin: 0;
  }
  #pf-photographer .pf-work-head h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 1.5rem + 4cqi, 5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.01em;
  }
  #pf-photographer .pf-work-lede {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1rem + 0.6cqi, 1.5rem);
    font-weight: 300;
    line-height: 1.45;
    color: var(--muted-foreground);
  }
  #pf-photographer .pf-work-cover {
    margin: 0;
  }
  #pf-photographer .pf-work-cover img {
    display: block;
    width: 100%;
    max-height: 80dvh;
    aspect-ratio: 18 / 11;
    object-fit: cover;
  }
  #pf-photographer .pf-work-body {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2rem 4rem;
    align-items: start;
  }
  #pf-photographer .pf-work-text p {
    margin: 0 0 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    text-wrap: pretty;
  }
  #pf-photographer .pf-work-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border);
    font-size: 0.9375rem;
  }
  #pf-photographer .pf-work-facts dt {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.6;
  }
  #pf-photographer .pf-work-facts dd {
    margin: 0;
  }
  #pf-photographer .pf-frames {
    columns: 2 16rem;
    column-gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* three frames or more fill three columns; two stay side by side */
  #pf-photographer .pf-frames:has(> li:nth-child(3)) {
    columns: 3 16rem;
  }
  #pf-photographer .pf-frames li {
    break-inside: avoid;
    margin-block-end: 1rem;
  }
  #pf-photographer .pf-frames img {
    display: block;
    width: 100%;
    height: auto;
  }
  #pf-photographer .mk-article-nav-link {
    border-radius: 0;
  }
  #pf-photographer .mk-article-nav-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
  }
  @container pf-photographer (max-width: 46rem) {
    #pf-photographer .pf-work-body {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  /* the footer: the Site Footer on the contact's wall - the wave runs on into it */
  #pf-photographer .pf-foot {
    background: var(--card);
  }
  #pf-photographer .pf-foot .mk-footer-inner {
    max-width: 78rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  }
  #pf-photographer .pf-foot .mk-footer-nav {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 2rem;
  }
  #pf-photographer .mk-footer-heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
  }
  #pf-photographer .mk-footer-list {
    gap: 0.5rem;
    font-family: var(--font-serif);
  }
  #pf-photographer .mk-footer-brand {
    color: var(--foreground);
  }
  #pf-photographer .mk-footer-brand-name {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 0.04em;
  }
  /* light or dark: the Swap writes the page's dark class - every look has a light and a dark palette */
  #pf-photographer .site-mode {
    flex: none;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }
  #pf-photographer .site-mode:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  /* -- modes: each look in light and dark, derived from the palettes above (the other mode of each look) -- */
  .dark #pf-photographer {
    --accent: oklch(0.24 0 0);
  }
  :root:not(.dark) #pf-photographer {
    color-scheme: light;
    --background: oklch(0.985 0 0);
    --foreground: oklch(0.2 0 0);
    --card: oklch(0.997 0 0);
    --card-foreground: oklch(0.2 0 0);
    --muted: oklch(0.95 0 0);
    --muted-foreground: oklch(0.46 0 0);
    --border: oklch(0.9 0 0);
    --input: oklch(0.88 0 0);
    --primary: oklch(0.2 0 0);
    --primary-foreground: oklch(0.985 0.005 0);
    --secondary: oklch(0.955 0 0);
    --secondary-foreground: oklch(0.25 0 0);
    --accent: oklch(0.94 0 0);
    --accent-foreground: oklch(0.2 0 0);
    --ring: oklch(0.55 0.1 70);
    --popover: oklch(0.997 0 0);
    --popover-foreground: oklch(0.2 0 0);
  }
  /* -- modes: end -- */
</style>
<div id="pf-photographer">
  <header class="mk-header pf-bar">
    <div class="mk-header-inner">
      <a class="mk-header-brand" href="#/" data-router-link><span class="mk-header-name">Ines Duarte</span></a>
      <nav class="mk-header-nav" aria-label="Sections">
        <a href="#pf-photo-recent">Recent</a>
        <a href="#pf-photo-series">Series</a>
        <a href="#pf-photo-edit">The edit</a>
        <a href="#pf-photo-contact">Contact</a>
      </nav>
      <div class="mk-header-actions">
        <label class="swap site-mode" data-variant="rotate" data-size="sm">
          <input type="checkbox" data-site-mode aria-label="Dark mode" />
          <span class="swap-on" aria-hidden="true"><i data-lucide="moon"></i></span>
          <span class="swap-off" aria-hidden="true"><i data-lucide="sun"></i></span>
        </label>
      </div>
    </div>
  </header>

  <!-- the home view: the whole portfolio -->
  <div class="pf-home" data-pf-view="home">
    <section class="parallax pf-opening" aria-label="Ines Duarte, photographer">
      <div class="parallax-layer" data-depth="far"><img src="https://picsum.photos/id/1036/1800/1200" alt="" /></div>
      <div class="parallax-layer" style="--parallax-speed: -12%; z-index: 0">
        <div>
          <h1 data-df-entrance="blur">Ines Duarte</h1>
          <p data-df-entrance="fade" style="--df-motion-delay: 400ms">Landscape &amp; architecture · Lisbon</p>
        </div>
      </div>
    </section>
    <div class="pf-inner">
      <header class="mk-resume-header">
        <img
          class="mk-resume-header-photo"
          src="https://picsum.photos/id/823/500/500"
          alt="Ines Duarte"
          data-df-entrance="iris"
        />
        <div class="mk-resume-header-body">
          <p class="mk-resume-header-role"
            >I photograph places at the hour nobody is there - and the buildings that wait for people.</p
          >
          <ul class="mk-resume-header-facts">
            <li><i data-lucide="camera"></i> Hasselblad X2D, Leica Q3</li>
            <li><i data-lucide="award"></i> Sony World Photography Awards, shortlist 2025</li>
            <li><i data-lucide="mail"></i> <a href="mailto:ines@example.com">ines@example.com</a></li>
          </ul>
        </div>
      </header>
      <section id="pf-photo-recent" aria-labelledby="pf-photo-recent-title">
        <h2 class="pf-label" id="pf-photo-recent-title">Recent</h2>
        <ul class="mk-portfolio-grid" data-variant="masonry">
          <li class="mk-portfolio-grid-item parallax-reveal" data-reveal="zoom">
            <a class="mk-portfolio-grid-link" href="#/photo/glass-and-fog" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1031/600/840" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Glass and fog</strong>
                <span class="mk-portfolio-grid-meta">Porto, 2026</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item parallax-reveal" data-reveal="zoom">
            <a class="mk-portfolio-grid-link" href="#/photo/above-the-fjord" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1015/600/420" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Above the fjord</strong>
                <span class="mk-portfolio-grid-meta">Lysefjord, 2026</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item parallax-reveal" data-reveal="zoom">
            <a class="mk-portfolio-grid-link" href="#/photo/white-spiral" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/949/600/600" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">White spiral</strong>
                <span class="mk-portfolio-grid-meta">New York, 2025</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item parallax-reveal" data-reveal="zoom">
            <a class="mk-portfolio-grid-link" href="#/photo/before-the-tide" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1050/600/440" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Before the tide</strong>
                <span class="mk-portfolio-grid-meta">Algarve, 2025</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item parallax-reveal" data-reveal="zoom">
            <a class="mk-portfolio-grid-link" href="#/photo/steps-of-light" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1081/600/780" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Steps of light</strong>
                <span class="mk-portfolio-grid-meta">Matosinhos, 2024</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item parallax-reveal" data-reveal="zoom">
            <a class="mk-portfolio-grid-link" href="#/photo/the-green-road" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1018/600/400" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">The green road</strong>
                <span class="mk-portfolio-grid-meta">Skye, 2024</span>
              </span>
            </a>
          </li>
        </ul>
      </section>
      <section id="pf-photo-edit" aria-labelledby="pf-photo-edit-title">
        <h2 class="pf-label" id="pf-photo-edit-title">The edit</h2>
        <figure class="pf-edit">
          <div class="diff" data-ratio="7/4">
            <div class="diff-item-1">
              <img
                src="https://picsum.photos/id/1048/1400/800"
                alt="After: the graded frame, glass and sky in colour"
              />
              <span class="diff-label">Graded</span>
            </div>
            <div class="diff-item-2">
              <img src="https://picsum.photos/id/1048/1400/800?grayscale" alt="Before: the raw frame, flat and grey" />
              <span class="diff-label">Raw</span>
            </div>
            <input
              class="diff-range"
              type="range"
              min="0"
              max="100"
              value="50"
              step="0.1"
              aria-label="Divider position: drag to compare the graded and the raw frame"
            />
          </div>
          <figcaption>Towers, Lisbon - the print and the raw frame, side by side.</figcaption>
        </figure>
      </section>
      <section id="pf-photo-series" aria-labelledby="pf-photo-series-title">
        <h2 class="pf-label" id="pf-photo-series-title">Series</h2>
        <ul class="mk-portfolio-grid" data-variant="strip">
          <li class="mk-portfolio-grid-item">
            <a class="mk-portfolio-grid-link" href="#/series/empty-rooms" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/954/640/800" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Empty Rooms</strong>
                <span class="mk-portfolio-grid-meta">24 photographs</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item">
            <a class="mk-portfolio-grid-link" href="#/series/red-earth" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1016/640/800" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Red Earth</strong>
                <span class="mk-portfolio-grid-meta">31 photographs</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item">
            <a class="mk-portfolio-grid-link" href="#/series/brutal-lisbon" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/983/640/800" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Brutal Lisbon</strong>
                <span class="mk-portfolio-grid-meta">18 photographs</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item">
            <a class="mk-portfolio-grid-link" href="#/series/night-shift" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1078/640/800" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Night Shift</strong>
                <span class="mk-portfolio-grid-meta">40 photographs</span>
              </span>
            </a>
          </li>
        </ul>
      </section>
      <section aria-label="Published in">
        <ul class="pf-clients">
          <li>Monocle</li>
          <li>Wallpaper*</li>
          <li>The New York Times</li>
          <li>Dezeen</li>
          <li>Público</li>
        </ul>
      </section>
    </div>
    <section id="pf-photo-contact" class="pf-contact edge-wave-top" aria-label="Contact">
      <div class="pf-inner">
        <aside class="mk-availability" data-variant="banner" aria-labelledby="pf-photo-hire">
          <p class="mk-availability-status"
            ><span class="indicator-dot" data-variant="success" aria-hidden="true"></span> Booking 2027</p
          >
          <p class="mk-availability-title" id="pf-photo-hire">Commissions, licensing and prints</p>
          <div class="mk-availability-actions">
            <a class="btn" data-size="sm" href="mailto:ines@example.com">Request a quote</a>
          </div>
        </aside>
      </div>
    </section>
  </div>

  <!-- a photograph or a series: the route picks it from the data block below -->
  <article class="pf-inner pf-work" data-pf-view="work" aria-labelledby="pf-photo-work-title" hidden>
    <nav class="pf-work-top" aria-label="Back">
      <a href="#pf-photo-recent" data-work-back><i data-lucide="arrow-left"></i> <span data-work-list>Recent</span></a>
      <span data-work-count>1 / 6</span>
    </nav>
    <header class="pf-work-head">
      <p class="pf-label" data-work="meta">Porto, 2026</p>
      <h1 id="pf-photo-work-title" data-work="title">Glass and fog</h1>
      <p class="pf-work-lede" data-work="lede"
        >Porto's new waterfront tower on the one morning the river fog climbed higher than the building.</p
      >
    </header>
    <figure class="pf-work-cover">
      <img
        data-work-cover
        src="https://picsum.photos/id/1031/1800/1100"
        alt="A glass tower seen from its foot, its top lost in a white sky"
      />
    </figure>
    <div class="pf-work-body">
      <div class="pf-work-text" data-work-text>
        <p
          >The architects asked for a picture of the tower for the cover of their monograph - finished, empty, before
          the tenants moved in. I went back eleven mornings for the fog.</p
        >
        <p
          >On the twelfth it rose off the Douro and swallowed the top floors. I stood at the foot of the glass and let
          the sky do the rest: one frame on the X2D, then the fog was gone.</p
        >
      </div>
      <dl class="pf-work-facts" data-work-facts>
        <dt>Camera</dt>
        <dd>Hasselblad X2D, 21 mm</dd>
        <dt>Exposure</dt>
        <dd>1/250 s at f/8</dd>
        <dt>For</dt>
        <dd>Atelier Ribeira, architects</dd>
        <dt>Prints</dt>
        <dd>60 × 90 cm, edition of 10</dd>
      </dl>
    </div>
    <ul class="pf-frames" data-work-frames aria-label="More frames">
      <li
        ><img
          src="https://picsum.photos/id/1048/900/1100"
          alt="Two glass towers seen from below, meeting the sky"
          loading="lazy"
      /></li>
      <li
        ><img
          src="https://picsum.photos/id/1076/900/650"
          alt="The corner of a slatted building seen from below"
          loading="lazy"
      /></li>
    </ul>
    <nav class="mk-article-nav" data-variant="minimal" aria-label="More photographs">
      <a class="mk-article-nav-link" href="#/photo/the-green-road" rel="prev" data-router-link
        ><span class="mk-article-nav-dir"><i data-lucide="arrow-left" aria-hidden="true"></i> Previous</span
        ><span class="mk-article-nav-title" data-work-prev>The green road</span></a
      >
      <a class="mk-article-nav-link" href="#/photo/above-the-fjord" rel="next" data-router-link
        ><span class="mk-article-nav-dir">Next <i data-lucide="arrow-right" aria-hidden="true"></i></span
        ><span class="mk-article-nav-title" data-work-next>Above the fjord</span></a
      >
    </nav>
  </article>

  <footer class="mk-footer pf-foot">
    <div class="mk-footer-inner">
      <nav class="mk-footer-nav" aria-label="Footer">
        <div class="mk-footer-col">
          <h2 class="mk-footer-heading">Recent</h2>
          <ul class="mk-footer-list">
            <li><a href="#/photo/glass-and-fog" data-router-link>Glass and fog</a></li>
            <li><a href="#/photo/above-the-fjord" data-router-link>Above the fjord</a></li>
            <li><a href="#/photo/white-spiral" data-router-link>White spiral</a></li>
            <li><a href="#/photo/before-the-tide" data-router-link>Before the tide</a></li>
            <li><a href="#/photo/steps-of-light" data-router-link>Steps of light</a></li>
            <li><a href="#/photo/the-green-road" data-router-link>The green road</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h2 class="mk-footer-heading">Series</h2>
          <ul class="mk-footer-list">
            <li><a href="#/series/empty-rooms" data-router-link>Empty Rooms</a></li>
            <li><a href="#/series/red-earth" data-router-link>Red Earth</a></li>
            <li><a href="#/series/brutal-lisbon" data-router-link>Brutal Lisbon</a></li>
            <li><a href="#/series/night-shift" data-router-link>Night Shift</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h2 class="mk-footer-heading">Studio</h2>
          <ul class="mk-footer-list">
            <li><a href="#pf-photo-edit">The edit</a></li>
            <li><a href="#pf-photo-contact">Commissions and prints</a></li>
            <li><a href="mailto:ines@example.com">ines@example.com</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h2 class="mk-footer-heading">Elsewhere</h2>
          <ul class="mk-footer-list">
            <li><a href="https://www.instagram.com/" target="_blank" rel="noopener">Instagram</a></li>
            <li><a href="https://www.behance.net/" target="_blank" rel="noopener">Behance</a></li>
          </ul>
        </div>
      </nav>
      <hr class="separator mk-footer-rule" />
      <div class="mk-footer-bottom">
        <a class="mk-footer-brand" href="#/" data-router-link><span class="mk-footer-brand-name">Ines Duarte</span></a>
        <p class="mk-footer-copy">Landscape &amp; architecture · Lisbon · © 2026</p>
      </div>
    </div>
  </footer>

  <!-- the photographs and the series the routes name, in the order of the page -->
  <script type="application/json" id="pf-photo-data">
    {
      "photo": {
        "glass-and-fog": {
          "title": "Glass and fog",
          "meta": "Porto, 2026",
          "lede": "Porto's new waterfront tower on the one morning the river fog climbed higher than the building.",
          "text": [
            "The architects asked for a picture of the tower for the cover of their monograph - finished, empty, before the tenants moved in. I went back eleven mornings for the fog.",
            "On the twelfth it rose off the Douro and swallowed the top floors. I stood at the foot of the glass and let the sky do the rest: one frame on the X2D, then the fog was gone."
          ],
          "facts": [
            ["Camera", "Hasselblad X2D, 21 mm"],
            ["Exposure", "1/250 s at f/8"],
            ["For", "Atelier Ribeira, architects"],
            ["Prints", "60 × 90 cm, edition of 10"]
          ],
          "images": [
            [1031, "A glass tower seen from its foot, its top lost in a white sky"],
            [1048, "Two glass towers seen from below, meeting the sky"],
            [1076, "The corner of a slatted building seen from below"]
          ]
        },
        "above-the-fjord": {
          "title": "Above the fjord",
          "meta": "Lysefjord, 2026",
          "lede": "Six hundred metres above the water, at the hour the day trippers are still on the ferry.",
          "text": [
            "A magazine sent me to Norway for a story on walking in winter light. The fjord was the picture everyone expects, so I climbed before dawn to take it without anyone in it.",
            "The cold kept the air clear enough to see the far end of the fjord. I waited for the sun to reach the water and not the cliffs - about four minutes in March."
          ],
          "facts": [
            ["Camera", "Hasselblad X2D, 38 mm"],
            ["Exposure", "1/500 s at f/11"],
            ["For", "Fjell Magazine"],
            ["Prints", "70 × 100 cm, edition of 8"]
          ],
          "images": [
            [1015, "A deep blue fjord between grey cliffs, seen from above"],
            [1036, "Yellow tents in the snow below white mountains"],
            [1044, "A person on the rocks of a river in a misty valley"]
          ]
        },
        "white-spiral": {
          "title": "White spiral",
          "meta": "New York, 2025",
          "lede": "A museum ramp from below, ten minutes before the doors opened.",
          "text": [
            "I had a quarter of an hour inside before the first visitors. Most of it went into finding the one place where the ramp closes into a perfect ring under the glass.",
            "Lying on the floor was the easy part. The hard part was waiting for the guard on the third ramp to step out of the frame."
          ],
          "facts": [
            ["Camera", "Leica Q3, 28 mm"],
            ["Exposure", "1/60 s at f/5.6"],
            ["For", "Own work"],
            ["Prints", "50 × 50 cm, edition of 15"]
          ],
          "images": [
            [949, "A white spiral of balconies under a glass dome, seen from below"],
            [954, "A white staircase seen through a slit in a white wall"],
            [1081, "A stepped white facade against a pale blue sky"]
          ]
        },
        "before-the-tide": {
          "title": "Before the tide",
          "meta": "Algarve, 2025",
          "lede": "The sea stacks of the south coast in the last hour of low water.",
          "text": [
            "At low tide you can walk between the stacks for about an hour. I came for the rock, but the picture was the light on the wet sand just before the sea came back.",
            "The series became a calendar for a coastal trust, sold to pay for the paths along the cliffs."
          ],
          "facts": [
            ["Camera", "Hasselblad X2D, 45 mm"],
            ["Exposure", "1/125 s at f/9"],
            ["For", "Costa Viva coastal trust"],
            ["Prints", "60 × 80 cm, edition of 10"]
          ],
          "images": [
            [1050, "Sandstone cliffs and sea stacks above a green sea"],
            [1052, "Black sea stacks off a snowy beach"],
            [1061, "A sandy cliff over a beach with long waves"]
          ]
        },
        "steps-of-light": {
          "title": "Steps of light",
          "meta": "Matosinhos, 2024",
          "lede": "A white facade that steps back floor by floor, each step a different white by noon.",
          "text": [
            "The building faces south, and every terrace throws a shadow on the one below. At noon in June the shadows are shortest and the steps turn into lines.",
            "I photographed it every hour for a day; the noon frame is the one the residents asked to hang in the lobby."
          ],
          "facts": [
            ["Camera", "Leica Q3, 28 mm"],
            ["Exposure", "1/1000 s at f/8"],
            ["For", "The residents' association"],
            ["Prints", "40 × 60 cm, edition of 20"]
          ],
          "images": [
            [1081, "A stepped white facade against a pale blue sky"],
            [942, "A white building cut by a narrow dark gap, in black and white"],
            [1076, "The corner of a slatted building seen from below"]
          ]
        },
        "the-green-road": {
          "title": "The green road",
          "meta": "Skye, 2024",
          "lede": "A single-track road under the cliffs, between two showers.",
          "text": [
            "It rained for nine of my ten days on the island. On the tenth the clouds lifted for twenty minutes and the road under the ridge turned the colour of moss.",
            "The road is empty because I parked round the bend - the only car I saw that morning was mine."
          ],
          "facts": [
            ["Camera", "Hasselblad X2D, 90 mm"],
            ["Exposure", "1/320 s at f/8"],
            ["For", "Own work"],
            ["Prints", "70 × 100 cm, edition of 8"]
          ],
          "images": [
            [1018, "A road winding through green hills under cliffs"],
            [287, "A path along a green mountain ridge"],
            [984, "Green hills in low sun under dark clouds"]
          ]
        }
      },
      "series": {
        "empty-rooms": {
          "title": "Empty Rooms",
          "meta": "24 photographs · 2022 - 2025",
          "lede": "Schools, hotels and offices in the week between the builders leaving and the first people arriving.",
          "text": [
            "A new building has one week when it is finished and nobody's. The floors are clean, the light is new and nothing has a use yet.",
            "For three years I asked architects for that week. Twenty-four rooms made it into the series: a classroom without chairs, a hotel bar without glasses, a waiting room nobody waits in."
          ],
          "facts": [
            ["Years", "2022 - 2025"],
            ["Photographs", "24"],
            ["Shown at", "Galeria Arco, Lisbon"],
            ["Prints", "8 of each, 50 × 60 cm"]
          ],
          "images": [
            [954, "A white staircase seen through a slit in a white wall"],
            [32, "An empty bench below a weathered white wall"],
            [445, "A small desk with a laptop under a window with blinds"],
            [942, "A white building cut by a narrow dark gap, in black and white"],
            [119, "A white desk with a laptop, books and a calendar"],
            [1076, "The corner of a slatted building seen from below"]
          ]
        },
        "red-earth": {
          "title": "Red Earth",
          "meta": "31 photographs · 2021 - 2024",
          "lede": "Dry land in the south of Portugal and Spain, where the soil turns red in the evening and the reservoirs turn to sand.",
          "text": [
            "The reservoirs of the south have been falling for a decade. Where there was water, there are trees that drowned in the eighties standing in red dust.",
            "I drove the same loop every autumn for four years and photographed what the water left. The series was shown with the hydrologists' own maps."
          ],
          "facts": [
            ["Years", "2021 - 2024"],
            ["Photographs", "31"],
            ["Shown at", "Casa da Terra, Évora"],
            ["Book", "Red Earth, 96 pages"]
          ],
          "images": [
            [1016, "Red rocks above a canyon in evening light"],
            [46, "Rolling desert hills under a pale sky"],
            [1032, "Red earth and a dark crater seen from the air"],
            [1028, "Dead trees standing in a dry, misty field"],
            [1055, "Wet brown sand reflecting the sky at low tide"],
            [1057, "A coast of pine-covered cliffs in evening light"]
          ]
        },
        "brutal-lisbon": {
          "title": "Brutal Lisbon",
          "meta": "18 photographs · 2023",
          "lede": "The concrete housing of the seventies, photographed like the palaces in the guidebooks.",
          "text": [
            "Lisbon sells its tiles and its palaces. Its concrete housing estates are where most of the city lives, and nobody photographs them for a postcard.",
            "I gave them the postcard treatment: blue sky, straight lines, the best hour of the day. The residents chose which eighteen went on the walls of their library."
          ],
          "facts": [
            ["Year", "2023"],
            ["Photographs", "18"],
            ["Shown at", "The estate's library, Chelas"],
            ["Prints", "Free to the residents"]
          ],
          "images": [
            [983, "A dark building with sharp diagonal edges, in black and white"],
            [1054, "A weathered grey apartment block with small windows"],
            [942, "A white building cut by a narrow dark gap, in black and white"],
            [1065, "An old street running down to the sea"],
            [1076, "The corner of a slatted building seen from below"],
            [1081, "A stepped white facade against a pale blue sky"]
          ]
        },
        "night-shift": {
          "title": "Night Shift",
          "meta": "40 photographs · 2019 - 2026",
          "lede": "Cities between midnight and five, when the only people out are the ones keeping them running.",
          "text": [
            "Bakers, tram drivers, nurses, the man who washes the station floor. I started photographing their cities on the way home from my own night job, and never stopped.",
            "There are no people in the pictures - only the lights they leave on. Forty photographs from nine cities, and the series is still growing."
          ],
          "facts": [
            ["Years", "2019 - 2026"],
            ["Photographs", "40"],
            ["Shown at", "Noite festival, Porto"],
            ["Book", "Night Shift, 120 pages"]
          ],
          "images": [
            [1078, "A tower block at night with its windows lit"],
            [43, "A bridge and a skyline at night, in black and white"],
            [1026, "Railway tracks in a freight yard at sunset"],
            [870, "A lighthouse lit at dusk"],
            [1033, "An empty metro station with an escalator between lit platforms"],
            [274, "Billboards lit over a busy square at night"]
          ]
        }
      }
    }
  </script>
</div>
<script type="module">
  // df$ comes with the component bundle - a full-screen page loads it after this module
  addEventListener('DOMContentLoaded', async () => {
    // light or dark: the switch writes the page's dark class (every look has both palettes); it follows the class when
    // something else sets it (the docs card follows the site's mode)
    const siteMode = df$('#pf-photographer [data-site-mode]');
    const syncMode = () => siteMode.prop('checked', document.documentElement.classList.contains('dark'));
    siteMode.on('change', () => {
      document.documentElement.classList.toggle('dark', siteMode.prop('checked'));
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
    new MutationObserver(syncMode).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    syncMode();

    // -- the pages: the home view, and a page per photograph (#/photo/before-the-tide) and per series
    // (#/series/red-earth), both filled from the data block; the header's sections are anchors of the home view
    const site = df$('#pf-photographer').get(0);
    const DATA = JSON.parse(df$('#pf-photo-data').text());
    const LISTS = { photo: ['Recent', 'pf-photo-recent'], series: ['Series', 'pf-photo-series'] };
    const SECTIONS = ['pf-photo-recent', 'pf-photo-series', 'pf-photo-edit', 'pf-photo-contact'];
    const picture = (id, size) => 'https://picsum.photos/id/' + id + '/' + size;
    const fill = (kind, slug) => {
      const item = DATA[kind][slug];
      const keys = Object.keys(DATA[kind]);
      const at = keys.indexOf(slug);
      const prev = keys[(at + keys.length - 1) % keys.length];
      const next = keys[(at + 1) % keys.length];
      const page = df$('#pf-photographer [data-pf-view="work"]');
      page.find('[data-work]').each((_i, el) => {
        df$(el).text(item[el.dataset.work]);
      });
      page.find('[data-work-list]').text(LISTS[kind][0]);
      page.find('[data-work-back]').attr('href', '#' + LISTS[kind][1]);
      page.find('[data-work-count]').text(at + 1 + ' / ' + keys.length);
      const [[coverId, coverAlt], ...frames] = item.images;
      page.find('[data-work-cover]').attr('src', picture(coverId, '1800/1100')).attr('alt', coverAlt);
      const text = page.find('[data-work-text]').html('');
      for (const paragraph of item.text) text.append(df$('<p></p>').text(paragraph));
      const facts = page.find('[data-work-facts]').html('');
      for (const [term, value] of item.facts) {
        facts.append(df$('<dt></dt>').text(term));
        facts.append(df$('<dd></dd>').text(value));
      }
      // the other frames, tall and wide in turn, so the columns read like a contact sheet
      const list = page.find('[data-work-frames]').html('');
      frames.forEach(([id, alt], i) => {
        const img = df$('<img loading="lazy" />')
          .attr('src', picture(id, i % 2 ? '900/650' : '900/1100'))
          .attr('alt', alt);
        list.append(df$('<li></li>').append(img));
      });
      page.find('[rel="prev"]').attr('href', '#/' + kind + '/' + prev);
      page.find('[data-work-prev]').text(DATA[kind][prev].title);
      page.find('[rel="next"]').attr('href', '#/' + kind + '/' + next);
      page.find('[data-work-next]').text(DATA[kind][next].title);
    };
    const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
    // one view at a time; the header marks where the reader is
    const reveal = (name, current) => {
      df$('#pf-photographer [data-pf-view]').each((_i, part) => {
        part.hidden = part.dataset.pfView !== name;
      });
      df$('#pf-photographer .mk-header-nav a').each((_i, link) => {
        df$(link).attr('aria-current', link.getAttribute('href') === current ? 'true' : null);
      });
    };
    let first = true;
    // a route: the home view (#/) or the page of a photograph or a series, which opens at its top
    const show = (to) => {
      const kind = DATA[to.routeId] && DATA[to.routeId][to.params.slug] ? to.routeId : null;
      if (kind) fill(kind, to.params.slug);
      reveal(kind ? 'work' : 'home', kind ? '#' + LISTS[kind][1] : '');
      if (!first) site.scrollIntoView({ block: 'start', behavior: kind || still ? 'instant' : 'smooth' });
      first = false;
    };
    // a section of the home view: the home view shows again (a page hides it) and the section scrolls into view - on
    // a deep link once the pictures have laid the page out
    const plain = () => location.hash.length > 1 && !location.hash.startsWith('#/');
    const jump = () => {
      const id = decodeURIComponent(location.hash.slice(1));
      if (!SECTIONS.includes(id)) return;
      reveal('home', '#' + id);
      const go = () =>
        df$('#' + id)
          .get(0)
          .scrollIntoView({ block: 'start', behavior: still ? 'instant' : 'smooth' });
      if (document.readyState !== 'complete') addEventListener('load', go, { once: true });
      else go();
      first = false;
    };
    addEventListener('hashchange', () => plain() && jump());
    if (plain()) jump();
    const routes = [
      { id: 'home', path: '/' },
      { id: 'photo', path: '/photo/:slug' },
      { id: 'series', path: '/series/:slug' },
      { id: 'missing', path: '*' },
    ];
    try {
      const { createRouter } = await import('https://cdn.jsdelivr.net/npm/defuss-dom-router@0.1.1/dist/index.js');
      const router = createRouter({
        mode: 'hash',
        scroll: 'manual',
        routes,
        prepare: ({ to }) => ({ commit: () => show(to) }),
      });
      router.attachLinks(site);
      if ((await router.start()).status === 'rejected') {
        // no address the router may own - a docs preview is an about:srcdoc frame: the same routes match its hash
        const preview = createRouter({ mode: 'hash', routes, baseUrl: 'https://preview.invalid/' });
        const follow = () => plain() || show(preview.resolve(location.hash.startsWith('#/') ? location.hash : '#/'));
        addEventListener('hashchange', follow);
        follow();
      }
    } catch {
      // the router did not load (offline): the home view stays, and it holds every section
    }
  });
</script>
Built from Site Header, Parallax, Resume Header, Portfolio Grid (masonry and strip), Diff (the edit: drag or use the arrow keys), Availability (banner) and Site Footer. Every photograph and every series is a route of defuss-dom-router, filled from a data block: #/photo/before-the-tide shows the picture, its story, its camera and the other frames of that morning, #/series/red-earth the series' statement and its photographs, each with Article Navigation to the previous and the next; the header's sections are anchors of the home view. The page sets a dark palette and color-scheme: dark on its root, and a light one for the light mode - a black or a white gallery wall. edge-wave-top is a Shapes utility (the portrait is round by border-radius: the iris entrance animates clip-path, which would replace a clip-path shape), the blur, fade and iris entrances Motion's.
Comments, ideas or improvements? Edit this page's source on GitHub