Architecture website with brand identity and visual portfolio

Marée Arquitectura, led by architect Narah Wong, has spent over a decade building residences and commercial spaces on Costa Rica's Pacific coast — with more than 150 completed projects. Despite that track record, the studio had no digital presence. Their visual identity is distinctive: inspired by the fluidity of water and tides, with a deep teal palette that evokes Guanacaste's coastlines. They needed a site that would serve as a professional showcase worthy of that body of work.

We built a static site with Astro 6 and Tailwind CSS 4: zero unnecessary JavaScript, instant load times. The hero fills the full screen with a cinematic video (0.75× speed) and a diagonal deep teal overlay — the first impression is immersive and reflects the studio's philosophy. For the portfolio we used Astro Content Collections with a Zod schema: each project is a Markdown file with its image gallery, which the client can update without touching code. Automatic sitemap, self-hosted Inter Variable font, and continuous deployment on Vercel.

1. 01

   Design system

   We translated Marée's identity into design tokens: deep teal palette (#023D4B), self-hosted Inter Variable typography, generous spacing, and fine lines. Every visual element reflects the studio's philosophy — fluidity, precision, and connection with the natural coastal environment.

2. 02

   Cinematic hero

   The background video runs at 0.75× speed for a more contemplative feel. We implemented an automatic fade at the end of the loop to cover the restart jump — a detail invisible to the end user, but one that eliminates significant visual friction. On devices with prefers-reduced-motion active, a static poster image is shown instead.

3. 03

   Portfolio with Content Collections

   Each portfolio project is a Markdown file with a typed schema: title, location, year, category, image gallery, and display order. Astro Content Collections validates data at build time with Zod. The category filter on the projects view works with native JavaScript, no extra libraries needed.

4. 04

   SEO and deploy

   Automatic sitemap via @astrojs/sitemap. Semantic metadata (title, description, og:image) on every page. Deployed on Vercel with CI/CD: every push to main publishes automatically, with branch previews to review changes before going live.

• →

  The animation details nobody consciously notices are exactly what elevate quality perception. The video loop fade took just a few hours of work — but its absence would have left a visual friction the client would have felt without being able to name it.

• →

  Astro Content Collections is the ideal solution for evolving portfolios: the client manages their content without depending on the development team. For Marée, the studio can add a new project by editing a single Markdown file.