Pages

rendata.nl

Personal hub: Home, Work, Play (tag filters and empty state), Blog grouped by year, Post, About and the 404 tide.

Page layout

A 272px sidebar beside a content column capped at 1100px. Under 860px the sidebar becomes a top bar.

function WorkPage({ projects }) {
  const [tag, setTag] = React.useState("All");
  const shown = tag === "All" ? projects : projects.filter((p) => p.tags.includes(tag));
  return (
    <div style={{ display: "grid", gridTemplateColumns: "var(--sidebar-width) minmax(0, 1fr)" }}>
      <Sidebar name="Renze Terpstra" items={nav} active="work" />
      <main style={{ padding: "var(--main-pad)", maxWidth: "var(--main-max)" }}>
        <Eyebrow mark>Work</Eyebrow>
        <h1>Tools that make aid data work</h1>
        <ChipRow label="Filter projects">
          {["All", "Python", "IATI"].map((t) => (
            <Chip key={t} pressed={tag === t} onClick={() => setTag(t)}>{t}</Chip>
          ))}
        </ChipRow>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 20 }}>
          {shown.map((p) => <ProjectCard key={p.title} {...p} dense />)}
        </div>
      </main>
    </div>
  );
}

Style guide and colour picker

The data-visualisation style guide and the colour picker share one docs frame: Guide home, Principles (Callout, RulePair, BigNumber) and Colour (Swatch rows, sequential and diverging builders, config-error Alert).

Principle page

function PrinciplePage() {
  return (
    <article style={{ maxWidth: "var(--measure)", display: "grid", gap: "var(--gap-group)" }}>
      <Eyebrow>Principles</Eyebrow>
      <h1>Use one colour, plus grey</h1>
      <Callout kind="rule">Highlight the series that carries the message in Teal. Everything else is Steel.</Callout>
      <RulePair doItems={doList} avoidItems={avoidList} />
      <BigNumber label="Security incidents, March 2026" value="112" context="+24% on the 12-month average" trend="up" />
    </article>
  );
}

Dashboard

An overview page at 1920 × 1080, scaled to fit: filter rail, KPI row, main and support bands, table and footer. Built from dashboards/dashboard.css; see Dashboards for the parts.