Revolution Fact Find:
From Guesswork to Production-Ready Data

markchamberlain.design

Technical implementation

This write-up ships as static HTML with a deliberately small front-end footprint. Below is how I structured layout, tokens, and shared chrome so the case study stays maintainable across many project pages—a practical analogue to design-system thinking in larger codebases.

CSS tokens (:root)

Accent color is centralized so emphasis in prose, borders, and focus treatments stay wired to the same value—mirroring how I'd document tokens for a DS consumer.

:root {
    --color-orange: #c75100;
    --color-dark: #333333;
    --orange: var(--color-orange);
}

Responsive grid scaffold

Comparisons collapse to single column without changing copy order—the same pattern you'd ship in JSX or Razor partials.

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl">
  <article><!-- legacy --></article>
  <article><!-- new --></article>
</div>

Cursor-aligned zoom (mousemove)

The helper recenters scaling under the stakeholder's cursor inside fixed-height screenshots. Budget throttling (requestAnimationFrame) optional if telemetry shows jank.

container.addEventListener('mousemove', (e) => {
    const rect = container.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    img.style.transformOrigin = `${x}% ${y}%`;
    img.style.transform = 'scale(2.5)';
});

Layout and responsive scaffolding

• Long-form narrative uses a capped measure (max-w-4xl / max-w-5xl) with grids that collapse from multi-column desktop to single-column mobile.
• Fixed pill navigation (backdrop-blur, bordered glass) preserves context without stealing vertical canvas; z-index is coordinated with the page loader.
• Audit imagery plus object-contain keeps dense enterprise UI readable on stakeholder laptops.

Modular shell

• Navigation and footer are injected from components.js with path-aware link bases—one edit updates chrome everywhere.

Performance trade-offs

• Tailwind via CDN favors velocity over bundle minimalism acceptable for portfolio shipping.
• Loader clears on DOM ready with a watchdog timer so sluggish assets cannot trap reviewers.
• Above: WebP-first <picture> keeps bytes down while JPG remains the compatibility fallback.