Blueprints Portfolio

Craig M. Booth’s professional portfolio — a pure HTML/CSS/JavaScript site showcasing expertise in complex systems, simulations, and creative technology through interactive Canvas 2D demonstrations.

Tech Stack

• No frameworks, no build tools, no package manager
• Vanilla HTML/CSS/JS with Canvas 2D API
• Shared simulation infrastructure in blueprint.js / blueprint.css
• Google Fonts: Chakra Petch (body), Rajdhani (headings)

Design Context

Users

Potential clients evaluating Craig’s expertise in systems architecture, simulation, and creative technology. The interface should evoke trust, calm authority, and understated sophistication.

Brand Personality

Calm, Technical, Elegant. Precise and confident without being cold. Quietly authoritative — expertise is self-evident through craft.

Aesthetic Direction

• Blueprint-on-paper: hand-drawn organic imperfections over technical precision
• Procedural identity: all texture is generated (Perlin noise, wobbly lines, vignettes) — no stock imagery
• Dark-first with warm cream light sections. Deep navy/cyan + warm cream palette.
• Monospace-forward typography with generous letter-spacing
• Avoid: generic SaaS aesthetics, stock photography, heavy UI frameworks

Design Principles

1. Let the work demonstrate — Simulations are primary content. Design frames, never competes.
2. Precision through imperfection — Wobbly lines and grain convey human craft within technical mastery.
3. Quiet confidence — Restrained color, generous whitespace, unhurried typography.
4. Performance is design — Smooth performance reinforces technical competence.
5. Accessible by default — WCAG AA minimum. Contrast, keyboard nav, reduced-motion support.