Iris Bakker

Senior Frontend Engineer · Design Systems & Map Interfaces

hello@irisbakker.dev · github.com/irisbakker · linkedin.com/in/irisbakker · irisbakker.dev

I work on the layer most people never see: the components, tokens and map primitives that a hundred other screens are assembled from. Eight years of it, mostly in geospatial and newsroom tooling, where the interface has to stay legible while the data underneath it is late, partial or wrong.

Rotterdam, Netherlands

Experience

Senior Frontend Engineer

@Halden Systems

Halden sells basemaps and routing to logistics companies. I own the map interface layer: the style editor customers use, the component library our four product teams share, and the render pipeline that turns both into something a browser can hold at sixty frames.

  • Rebuilt the style editor on MapLibre and PMTiles, cutting the tile bill by about a third by serving one range-requested archive instead of forty million small objects.
  • Wrote the token pipeline that publishes one Figma file to CSS, Swift and Kotlin. Colour and spacing stopped being a code review argument.
  • Took the shared component library from a folder nobody trusted to a versioned package with a written deprecation policy and visual regression on every PR.
  • Introduced a contrast audit that measures type against the map tiles actually rendered underneath it, which is the only measurement that means anything over a basemap.

Skills:

MapLibre GL, PMTiles, TypeScript, React, Design tokens, Style Dictionary, Storybook, WebGL, Playwright, Chromatic, Accessibility, Vector tiles

Frontend Engineer

@Ravelstone Media

Interactive desk at a daily paper. Election nights, budget explainers, one flood map that had to be right before it was pretty.

  • Built the graphics toolkit the newsroom still uses: chart primitives, a scrollytelling scaffold, and a build that publishes a story as a self-contained embed.
  • Cut the standard embed from 340KB to 60KB, which on election night is the difference between a page that loads and a page that does not.

Skills:

Svelte, D3, TypeScript, Canvas, GeoJSON, Rollup, CSS

Frontend Developer

@Coastline Energy

Monitoring dashboards for offshore wind. Thirty operators watching four hundred turbines, mostly at night.

  • Replaced a polling grid with a streamed one, so an alarm reached the operator in under a second instead of up to thirty.
  • Rewrote the alarm colours after a night shift walkthrough: the old palette failed on the room's own screens and on two of the operators.

Skills:

React, WebSockets, TypeScript, D3, Node.js, Sass

Junior Developer

@Northgate Studio

A six-person agency. Museums, festivals, one municipality, and whatever else came through the door.

  • Shipped eleven sites in fifteen months and learned, the hard way, what a component is for.

Skills:

JavaScript, Vue.js, PHP, Sass, WordPress, Accessibility

Education

BSc Computer Science

Rotterdam Institute of Applied Computing

Graphics and human-computer interaction. Final project was a tile renderer for historical maps, which is more or less what I have been doing since.

Certificate in Cartographic Design

Zuidkust Academy

Six months of generalisation, label placement and projection, taught by people who did it on paper first.

Projects

Meridian

- https://example.com

A map style editor that runs entirely in the browser. Load a vector tile source, push colour and label rules around, and export a style JSON any MapLibre map can read. There is no account and no server: the tiles are range-requested straight from a PMTiles archive, so a newsroom can point it at their own bucket and never send a request to me.

Skills:

MapLibre GL, PMTiles, TypeScript, Svelte, WebGL, Web Workers

Tideline

- https://example.com

Tide and current charts for the Dutch coast, as a PWA that works with no signal, because the places you need it are the places without one. Two years of predictions ship in the install, so the first load is the last network request it needs to make.

Skills:

Astro, Service Worker, IndexedDB, Canvas, TypeScript

Cadence

- https://example.com

A design token pipeline that reads a Figma file and writes CSS custom properties, Swift and Kotlin, with a diff that tells you which components a token change will actually move. Built at Halden, extracted once it stopped being specific to us.

Skills:

Node.js, Figma API, Style Dictionary, TypeScript, CSS

Halftone

- https://example.com

Ordered dithering in the browser, compiled to WebAssembly: eight classical matrices and a colour quantiser, fast enough to run on a video frame. Written mostly to understand Bayer thresholds properly, then kept because other people wanted it.

Skills:

Rust, WebAssembly, Canvas, Web Workers, TypeScript

Nocturne

- https://example.com

A palette generator for dark interfaces that refuses to emit a pair that fails WCAG. Works in OKLCH so lightness means what you think it means, and reports the contrast it achieved rather than the contrast you hoped for.

Skills:

TypeScript, OKLCH, Accessibility, CSS, Vitest