Projects — SULKO

What it is

The shop window and the first commercial contact. Built with Vite and React, running on Cloudflare Pages, shaped almost entirely by two constraints: it has to be readable by search engines despite being a SPA, and it must load nothing before the visitor has decided about cookies. The first is solved at the edge of the network, rewriting the head of each route before the page starts; the second with a consent banner hosted inside the bundle and analytics tags left as inert text until consent arrives.

Main features

Performance and accessibility

Only transform and opacity are animated: no layout recalculation per frame
prefers-reduced-motion respected on every animation
Visible focus states on every interactive element

Compliance

Privacy policy, cookie policy and terms of service, in two languages
Cookie table verified by hand in a real browser
Contact form protected by Cloudflare Turnstile

Problems and solutions

Opening the site on a phone sometimes gave a black screen, without even the loading animation. The cookie banner was being inserted with document.write: a third-party script that blocks HTML parsing, and until it answers there is nothing to paint.

SolutionThe script is created and appended instead of written into the stream, so it is asynchronous by definition, plus an opening curtain already present in the HTML. Measured before and after: DOM ready went from 522 to 331 milliseconds.

A button animation looked smeared and nobody could say why. It lasts three hundred milliseconds: too fast to see.

SolutionSlowed down ten times and photographed frame by frame. The component was drawing the same word twice and cross-fading the copies: halfway through the transition you were reading the same label on top of itself. Rewritten with a single label.