Plakat

Screenshots

Signature effect

Type as the picture: one variable grotesk (Archivo, width 62–125, weight 100–900) set at poster scale and fitted to the width, with hero letters that thin under the pointer, plus a site-wide Invert switch that swaps paper and ink and is remembered

Changelog

1. v1.0.02026-10-27
   • HTML edition: a dependency-free portfolio for a graphic designer that opens straight from disk. Home opens on the name set across the full width (each letter thins under the pointer), a portrait, one statement and three facts; then five selected projects as big type rows that invert on hover and show their cover inside the row, About with the studio photo, clients and recognition, and a footer set as a colophon with one large booking line. The Work page lists all fourteen projects behind a sticky bar: filter by discipline (with counts), Posters or List, Newest or A–Z, kept in the URL hash. Archive projects are typographic cards. Five case-study pages with the title fitted to the width, Brief / Approach / Result, the facts in big type, and a plain full-screen image viewer (arrow keys, Esc).
   • React edition: the same site on Next.js 16 (static export), React 19 and Tailwind 4. All copy and both project lists are in content/site.ts; the case pages come from one dynamic route, so adding a case study there adds its page, its Home row, its Work card and list row, and updates the counts and the Next loop. Page heights equal the HTML edition on every page at 1440, 768 and 390 px.
   • Invert in the header swaps paper and ink site-wide and is remembered in the browser; the saved choice is applied before the page paints.
   • One self-hosted variable family, Archivo (width 62–125, weight 100–900, SIL Open Font License). No request goes to a third party.
   • Structured data (Person, CollectionPage, CreativeWork), social tags, a favicon, a web manifest, robots.txt and a noindex 404.
   • Real pages instead of case.html?p=<slug>. Each case study is its own static page: work/<slug>.html in HTML, /work/<slug>/ in React. The concept fell back to the first case for an unknown slug; now an unknown URL is the 404.
   Show all notes

   • Complete without JavaScript. The concept built every list, the header and the footer from data in plakat.js. All of it is now in the HTML (or rendered at build time in React). Without JavaScript the Work page shows every project as posters, newest first; the controls, the Invert switch, the Menu button, the clock and the copy buttons are hidden instead of dead, and the phone header shows the three links.
   • 404 and privacy pages, with the same header and footer. The footer's Colophon gains a Privacy link (pages are about 26 px taller on phones), and its second line says what the edition is built in instead of "Built in Framer".
   • Images. The 17 photos ship in the template, each with an 800-px copy used through srcset. The placeholder plate with the file name is gone; a halftone plate in the same greys shows while a photo loads, and follows Invert. Thumbnails and poster-card covers have empty alt, because the link next to them already names the project; the case pages keep the full descriptions.
   • Tokens and scripts. Colours, the font, type axes and sizes, spacing and the hover duration are tokens in tokens.css (HTML) and globals.css (React), with Brand — start here first. The one plakat.js became main.js plus three effects with a CONFIG block each: fit-type, name-specimen and lightbox. The clock and the copy buttons use the shared kit.
   • Small accessibility fixes. A changed filter is announced as a count ("4 projects") in one polite live region, instead of the whole list being read again. The Work heading's hidden text reads "(14 projects)".
   • Unchanged: layout, type, copy, interactions and page heights match the concept at 1440 and 390 px (apart from the Privacy line above).

Questions

Related

• 

  Ashlar

  Real estate

  • HTML
  • React
  • Framer

  Ashlar is a website for a boutique real-estate office that sells a few exceptional houses by introduction. It has five material slabs that open into exterior photographs, a register with an index of houses beside one house sheet (photo switch, facts, and buttons to the house page and the introduction form), a page per house (facts, photographs in a lightbox, a longer story and the advisor who shows it), a draggable terrace view with bearing marks and a dial, a three-step method with a timeline, advisor cards with live local times, and an introduction form that writes a letter as you type.

  Libre Caslon Display / FigtreeFrom $19
• 

  Aurel

  Brand

  • HTML
  • React

  A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.

  Bodoni Moda / JostFrom $19
• 

  Cistern

  Product

  • HTML
  • React

  Cistern is a launch site for a residential energy-storage product, with a drawn graphite slab and its seam of light, a draggable 24-hour instrument that reads roof, house, battery and grid, a self-sufficiency calculator that suggests a model, three model cards, a FAQ and a free-survey request form.

  Jost / Inter TightFrom $19