Rens Roosloot

DS

Volledige gerenderde weergave van DS.md.

Laatst gesynchroniseerd: 13 april 2026

DS - Roosloot.com

Version: 1.6
Date: March 8, 2026
Author: Rens Roosloot

1. Purpose

This Design Specification (DS) translates the requirements in URS.md into concrete design decisions for the website.

2. V-Model Position

  • Input specification: URS.md
  • Functional translation: FS.md
  • Design output: DS.md
  • Supporting controls: RISK_ASSESSMENT.md, TEST_PLAN.md, IQ.md, OQ.md, AGENTS.md
  • Implementation target: files in site/
  • Verification: automated Playwright-based IQ/OQ checks + traceability across the document set

3. Design Summary

3.1 Architecture

  • Static HTML/CSS/JS only
  • No backend runtime, no CMS
  • Deployable boundary: site/

3.2 Shared Components

  • Shared styles: site/styles.css
  • Shared language logic: site/i18n.js
  • Shared page baseline: templates/site-template.html

3.3 Navigation Model

  • Header links: About, Projects, Work, Visuals, Docs, Contact
  • Brand always links to index.html
  • Projects use dedicated hub page: projects.html
  • Visual experiments use dedicated hub page: visuals.html

3.4 Content Model

  • index.html: concise intro, featured projects, work, contact
  • projects.html: categorized full overview
  • visuals.html: focused overview of visual experiments
  • Project detail pages: dedicated per project
  • Visual detail pages: dedicated per visual where relevant
  • work.html: professional links and details
  • site/roosloot-site-development.html: ongoing development blog

3.5 Category Segmentation

  • Software & AI
  • Home Automation
  • Photography
  • Visuals
  • LEGO

3.6 UI Design

  • Dark visual direction with gradients and subtle animated background
  • Card-based layout for scanability
  • Fraunces + Space Grotesk typography
  • Mobile-responsive, readable spacing/typography

3.7 Security Design

  • No secrets in client code
  • Avoid third-party embeds/scripts unless explicitly approved
  • Keep links/assets/scripts self-contained in site/

3.8 Documentation Design

  • Requirements source of truth: URS.md
  • Functional source of truth: FS.md
  • Test strategy source of truth: TEST_PLAN.md
  • Qualification sources of truth: IQ.md and OQ.md
  • Risk source of truth: RISK_ASSESSMENT.md
  • Agent guidance source of truth: AGENTS.md
  • Rendered docs in site:
    • site/docs/index.html
    • site/docs/urs.html
    • site/docs/fs.html
    • site/docs/ds.html
    • site/docs/risk-assessment.html
    • site/docs/test-plan.html
    • site/docs/iq.html
    • site/docs/oq.html
    • site/docs/agents.html
  • Project-level docs entry pages:
    • site/docs/swapbound.html
    • site/voxel-cutaway-world/docs/index.html
  • Render rule: npm run docs:render produces exact HTML mirrors of controlled markdown docs.

4. URS -> DS Traceability

  • FR-01 -> homepage structure in site/index.html

  • FR-02 -> categorized projects hub in site/projects.html

  • FR-03 -> detail pages in site/*.html

  • FR-04 -> work section/page in site/index.html + site/work.html

  • FR-05 -> contact section and mailto: links

  • FR-06 -> bilingual page strings (nl/en) per page

  • FR-07 -> persistent language preference via site/i18n.js + localStorage

  • FR-08 -> top-left brand links to index.html

  • FR-09 -> V-model chain and supporting control docs maintained at repo root

  • FR-10 -> rendered mirror docs provided in site/docs/

  • FR-11 -> documentation change control on functional updates

  • FR-12 -> dedicated visuals discovery via site/visuals.html

  • FR-13 -> project-level docs routing via the docs hub and per-project entry pages

  • NFR-01 -> no secrets stored in site files

  • NFR-02 -> embedded/external content constrained by policy

  • NFR-03 -> static-first lightweight implementation

  • NFR-04 -> shared reusable files (styles.css, i18n.js, templates/site-template.html)

  • NFR-05 -> semantic labels + keyboard-usable controls

  • NFR-06 -> visual hierarchy and card-based grouping

  • NFR-07 -> explicit traceability and synchronized docs/tests

5. Verification Approach

  • Run automated suite:
    • npm run test:e2e
  • Validate rendered docs are synchronized:
    • npm run docs:render
  • Smoke test key pages:
    • site/index.html
    • site/projects.html
    • site/visuals.html
    • site/work.html
    • site/roosloot-site-development.html
    • site/docs/urs.html
    • site/docs/fs.html
    • site/docs/ds.html
    • site/docs/risk-assessment.html
    • site/docs/test-plan.html
    • site/docs/iq.html
    • site/docs/oq.html
    • site/docs/agents.html
  • Check language toggle behavior and persistence
  • Verify internal links and anchor targets
  • Verify mobile readability

6. Change Control

  • Update DS.md whenever:
    • URS.md changes in scope/requirements
    • information architecture changes
    • shared runtime behavior/design patterns change
  • Keep CHANGELOG.md updated for all meaningful DS-related changes.
  • Any new functionality must update impacted URS/FS/DS/risk/test/IQ/OQ/AGENTS docs in the same change.

7. Change Addendum (2026-02-25)

  • site/visuals-ascii-star-runner.html uses a canvas-based side-view renderer with a stationary sky/cloud background, two parallax mountain layers, ASCII foreground terrain, and a UFO craft overlay.
  • Mountain grooves/ravines are rendered with layer-specific styles and stabilized using persistent ravine state (identity matching, fade-in/out, and style locking) to reduce jitter/flicker.
  • Mountain groove controls are split into independent length and width adjustments.
  • Optional ASCII mountain textures are enabled by default and are synchronized to mountain-layer parallax motion.

8. Change Addendum (2026-02-25, Game Prototype Branch)

  • site/swapbound/game.html uses a canvas-based 2D platformer prototype renderer with a hand-built room sequence, shared-control input mapping, and local UI overlays for room hints/test room jumps.
  • Character presentation in the prototype includes lightweight procedural animation cues (blink, eye expression, idle breathing, run-foot cycle, landing squash) implemented as render-time sprite variations without changing collision hitboxes.
  • Prototype audio uses Web Audio API synthesis (procedural SFX + lightweight sequenced retro loop) with lazy initialization and a mute toggle, avoiding external audio assets.

9. Change Addendum (2026-03-08)

  • Information architecture now treats Visuals as a first-class public discovery area with its own hub page.
  • Documentation discovery now uses one entry page per major project (Swapbound, Voxel Cutaway World) instead of surfacing every project-level spec directly from site/docs/index.html.
  • Standalone visual projects may keep project-local rendered HTML docs inside their own subtree when those pages are generated by the shared docs pipeline.
Terug naar home