Portfolio v5 | Powered by The High-Fidelity Rig (v26)

"A professional interface engineered at the intersection of mathematical rigor and atmospheric depth."

This repository represents the 5th iteration of my professional portfolio. It serves as the primary implementation of
The Rig (v26)—a detached, proprietary CSS engine designed to weave together mathematical rigor and diagnostic empathy.
By decoupling the design system from the application, I treat the interface as a living environment governed by systemic
logic rather than localized styling.

🏗️ Architectural Philosophy: The Rig vs. The Instance

To ensure maximum scalability, I decoupled the design system from the application logic.

The Rig (v26): A standalone design system refined through 26 iterations. It utilizes a Mathematical Gauge
System and a 1.414 harmonic scale to automate visual hierarchy.
The Instance (v5): This portfolio application, which consumes the Rig’s token-based architecture to deliver a
high-performance, accessible user experience. It utilizes the WAVE Evaluation Tool as a mandatory structural gate
to ensure the proprietary Rig logic remains fully accessible.

🔄 Technical Evolution: From M3 to Proprietary Logic

This version represents a complete pivot away from Material Design 3 (M3) toward a proprietary system that prioritizes
structural integrity and Diagnostic Empathy.

Key Architectural Breakthroughs:

Semantic Narrative Rig: A detached accessibility layer that utilizes aria-describedby to deliver deep-form
technical metaphors to assistive technology without compromising WAVE compliance or visual minimalism.
Steady Flood Engine: A Houdini-powered (@property) lighting system utilizing registered focal points (--sunX,
--sunY) to eliminate color banding and provide living UI depth.
The Chrome-Tab Handshake: A structural navigation rig using "Orange Wedge" pseudo-brackets and a "Safety
Shelf" anchor (.navbar::after) to ensure zero light-leak during state transitions.
Singleton Component Architecture: Global interactive elements, such as the contact portal, are engineered as
Singletons—initialized as null and populated only on-demand to reduce initial DOM weight and redundant network
requests.
The Clean Edge Trick: All feature blocks utilize background-clip: padding-box to force canvas termination at the
inside edge of the 2px border, preventing sub-pixel color-bleed.

📐 Build Specifications & "Physics"

Spacing Engine: Uses a Spinal Tap Gauge (80px/48px base) and a 38.4px Atmospheric Gap to provide "Bloom"
room for expanding shadows.
Kinetic Logic: Implements a 400ms Kinetic Power-Down for modal sequences and a -4px kinetic lift on hover
interactions.
Tonal Palette: RGB Tonal Tokens (e.g., Pine --sys-color-primary) replaced all static hex codes to allow for
transparency control within the atmospheric engine.
Typography: An Augmented Fourth Scale utilizing "Ink Weight" (Canvas Mixing) instead of static grays to ensure
APCA-aware legibility.

🛡️ Immutable Constraints (The Rig Integrity)

44px Protocol: All interactive triggers are calibrated to a 44px minimum touch-target for human motor variance.
Alignment Integrity: Desktop navigation utilizes align-items: stretch to preserve the structural bridge between
the pseudo-brackets and the background rig.

📐 Deep Dive: The 1.414 Harmonic Physics (Augmented Fourth)

To eliminate arbitrary "pixel-pushing," the Rig utilizes the Augmented Fourth (1.414) scale to govern all spatial
relationships and typography. This ensures that every element on the screen exists in a mathematically derived hierarchy
rather than a guessed one.

1. The Scaling Formula

Every step in the hierarchy is calculated using the base unit ($B$) multiplied by the scale factor ($S$):

$$Step_{n} = B \times (1.414)^{n}$$

Base Unit: 16px (1rem)
Step 1 (Talk): $16 \times 1.414 = 22.62px$
Step 2 (Redline): $16 \times (1.414)^{2} = 32px$
Step 3 (Header): $16 \times (1.414)^{3} = 45.25px$

2. Atmospheric Gap Calculation

The 38.4px Atmospheric Gap (Archive Shutter) used in .project-archive is derived from the Spinal Tap Gauge
(48px base) multiplied by the reciprocal of the scale:

$$48px \times 0.8 = 38.4px$$

This creates the specific "Bloom" room required for the Pine-pigmented shadows to expand during a -4px kinetic lift
without causing visual collisions.

3. APCA-Aware "Ink Weight"

The Rig uses Canvas Mixing to simulate physical ink density and ensure legibility.

The Logic: By registering RGB Tonal Tokens (e.g., --sys-color-primary: 1, 98, 75), we adjust the alpha channel
dynamically to maintain APCA (Advanced Perceptual Contrast Algorithm) compliance.
Constraint: The Muted Floor is programmatically set to a 20% mix to guarantee WCAG 2.1 AA legibility on
non-Retina hardware.

⚠️ Development Note: Procedural Integrity & Time-Boxing

This implementation represents a strategic, time-boxed deployment of my core architectural logic. To meet delivery
milestones, certain elements of the V26 Rig were optimized for immediate performance, while advanced R&D frameworks
focused on automated systemic health continue to undergo refinement in a private environment.

This "Proof of Concept" demonstrates my ability to ship high-fidelity, accessible systems under real-world
constraints—prioritizing structural integrity and "Diagnostic Empathy" over localized styling.

DVillers77/portfolio-v5