Lyfar Studio: This Website

You’re looking at it. This site was built in 3 days, which sounds fast until you realize how much of that time was spent on words, not code.

The copy was written and rewritten against six books: StoryBrand for structure, McKee’s Story for narrative arc, Yorke’s Into the Woods for dramatic tension, Sullivan’s Hey Whipple for advertising instinct, Mackendrick’s On Film-Making for visual storytelling, and Hormozi’s $100M Leads for offer framing. Every headline, every CTA, every paragraph was checked against at least one of them.

The hero uses a custom WebGL shader: Bayer ordered dithering with three brand colors flowing through noise-driven zones. It’s the kind of thing that makes developers pause and designers squint. On service pages, it shifts to monochrome in the service color. The visual system is mathematical, not decorative.

Illustrations are generated with Google’s Nano Banana model: chalk sketches on black backgrounds. The aesthetic choice is strategic. When every portfolio site uses polished 3D renders or gradient blobs, chalk drawings stand out. They also match the education theme: blackboard.

The tech stack is deliberately minimal: Astro 6 (zero JS by default), Tailwind v4, Three.js for the hero, and nothing else. No React. No state management. No build-time data fetching from a CMS. Content lives in markdown files. Deploys to Cloudflare Pages in under 5 seconds.

Native CSS scroll-driven animations replaced GSAP (saved 12KB). Self-hosted fonts via Astro 6’s Fonts API replaced Google Fonts CDN. Image compression at build time saves 3.87MB per deploy. The site scores 100 on Lighthouse because there’s nothing to slow it down.