youtrain.com
- Released
- 2026
- Role
- Front end & back end
- Client
- YouTrain GmbH
- Type
- Full-stack
YouTrain builds XR training systems for defence, security forces and emergency services — drone operations, tactical shooting, emergency driving, mission planning. Founded in Hamburg in 2024, selling to ministries and defence contractors, which means the site has to hold up in front of people who evaluate simulators for a living.
The brief
Six products that are variations on one idea. Each needs a page of its own — training phases, key features, objectives, use cases, FAQ — and each has to read as part of a platform rather than as the sixth separate pitch. Built as six layouts they would have drifted apart within two releases.
Then multiply by three languages. English, German and Ukrainian, with the German site facing the Bundeswehr and the Ukrainian one facing the Ministry of Defence of Ukraine. Anything hardcoded in a template is hardcoded three times and translated none.
What I built
I built the front end and the back end. Products and insights are custom post types, and everything visible on the site is one of thirty-three ACF Gutenberg blocks, so a page is composed in the editor rather than requested from a developer. All copy sits in fields, which is what makes three languages possible without three codebases.
The motion is scroll-driven and does actual work. Nothing autoplays and nothing runs at load: every animation initialises on the first real interaction and then scrubs against scroll position, so the visitor sets the pace and a page opened and abandoned costs nothing.
- 33
- ACF blocks
- 6
- Products on one template
- 3
- Languages
Capabilities that fly out of the frame
On the careers page five reticles start locked on the figures and travel out to the benefits as you scroll, each landing on its own card. The section is twice the viewport tall and the whole sequence is scrubbed against scroll position — it runs forwards on the way down and backwards on the way up.
A headline that becomes a heading
"Trusted by defense leaders" opens at display size and shrinks into its own section header as you scroll, handing the space to the partner logos underneath. One element doing the work of a title card and a section title.
Six products, one template
Every product page is the same content type: hero, training phases, key USPs, objectives, use cases, FAQ. Adding a seventh is data entry rather than a build, and the six that exist cannot drift apart.
Three languages, one set of fields
English, German and Ukrainian run off the same blocks and the same fields. A change to the ecosystem section is made once and translated, not re-implemented twice.
A scroll position you can see
A progress bar with a numeric readout sits at the bottom of every page. On pages this long it answers the question that makes people leave: how much of this is left.
