letter-spacing on the ❚❚ glyph could tighten the character cells but not the visible gap between them on a monospace font — each character keeps its own cell regardless. now two bars drawn via ::before/::after on .is-playing, with exact pixel control over the gap; the ▶ span just hides instead of getting replaced.
the play/pause button had no fixed width, so swapping the single-character play glyph for the two-character pause glyph (with the fonts normal spacing between them) visibly widened the button. now a fixed 2.4ch width with tightened tracking on the pause state.\n\nmute only ever toggled — there was no way to set a level. added a small click/drag bar next to it (same interaction as the scrub bar), synced with the video elements own volume/muted state via the volumechange event so it stays correct regardless of how its changed.
scrub fill/time were driven off timeupdate, which browsers fire irregularly (a handful of times a second) — visible as the bar stepping instead of gliding. now driven by requestAnimationFrame while playing (display refresh rate), with a direct sync on pause/seeked so it still tracks immediately when not running.\n\npreload=none meant zero data was fetched until the play button was pressed, causing a visible stall right at playback start. preload=metadata lets the browser prime the connection and read the moov atom ahead of time without fetching the full video for visitors who never press play.
grid-column:3 + justify-self:end put name and tags in the same cell but grid stacks co-located items instead of placing them side by side, so the tag wrapped to a second line. wrapped both in a flex row (justify-content:space-between) inside that grid cell instead.
new categories taxonomy, multi-value per project. shown inline in each ls row as [tag] after the slug, muted like the other row metadata and inverting with it on hover/select. reuses the existing shared taxonomy template, so /categories/ and /categories/<tag>/ come for free as browsable archives in the same shell style already used for schools/degrees/semesters.\n\nassigned by medium: design for anything with plans/models, film for the two video projects, photo for the trieste study trip, text alongside design for translation (collage + accompanying theoretical text).
new: hotel national (MA studio, 2026), translation (MA collage collab. with Tim Schwander + Jérôme Arnold, 2026), utopie der koexistenz (BA thesis, Kantonsspital Baden, 2025) — text sourced from portfolio-2026.typ, translated EN<->DE, images pulled from the higher-res portfolio-export folder and converted to webp.
kgva CMS
karim