Frontend Engineer
A selection of projects built across product development, systems, creative work, and independent projects.
- Frontend: React, Next.js, TypeScript, Tailwind
- Systems: Storybook, Orval, TanStack React Query, Zustand
- Delivery: GitHub Actions, Playwright E2E, AWS, PHP
- Creative: Framer Motion, Three.js / React Three Fiber
Staff scheduling, workforce management, and frontend delivery.
Ordio helps businesses manage staff and daily operations. I worked on the frontend for scheduling and workforce management, integrating with a PHP-based backend. I also built GitHub Actions workflows for automated testing, preview environments, and AWS deployment.
- Frontend development, automated testing, and deployment workflows
- Next.js, React, TypeScript, GitHub Actions, Playwright, Docker, AWS Amplify
The challenge
- Make complex schedules and staff data easy to read
- Translate business rules into clear forms and interactions
- Test changes against deployed environments before release
- Support feature-branch testing alongside staging and production releases
My contribution
- Built interfaces for staffing and scheduling tasks
- Worked with backend developers to integrate product features
- Automated AWS Amplify previews and Playwright tests for pull requests, including environment cleanup
- Built Docker image workflows for staging and production, connecting to the shared release pipeline
- Worked on feature-branch deployments and release-test workflows with combined reports and failure diagnostics
A shared component library for REMONDIS Neos.
I worked on UX/UI and frontend development for REMONDIS Neos. Alongside product screens, I built reusable components and documented them in Storybook so common interface patterns could be used across the application.
- UX/UI design, frontend development, and shared components
- Reusable components for forms, layouts, and feedback states, documented in Storybook
- Next.js, Storybook, Tailwind CSS, TanStack React Query
What I built
- Reusable components for forms, layouts, and feedback states
- Storybook documentation for shared components
- Product screens built around common UI patterns
Why this approach
- Avoid rebuilding the same elements for each screen
- Keep the interface consistent across features
- Make existing components easier to find and reuse
AI patient simulation for psychotherapy training.
I designed and built RawTherapy, a platform for practising therapeutic conversations with simulated patients in English, German, and Spanish, by text or live voice. Each patient has a life story, core beliefs, coping habits, and a communication style. A rule engine tracks trust, stress, and openness, and an AI judge checks every patient reply before it is shown, so patients stay in character and respond to how the trainee actually approaches them.
- React, TypeScript, Vite, TanStack Router, Zustand, Tailwind CSS, Fastify, PostgreSQL with pgvector, Redis, OpenAI models and Realtime API, Jev reply judge, Voxtral, PostHog, Vitest, Playwright, Docker, Railway, Vercel
- Product design and full-stack development, including the React interface, simulation engine, real-time voice, AI quality checks, and evaluation workflow
The challenge
- Make patient behaviour respond to the conversation rather than follow a fixed script
- Keep AI-generated replies in character and consistent with each patient’s history
- Make live voice conversations feel natural, with low delay and reliable transcription
- Handle interrupted connections without losing or duplicating conversation history
- Make feedback traceable to specific moments in the session
My approach
- Gave patients core beliefs, life rules, and coping habits; a rule engine for trust, stress, and disclosure lets them open up, withdraw, or ask to end a session
- Patients notice being ignored, repeated, or dismissed, remember unanswered questions, and recall earlier moments through pgvector search
- Added an AI judge (Jev) that checks each patient reply before delivery and retries rejected drafts, plus a second judge that reviews the trainee’s input
- Moved voice input to OpenAI Realtime speech-to-text with semantic turn detection and a hands-free mode, with early speech playback through Voxtral
- Pinned sessions to patient-profile versions in PostgreSQL, and added two-factor login, PII redaction, rate limits, and metrics
- Required self-reflection before revealing reports, with feedback linked to verified transcript references
- The scoring rubric is a draft requiring clinical review; production scoring requires approval records for the relevant assessment materials
An image-led campaign website for Leica Q.
I built the frontend for a Leica Q campaign for Virtue Worldwide. The work focused on image presentation, responsive layouts, and subtle motion.
- Visual campaign / branded experience
- Frontend development, responsive layouts, and image presentation
My contribution
- Built layouts that give the photography room to stand out
- Adapted spacing and image placement for different screen sizes
- Used motion to support the content without distracting from it
Approach
- Used image-led storytelling with a clear hierarchy across sections
- Preserved the campaign’s visual rhythm across screen sizes
- Kept the interaction restrained so the photography remains the focus
A portfolio for photography, design, and frontend experiments.
I designed and built this website with Next.js, React, Framer Motion, and Three.js. It brings together image-led projects, galleries, and interactive experiments.
- Costa Nostra, Valencia Street, Orgullo, LIM, and other editorial and experimental gallery work
- Design and frontend development
- Next.js, React, TypeScript, Tailwind CSS, Framer Motion, Three.js, React Three Fiber, Vercel
What I built
- Different navigation styles for different parts of the site
- Project galleries with layouts tailored to the images
- Animated transitions and interactive 3D elements
- Responsive pages for photography and editorial work
Approach
- Used route-level presentation choices for different navigation modes
- Built project-specific gallery systems for image-heavy pages
- Used motion and interactive elements to support the editorial content
How I work.
Start with the task
I focus on what people need to do, then build interfaces that make the steps clear.
Build for reuse
I use shared components and documentation to keep interfaces consistent as features are added.
Work beyond the frontend
My work also includes API integration, backend development, automated testing, and cloud deployment.
Pay attention to design
Layout, typography, images, and motion are part of the build, not finishing touches.