Schema

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.

What’s inside

• 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

The 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.

See it live

The demo is public: https://fpsjago.github.io/schema/. 12 pages, built with Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.