Understand first

Elaborate architecture.
Economical execution.

The portfolio is one body of meaningful content with two presentations: an indexable website and a living system interface.

01

Understand

Learn the environment before introducing architecture.

02

Reuse

Preserve the useful systems, semantics, and capabilities already present.

03

Intervene

Add only the smallest mechanism that understanding proves necessary.

04

Explain

Let the interface reveal what the system is doing and why.

System markup

The interface reads the website’s own language.

Custom elements describe modules, graphics, connections, and behavior. Standard HTML inside those elements remains the accessible, searchable website. The build prepares the scene; the browser only paints and interacts.

  1. AuthorOne semantic source
  2. PrepareValidate and organize the scene
  3. DeliverHTML plus compact visual instructions
  4. EnhanceActivate only after capability checks pass
system-markup.html
<mr-system data-purpose="portfolio-system">
  <mr-graphic
    data-type="orbital-system-core"
    data-renderer="svg-dom"
    data-quality="adaptive" />

  <mr-module
    data-node-id="devad"
    data-tier="core"
    data-route="/projects/devad">
    <article>
      <h2>DevAD</h2>
      <p>A workbench for understanding codebases.</p>
      <a href="/projects/devad">Open dossier</a>
    </article>
  </mr-module>
</mr-system>

Performance contract

The build system thinks. The host delivers. The browser paints.

No continuous page parsingNo mandatory graphics engineNo content trapped in canvasAdaptive visual qualityMotion pauses off-screenComplete HTML fallback