This site is its own case study, so it gets a build log. Here is what actually happened in the first two phases — including the part where mobile broke.
Strategy before code
The build didn't start in an editor. It started with a written master spec: positioning, information architecture, content model, visual direction, and a list of things the site must never do (fake logos, skill percentages, loading screens).
That order matters more than it sounds. AI can implement fast now — which means the scarce skill is knowing exactly what to implement. Every hour spent on the spec deleted ten hours of wandering later.
The design system is the first product
Before any page existed, the design system did: semantic color tokens, a fluid type scale, an 8px spacing family, four radii, a motion catalog with exactly nine allowed animations, and one recurring visual idea — connected nodes, because systems are the brand.
Both themes resolve from one set of CSS custom properties. Dark is the default experience; light is designed, not inverted. The same tokens drive Tailwind utilities through v4's @theme mapping, so there is exactly one place where a color can be wrong.
The navigation decision
A personal platform with nine top-level pages doesn't fit a header link row. So the header holds actions only — one CTA, the theme toggle, a menu button — and the entire site map lives in a side menu: numbered index links, a status block, socials.
The drawer doubles as a statement: this is an operating system for a person, not a brochure with a hamburger.
The bug worth writing down
Phase 2 opened with mobile 'making a mess'. The root cause was one structural mistake: component CSS written outside of CSS cascade layers.
Unlayered author styles beat layered ones regardless of specificity or order — and Tailwind v4 puts every utility in @layer utilities. So a plain .btn { display: inline-flex } quietly defeated max-sm:hidden forever. The header CTA never hid on phones; heading margin utilities never applied.
The fix was structural, not cosmetic: element defaults into @layer base, every component class into @layer components, utilities on top. One rule now lives in the design system doc: unlayered component CSS is a bug.
Demos over adjectives
The guiding sentence of the whole project: don't make visitors believe the work — make them experience it.
So the Lab ships a scripted AI receptionist you can talk to, with a system log showing what happens behind the conversation — lead drafted, scored, routed, booked. Scripted, and labeled as scripted: the point is to feel the system, and honesty is part of the brand.
Next
Phase 3 adds the content engine this note lives in, a /uses page, a small site assistant, and first-party analytics. Then the custom CMS backend and deployment to Hostinger.