Schema: Astro Developer Portfolio Template

About This Template

Schema is a terminal-dark portfolio for full-stack developers and independent engineers. Twelve routes cover home, an alternate home layout, work index and case-study pages, services, a tech stack breakdown, about, journal index and articles, team member profiles, contact, and 404. The hero is a working code-editor pane — window chrome, tab, line numbers, status bar — that types a syntax-highlighted TypeScript object one character at a time using a hand-written tokenizer, then fades the portrait in, while both panes parallax at different rates on scroll. Work rows reveal a cursor-following preview thumbnail on hover while their stack pills scatter with elastic physics. Four content collections, three color skins, SplitText line reveals, Lenis smooth scroll, and full SEO plumbing including sitemap and llms.txt.

Signature

The hero is a full-height code editor: window chrome with traffic lights, a developer.ts tab, line numbers and a status bar reading "TypeScript · UTF-8 · Ln 1, Col 1". Inside it, a hand-written tokenizer types out a syntax-highlighted TypeScript object one character every 55ms, coloring keywords, strings, brackets and property names as they land. When the last character drops, the portrait on the right fades up and a blinking block cursor appears — and as you scroll, both panes parallax at different rates on a scrubbed ScrollTrigger.

Features

• 12 routes — Home, alternate Home layout, Work index, Case study, Services, Stack, About, Journal index, Journal article, Team profile, Contact, 404
• Code-editor hero — window chrome, developer.ts tab, line numbers and a status bar around a live typing area
• Hand-written TypeScript tokenizer colors keywords, strings, brackets, operators and property names as each character types at 55ms
• Portrait pane fades up when typing completes, and both hero panes parallax at different rates (y 80 vs y 120 + scale) on a scrubbed ScrollTrigger
• Work rows with a 320×200 preview thumbnail that follows the cursor and fades + scales in on hover
• Stack pills scatter on row hover — randomized x/y/rotation with elastic.out easing, restored on mouse leave
• 3 color skins via data-skin — Void Code (default), Solar Terminal green, and Paper Draft light mode
• 4 content collections — work (5 projects), journal (4 posts), team (3 members), testimonials (6 quotes)
• SplitText line-mask heading reveals wired at layout level, with splits reverted before every View Transition
• Bento services grid plus a dual-direction infinite marquee of 18 technologies
• Stack page — 5 categories × 4 tools, each with a working note ("Strict mode always", "App Router", "v22 LTS")
• Team member detail pages with bio, role, and optional GitHub / Twitter / LinkedIn links
• Contact form that posts to PUBLIC_FORM_ENDPOINT — drop in your endpoint and it's live
• Fixed drafting-grid background and a 3% fractalNoise film-grain overlay in mix-blend overlay
• SEO — JSON-LD Person schema, OG/Twitter tags, canonical URLs, per-page noindex prop, @astrojs/sitemap, robots.txt, llms.txt and llms-full.txt
• Manual Vite chunks for gsap, gsap plugins and lenis; Plus Jakarta Sans self-hosted via Fontsource; TypeScript strict

Need a CMS?

Every template can be delivered on EmDash, Cloudflare's open-source CMS and our main one, or as a WordPress or Sanity build. Your content team edits copy and images without touching code. Tell us which one you need and we will quote the conversion.

SanityGet in touch

Deployment