Three interfaces, one source of truth
Why this portfolio can change its visual personality without creating three versions of the truth.
The first version of this portfolio had a clear problem: it was expressive, but it made a recruiter work too hard. Large editorial headlines occupied most of the screen. Generous whitespace looked intentional in isolation, yet across a full page it separated related evidence instead of organizing it.
The obvious correction was to make everything denser. That solved the scanning problem, but it raised a second question. Should a portfolio that claims deep frontend judgment also demonstrate more personality than a compact professional document?
My answer became three presentation modes: Signal, Studio, and Kinetic. Signal is restrained and evidence-led. Studio is warmer and more editorial. Kinetic is vibrant, technical, and animated. They look different enough that rebuilding each as an independent site would have been tempting.
That would also have been the wrong architecture.
Presentation is not content
The factual surface of this portfolio includes employment dates, commercial outcomes, project status, failure modes, and links. If each design had its own React tree, those facts could drift. A wording correction might reach Signal but not Studio. A new project boundary might appear in Kinetic while an older page continued to imply something stronger.
The visual flexibility would create an editorial reliability problem.
The important distinction is between meaning and treatment. A heading remains the same heading. A project link still has the same destination. Kinetic may add a bounded canvas effect to the homepage, but it cannot hide navigation, reorder the argument, or invent alternate copy.
That boundary made the design work more demanding in a productive way. Each view had to express a personality through typography, color, spacing, surfaces, and motion rather than through a different information architecture.
The multiplication is real
One content tree prevents factual drift; it does not eliminate verification cost. Three presentations multiplied by two color themes and two primary viewport sizes produce twelve homepage visual baselines. Secondary routes still need overflow and accessibility checks in every presentation.
What one tree removes
- Duplicate copy
- Conflicting project states
- Route drift
- Separate accessibility structures
What three views still require
- More visual regression coverage
- Long-content stress tests
- Shared token discipline
- Reduced-motion verification
This trade is worthwhile because the remaining complexity is visible and testable. A screenshot can reveal a broken heading. A browser test can reveal horizontal overflow. Duplicate content, by contrast, tends to fail quietly: two plausible pages disagree and nobody notices immediately.
AI increased the need for a source of truth
AI-assisted development made it faster to explore each direction. It also made local consistency easier to overestimate. An agent can produce a convincing new component or CSS treatment without automatically understanding every product boundary the existing site protects.
The shared tree turns those boundaries into architecture instead of reminders. The system does not depend on every future change remembering to update three interfaces. The safest path is also the easiest path: edit the fact once, then verify how each presentation carries it.
It also changes review conversations. A visual proposal can be judged as a presentation choice instead of quietly reopening settled content. If a new treatment needs different words to make sense, that is a signal to ask whether the design is clarifying the same product or inventing another one. The constraint creates a useful pressure toward honest hierarchy.
This principle applies beyond portfolios. A product may support several brands, customer tiers, devices, or modes. Duplicating the workflow can feel faster when each experience begins. It becomes expensive when policy, accessibility, or business rules change.
The goal is not to force every interface into identical markup. The goal is to identify which differences are genuinely semantic and which are presentation. Share the former deliberately. Make the latter flexible without giving it authority over the truth.
The three modes now demonstrate different aspects of frontend craft. More importantly, they demonstrate the same product judgment: expression is valuable, but it should not be allowed to fracture the evidence.