Zine Portfolio - defuss-shadcn

Ama Owusu, collage artist
Paper, ink, a red and a marker yellow with Special Elite and Caveat on the page's root (brown paper in dark mode); pattern-grain over everything; a name of cut-out letters (each its own colour, face and tilt) that pop in one by one (data-df-stagger); frame-polaroid + frame-tape, a stamp and star stickers; Portfolio Grid (scatter); edge-torn-top on the dark band; ticket shapes for the fairs; Newsletter (card).
<style>
  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Special+Elite&family=Archivo+Black&display=swap');
  #pf-zine {
    --background: oklch(0.95 0.022 85);
    --foreground: oklch(0.2 0.02 40);
    --card: oklch(0.985 0.01 85);
    --card-foreground: var(--foreground);
    --muted: oklch(0.91 0.03 85);
    --muted-foreground: oklch(0.42 0.03 50);
    --border: oklch(0.2 0.02 40);
    --input: var(--border);
    --primary: oklch(0.6 0.22 30);
    --primary-foreground: oklch(0.985 0.01 85);
    --secondary: oklch(0.92 0.17 102);
    --secondary-foreground: var(--foreground);
    --accent: oklch(0.92 0.17 102);
    --accent-foreground: var(--foreground);
    --ring: var(--primary);
    --chart-2: oklch(0.55 0.17 255);
    --chart-3: oklch(0.62 0.14 155);
    --radius: 0.25rem;
    --radius-sm: max(0px, calc(var(--radius) - 4px));
    --radius-md: max(0px, calc(var(--radius) - 2px));
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --font-sans: 'Special Elite', 'Courier New', monospace;
    --pf-hand: 'Caveat', cursive;
    container: pf-zine / inline-size;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow: clip;
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
  }
  .dark #pf-zine {
    --background: oklch(0.24 0.025 60);
    --foreground: oklch(0.93 0.025 85);
    --card: oklch(0.29 0.025 60);
    --muted: oklch(0.31 0.025 60);
    --muted-foreground: oklch(0.78 0.03 80);
    --border: oklch(0.93 0.025 85);
    --primary: oklch(0.7 0.19 32);
    --secondary: oklch(0.55 0.12 102);
    --accent: oklch(0.55 0.12 102);
  }
  #pf-zine .pf-page {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 8vw, 6rem);
    max-width: 70rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) 3rem;
  }
  #pf-zine .pf-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  #pf-zine .pf-ransom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.25rem;
    margin: 0;
    font-size: clamp(2.5rem, 1rem + 6cqi, 5.5rem);
    line-height: 1;
  }
  #pf-zine .pf-ransom b {
    display: inline-block;
    padding: 0.08em 0.14em 0.04em;
    font-weight: 400;
    box-shadow: 2px 3px 0 color-mix(in oklch, var(--foreground) 25%, transparent);
  }
  #pf-zine .pf-ransom .pf-gap {
    flex-basis: 100%;
    height: 0;
  }
  #pf-zine .pf-ransom b:nth-of-type(4n + 1) {
    background: var(--foreground);
    color: var(--background);
    font-family: 'Archivo Black', sans-serif;
    rotate: -4deg;
  }
  #pf-zine .pf-ransom b:nth-of-type(4n + 2) {
    background: var(--accent);
    color: oklch(0.2 0.02 40);
    font-family: var(--font-sans);
    rotate: 3deg;
  }
  #pf-zine .pf-ransom b:nth-of-type(4n + 3) {
    background: var(--card);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    rotate: -2deg;
  }
  #pf-zine .pf-ransom b:nth-of-type(4n) {
    background: var(--primary);
    color: var(--primary-foreground);
    font-family: 'Archivo Black', sans-serif;
    rotate: 5deg;
  }
  #pf-zine .pf-note {
    max-width: 30rem;
    margin: 1.5rem 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
  }
  #pf-zine mark {
    padding-inline: 0.15em;
    background: linear-gradient(100deg, transparent 2%, var(--accent) 4% 96%, transparent 98%);
    color: inherit;
  }
  #pf-zine .pf-hand {
    display: inline-block;
    margin-block-start: 1rem;
    color: var(--primary);
    font-family: var(--pf-hand);
    font-size: 1.75rem;
    rotate: -3deg;
  }
  #pf-zine .pf-photo {
    position: relative;
    justify-self: center;
    width: min(100%, 20rem);
    rotate: 4deg;
  }
  #pf-zine .pf-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: contrast(1.05) saturate(1.1);
  }
  #pf-zine .pf-photo figcaption {
    position: absolute;
    inset-block-end: -2.4rem;
    inset-inline: 0;
    font-family: var(--pf-hand);
    font-size: 1.375rem;
    text-align: center;
    color: oklch(0.2 0.02 40);
  }
  #pf-zine .pf-stamp {
    position: absolute;
    inset-block-start: -1.5rem;
    inset-inline-start: -2rem;
    display: grid;
    place-items: center;
    width: 6.5rem;
    aspect-ratio: 1;
    background: var(--chart-2);
    color: oklch(0.98 0 0);
    font-size: 0.8125rem;
    line-height: 1.2;
    text-align: center;
    rotate: -12deg;
  }
  #pf-zine .pf-star {
    position: absolute;
    width: 3rem;
    aspect-ratio: 1;
    background: var(--primary);
    animation: pf-zine-wiggle 2.4s ease-in-out infinite alternate;
  }
  @keyframes pf-zine-wiggle {
    to {
      rotate: 25deg;
      scale: 1.1;
    }
  }
  #pf-zine h2 {
    display: inline-block;
    margin: 0 0 2rem;
    padding: 0.2em 0.5em;
    background: var(--foreground);
    color: var(--background);
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.5rem, 1rem + 2cqi, 2.5rem);
    font-weight: 400;
    text-transform: uppercase;
    rotate: -1.5deg;
  }
  #pf-zine .mk-portfolio-grid-title {
    font-family: var(--pf-hand);
    font-size: 1.5rem;
    font-style: normal;
  }
  #pf-zine .pf-band {
    position: relative;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem));
    padding: 4.5rem clamp(1rem, 4vw, 2.5rem);
    background: var(--foreground);
    color: var(--background);
    --shape-edge: 1.75rem;
  }
  #pf-zine .pf-band h2 {
    background: var(--accent);
    color: oklch(0.2 0.02 40);
  }
  #pf-zine .pf-tickets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #pf-zine .pf-tickets li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 2rem;
    background: var(--background);
    color: var(--foreground);
    --shape-cut: 0.9rem;
  }
  #pf-zine .pf-tickets li:nth-child(2) {
    rotate: 1.5deg;
  }
  #pf-zine .pf-tickets li:nth-child(3) {
    rotate: -1deg;
  }
  #pf-zine .pf-date {
    padding-inline-end: 1.25rem;
    border-inline-end: 2px dashed var(--muted-foreground);
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.75rem;
    line-height: 1;
    text-align: center;
  }
  #pf-zine .pf-date small {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
  }
  #pf-zine .pf-tickets p {
    margin: 0;
  }
  #pf-zine .pf-tickets strong {
    display: block;
    font-size: 1.0625rem;
  }
  /* the paper letter: the card variant's centred column, framed like a pasted-up sheet */
  #pf-zine .mk-newsletter[data-variant='card'] .mk-newsletter-layout {
    max-width: 40rem;
    padding: 2.75rem clamp(1.25rem, 4vw, 2.5rem) 2.25rem;
    border: 2px solid var(--foreground);
    border-radius: 0;
    background: var(--card);
    box-shadow: 6px 6px 0 var(--foreground);
    rotate: -0.6deg;
  }
  #pf-zine .mk-newsletter-title {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
  }
  #pf-zine .mk-newsletter-desc {
    color: var(--foreground);
    font-size: 1.0625rem;
  }
  #pf-zine .mk-newsletter-form .input {
    border: 2px solid var(--foreground);
    border-radius: 0;
    background: #fff;
    color: oklch(0.2 0.02 50);
  }
  #pf-zine .mk-newsletter-form .input::placeholder {
    color: oklch(0.5 0.02 50);
  }
  @container pf-zine (max-width: 44rem) {
    #pf-zine .pf-hero {
      grid-template-columns: minmax(0, 1fr);
    }
    #pf-zine .pf-stamp {
      inset-inline-start: -0.5rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #pf-zine .pf-star {
      animation: none;
    }
  }
  /* light or dark: the Swap writes the page's dark class - every look has a light and a dark palette */
  #pf-zine .site-mode {
    flex: none;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }
  #pf-zine .site-mode:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  #pf-zine [hidden] {
    display: none !important;
  }
  #pf-zine .pf-home {
    display: flex;
    flex-direction: column;
    gap: clamp(3.5rem, 8vw, 6rem);
  }
  /* the Site Header: the name on a strip of black tape, the sections typed, the current one circled in red pen */
  #pf-zine .mk-header {
    background: none;
    color: inherit;
  }
  #pf-zine .mk-header-inner {
    flex-wrap: wrap;
    max-width: none;
    min-height: 4.5rem;
    padding: 0 0 0.75rem;
    border-block-end: 2px dashed var(--foreground);
  }
  #pf-zine .mk-header-brand {
    padding: 0.3rem 0.7rem 0.2rem;
    background: var(--foreground);
    color: var(--background);
    rotate: -2deg;
    box-shadow: 3px 3px 0 var(--primary);
  }
  #pf-zine .mk-header-name,
  #pf-zine .mk-footer-brand-name {
    color: inherit;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
  }
  #pf-zine .mk-header-nav {
    display: flex;
    margin-inline-start: auto;
  }
  #pf-zine .nav-menu-list {
    gap: 0.5rem;
  }
  #pf-zine .nav-menu-link {
    padding: 0.35rem 0.75rem;
    border-radius: 50%;
    color: inherit;
    font-size: 1rem;
    font-weight: 400;
  }
  #pf-zine .nav-menu-link:is(:hover, :focus-visible) {
    background: var(--accent);
    color: var(--accent-foreground);
    border-radius: var(--radius);
  }
  #pf-zine .nav-menu-link[aria-current] {
    background: none;
    color: inherit;
    box-shadow: 0 0 0 2px var(--primary);
    rotate: -3deg;
  }
  /* a zine's page: a pasted-up spread - the title on black tape, the cover as a polaroid, the facts on a ticket */
  #pf-zine .pf-case {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #pf-zine .pf-case-back {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    font-family: var(--pf-hand);
    font-size: 1.5rem;
  }
  #pf-zine .pf-case-back a {
    color: var(--primary);
    text-decoration: none;
  }
  #pf-zine .pf-case-back a:is(:hover, :focus-visible) {
    text-decoration: underline wavy;
  }
  #pf-zine .pf-case-head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  #pf-zine .pf-case-kind {
    margin: 0 0 1rem;
    color: var(--muted-foreground);
  }
  #pf-zine .pf-case-title {
    display: inline-block;
    margin: 0;
    padding: 0.15em 0.4em;
    background: var(--foreground);
    color: var(--background);
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(2.25rem, 1rem + 5cqi, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    rotate: -1.5deg;
    box-shadow: 5px 5px 0 var(--primary);
  }
  #pf-zine .pf-case-lede {
    max-width: 32rem;
    margin: 2rem 0 0;
    font-size: 1.1875rem;
    line-height: 1.6;
  }
  #pf-zine .pf-case-cover {
    justify-self: center;
    width: min(100%, 22rem);
    margin: 0;
    rotate: 3deg;
  }
  #pf-zine .pf-case-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  #pf-zine .pf-case-cover figcaption {
    padding-block-start: 0.6rem;
    color: oklch(0.2 0.02 40);
    font-family: var(--pf-hand);
    font-size: 1.375rem;
    text-align: center;
  }
  #pf-zine .pf-case-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin: 0;
    padding: 1.5rem 2.25rem;
    background: var(--accent);
    color: var(--accent-foreground);
    rotate: -0.6deg;
    --shape-cut: 0.9rem;
  }
  #pf-zine .pf-case-facts dt {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #pf-zine .pf-case-facts dd {
    margin: 0.25rem 0 0;
  }
  #pf-zine .pf-case section p {
    max-width: 40rem;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.7;
  }
  #pf-zine .pf-case-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-block-start: 2.5rem;
  }
  #pf-zine .pf-case-pair img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border: 6px solid var(--card);
    box-shadow: 4px 5px 0 color-mix(in oklch, var(--foreground) 25%, transparent);
    rotate: -2deg;
  }
  #pf-zine .pf-case-pair img + img {
    rotate: 2.5deg;
    translate: 0 1.5rem;
  }
  #pf-zine .pf-case-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding-block-start: 1rem;
  }
  #pf-zine .pf-case-pager a {
    display: grid;
    gap: 0.25rem;
    padding: 1.1rem 2rem;
    background: var(--foreground);
    color: var(--background);
    text-decoration: none;
    --shape-cut: 0.9rem;
    transition: rotate 0.2s;
  }
  #pf-zine .pf-case-pager a + a {
    text-align: end;
  }
  #pf-zine .pf-case-pager a:is(:hover, :focus-visible) {
    rotate: -1.5deg;
  }
  #pf-zine .pf-case-pager small {
    font-family: var(--pf-hand);
    font-size: 1.25rem;
  }
  #pf-zine .pf-case-pager strong {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.1rem, 1rem + 1cqi, 1.6rem);
    font-weight: 400;
  }
  /* the letter's thank-you, in pen */
  #pf-zine .pf-thanks {
    margin: 1rem 0 0;
    color: var(--primary);
    font-family: var(--pf-hand);
    font-size: 1.5rem;
    rotate: -1.5deg;
  }
  /* the Site Footer: a sheet pinned under the page - typed columns, the studio's address, the name on tape */
  #pf-zine .mk-footer {
    background: none;
    color: inherit;
  }
  #pf-zine .mk-footer-inner {
    max-width: none;
    padding: 2rem 0 0;
    border-block-start: 2px dashed var(--foreground);
  }
  #pf-zine .mk-footer-heading {
    color: var(--primary);
    font-family: var(--pf-hand);
    font-size: 1.5rem;
    font-weight: 700;
  }
  #pf-zine .mk-footer-list {
    gap: 0.4rem;
  }
  #pf-zine .mk-footer-list a:is(:hover, :focus-visible) {
    background: var(--accent);
    color: var(--accent-foreground);
    text-decoration: none;
  }
  #pf-zine .mk-footer address {
    font-style: normal;
    line-height: 1.6;
  }
  #pf-zine .mk-footer-rule {
    display: none;
  }
  #pf-zine .mk-footer-brand {
    padding: 0.3rem 0.7rem 0.2rem;
    background: var(--foreground);
    color: var(--background);
    rotate: 2deg;
  }
  #pf-zine .mk-footer-copy {
    color: var(--muted-foreground);
    font-size: 0.9375rem;
  }
  @container pf-zine (max-width: 44rem) {
    #pf-zine .pf-case-head {
      grid-template-columns: minmax(0, 1fr);
    }
    #pf-zine :is(.pf-case-facts, .pf-case-pager) {
      grid-template-columns: minmax(0, 1fr);
    }
    #pf-zine .mk-header-nav {
      order: 3;
      width: 100%;
    }
    #pf-zine .mk-header-actions {
      margin-inline-start: auto;
    }
  }
  /* -- modes: each look in light and dark, derived from the palettes above (the other mode of each look) -- */
  :root:not(.dark) #pf-zine {
    --primary: oklch(0.62 0.22 30);
    --primary-foreground: oklch(0.17 0.03 30);
    --accent: oklch(0.905 0.045 102);
  }
  .dark #pf-zine {
    --primary-foreground: oklch(0.17 0.03 32);
    --secondary-foreground: oklch(0.99 0.025 85);
    --accent: oklch(0.33 0.05 102);
  }
  /* -- modes: end -- */
