Devlog: rebuilding preunec.de

We didn't repaint preunec.de — we rebuilt it on a new foundation. This is a devlog, so there's a look under the hood, but it's written for everyone: first what changed for you as a visitor, then a plain-language tour of how it all works. No code to read — just ideas and a few diagrams.

In short — The site now speaks your language, updates the moment we publish, stays fast, and respects your accessibility settings. Behind the scenes it's built from switchable "sections", with content anyone on the team can edit — no developer required.

What's new for you

Even if you never think about how a website is made, a few things should feel better:

• Your language. The site is available in German, English and Turkish, and it picks the right one automatically.
• Always current. When we publish news or a blog post, it appears right away — no waiting for a rebuild.
• Fast and light. Pages load quickly and stay smooth, even with the animated visuals.
• Respects your settings. If your device asks apps to reduce motion, ours listens and calms the animations down.

Why we rebuilt

The old site worked, but it fought us. Every new language, every new section and every small idea turned into slow, manual work. We wanted a base that does three things without ceremony: speak several languages, change in seconds, and feel fast.

	Before	Now
Languages	mostly German	German / English / Turkish, automatic
Adding a section	needed developers	switched on with a click
Editing content	in the code	a simple admin panel
Motion	fixed	rich, and respects "reduce motion"
Foundation	ageing	modern and maintainable

The big idea: sections you can switch on and off

Think of the site as a set of building blocks — services, products, projects, the blog. Each one is a section we can switch on or off with a click, and the change is instant. A section that's switched off simply disappears everywhere at once: the page, the menu, and search.

flowchart TD
  A["You open a page"] --> B{"Is this section switched on?"}
  B -->|Yes| C["Show it"]
  B -->|No| D["Hide it everywhere: page, menu, search"]

In pseudo-code — the plain-language version of the rule — it's just:

when a page is requested:
  if its section is switched OFF  →  hide it (page, menu, sitemap, search)
  otherwise                       →  show it

That one idea is what lets the same website serve very different needs without being rebuilt each time.

Speaking three languages

The site tries to show you content in your language. If a particular piece hasn't been translated yet, it doesn't break or show you an empty page — it gracefully falls back and quietly tells you it's showing the original.

flowchart TD
  A["Show this content"] --> B{"Available in your language?"}
  B -->|Yes| C["Show your language"]
  B -->|No| D{"Available in German?"}
  D -->|Yes| E["Show German (our default) + a small note"]
  D -->|No| F["Show any language we have + a small note"]

to show content in your language:
  try your language
  else fall back to German (our default)
  else fall back to any language we have
  (never show half-finished drafts)

Keeping it fast

Content lives in a database that we edit through an admin panel. Asking the database for everything on every single visit would be slow and wasteful, so the site keeps a short-lived copy in memory and is clever about when to refresh it.

flowchart TD
  A["A page needs content"] --> B{"How fresh is our copy?"}
  B -->|Just fetched| C["Use the fast copy"]
  B -->|A little old| D["Show it now, refresh quietly in the background"]
  B -->|Database hiccup| E["Keep showing the last good copy"]

The last point matters: if the database has a brief hiccup, the site keeps serving the last good version instead of going down. And when an editor changes something, that copy is refreshed immediately — so you always see the latest.

Keeping it safe

Blog posts (like this one) are written in a simple text format. Before anything is shown on the page, it's cleaned so only safe, ordinary formatting survives.

before showing any written content:
  keep normal formatting  →  headings, lists, links, images, tables, diagrams
  remove anything risky   →  scripts, unknown tags
  images must load over a secure (https) link

That "images must be secure links" rule is why every picture here is stored safely and loaded over a protected connection. It also led to a nice new convenience for our editors:

Paste-to-upload. Our team can now paste or drag an image straight into the editor; it's uploaded automatically and dropped into the post — no fiddling with links. (This very post's diagrams are drawn from plain text using the same editor.)

Motion that respects you

The site has scroll animations, a 3D studio scene, and a few hidden surprises. But motion isn't there just to show off: if your device is set to reduce motion (a common accessibility setting), the site notices and calms everything down automatically. Delight should never get in the way of comfort.

The studio: our playground

/studio is where we let loose — a talking character, floating point-cloud text, and shader scenes. None of it is essential, but it's the part of the site that feels most like us: the small experiments that keep a company website from feeling like a brochure.

How it ships

Everything above is packaged into a single, self-contained bundle and runs as one neat unit — think of it as one sealed box we can deploy anywhere, quickly and predictably. Boring in the best way.

What's next

Done this round:

• Three languages, chosen automatically
• Switchable sections, editable by the whole team
• Fast, resilient content with a friendly admin panel
• Paste-to-upload images and diagrams in posts
• A proper reading experience: contents, progress bar, sharing

Coming next:

• Search across all posts
• Cover images and richer link previews
• More devlogs — this is the first of many

A company website is usually a brochure. We'd rather it be a small, living product — one that works in your language, stays out of your way, and is genuinely nice to read.

Have a look around. And if you feel like typing an unusually fast key combination — you might just find something.