Architecture Portfolio Website Template
Demo brand: DUNARROW · Architecture studio · 23 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this architecture portfolio website template
A complete website for an architecture or design studio: a project strip in the hero, a filterable project index, nine project pages with fact sheets, services with fee stages, the studio, a journal, an FAQ and a multi-step project brief. Twenty-three built pages, all driven by content files.
It looks like a gallery. Gallery-white pages, near-black type set very large, real building and interior photography carrying all the colour, a concrete-textured band, and one ochre accent used sparingly. Epilogue for headings, Red Hat Text for everything else.
Every section answers what a client wants to know before calling an architect: what have you built, what kind of work do you take on, what will it cost and in what stages, and what happens first. The fee-stage table and the project brief do that on the page. Motion is one soft reveal.
The 23 pages you get
- Home
/ - Huge wordmark and a sideways project strip, promises, selected projects, the studio band, the first three weeks, brief shortcuts, the fee-stage table, client quotes on project photos, news and FAQ.
- Projects
/projects/ - Filter by type, status and year, switch between grid and list, with filters kept in the URL.
- Project pages
/projects/…/ - Nine projects. Gallery, fact sheet (location, area, year, status, client, team), text and next/previous project.
- Services and fees
/services/ - Work stages with what is delivered, duration and share of fee, with common questions inside each stage.
- Studio
/studio/ - The practice, the team and awards, without face photos.
- Journal
/journal/ - A text-only news list. Add an .mdx file and it appears here.
- Articles
/journal/…/ - Four written pieces on fees, sections and adaptive reuse.
- FAQ
/faq/ - Plain questions and answers.
- Contact and brief
/contact/ - A four-step project brief with progress and a summary, pre-filled from any "start a project" link.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the projects.
What is in the build
- Projects as content: gallery, fact sheet, typology, status and year in one Markdown file per project
- A filterable project index with grid and list views, working without JavaScript
- A sideways project strip in the hero that never makes the page scroll sideways
- A fee-stage table and a four-step project brief form with validation and summary
- Real architecture photography, optimised to AVIF and WebP by Astro
- All studio details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- A gallery-white architecture practice: near-black type set large, real building and interior photography, a concrete-textured band, and one ochre accent used sparingly.
- The mechanic
- A portfolio built to win commissions: a horizontal project strip under a huge wordmark, a project index filtered by type, status and year with a grid/list toggle, project fact sheets, a fee-stage table and a four-step project brief. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Contemporary architecture photography, no people
- Type & palette
- Epilogue · Red Hat Text
-
#f7f7f5#161615#8f6310
Who it is for
Built for architects, interior designers, landscape architects and small design-and-build studios, and a good fit for photographers or furniture makers with a project-led portfolio. It suits a practice that wins work through its built projects and a clear fee structure.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
How do I add a project?
Add a Markdown file with its photos, typology, status, year and fact-sheet fields. It appears in the index, in the filters, in the hero strip if you mark it, and in next/previous navigation.
Where does the project brief go?
The form posts nowhere by default. Point it at your form backend or CRM; the README shows how. Without JavaScript it works as one long form.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md. Recognisable landmark buildings were left out.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More studios & agencies templates
Roomtone Recording
Recording studio
Loud
Moving set-piece
BRANTHOLM
Photographer / creative portfolio
Loud
Imagery
VOLTA & CO.
Creative agency
Loud
Display type
HULVER STUDIO
Interior design studio
Loud
Palette