Single-page CV.

The component#

html
<main class="mx-auto max-w-3xl p-10"><header class="border-b pb-6"><h1 class="text-3xl font-bold">Name</h1><p class="text-slate-500">Role · Email</p></header><section class="mt-8 grid gap-8 md:grid-cols-[140px_1fr]"><h2 class="font-semibold">Experience</h2><div>entries…</div></section></main>

Responsive & dark#

Add dark: twins to every surface and text color (bg-white dark:bg-slate-900, border-slate-200 dark:border-slate-800). Because this recipe is pure utilities, dark mode is a per-class decision — see concepts/dark-mode-strategies|dark mode strategies.

Customization#

  • Swap palette classes to re-theme instantly
  • Adjust radii (rounded-lg → rounded-2xl) for tone
  • Add transition + state variants for polish
  • Extract into a framework component when reused 3+ times

recipes/index|Recipe index · components/index|Design components