Sitio web de arquitectura con identidad de marca y portfolio visual
Marée Arquitectura lleva más de 10 años diseñando espacios residenciales y comerciales en Guanacaste y Puntarenas. Necesitaban un sitio web que transmitiera su identidad visual elegante y exhibiera su portafolio de proyectos de forma inmersiva. Construimos un site estático ultrarrápido con hero de video y navegación de proyectos.
Sitio en producción con identidad visual propia, estructura SEO sólida y performance óptimo en Core Web Vitals.
Diseñamos el sistema visual de Marée desde cero: paleta deep teal (#023D4B), tipografía Inter con pesos ultraligeros, espaciado generoso que respira. Cada decisión visual refleja la filosofía del estudio — fluidez, precisión y conexión con el entorno natural. El sitio no presenta proyectos: los exhibe.
Marée Arquitectura, bajo la dirección de la arquitecta Narah Wong, lleva más de una década construyendo residencias y espacios comerciales en la costa Pacífica de Costa Rica, con más de 150 proyectos completados. A pesar de esa trayectoria, el estudio no tenía presencia digital. Su identidad visual es particular: inspirada en la fluidez del agua y las mareas, con una paleta deep teal que evoca las costas de Guanacaste. Necesitaban un sitio que fuera vitrina profesional y que estuviera a la altura de ese nivel de trabajo.
Desarrollamos un sitio estático con Astro 6 y Tailwind CSS 4: cero JavaScript innecesario, carga instantánea. El hero ocupa la pantalla completa con un video a velocidad cinematográfica (0.75×) y un overlay diagonal en deep teal — la primera impresión es inmersiva y refleja la filosofía del estudio. Para el portafolio usamos Astro Content Collections con schema Zod: cada proyecto es un archivo Markdown con su galería de imágenes, que el cliente puede actualizar sin tocar código. Sitemap automático, fuente Inter Variable auto-hosted y deploy continuo en Vercel.
- 01
Sistema de diseño
Tradujimos la identidad de Marée a tokens de diseño: paleta deep teal (#023D4B), tipografía Inter Variable auto-hosted, espaciado generoso y líneas finas. Cada elemento visual refleja la filosofía del estudio — fluidez, precisión y conexión con el entorno natural costero.
- 02
Hero cinematográfico
El video de fondo corre a 0.75× de velocidad para una sensación más contemplativa. Implementamos un fade automático al final del loop para cubrir el salto de reinicio: un detalle invisible para el usuario final, pero que elimina una fricción visual importante. En dispositivos con prefers-reduced-motion activo se muestra una imagen estática.
- 03
Portfolio con Content Collections
Cada proyecto del portafolio es un archivo Markdown con schema tipado: título, ubicación, año, categoría, galería de imágenes y orden de aparición. Astro Content Collections valida los datos en build time con Zod. El filtro de categorías en la vista de proyectos funciona con JavaScript nativo sin librerías adicionales.
- 04
SEO y deploy
Sitemap automático via @astrojs/sitemap. Metadatos semánticos (title, description, og:image) en cada página. Deploy en Vercel con CI/CD: cada push a main publica automáticamente, con preview por branch para revisar cambios antes de publicar en producción.
-
Los detalles de animación que nadie nota conscientemente son los que elevan la percepción de calidad. El fade del video loop tomó pocas horas de trabajo — pero su ausencia habría dejado una fricción visual que el cliente habría sentido sin saber nombrarla.
-
Astro Content Collections es la solución ideal para portfolios que evolucionan: el cliente gestiona su contenido sin depender del equipo de desarrollo. En el caso de Marée, el estudio puede agregar un nuevo proyecto editando un solo archivo Markdown.
¿Te interesa este tipo de solución?
Cuéntanos tu contexto. Si podemos ayudarte, te decimos exactamente cómo y cuánto tardaríamos.