Colophon
How this site is built.
Static HTML, a little JavaScript where it earns its place, and a logo drawn entirely in SVG. Here is everything under the hood.
Architecture
Islands, not a single-page app.
Every page renders to full HTML at build time. No empty <div id="root"> shells.
Components are written in React, but Astro runs them once on the build machine and ships the result
as plain HTML. JavaScript loads only where something actually has to respond to you, as isolated
islands that hydrate on their own.
Islands
Navbar
client:loadFixed nav with the mobile menu toggle.
FAQ
client:visibleAccordion. Hydrates only when scrolled into view.
CookieBar
client:loadCookie consent. Loads Crisp chat only after you accept.
Static
Hero
Headline and the riven S, animated in CSS.
Work
Gallery of studio apps with real thumbnails.
Services
What the studio builds.
Process
Intro call to launch, step by step.
Pricing
Engagement cards from offers.ts.
Founder
Bio and credentials.
CTASection
The closing call to action.
Footer
Links, social, copyright.
brand/Logo
SVG mark and outlined wordmark.
brand/RiftMark
Hero-scale riven S. SVG, CSS-animated.
3 of 13 components ship JavaScript. The other 10 render to HTML at build time and send nothing to the browser.
Pages
13 routes, all prerendered
Each route in src/pages/ becomes a static HTML file at build time, with its own
title, description, and canonical URL.
Content
Content as typed data
Apps, engagements, and FAQs live in src/data/. Each file feeds both the visible
section and the page's JSON-LD.
- apps.ts Work gallery + portfolio ItemList
- offers.ts Pricing cards + OfferCatalog
- faqs.ts FAQ accordion + FAQPage
- services.ts Service pages + Service and FAQPage
The stack
Everything that powers it.
From framework to build tool. Short version: it's an Astro site with React components, styled with Tailwind, and almost all of it turns into plain HTML before it ever leaves the server.
Framework
Astro 6
Static site generator. Handles routing, builds every page to plain HTML, and decides which components are allowed to ship JavaScript.
Components
React 19
Every section is written as a React component. Most of them only run at build time, so React never reaches your browser for them.
Language
TypeScript 5.8
Types across components, pages, and the content in src/data/. Strict mode via Astro's config, checked with astro check and tsc.
Styling
Tailwind CSS 4
Utility-first CSS wired straight into Vite with @tailwindcss/vite. Palette and font tokens live in a single @theme block.
Build tool
Vite 7
Ships inside Astro 6. Runs the dev server and hot reload, and bundles the three islands for production.
Icons
Lucide React
Open-source line icons. Static components get them as inline SVG; islands bundle only the icons they import.
SEO
@astrojs/sitemap
Generates the sitemap from the page routes on every build, with last-modified dates taken from git. After each deploy, IndexNow pushes every URL to Bing.
Animation
CSS keyframes + SVG
The hero's rift opening is CSS keyframes on SVG paths. No animation library, zero JavaScript, and it honors reduced-motion settings.
Hosting & services
No servers to babysit.
Hosting, DNS, and the few third-party services the site leans on. No backend of our own to maintain.
Hosting
Render
Static site hosting. A push to main triggers a fresh build and deploy.
DNS
Cloudflare
DNS for skyriven.ai, plus a 301 redirect from skyriven.com.
Forms
Formspree
Receives the contact form. No server-side code of our own.
Google Workspace
Email for the skyriven.ai domain.
Live chat
Crisp
Loaded only after you accept cookies. Decline and it never loads.
Design system
Daylight above. Dusk below.
Three typefaces, two gradients, and one very dark background. Every font is self-hosted as woff2, so the page makes no third-party font requests.
Typography
Sora
Display. Headings, and the basis of the outlined wordmark.
Inter
Body copy and interface text.
Instrument Serif
Italic. Accent phrases only, like the one in this section's heading.
Color
Abyss
#05070F · background
Sky
Above the rift
Dusk
Below the rift
The mark
The Skyriven logo is an S drawn as one stroke of sky, daybreak to dusk, riven by one straight
slash. It is built as pure SVG paths and rendered in-page by brand/Logo.tsx, so it stays
sharp at any size and costs no image request.
Why this stack
Ship less. Maintain nothing.
Every choice was deliberate. Less code in the browser means faster pages, and fewer moving parts means fewer things to break.
Zero JavaScript by default
Pages arrive as finished HTML. No loading spinners, no hydration waterfalls, nothing a search engine or AI crawler has to execute before it can read the page.
Islands over a single-page app
JavaScript loads only where something has to respond to you: the mobile menu, the FAQ accordion, and the cookie bar. The other 10 components are HTML and CSS.
Animation without a library
The rift opening in the hero is CSS keyframes on SVG paths. It looks the same as a JavaScript animation would, and costs nothing to download.
One source of truth for content
Apps, engagements, and FAQs live as typed data in src/data/. The same arrays render the page and generate the JSON-LD, so the structured data can't drift from what visitors see.
AIO stack open-sourced
The AI-optimization layer of this site (head block, llms-*.txt companions, JSON-LD graph with FAQPage + Speakable) is packaged as AIO-Wizard, an MIT-licensed template stack on GitHub.
No database, no backend
Forms go through Formspree and chat through Crisp. There is no server, no database, and no API to keep running at 3 AM.