← BackProject · 08
HEAS Architecture Website
React · TypeScript · Tailwind CSSGITHUB ↗
- The challenge was performance and maintainability together: an architecture portfolio with hundreds of high-resolution images that needed to feel fast, and a content structure the studio could extend without touching component code.
- Masonry gallery preserves each image's natural aspect ratio using CSS aspect-ratio + object-cover: no distortion, no forced heights. The layout stays visually consistent regardless of whether an image is portrait, landscape, or square.
- Lazy loading via the native loading='lazy' attribute defers off-screen images until they approach the viewport. Combined with explicit width and height attributes to prevent layout shift, initial page load stays under 2s even on mobile despite the visual density.
- 20+ routes are generated dynamically from a centralized data structure; one route template handles all project pages, news articles, and category views. Adding a new project section requires a single data entry, not a new component or route definition.
- This data-driven architecture reduced future content-section development time by ~60%. The studio can ship new work without a developer involved in the content update.
- Deployed to Vercel with automated CI; image assets are served through Vercel's CDN with aggressive cache headers, keeping repeat visits nearly instant.
Tech Stack
REACT
REACTTYPESCRIPT
TYPESCRIPTTAILWIND CSS
TAILWIND CSS