The Way a Map in Your Mind Works

Portfolio web­site for Oliver Boulton, an artist and book de­signer work­ing be­tween Paris and London

Screenshot of web browser showing oliverboulton.com. A scanned fashion magazine is visible next to small description text.'
Screenshot of web browser showing the 'Information' page on oliverboulton.com. Several paragraphs of text about Oliver are visible text to a project timeline and a colophon.
Screenshot of web browser showing the directorty page on oliverboulton.com. A list of project titles is visible on the right, while a detailed description of a single book project is on the left. The type is white on  a deep brown-green background.

Since Oliver has some de­vel­op­ment skills him­self, we de­cided to build the site to­gether through stan­dard ver­sion con­trol. We’re us­ing Eleventy to build the site from a se­ries of Markdown and JSON data files and Liquid tem­plates. The fron­tend in­ter­ac­tions are writ­ten in plain Javascript, and for the mo­ment the site is hosted on stan­dard shared host­ing.

The big short­fall of the Jamstack ap­proach are the im­ages: The site has hun­dreds of them, and most are high-res­o­lu­tion scans. We’re us­ing Eleventy-img to scale and con­vert these to web-friendly for­mats, but that process takes around ten min­utes — far too long to run every­time you hit Cmd-S, and still pretty hefty to run on some­thing like Github Actions. There is a way to cache the gen­er­ated im­ages but we haven’t man­aged to get this to work re­li­ably yet.

The site is type­set in Helvetica Now from Monotype Studio and Everson Mono by Michael Everson. This is the first site where I’ve im­ple­mented Continuous Typography from the start — re­size your browser to see it in ac­tion.

Principal de­sign by Oliver Boulton, prin­ci­pal de­vel­op­ment by me.

View the live site at oliv­er­boul­ton.com. If you’re in­ter­ested in how it was built, the source code is li­censed un­der CC (BY)-(NC)-(SA) and avail­able on Github.