Gist

Screenshots

Signature effect

Skim / Read: a site-wide two-option switch (radios, the S key, remembered in the browser). Key sentences are marked in the copy; in Skim, CSS :has() hides every paragraph without one, every figure not marked key, and the rest of each paragraph, leaving a one-minute version of the case. Cards swap their summary for the outcome line

Changelog

1. v1.0.02026-10-27
   • HTML edition: a dependency-free portfolio for a product designer, which opens straight from disk. A Skim / Read switch sits in the header of every page (radios, the S key, remembered in the browser): in Read each case study is the full story with its key sentences highlighted; in Skim everything but those sentences, the key images and the outcome folds away. Home has the statement and portrait, four case cards with two outcome figures each, an experience table, two quotes, About and a contact panel with copy-email. The work index filters by platform and sorts by date or impact, and lists six smaller projects. Each case page has a contents column that follows the section in view, a before/after slider and the next case.
   • React edition: the same site on Next.js 16 (static export), React 19, TypeScript and Tailwind CSS 4, with all copy in content/site.ts, one dynamic route for the five case pages, and reading times counted from the copy.
   • Pages: Home, Work, five case studies (work/<slug>.html in HTML, /work/<slug>/ in React), 404 and privacy.
   • Fonts are self-hosted: Besley and Instrument Sans, with their licences (SIL Open Font License). No request goes to a third party.
   • Structured data (Person, CollectionPage, Article), social tags, a favicon, a web manifest, robots.txt and a noindex 404.
   • Real pages for each case study. The concept rendered every case into one case.html?p=<slug> with JavaScript. Each case is now its own static page (work/ligne.html … in HTML, /work/ligne/ in React), complete with JavaScript off, and the cards on Home and Work are plain HTML too. In the HTML edition the reading times are written in the pages; the React edition counts them from the copy, with the concept's formula (230 words a minute).
   Show all notes

   • Works without JavaScript. The header radios switch Skim and Read through CSS (:has(#mode-skim:checked)) on the page you are on; the phone menu shows as a list under the bar; controls that need a script (the "Switch to …" buttons, copy email, the work filter and sort, the odd-cell tile) are hidden.
   • A ?mode=skim link is remembered. The concept read ?mode= only for that page; now the next pages open in the same mode, so a Skim link sent with a job application stays in Skim.
   • Small accessibility fixes. The reading times inside the switch are full contrast (they were at 85% opacity, under 4.5:1); the work cards and the tile use h2 (the page had no h2 above them); the before/after labels are hidden from screen readers (the slider says the position); changing the mode with a button or the S key is announced.
   • Self-hosted fonts and real images. The concept loaded Google Fonts and showed drawn placeholder plates until an image existed; the fonts ship in the template, and the plates are gone (an image slot shows a flat tint while it loads).
   • Tokens and files. Colours, fonts, sizes, radii, the knob's shadow and the transition time are tokens in tokens.css (globals.css in React), with Brand — start here first. The concept's gist.js is now main.js plus effects/skim-read.js and effects/before-after.js with a CONFIG block each; the copy button uses the kit. A Privacy link is added to every footer.
   • Unchanged: page heights, layout and behaviour match the concept at 1440 and 390 on every page, in Read and in Skim.

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