Gerben Put English

← Terug naar het overzicht

Atlas

Mijn reisdagboek, als papercut-natuurpark

Een persoonlijk reisdagboek: elke reis een kaart met foto’s, een verhaal en een pin op een draaiende wereldbol, die als maan boven een papercut-landschap hangt. Met een eigen editor om reizen toe te voegen en te bewerken.

Node.js · Express · TypeScript · PostgreSQL · MinIO · sharp · D3 · Leaflet · Docker

Atlas: Schermafbeelding van de live site
Scroll: dit is de echte site

Het verhaal

Het idee

Foto’s van reizen verdwijnen in je telefoon. Ik wilde een plek waar elke reis een eigen pagina krijgt, met het verhaal erbij en een plek op de kaart, en die voelt als een stapel ansichtkaarten in plaats van een blog.

Het ontwerp

Een nationaal park van gesneden papier: bosgroene en crèmekleurige vlakken met gescheurde randen, gelaagde bergen en dennen, ronde badges voor de reiscijfers en een trailpas met de reisgegevens. In het donker is het hetzelfde park bij nacht.

Onder de motorkap

Een Express-API in TypeScript met PostgreSQL voor de reizen en MinIO voor de foto’s. Elke upload wordt op de server rechtgedraaid, verkleind naar WebP en ontdaan van metadata.

In detail

Wereldbol
Draaibare D3-wereldbol met een pin per reis; klik om de reis te openen.
Tijdlijn
Reizen per jaar, te filteren op tag en te doorzoeken.
Reispagina
Verhaal, fotogalerij met lightbox, YouTube-video’s en een minikaart.
Editor
Pin op de kaart zetten, foto’s slepen en ordenen, tekst en afbeeldingen plakken.
Foto-pipeline
Tot 100 MB per foto; de server maakt er een lichte webversie van.
Veilig
Strikte Content-Security-Policy, gesanitiseerde verhalen en login voor de beheerder.
Volgend project AI Academie Leer hoe AI werkt, door het te doen