stoa es un estudio de arquitectura ficticio con sedes en Moscú y Dubái que proyecta edificios, espacio público e interiores. Creé su web como concepto para mostrar cómo planteo un portafolio editorial para un estudio de diseño: un sitio en el que los proyectos llevan la página y el texto se queda en segundo plano.

El nombre va en minúsculas a propósito. Una stoa era una columnata cubierta en una ciudad de la antigua Grecia, una sala pública sin paredes, y la web mantiene esa contención: blanco y negro, tipografía en inglés en minúsculas y botones entre corchetes. El movimiento tenía que sentirse lento y con peso, sin impedir llegar a cualquier proyecto, artículo u oferta de empleo.

Diez páginas: portada, proyectos, página de proyecto, estudio, revista, artículo, empleo, contacto, privacidad y 404. El contenido es ficticio pero completo: 10 proyectos, 5 artículos en la revista, 6 ofertas de empleo y 2 sedes en un mapa oscuro.

La portada arranca con un cargador que cuenta y un vídeo a pantalla completa; siguen los valores, que se iluminan al hacer scroll, los servicios, la historia del estudio con contadores, proyectos destacados con una imagen flotante, los premios en acordeones [ + ] y un carrusel de la revista que se arrastra. La página de proyectos filtra por disciplina y alterna entre una cuadrícula escalonada y una lista con vista previa junto al cursor; cada proyecto tiene ficha técnica, entradilla, imagen con parallax, galería arrastrable y enlace al siguiente.

El texto se divide en líneas medidas que aparecen una a una; las imágenes se descubren desde abajo y se asientan tras un ligero zoom; cada enlace interno cierra la página con un panel claro que cuenta hasta 100, y un cursor propio muestra las etiquetas [ view project ] y [ read ]. Está hecha con HTML, CSS y JavaScript con GSAP, ScrollTrigger, Lenis y un mapa en Leaflet; los formularios funcionan en modo demo y no envían nada.

El concepto existe como 10 páginas terminadas en inglés. El 22 de septiembre de 2026 revisé 9 de ellas renderizadas en Chrome, sin contar la 404: las 9 tienen títulos únicos e idioma declarado, el diseño se mantiene a 390 px sin desplazamiento lateral, el 100 % de las imágenes tiene texto alternativo y no hay enlaces internos rotos.

Lighthouse midió la portada. En móvil: rendimiento 88, accesibilidad 95, buenas prácticas 77 y SEO 100, con LCP de 2,9 s, CLS de 0,008 y TBT de 0 ms. En escritorio: rendimiento 99, LCP de 0,9 s y CLS de 0,003. En móvil la portada pesa 13,4 MB en 21 peticiones, por el vídeo Full HD de la cabecera.