</style>
<div id="pf-zine" class="pattern-grain">
  <div class="pf-page">
    <header class="mk-header">
      <div class="mk-header-inner">
        <a class="mk-header-brand" href="#/" data-router-link><span class="mk-header-name">ama owusu</span></a>
        <nav class="mk-header-nav" aria-label="Main">
          <ul class="nav-menu-list">
            <li class="nav-menu-item"><a class="nav-menu-link" href="#/work" data-router-link>zines</a></li>
            <li class="nav-menu-item"><a class="nav-menu-link" href="#/fairs" data-router-link>fairs</a></li>
            <li class="nav-menu-item"><a class="nav-menu-link" href="#/letter" data-router-link>the letter</a></li>
          </ul>
        </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>
    <div class="pf-home" data-pf-view="home">
      <section class="pf-hero" aria-labelledby="pf-zine-name">
        <div>
          <h1
            class="pf-ransom"
            id="pf-zine-name"
            aria-label="Ama Owusu"
            data-df-stagger
            style="--df-motion-stagger-step: 60ms"
          >
            <b data-df-entrance="pop" aria-hidden="true">A</b><b data-df-entrance="pop" aria-hidden="true">M</b
            ><b data-df-entrance="pop" aria-hidden="true">A</b><span class="pf-gap"></span
            ><b data-df-entrance="pop" aria-hidden="true">O</b><b data-df-entrance="pop" aria-hidden="true">W</b
            ><b data-df-entrance="pop" aria-hidden="true">U</b><b data-df-entrance="pop" aria-hidden="true">S</b
            ><b data-df-entrance="pop" aria-hidden="true">U</b>
          </h1>
          <p class="pf-note" data-df-entrance="up" style="--df-motion-delay: 500ms"
            >Collage artist and zine maker in London. I cut up <mark>old magazines</mark>, glue them back together and
            print the result on a <mark>risograph</mark> that is older than me.</p
          >
          <span class="pf-hand" data-df-entrance="skew" style="--df-motion-delay: 700ms"
            >- scissors, glue &amp; noise</span
          >
        </div>
        <figure class="pf-photo frame-polaroid frame-tape" data-df-entrance="zoom" style="--df-motion-delay: 300ms">
          <img src="https://picsum.photos/id/836/600/750" alt="Ama Owusu with a guitar" />
          <figcaption>me, 2026</figcaption>
          <span class="pf-stamp stamp" aria-hidden="true">EST.<br />2014<br />LDN</span>
        </figure>
        <span class="pf-star shape-star" style="inset: -0.5rem 42% auto auto" aria-hidden="true"></span>
        <span
          class="pf-star shape-star-4"
          style="inset: auto 2% -1.5rem auto; background: var(--chart-2); animation-delay: -1.2s"
          aria-hidden="true"
        ></span>
      </section>
      <section aria-labelledby="pf-zine-recent" data-pf-section="work">
        <h2 id="pf-zine-recent">Hot off the press</h2>
        <ul class="mk-portfolio-grid" data-variant="scatter">
          <li class="mk-portfolio-grid-item" data-df-entrance="pop">
            <a class="mk-portfolio-grid-link frame-tape" href="#/work/paper-cuts-12" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1073/600/600" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Paper Cuts #12</strong>
                <span class="mk-portfolio-grid-meta">Riso zine, 40 pages</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item" data-df-entrance="pop" style="--df-motion-delay: 100ms">
            <a class="mk-portfolio-grid-link" href="#/work/stripes" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/951/600/600" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Stripes</strong>
                <span class="mk-portfolio-grid-meta">Poster series</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item" data-df-entrance="pop" style="--df-motion-delay: 200ms">
            <a class="mk-portfolio-grid-link frame-tape" href="#/work/typewriter-tales" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/403/600/600" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Typewriter Tales</strong>
                <span class="mk-portfolio-grid-meta">Short stories</span>
              </span>
            </a>
          </li>
          <li class="mk-portfolio-grid-item" data-df-entrance="pop" style="--df-motion-delay: 300ms">
            <a class="mk-portfolio-grid-link" href="#/work/strawberry-riot" data-router-link>
              <img class="mk-portfolio-grid-media" src="https://picsum.photos/id/1080/600/600" alt="" />
              <span class="mk-portfolio-grid-caption">
                <strong class="mk-portfolio-grid-title">Strawberry Riot</strong>
                <span class="mk-portfolio-grid-meta">Album art</span>
              </span>
            </a>
          </li>
        </ul>
      </section>
      <section class="pf-band edge-torn-top" aria-labelledby="pf-zine-fairs" data-pf-section="fairs">
        <h2 id="pf-zine-fairs">Find me at</h2>
        <ul class="pf-tickets">
          <li class="ticket">
            <span class="pf-date">14<small>Nov</small></span>
            <p><strong>Small Press Fair</strong> Hackney, table 23</p>
          </li>
          <li class="ticket">
            <span class="pf-date">06<small>Dec</small></span>
            <p><strong>Riso Club Xmas Market</strong> Peckham Levels</p>
          </li>
          <li class="ticket">
            <span class="pf-date">21<small>Feb</small></span>
            <p><strong>Zine Library Talk</strong> Whitechapel Gallery</p>
          </li>
        </ul>
      </section>
      <section class="mk-newsletter" data-variant="card" aria-labelledby="pf-zine-letter" data-pf-section="letter">
        <div class="mk-newsletter-layout">
          <div class="mk-newsletter-copy">
            <h2 class="mk-newsletter-title" id="pf-zine-letter">The paper letter</h2>
            <p class="mk-newsletter-desc"
              >Four times a year: new zines, fair dates and one collage only subscribers see.</p
            >
          </div>
          <div class="mk-newsletter-form-col">
            <form class="mk-newsletter-form" data-pf-letter>
              <label class="sr-only" for="pf-zine-email">Email address</label>
              <input
                class="input"
                id="pf-zine-email"
                type="email"
                name="email"
                placeholder="you@example.com"
                required
                autocomplete="email"
                enterkeyhint="send"
              />
              <button class="btn" type="submit"><i data-lucide="mail"></i> Sign me up</button>
            </form>
            <span class="mk-newsletter-note" role="note">No spam. Just paper.</span>
            <p class="pf-thanks" data-pf-thanks role="status" hidden
              >You're on the list - the next letter goes out with the spring fairs.</p
            >
          </div>
        </div>
      </section>
    </div>
    <article class="pf-case" data-pf-view="work" aria-labelledby="pf-zine-case-title" hidden>
      <p class="pf-case-back">
        <a href="#/work" data-router-link>← back to the pile</a>
        <span class="pf-case-no">no. <span data-case="no">01</span> of 04</span>
      </p>
      <div class="pf-case-head">
        <div>
          <p class="pf-case-kind"
            ><span data-case="kind">Riso zine, 40 pages</span> · <span data-case="year">2026</span></p
          >
          <h1 class="pf-case-title" id="pf-zine-case-title" data-case="title">Paper Cuts #12</h1>
          <p class="pf-case-lede" data-case="summary"
            >Forty pages cut from a decade of library-sale magazines - the twelfth issue of a zine that started as a
            birthday present.</p
          >
        </div>
        <figure class="pf-case-cover frame-polaroid frame-tape">
          <img
            data-case-img="0"
            data-w="900"
            data-h="900"
            src="https://picsum.photos/id/1073/900/900"
            alt="Open books laid out page by page"
          />
          <figcaption data-case="title">Paper Cuts #12</figcaption>
        </figure>
      </div>
      <dl class="pf-case-facts ticket">
        <div><dt>Edition</dt><dd data-case="edition">300 copies, fluorescent pink and blue</dd></div>
        <div><dt>Paper</dt><dd data-case="paper">Recycled 90 g, hand-stapled</dd></div>
        <div><dt>Find it</dt><dd data-case="where">Small Press Fair, two shops in Hackney, and by email</dd></div>
      </dl>
      <section aria-labelledby="pf-zine-brief">
        <h2 id="pf-zine-brief">The idea</h2>
        <p data-case="brief"
          >Every issue of Paper Cuts starts with a box of magazines from a library sale and one rule for the year. For
          #12 the rule was: nothing new, only what other people threw away.</p
        >
      </section>
      <section class="pf-case-making" aria-labelledby="pf-zine-making">
        <h2 id="pf-zine-making">Cut, glue, print</h2>
        <p data-case="work"
          >I cut for three months and glued for two weeks, then printed each spread on the risograph in two passes -
          fluorescent pink first, blue on top - so that the colours shift wherever the drum slipped. Every copy is
          folded and stapled at the kitchen table.</p
        >
        <div class="pf-case-pair">
          <img
            class="frame-tape"
            data-case-img="1"
            data-w="700"
            data-h="560"
            src="https://picsum.photos/id/4/700/560"
            alt="Hands writing in a notebook beside a laptop"
          />
          <img
            data-case-img="2"
            data-w="700"
            data-h="560"
            src="https://picsum.photos/id/252/700/560"
            alt="Hand tools laid out in rows on white"
          />
        </div>
      </section>
      <section aria-labelledby="pf-zine-result">
        <h2 id="pf-zine-result">What happened</h2>
        <p data-case="result"
          >The first 300 sold out in two fairs. A second run is printing now, and three of the spreads go up as posters
          at the Zine Library in February.</p
        >
      </section>
      <nav class="pf-case-pager" aria-label="More from the pile">
        <a class="ticket" href="#/work/strawberry-riot" data-router-link data-case-link="prev"
          ><small>← previous</small><strong data-case-title="prev">Strawberry Riot</strong></a
        >
        <a class="ticket" href="#/work/stripes" data-router-link data-case-link="next"
          ><small>next →</small><strong data-case-title="next">Stripes</strong></a
        >
      </nav>
    </article>
    <footer class="mk-footer">
      <div class="mk-footer-inner">
        <nav class="mk-footer-nav" aria-label="Footer">
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">zines &amp; prints</h3>
            <ul class="mk-footer-list">
              <li><a href="#/work/paper-cuts-12" data-router-link>Paper Cuts #12</a></li>
              <li><a href="#/work/stripes" data-router-link>Stripes</a></li>
              <li><a href="#/work/typewriter-tales" data-router-link>Typewriter Tales</a></li>
              <li><a href="#/work/strawberry-riot" data-router-link>Strawberry Riot</a></li>
            </ul>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">around here</h3>
            <ul class="mk-footer-list">
              <li><a href="#/work" data-router-link>Hot off the press</a></li>
              <li><a href="#/fairs" data-router-link>Find me at</a></li>
              <li><a href="#/letter" data-router-link>The paper letter</a></li>
            </ul>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">elsewhere</h3>
            <ul class="mk-footer-list">
              <li><a href="https://www.instagram.com/" target="_blank" rel="noopener">Instagram</a></li>
              <li><a href="https://www.etsy.com/" target="_blank" rel="noopener">Shop on Etsy</a></li>
              <li><a href="mailto:ama@example.com">ama@example.com</a></li>
            </ul>
          </div>
          <div class="mk-footer-col">
            <h3 class="mk-footer-heading">the studio</h3>
            <address>Unit 4, Print Yard<br />Hackney Wick, London<br />Open studio every first Saturday</address>
          </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">ama owusu</span></a>
          <div class="mk-footer-meta">
            <p class="mk-footer-copy">© 2026 Ama Owusu - cut by hand, printed on recycled paper</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <!-- the zines and prints the routes name, in order -->
  <script type="application/json" id="pf-zine-pile">
    {
      "paper-cuts-12": {
        "title": "Paper Cuts #12",
        "kind": "Riso zine, 40 pages",
        "year": "2026",
        "edition": "300 copies, fluorescent pink and blue",
        "paper": "Recycled 90 g, hand-stapled",
        "where": "Small Press Fair, two shops in Hackney, and by email",
        "summary": "Forty pages cut from a decade of library-sale magazines - the twelfth issue of a zine that started as a birthday present.",
        "brief": "Every issue of Paper Cuts starts with a box of magazines from a library sale and one rule for the year. For #12 the rule was: nothing new, only what other people threw away.",
        "work": "I cut for three months and glued for two weeks, then printed each spread on the risograph in two passes - fluorescent pink first, blue on top - so that the colours shift wherever the drum slipped. Every copy is folded and stapled at the kitchen table.",
        "result": "The first 300 sold out in two fairs. A second run is printing now, and three of the spreads go up as posters at the Zine Library in February.",
        "images": [
          [1073, "Open books laid out page by page"],
          [4, "Hands writing in a notebook beside a laptop"],
          [252, "Hand tools laid out in rows on white"]
        ]
      },
      "stripes": {
        "title": "Stripes",
        "kind": "Poster series",
        "year": "2025",
        "edition": "Five posters, 50 of each",
        "paper": "A2, screen print on newsprint",
        "where": "Riso Club, Peckham Levels",
        "summary": "Five posters made of nothing but stripes - cut from shop awnings, deck chairs and old football shirts.",
        "brief": "Riso Club asked five artists for a poster about the street outside. I could not choose one thing on my street, so I took the one pattern that is on almost all of it.",
        "work": "I photographed stripes for a month - awnings, barriers, a barber's pole - printed the photos small, cut them into strips and rebuilt each one as a single poster-sized pattern. The screen print keeps the cuts visible, a white hairline where two strips meet.",
        "result": "The posters sold out on the opening night. One now hangs in the window of the café whose awning is in it, which the owner noticed only a week later.",
        "images": [
          [951, "A building front striped in red, yellow and white"],
          [308, "Washing hung across a colourful alley"],
          [57, "A street of brick apartment houses"]
        ]
      },
      "typewriter-tales": {
        "title": "Typewriter Tales",
        "kind": "Short stories",
        "year": "2024",
        "edition": "Twelve stories, 120 copies",
        "paper": "Typed on a 1962 portable, photocopied",
        "where": "The Small Press Fair and two public libraries",
        "summary": "Twelve stories typed in one sitting each - no rewrites, every mistake struck through and left on the page.",
        "brief": "A writing group dared me to finish a story without a delete key. I bought a typewriter at a car boot sale and kept going for twelve Sundays.",
        "work": "Each story was typed in one sitting, in the order it came. The pages were photocopied as they were, coffee rings and all, and bound with a cover collaged from the typewriter's own manual.",
        "result": "Two libraries keep it on their shelves, and the writing group now meets with three typewriters on the table.",
        "images": [
          [403, "An old typewriter, close up"],
          [175, "A black-and-white clock face"],
          [78, "An old wooden door in a stone wall"]
        ]
      },
      "strawberry-riot": {
        "title": "Strawberry Riot",
        "kind": "Album art",
        "year": "2025",
        "edition": "LP sleeve, 1,000 pressed",
        "paper": "Collage, scanned at 1200 dpi",
        "where": "On tour with the band and in two record shops",
        "summary": "A sleeve for a punk band's first LP - a crate of strawberries rebuilt from 200 cut-out mouths.",
        "brief": "The band wanted a sleeve that looked loud from across the shop and still had something new to find on the fiftieth listen.",
        "work": "From across the room it is a crate of strawberries. Up close every berry is a mouth cut from a magazine - singing, shouting, eating - glued in rows and scanned at full size so each cut edge survives the print.",
        "result": "The first pressing of 1,000 sold out on tour. The band turned the mouths into badges and a T-shirt, and the original collage now hangs in their rehearsal room.",
        "images": [
          [1080, "Strawberries packed in a crate"],
          [39, "A turntable's tonearm over a record"],
          [145, "The headstock and tuning pegs of a guitar"]
        ]
      }
    }
  </script>
