Skip to content
noel.marketing
Deutsch
Astro ThemeAvailable now

Noctyra

Noctyra Astro Theme — Editorial Portfolio for Designers

An editorial Astro portfolio for designers with broken-grid layout, MDX case studies, services, journal, and vermillion accent dark mode.

€29.00

Noctyra 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.

Noctyra

€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://noctyra.pages.dev/Demo

Why it fits

Why this Astro theme

  • Broken-grid editorial layout with sharp corners and vermillion accent

  • MDX case studies and journal via content collections

  • Services and about pages for studio positioning

  • Light and dark modes with WCAG-minded contrast tokens

  • Fullscreen opaque mobile menu with focus trap

  • Lenis, GSAP, Motion, and anime.js with reduced-motion support

Built for

Perfect for

Typical scenarios this product is designed to support.

  • Designer portfolio websites
  • Creative studio showcases
  • Brand and visual identity case studies
  • Freelance design practices
  • Editorial personal brands

In the box

Features

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

  • Broken-grid editorial portfolio for designers and creative studios
  • MDX project case studies and journal via content collections
  • Home, work, about, services, blog, and contact routes included
  • Light and dark mode with vermillion accent and sharp corners
  • Fullscreen opaque mobile menu with focus trap
  • Lenis, GSAP, Motion, and anime.js with reduced-motion support
  • Formspree-ready contact form with mailto fallback
  • Sitemap, robots.txt, llms.txt, and Open Graph tags

Editorial portfolio for designers

Noctyra is an editorial portfolio theme for designers — built with Astro 7, TypeScript, MDX, and Tailwind CSS. Broken-grid layout, fullscreen mobile menu, light/dark mode, project case studies, and a carefully scoped motion stack.

Demo copy and @example emails are intentional placeholders. Site identity, navigation, and Formspree settings live in src/config/site.ts. Syne and Plus Jakarta Sans ship via Fontsource.

Work, services, and journal

Home layers hero, selected work, services, process, testimonials, and CTA. Dedicated routes cover the project index and case studies, about, services packages, MDX blog, and contact. Project covers can start as license-safe CSS gradients, then swap to your photography when ready.

Motion uses Lenis on desktop, GSAP ScrollTrigger for reveals, Motion for button micro-interactions, and anime.js for menu choreography. prefers-reduced-motion disables Lenis and GSAP scroll effects.

Feature highlights

  • Astro 7 with Tailwind CSS 4, TypeScript, and MDX collections
  • Broken-grid layout with zero soft radii and vermillion accent
  • Work, about, services, blog, and contact routes included
  • Formspree-ready contact with mailto fallback
  • Lenis, GSAP, Motion, and anime.js motion stack
  • Sitemap, robots.txt, llms.txt, and Open Graph tags

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 Noctyra built for?

Designers and creative studios that want an authored editorial portfolio — not a generic template look — with case studies, services, and a journal.

Which pages are included?

Home, Work index and case studies, About, Services, Blog index and articles, Contact, and 404.

How do I add projects and posts?

Add MDX files under src/content/projects/ and src/content/blog/ with the documented frontmatter fields. Featured order and cover treatments are controlled in frontmatter.

How does the contact form work?

Set contact.formspreeId in src/config/site.ts. If empty, the form falls back to mailto so static hosting still works.

Where can I deploy Noctyra?

Noctyra builds to static dist output for Vercel, Netlify, Cloudflare Pages, or GitHub Pages.