Fasi
An image-led portfolio for an architecture and design studio, built around project photography, restrained typography, and editorial case studies.
- Client
- Fasi Studio
- Year
- 2026
React 19 · TypeScript · Vite · Tailwind CSS v4 · Zod · Cloudflare Pages · Playwright
Live Site
01 Product overview
What the product does
Fasi is a static architecture portfolio for a studio working across architecture, visualization, landscape, technical documentation, digital presentation, and furniture design. The site gives approved project imagery the lead, then supports it with studio principles, services, editorial project sequences, magazines, and direct contact details.
02 Problem and context
What it needed to solve
Architecture portfolios need to preserve image quality and narrative pace without becoming slow, fragile galleries. Fasi needed a clean public site, a reliable way to add projects and publication records, and metadata that stayed accurate across every route.
03 My contribution
What I worked on
- Built the complete responsive website and its content validation system
- Designed the structured project media model and editorial project pages
- Implemented prerendering, route metadata, sitemap generation, image checks, and Cloudflare Pages deployment
05 Engineering and outcomes
Implementation details
System
- React, TypeScript, Vite, and Tailwind CSS v4 with local Instrument Sans and Source Serif font assets
- Zod-validated JSON records for projects, media, studio content, services, magazines, navigation, and contact details
- Responsive WebP image sources with recorded dimensions, alt text, captions, and asset provenance
- Static prerendering for public routes, per-page metadata, a generated sitemap, and a real 404 response
Lessons
- Editorial restraint depends on content discipline. Image selection, dimensions, credits, and ordering need as much care as the layout.
- A static site can still have a strong content workflow when schemas, file checks, route generation, and build validation share one source of truth.
- Architecture imagery should retain its intended crop. Responsive sources need explicit fit and focal-position decisions instead of one global image rule.