Arquitetura Demonstration project
Studio Meridiano — architecture practice
A near-monochrome, typography-first site for an architecture studio: strict Swiss grid, museum-label captions in mono, and every project drawn as an original SVG floor plan — no stock photography anywhere.
feitura.pt/demo/meridiano — Live
A seven-person architecture practice in Porto needs a portfolio site as disciplined as its buildings. No photography until projects are professionally shot — the work must be shown through plan drawings, precise labels and text. It has to feel like a printed monograph and load instantly on a phone.
What's inside
- Six original top-view floor plans drawn as inline SVG line art
- Project index with typology filter (residential, cultural, adaptive reuse)
- Expandable museum-label project notes per work
- Manifesto section set in large light serif
- Scroll-triggered reveals via IntersectionObserver, reduced-motion safe
- Enquiry form with site, project nature and inline confirmation
- Typographic team and recognition lists — zero images, zero stock
- Self-hosted variable fonts pushed to extreme light weights
Build log
- Design system: warm-grey palette, mono label voice, Swiss grid + hero
- Drew the six SVG floor plans — walls, door swings, hatching, north arrows
- Works index: typology filter, expandable project notes, museum labels
- Manifesto in light serif + practice phases; tuned type scale across breakpoints
- Team and recognition lists, enquiry form with demo sink, mobile nav
- Scroll reveals with reduced-motion guard, contrast pass, final copy edit
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- SVG
Lighthouse
97
Performance
100
Accessibility
100
Best practices
100
SEO