Frontend Engineer
Eine Auswahl von Projekten aus Produktentwicklung, Systemarbeit, kreativen Arbeiten und eigenen Projekten.
- Frontend: React, Next.js, TypeScript, Tailwind
- Systeme: Storybook, Orval, TanStack React Query, Zustand
- Delivery: GitHub Actions, Playwright E2E, AWS, PHP
- Kreativ: Framer Motion, Three.js / React Three Fiber
Schichtplanung, Personaleinsatz und Frontend-Delivery.
Ordio hilft Unternehmen dabei, Personal und Tagesgeschäft zu organisieren. Ich habe am Frontend für Schichtplanung und Personaleinsatz gearbeitet und es an ein PHP-basiertes Backend angebunden. Außerdem habe ich GitHub-Actions-Workflows für automatisiertes Testing, Preview-Umgebungen und AWS-Deployment gebaut.
Die Herausforderung
- Komplexe Schichtpläne und Personaldaten leicht lesbar machen
- Geschäftsregeln in klare Formulare und Interaktionen übersetzen
- Änderungen vor dem Release gegen deployte Umgebungen testen
- Feature-Branch-Testing neben Staging- und Production-Releases unterstützen
Mein Beitrag
- Interfaces für Personaleinsatz- und Scheduling-Aufgaben gebaut
- Mit Backend-Entwicklern zusammengearbeitet, um Produktfeatures zu integrieren
- AWS-Amplify-Previews und Playwright-Tests für Pull Requests automatisiert, inklusive Aufräumen der Umgebungen
- Docker-Image-Workflows für Staging und Production gebaut und an die gemeinsame Release-Pipeline angebunden
- An Feature-Branch-Deployments und Release-Test-Workflows mit zusammengeführten Reports und Fehlerdiagnose gearbeitet
Eine gemeinsame Komponentenbibliothek für REMONDIS Neos.
Ich habe UX/UI und Frontend-Entwicklung für REMONDIS Neos übernommen. Neben Produkt-Screens habe ich wiederverwendbare Komponenten gebaut und in Storybook dokumentiert, damit gängige Interface-Patterns in der gesamten Anwendung genutzt werden können.
Was ich gebaut habe
- Wiederverwendbare Komponenten für Formulare, Layouts und Feedback-States
- Storybook-Dokumentation für gemeinsame Komponenten
- Produkt-Screens auf Basis gängiger UI-Patterns
Warum dieser Ansatz
- Dieselben Elemente nicht für jeden Screen neu bauen
- Das Interface über alle Features hinweg konsistent halten
- Bestehende Komponenten leichter auffindbar und wiederverwendbar machen
KI-Patientensimulation für die Psychotherapieausbildung.
Ich habe RawTherapy entworfen und gebaut, eine Plattform, um therapeutische Gespräche mit simulierten Patient:innen auf Englisch, Deutsch und Spanisch zu üben. Patientenprofile definieren Vorgeschichte, Persönlichkeit und Kommunikationsstil. Eine Regel-Engine verfolgt Vertrauen, Stress und Offenheit im Gesprächsverlauf und beeinflusst so, wie bereitwillig Patient:innen Informationen teilen und wie sie auf das Vorgehen der Trainierenden reagieren.
Die Herausforderung
- Patientenverhalten auf das Gespräch reagieren lassen, statt einem festen Skript zu folgen
- Patienteneinstellungen, Trainingsziele, Chat und Sprache in einem nutzbaren Interface zusammenführen
- Unterbrochene Verbindungen abfangen, ohne Gesprächsverläufe zu verlieren oder zu duplizieren
- Feedback auf konkrete Momente der Sitzung zurückführbar machen
Mein Ansatz
- KI-generierten Dialog mit expliziten Regeln für Vertrauen, Stress und Offenheit kombiniert; Patient:innen können sich öffnen, zurückziehen oder um ein Ende der Sitzung bitten
- Konfigurierbare Trainingseinstellungen gebaut, die den Ausgangszustand und das Antwortverhalten der Patient:innen beeinflussen
- Streaming-Chat und -Audio, Audio-Handling auf Mobilgeräten und Wiederherstellung nach unterbrochenen Requests umgesetzt
- Sitzungen in PostgreSQL gespeichert und an Versionen der Patientenprofile gebunden, damit spätere Änderungen laufende Gespräche nicht verändern
- Selbstreflexion vor der Freigabe der Auswertung verlangt, mit Feedback, das an geprüfte Transkript-Stellen geknüpft ist
- Das Bewertungsraster ist ein Entwurf und bedarf klinischer Prüfung; ein produktiver Einsatz setzt Freigaben für die jeweiligen Assessment-Materialien voraus
Eine bildgeführte Kampagnen-Website für die Leica Q.
Ich habe das Frontend für eine Leica-Q-Kampagne für Virtue Worldwide gebaut. Der Fokus lag auf Bildpräsentation, responsiven Layouts und zurückhaltender Bewegung.
Mein Beitrag
- Layouts gebaut, die der Fotografie Raum zur Wirkung geben
- Abstände und Bildplatzierung an unterschiedliche Bildschirmgrößen angepasst
- Bewegung eingesetzt, die den Inhalt unterstützt, ohne von ihm abzulenken
Ansatz
- Bildgeführtes Storytelling mit klarer Hierarchie über alle Abschnitte hinweg
- Den visuellen Rhythmus der Kampagne über alle Bildschirmgrößen hinweg bewahrt
- Die Interaktion zurückhaltend gehalten, damit die Fotografie im Fokus bleibt
Ein Portfolio für Fotografie, Design und Frontend-Experimente.
Ich habe diese Website mit Next.js, React, Framer Motion und Three.js entworfen und gebaut. Sie bringt bildgeführte Projekte, Galerien und interaktive Experimente zusammen.
Was ich gebaut habe
- Unterschiedliche Navigationsformen für verschiedene Bereiche der Seite
- Projektgalerien mit Layouts, die auf die Bilder zugeschnitten sind
- Animierte Übergänge und interaktive 3D-Elemente
- Responsive Seiten für Fotografie und redaktionelle Arbeiten
Ansatz
- Präsentationsentscheidungen auf Route-Ebene für unterschiedliche Navigationsmodi genutzt
- Projektspezifische Galeriesysteme für bildlastige Seiten gebaut
- Bewegung und interaktive Elemente eingesetzt, um den redaktionellen Inhalt zu unterstützen
Wie ich arbeite.
Mit der Aufgabe beginnen
Ich schaue zuerst darauf, was Menschen erledigen müssen, und baue dann Interfaces, die die Schritte klar machen.
Für Wiederverwendung bauen
Ich nutze gemeinsame Komponenten und Dokumentation, damit Interfaces konsistent bleiben, während Features dazukommen.
Über das Frontend hinaus arbeiten
Zu meiner Arbeit gehören außerdem API-Integration, Backend-Entwicklung, automatisiertes Testing und Cloud-Deployment.
Auf Gestaltung achten
Layout, Typografie, Bilder und Bewegung sind Teil der Umsetzung – kein letzter Schliff.