Website für ein Ingenieurunternehmen
Eine mehrsprachige Unternehmenswebsite, vollständig vorgerendert, mit einer prozedural generierten Stahlkonstruktion in Three.js, die sich beim Scrollen zusammensetzt — und auf Geräten, die sie nicht darstellen können, durch eine technische Zeichnung ersetzt wird.
- Kunde
- Ingenieur- und Bauunternehmen (Name bis zum Launch nicht genannt)
- Rolle
- Visuelles Konzept, Entwicklung und Tests
- Jahr
- 2026
- Status
- Vorschau ausgeliefert, Freigabe durch den Kunden ausstehend
100
Lighthouse Barrierefreiheit und Best Practices (Labor)
89–99
Lighthouse Performance auf Mobilgeräten (Labor)
40
vorgerenderte Seiten in 4 Sprachen
132
Unit- und End-to-End-Tests
Kontext
Ein Ingenieur- und Bauunternehmen brauchte eine Website, die Kunden in mehreren Ländern technische Sorgfalt vermittelt — und die auf den Smartphones funktioniert, die diese Kunden tatsächlich nutzen.
Das Problem
Eine hochwertige, mehrsprachige Website mit einem 3D-Element als Markenzeichen liefern — ohne Abstriche bei Performance, Barrierefreiheit oder dem Erlebnis auf einfachen Geräten.
Mein Beitrag
- 01
Ich habe die visuelle Richtung und die Design-Tokens festgelegt und alle Seiten und Komponenten gebaut.
- 02
Ich habe ein parametrisches Stahltragwerk modelliert, das sowohl eine SVG-Zeichnung als auch die WebGL-Szene steuert.
- 03
Ich habe Unit-, End-to-End- und Barrierefreiheitstests geschrieben, dazu Skripte für Kontrast- und Lighthouse-Prüfungen.
Was es leistet
- Startseite, Über uns, Leistungen mit Detailseiten, Projekte, Kontakt und Datenschutz — auf Portugiesisch, Englisch, Spanisch und Deutsch
- Scrollgesteuerte 3D-Sequenz in fünf umkehrbaren Schritten
- Theme-Wechsel mit kreisförmiger Einblendung und richtungsabhängige Seitenübergänge
- Lokalisierte URLs mit hreflang, Sitemap und Open-Graph-Bildern pro Sprache
- Kontakt-Endpoint mit Schutz vor Missbrauch
Technische Highlights
- 01
Ein Modell, zwei Renderer
Ein einziges parametrisches Modell erzeugt sowohl die serverseitig gerenderte SVG-Zeichnung als auch die WebGL-Szene: 465 Teile in 8 Draw Calls mit Instanced Meshes und null Bytes Modell-Download.
- 02
Qualitätsstufen je Gerät
Eine Fähigkeitserkennung — WebGL-Test, Erkennung von Software-Renderern, Arbeitsspeicher, CPU-Kerne, Save-Data — wählt hohe, mittlere oder niedrige 3D-Qualität, eine 2D-Zeichnung oder einen statischen Abschnitt.
- 03
Standardmäßig abgesichert
Eine strikte Content Security Policy und Security-Header; der Kontakt-Endpoint hat ein Honeypot-Feld, eine Mindestausfüllzeit, ein Größenlimit für den Request-Body und Rate Limiting pro IP.
Knackpunkte
- 01
3D ohne Einbußen beim LCP
Three.js wird erst nachgeladen, wenn sich die Sequenz dem Viewport nähert; so besteht der erste Paint aus Text, und der Largest Contentful Paint wird nie verzögert.
- 02
WebGL testen
Playwright führt ein Projekt auf einer echten GPU und ein weiteres mit deaktiviertem WebGL aus, um zu belegen, dass der Fallback funktioniert.
Ergebnisse
- Lighthouse (Labor, lokaler Produktions-Build): Barrierefreiheit 100 und Best Practices 100 auf allen gemessenen Seiten; Performance 89–99 auf Mobilgeräten und 100 auf dem Desktop; CLS 0.
- 27 Unit- und 105 End-to-End-Tests laufen erfolgreich, einschließlich Barrierefreiheitsprüfungen mit axe und Layouts von 320 bis 3840 px Breite.
Die Zahlen stammen aus dem Repository: Tests, Messungen und dokumentierte Berichte.
Stack
- Next.js 16
- React 19
- TypeScript
- Three.js
- CSS Modules
- Vitest
- Playwright
- axe-core
- Lighthouse
- Vercel
VorgehenEntwickelt mit einem KI-gestützten Workflow, den ich gesteuert und geprüft habe, validiert durch die automatisierte Test- und Audit-Suite.
Code und Kunde sind vertraulich. Details werden so weit geteilt, wie es die Arbeit zulässt.