Film director’s portfolio written in plain code, without a CMS

In the portfolio of a director of commercials and feature films, image and motion are what matter, from full-screen frames and videos playing in tiles to the credits for every project. The Zeplin design was precise to the pixel and had to stay that way on every screen. A CMS with a visual editor would have added heavy libraries, dozens of plugins to update and a layout that drifts away from the design with every change. For this reason, the plan from the start was custom code, written directly from the design files.

I wrote the website in plain HTML, CSS and JavaScript directly from the files in Zeplin, with no framework, no build process and no CMS. The layout matches the design to the pixel, from the proportions of the tiles and the type sizes to the width of the menu that slides out from the right and the behaviour of the header, which hides when you scroll down and comes back when you scroll up. Videos from Vimeo play in the tiles without sound and fill the frame whatever their proportions, and a click opens a window with the film, the credits and the festival laurels.

All projects are stored in a single data file, with the title, category, video ID, credits and laurels. Adding a new project means adding one entry, and the page layout is generated from this data.