Fernando
Martin Atelier

The default for an architecture portfolio is a grid: rows of thumbnails, a filter bar, a hover zoom. It is efficient and it is forgettable, and forgettable is the one thing this studio could not be. So we made the homepage a single, infinite, draggable canvas. Project renders are scattered across a faint blueprint grid, and you pan through them like an architect sliding a drawing across a desk.

Underneath the scatter is a quiet discipline. The layout is a 50-slot masonry tile (five rows, ten columns) whose card heights come from a seeded hash, so the composition looks hand-placed but never reshuffles between visits. That tile is cloned into a three-by-three grid and wrapped with modulo math, so Alan can drag in any direction forever and never hit an edge. Fourteen projects feel like an endless gallery.

The motion had to feel like weight, not like software. On release, the canvas carries momentum and decays at a fixed friction, so a flick glides and settles rather than snapping to a stop. The studio's full name sits centred behind everything, and the moment Alan starts to explore (more than fourteen pixels of drag) it fades to a third of its opacity. The brand introduces itself, then steps out of the way of the work. That is the whole thesis of the site in one gesture.

A draggable canvas is usually where good navigation goes to die. Everything is one page, so the browser Back button either does nothing or throws you out of the site entirely, and no link you copy ever points at what you were looking at. We refused that trade.

Every destination (a project, the journal, an article, About, Contact) is a real, deep-linkable URL backed by a small history router. Opening a project pushes a state; the canvas is always the base that Back returns to; Escape closes whatever overlay is open; and pasting a link to Villa Calma opens the site directly on Villa Calma. The site behaves like a multi-page website and moves like a single-page app.

Then we gave the canvas the overview it deliberately lacks. A Projects index groups all fourteen works into the studio's five typologies (Residential, Hospitality, Interior, Commercial, Others) in a two-pane browser: an accordion on the left, a live preview that follows your cursor on the right. Alan who wants to wander gets the canvas. Alan who wants the list gets the list. Neither is punished for how they think.

A project page is where the sale is actually made, so it could not be a lightbox grid of equal squares. We authored it as a sequence. The hero is full-bleed and scrubs gently on scroll, the image easing up and out as you enter, the way a building reveals itself as you walk toward it. The title sits low and heavy over it. Metadata stays to a whisper: category, year, client. Everything else gets out of the way.

The gallery below runs on a deliberate rhythm rather than a uniform grid: a full-bleed frame, another full frame, then a paired split, repeating. Full images are the establishing shots; the pairs are the details, the joinery, the light. Each frame carries a faint parallax so scrolling feels like depth, not like a spreadsheet advancing. It reads as an edit, not an archive.

The last decision on the page is the most important one: no dead ends. Every project closes with the next project already loaded and waiting, cycling endlessly through all fourteen. Alan never arrives at a full stop and a Back button. He arrives at the next building, and the next, until he decides he has seen enough to write to the studio.

Most studio About pages are a credibility checklist: a headshot row, a client-logo strip, an awards shelf. We cut all of it for a single narrative spine. The page opens on the practice's belief (space is experienced, not merely occupied) and then earns it with the one story no competitor can copy: where the FMA mark actually comes from.

The identity is built around the Legacy of Juan Botas, a Spanish architect-illustrator whose hand-drawn line the studio inherited. We told that story with two identity cards, a founder portrait and the original mark, that parallax in opposite directions as you scroll, so the section quietly breathes. The point is not decoration. The point is that a prospect leaves remembering one specific, human thing about this studio and not one generic thing about all studios.

It is worth being honest about the risk here. Narrative over credentials is a bet that Alan wants to feel something more than he wants to tick boxes. For a design-led studio courting design-literate clients, that is the right bet. For a firm competing purely on scale or price, it would be the wrong one.

Every instinct in a portfolio build is to put a lead-capture form on the contact page: name, email, budget, project type, message. We deleted all of it. In Kerala, where this studio works, WhatsApp is not a nice-to-have channel, it is the business channel. A form is a wall between an interested person and a conversation.

So Contact is three direct-action cards, WhatsApp, email, phone, in that order, over a dark-mode studio map. Each is one tap to a real thread with a real person. Remember where Alan is: in bed, one-handed, at 11 p.m. The correct number of fields to ask him to fill in at that moment is zero.

The cost is real and we chose it with eyes open. The studio gets an unstructured 'hi, I loved Villa Calma' instead of a tidy CRM record with a qualified budget. For a boutique practice that would rather answer a warm message than sort a cold pipeline, an answered message beats a filled form every time. Different studio, different call.

The whole site moves on one easing curve, a fast-out, long-settle ease with no overshoot. Cards, overlays, hovers, reveals: all of it launches quickly and decelerates into place, like a heavy door on a good hinge. We could have varied the motion for interest. We deliberately did not. Uniform, unhurried motion is what reads as calm and considered, and calm is the brand.

The visual voice is a drafting room. Body type is a clean neo-grotesque; labels, dimensions and counts are set in monospace, so the interface speaks in the register of a technical drawing. A faint blueprint grid underlies the canvas. The palette is warm paper and a near-black brown rather than neutral black, with a single electric-blue accent doing all the pointing. And the whole thing carries a genuine light and dark theme, built from one set of tokens and flipped, respecting the visitor's system preference. The switch in the corner of this very page runs on the same mechanism.

Honesty, because a case study that only lists wins is marketing. The reveals and canvas physics are wrapped in a reduced-motion guard, alt text is written for humans, and hover-only content becomes always-visible on touch. But two gaps are real and worth naming: keyboard focus states are not yet designed, and the heavy architectural renders ship lazy-loaded but without responsive sources. Both are on the list. Neither is pretended away.