Astro ThemeAvailable now

HomeArchitect

HomeArchitect Astro Theme — Architecture Portfolio Template

An Astro architecture portfolio theme with masonry projects, before/after storytelling, Markdown blog, and calm dark-mode design tokens.

€39.00

View demo

Secure checkout via Lemon Squeezy

Available payment methods may vary by device and region.

HomeArchitect preview — View live demoScroll to preview ->

View demo

Secure checkout via Lemon Squeezy

Available payment methods may vary by device and region.

HomeArchitect

€39.00

Demo

Instant download
Static & SEO-ready
No CMS required
Secure checkout

Live preview

Preview the theme in-browser

Explore the real hosted demo directly on the product page, or open it in a dedicated tab.

Open full preview

https://homearchitect.pages.dev/Demo

Why it fits

Why this Astro theme

Split asymmetrical hero built for architectural photography
Masonry portfolio grid with dedicated project detail pages
Before/after case study section for renovation narratives
Markdown blog via Astro content collections
Token-driven dark mode with accessible theme toggle
Sitemap, Open Graph, Twitter cards, robots.txt, and llms.txt

Built for

Perfect for

Typical scenarios this product is designed to support.

Architecture studio websites
Residential design portfolios
Interior architecture practices
Boutique design studio launches
Project case-study showcases

In the box

Features

Concrete pages, modules, and capabilities included in the download.

Split asymmetrical hero with calm architectural art direction
Masonry portfolio grid with dedicated project detail pages
Before/after case study section for renovation storytelling
Markdown blog via Astro content collections
Dark mode with localStorage persistence and no flash on load
Duotone image treatment via CSS tokens
Accessible navigation drawer with focus trap and scroll lock
Sitemap, Open Graph, Twitter cards, robots.txt, and llms.txt

Architecture portfolios, calmly composed

HomeArchitect is a commercial Astro 7 theme for architecture portfolios and design studios. Split hero, masonry project grid, before/after storytelling, and a Markdown blog — all static, typed, and easy to restyle through CSS tokens.

Site identity, navigation, homepage sections, and projects live in central data files. Replace demo photography with your practice imagery, run the image prep script, and keep alt text meaningful.

Projects, journal, and dark mode

Project detail pages generate from projects.ts. Blog covers map to optimized assets in src/assets/. The header uses a solid bar with a mobile navigation drawer that includes focus trap and scroll lock.

Duotone image treatment and Snow / Onyx / Ultramarine tokens give the theme a consistent premium grade. Dark mode persists in localStorage and falls back to prefers-color-scheme on first visit.

Feature highlights

Astro 7 with Tailwind CSS v4 and TypeScript strict mode
Masonry portfolio plus /projects/[slug]/ case studies
Before/after section and Markdown content collections blog
Accessible mobile drawer with focus trap and scroll lock
SEO-ready sitemap, Open Graph, robots.txt, and llms.txt
Deploy static dist/ to Cloudflare Pages or any static host

Next step

Pairs well with this

Related products that fit the same product line, stack, or launch workflow.

AccountingFirm

€49.00

A polished Astro theme for accounting firms, CPAs, and financial advisors with aurora design, dark mode, and conversion-ready service pages.

astro theme

AIAgency

€39.00

An editorial Astro 7 theme for AI studios — EN/DE, work case studies, services, blog, and subtle motion.

astro theme

AISaaS

€39.00

A minimal, conversion-focused Astro theme for AI SaaS products with dashboard preview, comparison, pricing, and MDX blog.

astro theme

Ready to launch

Start building today

Get instant access after checkout. Download the full source, customize locally, and deploy to your host.

View demo

Secure checkout via Lemon Squeezy

Available payment methods may vary by device and region.

Not ready to buy yet?

Get the free launch checklist for this stack — plus practical resources, product updates, and occasional subscriber discounts.

Frequently asked questions

Who is HomeArchitect built for?

Architecture portfolios, design studios, and practice websites that need a calm, premium static presence with project detail pages and a studio journal.

Which pages are included?

Home with sectional storytelling, projects index and detail routes, blog index and posts, plus supporting routes defined in the theme package.

How do I manage projects and blog posts?

Projects live in src/data/projects.ts with detail pages at /projects/[slug]/. Blog posts are Markdown files in src/content/blog/ with frontmatter for title, description, date, cover, and tags.

Does dark mode flash on load?

No. An inline boot script in SEOHead applies the saved or system theme before paint, and tokens live under light and dark CSS variables.

Where can I deploy HomeArchitect?

Deploy the static dist folder to Cloudflare Pages or any static host. Set the production site URL in astro.config.mjs and site.ts before building.