Web project

Heitmann Baleares

German precision on Ibiza — a motion-led site rebuilt mid-project from one page into thirty, in three languages.

Client: Heitmann Baleares S.L., Ibiza
Role: Full design & development, solo
Scope: 30 static pages · 3 languages
Timeline: 2026 · ~2 months
Status: Live

// overview

Heitmann Baleares builds and renovates high-end properties on Ibiza, bringing German engineering standards to the Balearic Islands. They needed a website that communicated that positioning to three separate audiences — German property owners, Spanish locals, and international clients — while meeting the strict privacy and legal requirements that apply to a German-owned company operating in the EU.

The site was designed and built from scratch: an editorial, motion-led interface in a warm ivory and orange palette, with an arch motif running through the visual language as a nod to Mediterranean architecture.

Midway through the project the structure was reworked from a single-page site into a fully routed multilingual architecture, so each section could rank independently in search — 30 statically generated pages across three languages, with localised URLs and complete hreflang coverage.

There is no CMS and no UI framework: a hand-written CSS design system, with all content managed in a single typed translation layer.

Scale

30

Static pages, up from 4

3

Languages with full hreflang

96%

First-load media weight cut

0.44 MB

Hero video, down from 6.7 MB

19 MB

public/, down from 67 MB

0

Trackers before consent

// what it does

Key features

Multilingual architecture

German, English and Spanish, each on their own URLs
Localised slugs per language — /de/leistungen, /en/services, /es/servicios
Automatic language detection from browser settings on first visit, with the visitor’s own choice always taking precedence
A language switcher that moves to the same page in the target language

SEO

30 statically generated pages, each with a unique title, meta description and a single H1
Complete hreflang coverage including x-default
Canonical URLs, generated sitemap.xml and robots.txt
301 redirects preserving previously indexed URLs

Privacy & compliance

Cookiebot consent banner in auto-blocking mode — no tracking script loads before consent
Google Tag Manager gated behind that consent
Trilingual legal pages: Impressum, Datenschutzerklärung and cookie policy
An auto-updating cookie declaration

Contact & conversion

Multi-step contact form with service-selection chips
Wired to Netlify Forms with email notifications
Language-neutral submission values, so the backend receives consistent data regardless of the visitor’s language

Design & motion

Custom cursor, animated preloader and page transitions
Scroll-driven reveals and an auto-scrolling tilted image collage in the hero
An arch motif carried across hero, imagery and the loading screen
Fully responsive, with prefers-reduced-motion respected throughout

// engineering

The hard parts

The problems that shaped the architecture, and how each one was solved.

01

Restructuring a one-pager into a routed multilingual site

The site launched as a single page with anchor navigation. When SEO review showed that anchors cannot be indexed as separate pages, the architecture was rebuilt around a route registry driving localised slugs, static generation, hreflang metadata and redirects — without changing the visual design. Sections were redistributed so no content appears on more than one page, avoiding self-competing duplicate content.

02

Consent-gated analytics done properly

Rather than dropping in the tracking snippet as supplied, Cookiebot’s auto-blocking was loaded ahead of all application code so it can intercept trackers before they fire. The noscript half of the GTM snippet was deliberately omitted: it runs only when JavaScript is disabled, where consent cannot be collected — including it would have loaded tracking without permission.

03

Cutting first-load weight by 96%

First-load video weight went from 11 MB to 0.44 MB by re-encoding the hero clip (6.7 MB to 0.44 MB) and the showreel (4.5 MB to 1.27 MB) and correcting preload behaviour. The public directory dropped from 67 MB to 19 MB. The preloader moved from JavaScript-driven animation to CSS so it paints straight from the server HTML instead of waiting for hydration — removing a multi-second blank screen on first visits.

04

Edge-case URL handling

Repeated and trailing slashes (/de///qualitaet) resolve to canonical URLs, with handling at both the proxy layer and in the browser — necessary because the CDN normalises paths before application code ever sees them.

// stack