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.
- Frontend-Entwicklung, automatisiertes Testing und Deployment-Workflows
- Next.js, React, TypeScript, GitHub Actions, Playwright, Docker, AWS Amplify
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.
- UX/UI-Design, Frontend-Entwicklung und gemeinsame Komponenten
- Wiederverwendbare Komponenten für Formulare, Layouts und Feedback-States, dokumentiert in Storybook
- Next.js, Storybook, Tailwind CSS, TanStack React Query
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 per Text oder Live-Voice zu üben. Jede:r Patient:in hat eine Lebensgeschichte, Grundüberzeugungen, Bewältigungsmuster und einen Kommunikationsstil. Eine Regel-Engine verfolgt Vertrauen, Stress und Offenheit, und ein KI-Judge prüft jede Antwort der Patient:innen, bevor sie angezeigt wird, sodass sie in ihrer Rolle bleiben und darauf reagieren, wie die Trainierenden tatsächlich vorgehen.
- React, TypeScript, Vite, TanStack Router, Zustand, Tailwind CSS, Fastify, PostgreSQL mit pgvector, Redis, OpenAI-Modelle und Realtime API, Jev Reply Judge, Voxtral, PostHog, Vitest, Playwright, Docker, Railway, Vercel
- Produktdesign und Full-Stack-Entwicklung, inklusive React-Interface, Simulations-Engine, Echtzeit-Voice, KI-Qualitätsprüfungen und Auswertungs-Workflow
Die Herausforderung
- Patientenverhalten auf das Gespräch reagieren lassen, statt einem festen Skript zu folgen
- KI-generierte Antworten in der Rolle halten und konsistent mit der Vorgeschichte der jeweiligen Patient:innen machen
- Live-Voice-Gespräche natürlich wirken lassen, mit geringer Verzögerung und zuverlässiger Transkription
- Unterbrochene Verbindungen abfangen, ohne Gesprächsverläufe zu verlieren oder zu duplizieren
- Feedback auf konkrete Momente der Sitzung zurückführbar machen
Mein Ansatz
- Patient:innen mit Grundüberzeugungen, Lebensregeln und Bewältigungsmustern ausgestattet; eine Regel-Engine für Vertrauen, Stress und Offenheit lässt sie sich öffnen, zurückziehen oder um ein Ende der Sitzung bitten
- Patient:innen bemerken, wenn sie ignoriert, wiederholt oder abgewiesen werden, merken sich unbeantwortete Fragen und erinnern sich über die pgvector-Suche an frühere Momente
- Einen KI-Judge (Jev) ergänzt, der jede Patientenantwort vor der Ausgabe prüft und abgelehnte Entwürfe erneut anfordert, dazu einen zweiten Judge, der die Eingaben der Trainierenden prüft
- Spracheingabe auf OpenAI-Realtime-Speech-to-Text mit semantischer Turn-Erkennung und Freisprechmodus umgestellt, mit früher Sprachwiedergabe über Voxtral
- Sitzungen in PostgreSQL an Versionen der Patientenprofile gebunden und Zwei-Faktor-Login, PII-Schwärzung, Rate Limits und Metriken umgesetzt
- 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.
- Visuelle Kampagne / Branded Experience
- Frontend-Entwicklung, responsive Layouts und Bildpräsentation
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.
- Costa Nostra, Valencia Street, Orgullo, LIM und weitere redaktionelle und experimentelle Galeriearbeiten
- Design und Frontend-Entwicklung
- Next.js, React, TypeScript, Tailwind CSS, Framer Motion, Three.js, React Three Fiber, Vercel
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.