What is inside
Banyan Studio is built for creative teams that want the work to lead. Its dark visual system, animated navigation and responsive project imagery give the portfolio a premium feel without adding a client-side framework.
Static everywhere but the form
Only the contact route runs on demand; every other page is prerendered HTML. Nothing waits on a server to paint.
An animated fullscreen menu
Focus trap, Escape to close, focus restored where it was, and the current route highlighted. The closed menu is inert, not just hidden.
A works portfolio in MDX
Each case study is a file with its own cover, tags and client. Related projects are resolved automatically, with no manual linking.
Reveals you add with an attribute
Scroll animations and hero intros come from data attributes read by one shared library. No per-component scripts to copy around.
One Lenis instance, synced to GSAP
The scroll engine and the animation ticker share a clock, which is what keeps a pinned section from drifting against the page.
A dark design system with real tokens
Colour is defined once in the theme block and used nowhere else as a literal. The template is dark by design, with no half-finished light mode to fight.
A contact form behind a provider interface
Zod validation, honeypot, Upstash rate limiting and Resend delivery. Swapping the email provider is one file, not a rewrite.
Accessible by construction
Skip link, focus-visible rings offset against the page, inert on hidden regions and labelled icon buttons.
Typed content collections. You write a file, and the listing, the detail page, the feed and the sitemap pick it up on the next build.
src/content/projects/*.mdxCase studies with cover, tags, client and a brand icon. Marking one as featured surfaces it on the home page.src/content/legals/*.mdTitle and description only. Each file becomes a route.src/config/*.data.tsNavigation, social links and the structured data the sections render, all typed.---
title: 'Apex Logistics'
description: 'Short summary of the project.'
coverImage: '../../assets/projects-img/apex-logistics/apex-logistics-01.webp'
tags: ['Web Development', 'UI/UX']
clientLink: 'https://example.com'
date: 2026-01-15
client: 'Apex'
featured: true
icon: 'logoipsum-1'
---The copy
src/config/labels.tsAll copy, SEO metadata and aria-labels in one typed file. An unknown key fails the build, so a rename can never leave a blank on the page.
The typefaces
astro.config.mjsThree local families served through Astro's font API and preloaded in the head. Adding one is a file, a line in the config and a token.
The palette
src/styles/global.cssEvery colour is a token in the theme block, including the accent set used for badges. If a class is not backed by a token it does nothing, by design.
Both have a free tier, and the contact form needs them: the ZIP ships an .env.template with the variables to fill in.
A README written for this template, not copied between them, inside the ZIP. It covers:
Try any demo before you decide
The demos are the real templates, deployed. No signup, no email in the way.