Menfez Architects
A showcase site for a fictional architecture studio: a project gallery that flows sideways as you scroll, a filterable archive and a detail page for every project.
Concept design and development · 2026
This is a demo site; the studio name, team and contact details are fictional.
The brief
Architecture firms’ sites often look either like a photo album or a corporate brochure; the scale, material and place of the work get lost. The goal was a studio site concept that walks you through projects like an exhibition but lets you find what you’re looking for quickly.
What I did
On the home page scrolling turns from vertical to horizontal: as obliquely cut project tiles pass in front of the screen, the studio’s name stays fixed in giant letters at the bottom. The project archive has city and program filters and a switch between grid and list. Each project’s details, gallery and similar projects are gathered on a single detail page.
Result
The concept can be explored live inside this portfolio. For a real firm, the same design can go live by changing the content in the data file.
Technical decisions
The site is fully static: pages are generated from a shared template by a small Node script, and the projects live in a single data file. Motion uses GSAP ScrollTrigger. Headline masks were given extra room so that the dots and cedillas of Turkish capitals aren’t clipped at tight line heights.
- HTML / CSS
- JavaScript
- GSAP
- ScrollTrigger
Highlights
- An oblique project gallery that pins and flows sideways on scroll
- A project archive filtered by city and program
- Detail pages for 16 projects generated from one template
- A static build that needs no server
Thinking of something similar?
