The short version
A short introduction
I’m a frontend engineer in Berlin with a background in UX design. I work with React, TypeScript and Svelte. At F24, I build production software; outside work, I design and build my own projects.
01 / 08
How do you get started?
I need to understand what the interface has to do.
I like working through an example before adding more detail. A screen has to show the right information, make the next action clear and stay usable when data changes. The example beside this text lets you change what appears.
My background
- Growing up Interested in computers
- Started in Aviation
- Then UX design
- Today Frontend engineering
02 / 08
How does UX affect your frontend work?
I think about the person using the screen.
UX design taught me to ask what someone is trying to do before choosing a layout. When I implement it, that includes the order of information, clear controls and the feedback after an action.
Questions I ask before designing
- What changed, and who did it?
- What will they do next?
- What happens if this fails?
03 / 08
What happens beyond the mockup?
I work through the states the design needs.
A finished mockup usually shows one moment. I also need to build what happens while data loads, when there are no results and when a request fails. Try those states in the example.
An interface in different states
Illustrative example · fictional data
04 / 08
What do you do at F24?
I build software for critical situations.
I've spent four years at F24 working on crisis management and critical communication software. I built the original Svelte frontend, and now I work in React. It matters that the information is clear and the interface stays reliable when people need it.
An example of a crisis management workflow
No active alarms.
Illustrative example · fictional data
05 / 08
What details do you care about?
The things that make a product reliable.
If a request fails, the data already on screen should stay there. A slow response shouldn't overwrite newer results. Closing a panel should return keyboard focus to the right place. They're not big visual features, but they make an interface much easier to use.
Handling errors and keyboard focus
Illustrative example · fictional data
06 / 08
What do you build in your spare time?
I also work on my own products.
Second Voice is a writing tool that shows what changed in a rewrite. Flow turns spoken requests into editable actions. I've also built Leu, focused on reading and learning, and Needle, an artwork search project. I enjoy being able to design and build the whole thing myself.
Examples from Second Voice and Flow
Every winter, the harbor lights went dark.
A draft, before the rewrite
Illustrative example · fictional data
07 / 08
What do you like learning about?
How things work behind the screen.
I like understanding the technical details behind things we use every day. DNS, TLS and what happens when you open a website are good examples. I also enjoy turning those explanations into interactive demos.
What happens during a web request
A web request, step by step. Hover, focus or tap a step to learn more.
Illustrative example · fictional data
08 / 08
What matters to you when writing code?
Keeping it readable and reliable.
I care about accessibility, performance, tests and code that's easy for someone else to maintain. I don't want a project to be hard to use or hard to change because I rushed the implementation.
- TypeScript
- React
- Svelte
- Vite
- Playwright
- Node.js
- Docker
Checking a response before rendering
- title
- “Fire alarm · Hall B”
- acknowledgedAt
- “2026-09-30T09:43Z”
- by
- “Tomás R.”
at 09:43
- Response checked against the contract
- Bad fields never reach the UI
- Page stays usable
Illustrative example · fictional data
Contact
Want to talk?
If you'd like to discuss my work, have a question or want to talk about a project, feel free to get in touch.