Trilingual Cinematic Portfolio — EN/NL/TR Content Architecture
A scroll-driven portfolio built on Next.js App Router and Sanity, with locale routing across three languages, a shader background and a content model where every document carries parallel EN, NL and TR fields.
The Challenge
A portfolio that competes for client work has two jobs that pull in opposite directions: it must feel visually distinctive enough to be remembered, and it must stay fast, indexable and readable to a crawler in three languages. Cinematic scroll experiences tend to fail the second requirement, because the content arrives late and the markup a search engine sees can end up thin.
The Solution
Content lives in Sanity with a deliberate parallel-field model: each document type carries title, excerpt, body, challenge and solution in English, Dutch and Turkish rather than three separate documents. Routing is handled by middleware that resolves the locale from the path, so /nl, /en and /tr are real, crawlable URLs rather than client-side toggles. Server rendering keeps the primary content present at first paint regardless of the scroll animation layered above it.
Results
Three locales served as distinct crawlable routes via middleware resolution
Parallel-field content model avoids document triplication in the CMS
Cinematic scroll layer built without sacrificing server-rendered primary content
Portfolio, services and inquiry surfaces rebuilt as a single coherent system
The design premise is that a portfolio has fractions of a second to communicate competence, and that motion communicates it faster than text. The engineering premise is that none of that is allowed to cost the site its ability to be found, read or crawled.
A content model that scales in three languages. Rather than creating one document per language, every document carries parallel fields — title alongside title_nl and title_tr, and the same for excerpts, body copy, challenge and solution. This keeps a project a single unit of truth, so publishing a case study does not mean maintaining three records that drift apart, and adding a fourth language later is a schema change rather than a migration.
Locales as real routes. Locale resolution happens in middleware so that /nl, /en and /tr are genuine, linkable, indexable URLs. A language toggle implemented purely on the client looks equivalent to a visitor and is worth far less to a search engine, which is a poor trade for the work this site is meant to do.
Motion without losing the crawl. The cinematic layer — shader backgrounds, scroll-driven reveals, parallax — sits above server-rendered content rather than replacing it. The primary text of every page is present in the markup at first paint, which means the animation enhances a page that already works rather than being the thing that makes it work.