Bootwitch Portfolio — Architecture
The portfolio is organized like a small workspace: choose something to explore, interact with the terminal, and read the selected document.
README · ARCHITECTURE · TECHNICAL · visual archive
Three panes
| Pane | Visitor experience |
|---|---|
| Files | Browse the project documents and field notes |
| Terminal | Follow the simulated demo or enter portfolio commands |
| Reader / Spellbook | Read the selected page with headings and formatted text |
This structure was already present in the early prototype. The later visual work gave it a more recognizable identity while bringing real portfolio material into the reader.
The visual pieces
The portrait, wordmark, borders, icons, and wand were developed as editable vector artwork. One version kept interface text editable; another converted lettering to paths for a font-independent alternative.
The technical walkthrough shows how those assets moved from reference to reconstruction to the implemented interface. Its post-launch wand example also shows how the SVG frame affects the artwork's placement inside a control.
Content and interaction
Project documents supply the reading experience, while the file browser and terminal provide ways to reach them. The terminal interaction is a portfolio simulation; the CLI project has its own local demonstration.
This is a map of the interface shown in this walkthrough. The original frames are collected in the visual archive.