Simon Eramo Studio · 2026
Falcon 1 — Master Site Template
A production-ready Astro site template that compresses days of boilerplate setup into a single CLI command — with CMS, contact forms, a block-based page builder, and WCAG 2.1 accessibility baked in from day one.
Role
Product Designer & Full-Stack Developer
Version
2.0.0
Stack
Astro 5 · TinaCMS · Tailwind CSS v4 · Alpine.js · Resend · Vercel
Overview
Executive Summary
Falcon 1 is a production-ready Astro site template designed to dramatically reduce the time it takes to launch a new client website — from days of boilerplate setup down to a focused strategy session and a single CLI command.
Rather than a simple starter kit with a hero section and a nav bar, Falcon 1 is an opinionated, full-featured platform — complete with a CMS, a contact system, a flexible block-based page builder, a 3-tier page architecture, a Project Starter CLI tool, and WCAG 2.1 accessible components across the board.
The Challenge
The Boilerplate Loop
For a solo developer or boutique agency, spinning up a new client site involves a predictable, exhausting loop — repeating the same tasks before writing a single line of client-specific code.
- Copy files from the last project and strip out client-specific content.
- Rebuild the same FAQ, CTA, and contact form components — again.
- Reconnect CMS schemas to fresh content collections.
- Configure email delivery, environment variables, and deployment adapters.
- Do all of this before writing a single line of client-specific code.
- Configuration drift means each project subtly diverges from the last.
This repetition isn't just inefficient — it's risky. Configuration drift means each project subtly diverges from the last, making it harder to apply improvements retroactively or share patterns across codebases.
The Solution
Build Once, Deploy Everywhere
Falcon 1 approaches the problem at two levels:
Master Template Repository
The canonical source of truth for every component, page, schema, and style pattern.
Project Starter CLI
Scaffolds a new project from the master template, selecting only the pages and features the client needs.
Together, they eliminate the setup phase. A new project
is ready to receive client content within minutes of the first git clone.
3-Tier Page System
Pages categorised as Core (always included), Common (opt-out), or Optional (opt-in) — driving a principled, data-driven scaffold process.
Block-Based Page Builder
A flexible page system where non-technical editors compose pages from pre-built blocks via TinaCMS — no developer needed for new layouts.
TinaCMS Visual Editing
Content lives as Markdown in Git with visual editing via the TinaCMS admin UI. Rollbacks are a git revert away.
Contact Form via Resend
Full contact form with centered and split layout variants, powered by a Resend serverless API route — no SMTP config required.
WCAG 2.1 Accessible
Semantic HTML5, skip-to-content links, full keyboard nav, ARIA labels, high-contrast theme, and focus-visible styles on everything.
SEO Built-In
Dynamic title/meta tags from CMS content, Open Graph, Twitter Cards, JSON-LD structured data, and auto-generated XML sitemap.
Architecture
3-Tier Page System
The most important architectural decision — a principled data model that drives the entire scaffold process.
Tier 1 — Core
Required on every site, non-negotiable
Homepage, About, Contact, 404, Privacy Policy
Tier 2 — Common
Standard business pages, included by default
Services, Blog, FAQ, Pricing, Process, Team
Tier 3 — Optional
Specialised pages, toggled per project
Portfolio, Careers, Reviews, Events, Partners, Book
Configuration is driven by template.config.json — a single source of truth that maps pages to their content collections, CMS fields, and default states. The starter tool logic is entirely data-driven.
Components
Pre-Built Component Library
Every component is a typed Astro .astro file — no React, no Vue, no framework dependency.
</> HeroSection
Homepage hero — split, centered, and bold variants
</> PageHeroSection
Interior page hero — center or left aligned
</> CTASection
Call-to-action block — reusable across pages
</> FAQ
Interactive Alpine.js accordion — center / left variants
</> ContactForm
Full form with centered and split layouts
</> PricingTiers
Pricing cards with feature lists
</> BlockRenderer
Maps CMS block templates to Astro components
</> TestimonialsMarquee
Animated scrolling testimonials strip
Engineering
Technical Decisions
Every dependency was chosen deliberately — optimised for developer experience, performance, and long-term maintainability.
Astro 5
Island architecture delivers zero JavaScript by default. Content Collections provide end-to-end typing for all Markdown, preventing an entire class of runtime bugs when content schemas drift.
TinaCMS
Visual editing without locking content into a proprietary database. Content lives as Markdown in Git — version-controlled, rollback-friendly, and builds with no external API dependency.
Tailwind CSS v4
CSS-native configuration via @theme reduces boilerplate. The design system — high-contrast black/white palette, 2px borders, Inter variable font — is defined once and flows through every component.
Alpine.js
Reactive interactivity (mobile menus, dark mode, FAQ accordions, form states) without a build step or component framework. Pages stay fully static-renderable with minimal bundle overhead.
Resend
Developer-first API with a generous free tier and first-class Vercel integration. Replaces complex SMTP relay configuration with a single serverless API route.
Vercel
Edge-deployed with zero-config from the Astro adapter. Git push → production deploy. Preview deployments for every PR. The natural deployment target for SSR-capable Astro sites.
Process
Launching a New Project
The entire foundation — routing, CMS, email, dark mode, accessibility, SEO, sitemap — is already in place. The developer's attention goes to what's actually unique about the client.
Run Project Starter CLI
Select pages, name the project — Tier 1 always included, Tier 2/3 toggled per client.
Connect TinaCMS
Create a TinaCMS project, copy API keys into .env. Visual editing is live.
Connect Resend
Add Resend API key for contact form email delivery — one environment variable.
Push to Vercel
Push to GitHub, import into Vercel. Git push → production deploy, preview on every PR.
Customise & Launch
Brand, content, copy. The foundation — routing, CMS, email, dark mode, a11y, SEO — is already done.
Impact
The Result
Falcon 1 v2.0.0 represents a mature, opinionated platform rather than a starter kit. It encodes months of accumulated decisions about how to structure Astro projects for client work — from content modelling to deployment — into a single, reusable repository.
- Days compressed into minutes — new projects are client-ready within minutes of the first git clone.
- Zero configuration drift — every project starts from the same canonical master template, with improvements applied once and inherited everywhere.
- Production-grade from first run — CMS, contact forms, dark mode, accessibility, SEO, and sitemap are all functional before the developer writes a single line of client-specific code.
- Compounding advantage — each deployment reinforces the template. Bugs fixed once, patterns proven once, improvements shared instantly across all future projects.
💡 Building a template that's truly reusable requires resisting the urge to hardcode anything client-specific — a discipline that pays off enormously on the second project, and becomes a compounding advantage with each new deployment.