</div>
<script type="module">
  // df$ comes with the component bundle - a full-screen page loads it after this module
  addEventListener('DOMContentLoaded', () => {
    // 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-zine [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 paper letter: signing up thanks the reader (a demo - nothing leaves the page)
    df$('#pf-zine [data-pf-letter]').on('submit', (event) => {
      event.preventDefault();
      event.currentTarget.reset();
      df$('#pf-zine [data-pf-thanks]').prop('hidden', false);
    });
  });
</script>
<script type="module">
  // routing: defuss-dom-router owns the address - the home page, its sections and a page per zine
  import { createRouter } from 'https://cdn.jsdelivr.net/npm/defuss-dom-router@0.1.1/dist/index.js';

  addEventListener('DOMContentLoaded', async () => {
    const ROOT = '#pf-zine';
    const site = df$(ROOT).get(0);
    // each kind of page is a view filled from its data block, at #/<kind>/<slug>
    const PAGES = { work: JSON.parse(df$('#pf-zine-pile').text()) };
    const SECTIONS = ['work', 'fairs', 'letter'];
    const routes = [
      { id: 'home', path: '/' },
      { id: 'page', path: '/:kind/:slug' },
      { id: 'section', path: '/:section' },
      { id: 'missing', path: '*' },
    ];
    // a page from the data block: its texts, its pictures, the pages before and after it
    const fill = (kind, slug) => {
      const items = PAGES[kind];
      const order = Object.keys(items);
      const item = items[slug];
      const at = order.indexOf(slug);
      const near = { prev: order[(at + order.length - 1) % order.length], next: order[(at + 1) % order.length] };
      const view = df$(ROOT + ' [data-pf-view="' + kind + '"]');
      view.find('[data-case]').each((_i, el) => {
        df$(el).text(el.dataset.case === 'no' ? String(at + 1).padStart(2, '0') : item[el.dataset.case]);
      });
      view.find('[data-case-img]').each((_i, img) => {
        const [id, alt] = item.images[Number(img.dataset.caseImg)];
        df$(img)
          .attr('src', 'https://picsum.photos/id/' + id + '/' + img.dataset.w + '/' + img.dataset.h)
          .attr('alt', alt);
      });
      for (const [rel, to] of Object.entries(near)) {
        view.find('[data-case-link="' + rel + '"]').attr('href', '#/' + kind + '/' + to);
        view.find('[data-case-title="' + rel + '"]').text(items[to].title);
      }
    };
    const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
    let shown = null;
    let last = null;
    // one view shown, the header marks where the reader is; a section route scrolls there, a new page opens at its top
    const show = (to) => {
      const { kind, slug, section } = to.params;
      const page = to.routeId === 'page' && Object.hasOwn(PAGES, kind) && Object.hasOwn(PAGES[kind], slug);
      const at = to.routeId === 'section' && SECTIONS.includes(section) ? section : null;
      const name = page ? kind : 'home';
      if (page) fill(kind, slug);
      df$(ROOT + ' [data-pf-view]').each((_i, view) => {
        view.hidden = view.dataset.pfView !== name;
      });
      const here = page ? '#/' + kind : at ? '#/' + at : null;
      df$(ROOT + ' .mk-header-nav a').each((_i, link) => {
        df$(link).attr('aria-current', link.getAttribute('href') === here ? 'page' : null);
      });
      // the page opens where its address says - at once, once its pictures have laid it out; a click glides there
      const target = at ? df$(ROOT + ' [data-pf-section="' + at + '"]').get(0) : shown ? site : null;
      const behavior = shown === name && !still ? 'smooth' : 'instant';
      const go = () => target?.scrollIntoView({ behavior, block: 'start' });
      if (!shown && document.readyState !== 'complete') addEventListener('load', go, { once: true });
      else go();
      shown = name;
      last = to;
    };
    // a link to where the reader already is leaves the address as it is - it still scrolls there
    df$(site).on('click', (event) => {
      const link = event.target.closest('a[data-router-link]');
      if (link && last && link.getAttribute('href') === (location.hash || '#/')) show(last);
    });
    // the page scrolls itself (to a section) - the router's own scroll would stop that glide
    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 = () => show(preview.resolve(location.hash.startsWith('#/') ? location.hash : '#/'));
      addEventListener('hashchange', follow);
      follow();
    }
  });
</script>
Built from Portfolio Grid (scatter) and Newsletter (card). The paper palette and the three typefaces are set on the page's root; the cut-out letters, the tickets and the band are the page's own CSS. pattern-grain, frame-polaroid, frame-tape, stamp, shape-star, edge-torn-top and ticket are Shapes utilities, the pops Motion's.
Comments, ideas or improvements? Edit this page's source on GitHub