Building RTB Hub: A Portfolio That Plays Back

This is a starter post — replace it with your own writing. It exercises every feature of the blog pipeline: headings, code blocks with syntax highlighting, tables, and Mermaid diagrams.

The theming system

The entire site palette swaps by changing two CSS variables. Every color in Tailwind config references them, so purple and green can trade places with a two-line edit:

:root {
  --color-primary:   147 51 234;   /* currently purple */
  --color-secondary: 0 255 0;      /* currently green  */
}

Canvas games can't use Tailwind classes, so they resolve the same variables at draw time:

function cssCanvasColor(varName: string, alpha = 1): string {
  const rgb = getComputedStyle(document.documentElement)
    .getPropertyValue(varName)
    .trim();
  return alpha < 1 ? `rgb(${rgb} / ${alpha})` : `rgb(${rgb})`;
}

Architecture at a glance

Trade-offs

More posts soon — this pipeline makes them cheap to ship.