Skip to content
noel.marketing
Deutsch
Astro ThemeAvailable now

Midnight Office

Midnight Office Astro Theme — Swiss Freelancer Portfolio

A Swiss editorial Astro portfolio for freelancers — feed-style home, work case studies, Markdown blog, and calm token-driven dark mode.

€29.00

Midnight Office preview
View live demoScroll to preview ->
View demo

Secure checkout via Lemon Squeezy

VisaMastercardPayPalApple PayGoogle Pay

Available payment methods may vary by device and region.

Midnight Office

€29.00

Demo

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://midnight-office.pages.dev/Demo

Why it fits

Why this Astro theme

  • Swiss editorial layout with large-body typography and generous spacing

  • Feed-style homepage with projects, process, testimonials, and blog teaser

  • Case study routes from typed home project data

  • Markdown blog via Astro content collections

  • Token-driven light and dark mode without flash on load

  • Fullscreen mobile menu with Escape, backdrop close, and scroll lock

Built for

Perfect for

Typical scenarios this product is designed to support.

  • Freelancer portfolio websites
  • Independent consultant sites
  • Designer personal brands
  • Writer and strategist portfolios
  • Quiet premium studio-of-one launches

In the box

Features

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

  • Swiss editorial freelancer portfolio with feed-style homepage
  • Case study routes under /work/[slug] from typed home data
  • Markdown blog via Astro content collections
  • Token-driven light and dark mode with flash-free boot script
  • Fullscreen mobile menu with Escape, backdrop, and scroll lock
  • Custom inline SVG icons — no icon CDN
  • Sitemap, robots.txt, and llms.txt included

Swiss editorial for freelancers

Midnight Office is a commercial Astro theme for freelancer portfolios. Swiss editorial layout, feed-style homepage, token-driven dark mode, and a Markdown blog — calm, uncluttered, and free of heavy motion libraries.

Site identity and navigation live in site.ts. Homepage projects and proof sections live in home.ts. Replace fictional demo content and swap WebP assets in src/assets/ before launch.

Work, blog, and navigation

Project cards link to /work/[slug]/ case studies. Blog posts in src/content/blog/ appear on /blog/ and in the homepage “From the Blog” list. The fullscreen mobile menu is a sibling of the header so it covers the full viewport cleanly.

Motion stays restrained — fade-in entrances only, with scroll reveals that respect prefers-reduced-motion and degrade when JavaScript is disabled. Icons are custom inline SVGs drawn for the theme.

Feature highlights

  • Astro 7 with TypeScript and @astrojs/sitemap
  • Feed-style home plus work case studies and Markdown blog
  • CSS design tokens for light and dark themes
  • Fullscreen mobile menu with focus-friendly close patterns
  • Custom inline SVG icon set — no icon CDN
  • Deploy 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 preview

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 preview

AIAgency

€39.00

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

astro theme
AISaaS preview

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

VisaMastercardPayPalApple PayGoogle Pay

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 Midnight Office built for?

Freelancers and independent operators who want a Swiss editorial portfolio with a feed-style home, case studies, and a lightweight blog — without heavy animation libraries.

Which pages are included?

Home, work case studies under /work/[slug]/, blog index and posts, plus privacy and terms placeholders and supporting routes in the package.

How do I edit homepage content?

Section order lives in src/pages/index.astro. Projects, testimonials, benefits, and process steps live in src/data/home.ts. Site name, contact, and navigation live in src/data/site.ts.

How does dark mode work?

A blocking inline script reads localStorage.theme before paint and falls back to prefers-color-scheme. The header theme toggle exposes aria-label and aria-pressed.

Where can I deploy Midnight Office?

Build with npm run build and deploy dist/ — for example Cloudflare Pages with build command npm run build and output directory dist.