Frontend Developer
React, Next.js, TypeScript and product interfaces
I build frontend interfaces around how people use a product: joining a conversation, managing an account or finding the right service. My work includes React and Next.js applications, multilingual product websites and interfaces built with HTML, CSS and JavaScript.
Five years of hands-on programming before adopting AI. That is my pre-AI foundation, not my total experience. Today I use AI as a development tool while retaining responsibility for architecture, understanding the code, validation and delivery.
How I approach this work
- Organise interfaces into reusable components with clear state and content boundaries.
- Adapt navigation, layouts, forms and media to different screens, with attention to accessibility and browser behavior.
- Connect localisation, interaction and motion to the product's visual direction, using Figma and frontend implementation together.
Skills & technical capabilities
Interfaces
Clear product interfaces designed to stay fast and easy to evolve.
- Product interfaces
- React · Next.js · TypeScript · JavaScript · HTML / CSS
- Frontend architecture
- Component architecture · Design systems · Figma · Browser APIs
- Quality & delivery
- Responsive design · Accessibility · Performance · Playwright
Project experience
Realtime translation
Viva Talk
Live speech translation for browser conversations, with a separate Zoom integration.
Technologies: Next.js, TypeScript, WebSockets, Durable Objects, Zoom RTMS, D1, AI Integration
Public product link and project screenshots.
Conversation comes first
Viva Talk supports 25 languages and up to 5 concurrent language pairs in browser conversations. Participants join a room, choose their language and hear one another in that language. My work spans the meeting interface, audio transport, translation backend, account access, billing and an admin console. Zoom support is a separate beta integration with its own audio receiver.
Audio, state and billing
- Room state lives in a Durable Object; WebSockets carry participant events and audio.
- Listeners who share a target language share a translation session. Those who speak the same language receive the original audio without AI processing.
- Account credits and session charges are recorded in a ledger, with duplicate payment events handled explicitly.
- Initial translation tests measured approximately 0.5–1.5 seconds, with occasional longer delays. Latency, provider errors and estimated processing costs are recorded separately.
Keeping meetings usable
The challenge was to bring realtime speech translation, conversation summaries, translated chat messages, screen sharing and video into one intuitive meeting experience. These features needed to work together smoothly, so participants could focus on understanding one another.
Web3 product website
Fasqon
A multilingual product website presenting Fasqon’s payments, cards and finance services.
Technologies: Next.js, React, Framer Motion, CSS, Localisation
Public website; portfolio preview uses the included frontend source.
Making a broad product understandable
Fasqon’s public website introduces cards, payments, social features and its token ecosystem. My work shown here is the website frontend across 16 distinct sections, with reusable components, localisation and motion.
Page structure and interaction
- Separate React sections for product features, cards, business payments, the roadmap and supporting information.
- Shared language state and translated content across navigation and page sections.
- Animated introductions, carousels and product imagery that follow the site’s visual direction.
- Responsive navigation and layouts for a page with substantial content and media.
Scope of this example
The embedded preview uses the website source included in this portfolio. It also serves as an example of a product website for large digital projects and their ecosystems. This example covers product presentation and frontend implementation; payment processing and banking infrastructure are outside its scope.
Multilingual website
Psychologist Website
A multilingual practice website with services, events, articles and publishing tools.
Technologies: HTML / CSS / JavaScript, Workers, Content APIs, R2
Public product link and project screenshots.
Old-school by design
The visual style is deliberately traditional, designed to feel familiar and easy to navigate for an older audience. The site brings services, group programmes, events and articles together across 10+ pages in 4 languages. My work covers the responsive HTML, CSS and JavaScript interface, language-specific content, editing tools and the integrations used to publish material.
Content and publishing
- Shared content loading supplies translated pages and updates their titles, metadata and social previews.
- An admin interface handles editorial changes through the content API, separately from the visitor experience.
- A Worker receives publishing events, stores post metadata and media in R2, and forwards content to the main site.
- A separate importer renders article HTML for the publishing workflow.
A practical handover
The site keeps presentation separate from its content. Services and articles can change without rebuilding the page layout, while the publishing integration gives the practice a route from its editorial tools to the public website.
Engineering approach
I work across product boundaries: interface behavior, application rules, data models and integrations. I structure systems so that the next developer can understand and extend them, and investigate failures across the complete flow.
- Design across the complete flow, from user action to backend state and external provider response.
- Keep interfaces, business rules, content and integrations separated so that changes remain understandable.
- Validate behavior in the browser and on the relevant platform; distinguish previews and sample data from live product behavior.
- Use AI to assist development while reviewing the code and taking responsibility for the result.
Contact & next step
To discuss a role, use the portfolio contact form and choose Hiring. Include the role, product context and the experience you would like to explore.