Frontend & Product Engineer
Selected projects in product development, design systems, AI applications, and creative web work.
- Frontend: React, Next.js, 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 and workforce management.
Ordio helps businesses schedule staff and manage daily work. I worked on the scheduling and workforce screens, turning complex business rules into clear forms and views together with the PHP backend team. I also set up how changes are tested and released, with GitHub Actions, Playwright, and AWS Amplify.
- Scheduling and workforce interfaces, automated testing, and release workflows
- Next.js, React, TypeScript, GitHub Actions, Playwright, Docker, AWS Amplify
The challenge
- Make complex schedules and staff data easy to read
- Turn business rules into clear forms and interactions
- Let the team test changes in a real environment before release
- Keep feature testing, staging, and production releases working side by side
My contribution
- Built the interfaces people use to plan staff and shifts
- Worked with the PHP backend team to turn business rules into forms and views
- Set up AWS Amplify preview builds and Playwright tests for pull requests, cleaned up automatically afterwards
- Built Docker workflows for staging and production, connected to the shared release pipeline
A shared component library for REMONDIS Neos.
REMONDIS Neos is software for city-cleaning operations. I worked on its UX/UI and frontend, and built a shared component library, documented in Storybook, so forms, layouts, and messages look and behave the same across the app.
- UX/UI design, frontend development, and shared components
- Storybook documentation showing shared forms, layouts, and interface messages
- 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.
RawTherapy lets therapists practise difficult conversations with simulated patients, by text or live voice, in English, German, and Spanish. Each patient has a life story, beliefs, and a way of talking, and reacts to how the therapist approaches them. I designed and built the product, including patient behaviour, the conversation interface, and reply checks.
- React, TypeScript, Vite, TanStack Router, Zustand, Tailwind CSS, Fastify, PostgreSQL with pgvector, Redis, OpenAI models and Realtime API, Jev (TypeSafe AI), 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
- Patients should react to the conversation, not follow a fixed script
- AI replies must stay in character and fit each patient’s history
- Live voice should feel natural, with little delay and reliable transcription
- A dropped connection must not lose or duplicate the conversation
- Feedback should point to specific moments in the session
My approach
- Defined each patient’s beliefs, personal rules, and defence mechanisms. Their responses depend on how the therapist approaches them. They may open up, withdraw, or want to end the session.
- Used earlier moments in the conversation to inform each patient’s replies.
- The therapist reflects on the session before viewing the report.
- Used rules to score five counselling skills from transcript features such as open questions, reflections, and advice-giving. The session goal sets the focus for practice.
- Every finding in the report cites the exact moment in the transcript, with strengths, areas to improve, and what to practise next
An image-led campaign website for Leica Q.
I built the Leica Q campaign site for Virtue Worldwide, using image order, responsive layouts, and subtle motion to put the photography at the centre.
- 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
A portfolio for photography, design, and interactive experiments.
I designed and built my personal website to bring together photography, design, 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
- Let each project’s images set the layout
- 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
I consider layout, typography, images, and motion throughout design and development.