Who is this template for?
Designers who need their work explained, and developers who have to build it.
For designers: a dark, type-led editorial layout where typography carries as much weight as the imagery. The whole design system lives in one token block, and a style guide page renders it live — retheming is a colour value away.
For developers: every copy string sits in a typed data file, and every motion effect is its own module. TypeScript strict, and no build config to fight.
Features
Case studies that go deep. Five complete case studies in MDX with a 12-component library: figure formats, pull quotes, constraint rails, data matrices, material ledgers, a scroll-linked timecode timeline, and animated results. A typo in the frontmatter fails the build, not the page.
Motion that responds to the reader. Masked line reveals, a pinned horizontal project strip, parallax, odometer counters, marquees, and an accent cursor — each effect its own module. Delete one line to remove a feature.
Built to be edited. Change your name, services, testimonials, FAQ, or navigation without opening a component. Retheme the entire site from a single @theme block: colours, type scale, spacing, and motion easing all flow from there.
Pages & Sections
Seven page templates:
- Home — hero, manifesto, pinned horizontal project strip, services with an interactive figure plate, skills marquee, about preview, animated stats, testimonial wall, collaborators, FAQ, closing CTA
- Work — project index with discipline filters and featured tiles
- Case study — dynamic route generated from MDX, five written examples included
- About — full-bleed hero, bio, capabilities, experience timeline, tools
- Contact — details, socials, and a form ready for your backend
- Style guide — your live design system: tokens, type scale, every component
- 404 — with a route index so nobody dead-ends
Tech Stack
- Astro 7 — latest major version, static output by default
- Tailwind CSS v4 via the Vite plugin, CSS-first configuration
- GSAP 3 + ScrollTrigger for scroll-driven motion
- Lenis for smooth scrolling
- MDX content collections with schema validation
- TypeScript, strict mode
- Four self-hosted font families with metric-adjusted fallbacks
Additional Highlights
- Complete SEO: meta tags, Open Graph, Twitter cards, canonical URLs, JSON-LD, sitemap, robots.txt
- Accessibility: WCAG AA contrast on every text token, keyboard navigable, reduced-motion support throughout
- Audited with Lighthouse on the demo build: 100 for accessibility, best practices, and SEO
- View Transitions for instant navigation without a SPA framework
- Responsive from 375px through ultrawide
- Deploys anywhere that serves static files
- Full source, a documented README, and a commercial license for unlimited personal and client projects
