Services · Sports coaching

Jovana Preković.

Jovana Preković: a bilingual site for an Olympic karate champion. Six services on one page, one form with seven enquiry types, and a static Next.js build.

Next.jsReactTypeScriptTailwind CSS
Jovana Preković – bilingual website for an Olympic karate champion
Jovana Preković – mobile view

About the client

Jovana Preković is a Serbian karateka in the kumite discipline: Olympic champion at Tokyo 2020, two-time world and two-time European champion, and a professional sports coach and mentor. She works with athletes around the world, so the site is in English first, with a Serbian version.

Her offer covers six services: individual training, masterclasses (camps and seminars for clubs, teams and federations, plus coach education), a ten-session online kumite programme, video analysis, speaking, and brand partnerships. For the site, that meant every service needed its own place on the page and its own path to an enquiry.

Challenge

Jovana sells six services to different clients: an athlete wants individual training, a club or federation a masterclass, an event organiser a talk, a brand a partnership. All of it had to fit on one page, in English and Serbian, with plenty of large photography. On top of that, the site is built in Next.js, while its hosting does not support Node.js, so the usual server-rendered setup was off the table.

Solution

We built the site in Next.js and exported it as a static build: pages are generated in advance, anything that needs a server comes down to one form script and server rules, and our own script turns the photos into WebP at several widths. The home page has 13 sections per language, and each of its 11 CTA buttons preselects one of seven enquiry types in the form. The visible section copy lives in one file per language, so the layout exists once, and the Serbian version has feminine forms of her titles and a full hreflang set. Switching language keeps the visitor on the same section. Testing on a real iPhone showed what desktop emulation did not: one CSS blur on a decorative glow blocked Safari for about eight seconds. We removed it and added a test that fails if a large blur comes back.

Result

Every enquiry arrives by email already sorted by type, with no database and no copy of messages kept on the server, and the site runs no analytics or tracking cookies, as its privacy page states. Once we sized images to their measured display widths and added widths for phone screens, the total image weight for a full page on an iPhone 13 dropped from 883 KB to 587 KB. Lighthouse scores 100 in all four categories on desktop, and 90 to 92 for performance on mobile, with 100 for the other three.

Want a site like this for your business?

Request a free quote. Tell us what you need and we propose a tailored solution.

Free estimate · No obligation · We deliver on the agreed deadline

Free project estimate