Skip to content
Back to projects

Sangil Studio Test

The full site for Yago and Juan Luis’s architecture studio: thirty-three works and competitions, bilingual and published by themselves

Live site(opens in a new tab)Source(opens in a new tab)
Sangil Studio site first screen: a full-screen architecture photograph with no text on top, the studio wordmark at the top left and a plus sign to open the menu at the top right, on a white background.
My role
Design, development, content model, migration and deployment
Year
2026
Status
Working prototype

While sangilstudio.com still shows the «work in progress» notice, this is the studio’s finished site waiting to be promoted to production: home, projects, a page per work, studio, legal notice and contact, in Spanish and English, with eighty-seven prerendered routes and thirty-one works migrated along with their seventy-nine photographs.

The home page was the client’s very first note and it is two blocks and nothing else: a full-screen photograph with not a single word on top, the projects cross-fading into one another every five seconds, and the contact details. The menu is a plus sign in the corner.

What orders the whole project is the line between what the client can touch and what they cannot: the architects publish works, photographs and copy without calling anyone, but the design is not editable from the panel. Statuses and types are closed lists and project notes are plain paragraphs, so a giant headline can never break the look.

What's inside

  1. The hero moves between projects by opacity, not by sliding: a nine-hundred-millisecond cross-fade every five seconds, with separate image selections for phone and desktop and only the next two mounted, so nothing is downloaded that nobody will see.

  2. The hero arrows are two invisible strips at the edges that only exist when there is a mouse, with a 1.25-weight chevron that never thickens when scaled. On touch they never appear, because there you swipe.

  3. An internal, unindexed type lab that exposes the site’s sixteen text roles and lets you tune family, size, weight, leading and tracking separately for phone and desktop, preview it over the real site and export the CSS. The architects tune the type themselves.

  4. Works and competitions live in a single list, because a competition is just a project with a different status; the old competitions route redirects permanently to that single list instead of returning a 404.

Stack

  • Next.js 16
  • TypeScript
  • Tailwind CSS 4
  • Sanity
  • lexorank
  • zod
  • Playwright
  • Vercel