Sangil Studio Test
La web entera del estudio de arquitectura de Yago y Juan Luis: treinta y tres obras y concursos, bilingüe y publicable por ellos mismos
- Mi papel
- Diseño, desarrollo, modelo de contenido, migración y despliegue
- Año
- 2026
- Estado
- Prototipo navegable
Mientras sangilstudio.com sigue enseñando el cartel de «en proceso», esta es la web del estudio terminada y a la espera de subir a producción: portada, proyectos, ficha de cada obra, estudio, aviso legal y contacto, en español y en inglés, con ochenta y siete rutas prerrenderizadas y treinta y una obras migradas con sus setenta y nueve fotografías.
La portada la pidió el cliente en su primera nota y son dos bloques y nada más: una fotografía a pantalla completa sin una sola palabra encima, con los proyectos fundiéndose unos en otros cada cinco segundos, y el contacto. El menú es un signo más en la esquina.
La regla que ordena el proyecto es qué puede tocar el cliente y qué no: los arquitectos publican obras, fotos y textos sin llamar a nadie, pero el diseño no se toca desde el panel. Los estados y los tipos son listas cerradas y las memorias son párrafos sin formato libre, para que un titular gigante no pueda romper la estética.
Lo que tiene dentro
El hero cambia de proyecto por opacidad y no por desplazamiento: un fundido de novecientos milisegundos cada cinco segundos, con dos selecciones de imagen distintas para móvil y para ordenador y sólo las dos siguientes montadas, para no descargar lo que nadie va a ver.
Las flechas del hero son dos franjas invisibles en los bordes que sólo existen si hay ratón, con un galón de trazo de 1,25 que no engorda al escalar. En táctil no aparecen, porque ahí se pasa el dedo.
Un laboratorio de tipografía interno y sin indexar que expone los dieciséis papeles de texto de la web y deja ajustar familia, cuerpo, grosor, interlineado y espaciado por separado en móvil y en ordenador, previsualizarlo sobre la web real y exportar el CSS. Los arquitectos afinan la letra ellos mismos.
Obras y concursos viven en una sola lista, porque un concurso es un proyecto con otro estado; la ruta antigua de concursos redirige de forma permanente al listado único en lugar de devolver un 404.
Stack
- Next.js 16
- TypeScript
- Tailwind CSS 4
- Sanity
- lexorank
- zod
- Playwright
- Vercel
