← All workPortfolio website · Brand and content system
Javier Calleja — Portfolio
Javier Calleja needed a portfolio that could hold four disciplines and films still in festival submission — so the person lives on cream paper and the films live in the dark, with every credit traced to his own captions.
The engagement
javicalleja.com is the portfolio of Javier Calleja, a filmmaker from Mexico City working in Los Angeles who directs, shoots, produces and designs films and photographs between them. The brief named two references: the photographer Takamitsu Motoyoshi's site for its cream paper, album wall and About page, and the Endjoy colour-grading studio for its dark film pages and ruled credit tables. Euphemios built one site from both. The home page opens on a pinned portrait beside a single statement, then scrolls into a wall of slow-drifting photo columns, one album per film, filtered by discipline. Opening a film darkens the page to a screening room: a projected clip or still, a meta row, and a credits table in which his own role is picked out in one marigold accent.
01
The challenge
The films are in festival submission, so nothing could be published in full and no festival could be named; the case had to be made with short clips, stills and credits alone. The credits themselves had to be right: the owner's memory of the roles differed from the record, so every credit on the site is tied to a source — Javier's own posts, the film's account, or files the owner supplied — and any block without a sourced fact is left out rather than filled. The imagery arrived as phone photographs from three shoots, an Avid screen recording and a letterboxed shot, and had to read as one body of work.
02
The approach
A content model with a source for every fact drives a dependency-free static build: three JSON manifests (films and credits, About copy, media) and a build script that renders every route from them, so a new film is a content change and never a template change. The photographs pass through a grading pipeline — soft contrast, warmth and fine grain — and are committed as sized derivatives; the three clips are cropped to the picture and encoded clean, with grain applied as a static overlay. The build was run as a two-attempt Codex swarm from a written spec; Claude reviewed both against real content and consolidated the winner, and the render gate now proves the wall's column count follows the number of albums and that both self-hosted typefaces draw their own pixels rather than a fallback.
5albums on the wall
109graded photographs
108render-gate assertions
03
Scope of work
- Home: Fotoyoshi-style About split (portrait and statement), then a wall of ten drifting photo columns across five albums with a discipline filter kept in the URL
- Three film pages in a dark screening-room layout: projected hero clip or still, meta row with festival status, Endjoy-style credits table with the owner's role in accent, process clips, behind-the-scenes strip
- Stills viewers and two collection pages (Production Design, Photography): one photo at a time, thumbnail strip with a fixed frame, wheel, keys, thumbnails and swipe, position kept in the URL
- About page with a sticky portrait, contact, profile and credits grouped by discipline
- Media pipeline: 109 graded stills at two sizes, three encoded clips with posters, About portrait; originals kept outside the repository
- Brand system: cream paper and near-black screen, one marigold accent, Switzer and DM Mono self-hosted, hairlines only
04
What we delivered
- Static site generated from content manifests into a committed dist/, one stylesheet and one script, zero external requests
- Sourced-credits content model with a written source register and a list of every item still owed by the filmmaker
- Gate: build determinism, content contract, copy linters with self-tests, per-route HTML size, and a 108-assertion Playwright render gate covering wall motion, hover, filter, viewer mechanics, video playback, font rendering, reduced motion and phone overflow
- javicalleja.com and www on Cloudflare DNS and Vercel, first production deploy from main, then git-connected auto-deploys; review alias on the Euphemios domain marked noindex
- 01
Live at javicalleja.com on September 29, 2026, the same day the design was approved
- 02
Every credit on the site links to the collaborator's own profile and traces to a recorded source
- 03
The wall and the film pages grow from content alone: adding a film is a manifest change with no code change
Built with
- HTML
- CSS
- Vanilla JS
- Python
- Pillow
- ffmpeg
- Playwright
- Vercel
- Cloudflare DNS
