Thomas Gertenbach Portfolio

In the FWA description, Thomas Gertenbach calls this portfolio a sunlit plaster table seen from above. In that description, the projects are polaroids that can be picked up, tossed and blown around, dropping one into the well has a projector play it, and holding anywhere takes a photo of the scene. What the site sets out to prove is the craft of the person who made it. On the About page Thomas Gertenbach describes building websites you can play with, 3D worlds, product configurators and the small details that make them feel right, and this table is one such piece of work.

The opening of the site is itself a complete photograph being taken. On a grey brown screen, the viewfinder corners close slowly towards the centre while ISO, aperture and shutter readings tick along the bottom, a loading percentage sits at the bottom right, and a black line in the middle grows longer. When loading finishes, the screen flashes white and the camera pulls back from the table, revealing that the black line was a photo falling edge first. It lands on the table, and it is Thomas's own polaroid. The first picture the visitor sees is the table with that photo just landed on it.

Seven photos lie on the table in all. Six are projects, Auremin, Cinnamon, Gielissen, Muuble, Spyker and Momiji, and the seventh is Thomas. Most of the projects are 3D websites and product configurators that Thomas Gertenbach worked on at The Brink Agency. They include one for planning an exhibition stand in 3D, one for furnishing a whole shop and then renting it, and a playable claw machine. Once a photo drops into the recess, the table shows three screen recordings of that project, with the project name at the bottom left and, to the right, a one line description, where it was built, its category and its year. The address changes to the project's own page as well. When the visitor presses Esc or clicks the cross at the top right, the photo goes back onto the table.

Besides the home page, the site has three more pages, using the same table or the same set of props. The Work page lines the six photos up in a row on the table beneath the large project name. The About page puts Thomas's photo in the recess with a short introduction in the middle. The Lab page swaps in a different table, a dark cutting mat holding a vernier caliper, tweezers, a breadboard full of wires and a roll of tape. Eleven photos of experiments lie in the middle, and when the visitor opens any of them, a short clip of the experiment appears with a paragraph on how it was made.

The whole design of the site comes from one real object, an old table in the sun. The plaster is a greyish warm brown with fine cracks, and the raised rim around its edge has lost a few flakes, showing the paler layer beneath. The light comes from the upper right, the leaf shadows fall across the table at an angle, and the photos cast short shadows of their own, while even the navigation and the headings look like lettering printed on the plaster.

Three kinds of lettering appear on the table, each with its own look. CREATIVE DEVELOPER and the project names use a very wide, heavy sans serif, with worn spots in its white strokes like paint brushed through a stencil. The navigation, the descriptions and the AMSTERDAM clock at the bottom right use an ordinary small sans serif. The third kind is the handwritten project names along the bottom of each polaroid, Gielissen, Muuble and Thomas, as if written on the photo paper with a pen. The photo the visitor takes is captioned automatically along its bottom edge with Amsterdam and the time it was taken.

The polaroid is the site's main unit of content. The projects are polaroids, the portrait of Thomas Gertenbach is a polaroid, the Lab experiments are photo prints too, and whatever the visitor photographs also becomes a polaroid. Each photo has a slightly yellowed border with a stain or two, and each sits at a slight angle, so the table looks less like a tidy grid and more like someone has just tipped out a pile of photos.

The projected recordings are not treated as browser windows. The three images have soft glowing edges and the outer two bow slightly outwards. They sit over the plaster and the leaf shadows, so they look like light falling on the table rather than a layer pasted in front of the screen. The dark cutting mat in the Lab brings a different set of props but follows the same rule, with every item being a real object lying on the table.

Photos and props on this table all move the way real objects would. When the visitor presses on a photo, it lifts off the table and its shadow grows. When the visitor throws it, the photo paper bends a little in mid air, slides across the table and stops only when it lands on another photo. As the visitor carries a photo towards the bottom right, the words Drop here to inspect appear in the recess. The leaf shadows on the table sway slowly too, as if a breeze were moving the leaves.

Dropping a photo into the recess sets off a whole transition on the table. The recess lights up first, and a gust blows the other photos to one side, their paper bending as they fly. Then the three screen recordings fade up out of the dark onto the plaster and the project name appears at the bottom left. When the visitor presses Esc, the recordings disappear and the photos settle back onto the table.

Taking a photo is the second main action on the table. When the visitor holds the mouse down anywhere on it, the four corners of a viewfinder appear on screen with an ISO reading beside them. On release there is a flash, and a black print drops onto the table from above. Like a real polaroid it takes a while, and only after about eight seconds does the patch of table the visitor held on come through.

The opening is also a photograph being taken, with the viewfinder closing, the flash, the pull back and Thomas's photo landing, as described in the Concept chapter. The small icon at the top centre is the sound switch, a wavy line while sound is on and a straight line once it is off. All of this motion holds a steady 60 frames per second on the home page and the Lab page, with almost no stutter.

Next.js is the framework under the site, and the 3D library three.js draws the whole table using WebGPU, the newer graphics interface in browsers, switching automatically to WebGL2 in browsers without it. The leaf shadows come from a leaf patterned mask placed in front of a spotlight and cast onto the table, rather than from a painted shadow image. Sound is handled by the audio library Howler. Sound is on by default, an ambient track starts after the visitor's first click, and clicks in the interface have their own sound effects.

Image sharpness is one of the things the site works hardest at. Even on an ordinary monitor, the table is drawn at no less than one and a half times the screen resolution and at up to twice it, so that the plaster texture and the edges of the photos look crisp. The site keeps watching how long each frame takes to draw. When frames are too slow for several seconds in a row, it lowers the resolution one step, and after a stretch of steady frames it raises it again.

Loading the whole table for the first time downloads about 5.4 MB. The largest single file is an ambient sound track of about 0.5 MB, and most of the rest is the textures for the plaster, the leaf mask and the surrounding light, along with a few short clips for each project. A few seconds after the home page opens, the textures for the Lab's cutting mat and metal tools download in advance, so switching to the Lab involves no wait.

The server answers almost at once, starting to send the page within 30 milliseconds, and something first appears on screen after 0.1 to 0.4 seconds, well ahead of the usual benchmarks of 0.8 and 1.8 seconds, though what the visitor sees then is the opening viewfinder. The table is not fully revealed until about 4 to 6 seconds, and during loading the page's main thread is kept busy for about 2 seconds in total. The picture does not jump at any point along the way, with a layout shift score of 0.

The table looks after keyboard and screen reader users carefully. Every clickable item in the picture has an invisible link in the page behind it, so a screen reader can read through each project, Lab, About and the contact details in order. When the visitor presses Tab, a small label appears at the bottom centre of the screen saying where the focus is, such as Website sound On, Work or Auremin, and Enter opens that project. One flaw is that after Esc closes a project, the focus returns to the top of the page rather than to the photo the visitor had just opened. The site's style rules for reduced motion cover only the opening viewfinder and this focus label.

This portfolio earned 82 points from FWA, and it rests almost entirely on one table. The table, the polaroids, the recess and the camera are four props that between them hold browsing the work, opening a project and getting to know the author. Every one of them responds to the mouse the way a real object would.

The FWA credit names Thomas Gertenbach alone, and the record in the table counts up to the time of writing. This is the first FWA award for Thomas Gertenbach, won with a personal portfolio, and most of the six projects inside it were made at The Brink Agency.