Websites · React
Architecture studio
Editorial architecture practice site with selected projects, the studio's approach, a short history and the team.
What you get
A portfolio-led site for an architecture practice: a large editorial hero, selected built work, how the studio approaches a brief, key moments, the team and a project enquiry form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Holm Arkitekter", "nav": [ { "label": "Work", "href": "#work" }, { "label": "Approach", "href": "#approach" }, { "label": "Studio", "href": "#studio" }, { "label": "Contact", "href": "#contact" } ], "sections": [ { "kind": "hero", "variant": "editorial", "eyebrow": "Architecture & interiors · Aarhus", "title": "Quiet buildings in timber, brick and light.", "text": "Holm is a studio of nine architects working on housing, schools and small public buildings across Denmark and southern Sweden.", "primary": { "label": "Selected work", "href": "#work" }, "secondary": { "label": "Start a project", "href": "#contact" }, "visual": { "type": "tiles", "tones": [ "#57534e", "#a8a29e", "#78716c", "#292524" ], "caption": "Fjordhuset housing, Aarhus Ø · 2025" } }, { "kind": "projects", "id": "work", "eyebrow": "Selected work", "title": "Recent projects", "items": [ { "title": "Fjordhuset", "tag": "42 homes · Aarhus Ø", "year": "2025", "tone": "#44403c" }, { "title": "Skovbakke School", "tag": "Primary school extension · Silkeborg", "year": "2024", "tone": "#6b5a48" }, { "title": "Ladegården Library", "tag": "Public library · Lund", "year": "2023", "tone": "#3f4a3c" }, { "title": "House on Mols", "tag": "Private summer house · Djursland", "year": "2022", "tone": "#7c6f62" } ] }, { "kind": "split", "id": "approach", "eyebrow": "Approach", "title": "We start with how a place is used on an ordinary Tuesday.", "text": "Before drawing, we spend time on site and with the people who will live or work there. Then we keep the material palette short and the details honest.", "bullets": [ "Bio-based materials wherever the budget allows", "Whole-life carbon reported for every project", "Same project architect from sketch to handover" ], "visual": { "type": "card", "tone": "#292524", "title": "What a first meeting covers", "lines": [ "Site, brief and budget", "Planning constraints", "Timeline and our fee basis" ] } }, { "kind": "stats", "items": [ { "value": "9", "label": "Architects in the studio" }, { "value": "31", "label": "Completed buildings" }, { "value": "2011", "label": "Founded in Aarhus" }, { "value": "60%", "label": "Of work in timber since 2020" } ] }, { "kind": "timeline", "id": "studio", "eyebrow": "Studio", "title": "A short history", "items": [ { "period": "2011", "title": "Founded", "text": "Mette Holm opens the studio above a bike shop on Mejlgade with two kitchen extensions." }, { "period": "2016", "title": "First public building", "text": "A community hall in Hasle, built from local larch, wins the municipality's open competition." }, { "period": "2020", "title": "Timber first", "text": "The studio commits to timber or masonry structures for all new buildings under five storeys." }, { "period": "2025", "title": "Fjordhuset completes", "text": "Our largest project to date: 42 cooperative homes on the Aarhus waterfront." } ] }, { "kind": "team", "eyebrow": "People", "title": "Partners and project architects", "items": [ { "name": "Mette Holm", "role": "Founding partner", "tone": "#44403c" }, { "name": "Anders Lund", "role": "Partner", "tone": "#57534e" }, { "name": "Sofie Brandt", "role": "Project architect", "tone": "#6b5a48" }, { "name": "Jonas Eriksen", "role": "Project architect", "tone": "#3f4a3c" } ] }, { "kind": "contact", "eyebrow": "Contact", "title": "Tell us about your site", "text": "We take on six to eight new projects a year. Send a few lines about the site, the brief and your timing.", "fields": [ "name", "email", "company", "message" ], "button": "Send project enquiry" } ], "footer": { "text": "Architecture and interiors from Aarhus.", "columns": [ { "title": "Studio", "links": [ "Mejlgade 48, 8000 Aarhus C", "+45 86 12 40 77" ] }, { "title": "Work", "links": [ "Housing", "Schools", "Public buildings" ] }, { "title": "Follow", "links": [ "Instagram", "LinkedIn" ] } ], "legal": "© Holm Arkitekter. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Architecture studio's files. The box is already started for you: finish “Start from Architecture studio and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Boutique hotel
Elegant small-hotel website with rooms and rates, the restaurant, guest notes, arrival details and a stay request form.
Static website
Plain HTML, CSS, and JavaScript with no build step. Ideal for simple sites and learning.
Animal rescue charity
Warm animal rescue site with animals looking for homes, how adoption works, monthly giving and volunteer sign-up.
Build on Architecture studio
Create a free account, start from this template, and ask the AI agent to turn it into your app.