case study 01 / 05 · website demos · internal design review
Six design directions for the company website, generated from one bilingual content source
Each direction is a complete, navigable site in German and in a draft English translation, assembled by a Node static generator from the shared content, a component kit and one small recipe per demo. The supervisor can compare them on the real text and all eight pages instead of placeholders. The English copy still awaits the employer's review. I set the brief and released the gallery, which is public but not indexed by search engines.
The supervisor wanted to compare design directions for the company website on the real content and all eight pages, not on placeholders: home, services, projects, company, careers, contact, legal notice and privacy. A direction therefore had to be a whole site, German by default with an English toggle and a looping video in the hero.
The brief kept changing within about two weeks, and the corporate colours reached every demo in a single commit. Changes had to be cheap. One content source, a shared component kit and a small recipe per demo turn a new direction or a global change into a small edit, and automatic checks stop a broken link or a missing translation before it goes online.
The supervisor, who picks a direction, and the reviewers who have the link. The gallery is public but not indexed by search engines.
Nothing: static files on GitHub Pages, no backend, no cookies and no analytics, so there are no visitor figures either.
one file per language
8 per edition
36 per edition
repeated entries
one CSS file per demo
6, one per direction
36 in 8 slots
Simplified: 7 of 12 entities. Left out: site meta, page slugs, video clips, photos and the slot registry. The 96 output pages (6 recipes × 2 editions × 8 pages) are built, not stored.
The build fails when a key exists in only one language: 424 keys each.
A recipe in JSON and a theme file with colours and fonts are enough; the content and the kit stay as they are.
The 96 pages are built, not stored, and each one passes the output checker before it is published.
All text lives in two language files with identical keys, and the page set and section order are fixed in code. Reviewers compare design, not copy, and the two files cannot drift apart. Trade-off: every demo has the same pages in the same order.
A demo is a small recipe plus a theme file; the kit holds eight swappable components as plain functions that return HTML. New directions and global changes become small edits. Trade-off: the demos share one markup skeleton, so they differ only as far as the variants and styles allow.
Node writes plain HTML for every demo, language and page, with relative links, so the site works under a GitHub Pages sub-path and locally. GitHub Actions runs the tests, the build and the checker before it publishes. Trade-off: no CMS and no backend, so the demo forms send nothing, and the Playwright layout checks run only locally.
Reveals, parallax and page transitions are switched on only for visitors who have not asked for reduced motion, and one demo opts in to a cinematic level. Content is never hidden from visitors without scripts, with reduced motion or when printing. Trade-off: more runtime code to maintain, and page transitions only in newer Chrome and Safari.
Six design directions are online for the supervisor's review, in a public gallery that has been live since October 2026. They were built in October 2026, in 109 commits over 15 days, and a deploy only goes out when all 119 tests and the output checker pass. Status: internal design review.
Open the live demo