The George

Explore
Hero image of The George townhomes in Coral Gables

Project Overview

A static marketing site for The George, a collection of 13 luxury townhomes in Coral Gables developed by MG Developer and rooted in the architectural legacy of George Merrick. The goal was a fast, image-rich site that presents the residences, the neighborhood and the people behind the project with the polish of a luxury brand.

Key Features

  1. Responsive Media Pipeline: Every image and video is served from Cloudinary with automatic format and quality, responsive srcset from 640 to 2400px, and image dimensions read at build time to prevent layout shift.
  2. Performance Tuning: Deferred and compressed the hero video with a responsive poster, self-hosted a subset WOFF2 display font, and capped oversized hero images to improve load times.
  3. Gallery & Lightbox: A site-wide PhotoSwipe zoom lightbox and an Embla autoplay carousel that re-initializes correctly across page transitions.
  4. Smooth Navigation: Astro page transitions, a header that pins as a compact bar on scroll, and a full-screen menu built on the native dialog element.
  5. Accessibility: Reduced-motion support, focus management in the menu, visible focus rings and fixes for layout shift when the menu opens.
  6. Contact Form: A Formcarry-powered inquiry form with honeypot spam protection and an inline confirmation message.

Technologies Used

  • Astro 6 & TypeScript: Static output with strict TypeScript and component-scoped CSS built on design tokens.
  • Cloudinary: Image and video delivery with on-the-fly transforms.
  • PhotoSwipe & Embla Carousel: Lightbox zoom and carousel interactions.
  • Formcarry: Form handling without a backend.
  • Dev Containers, Devbox & Prettier: A reproducible development environment with consistent formatting.
  • Cloudflare Pages: Hosting and deployment.

Results

The site covers the full buyer journey across home, residences, neighborhood, gallery, visionaries and contact pages, with the heavy media of a luxury listing delivered through a responsive, optimized pipeline.

The project was run with a professional workflow: more than 100 conventional commits, a pull request for every change, a protected main branch and a project board tracking the work from start to finish.