Frontend Portfolio
Four production builds that trace a Vue ecosystem arc: real-time IoT control surfaces in Vue 2, a custom Nuxt storefront, conversion-critical insurance funnels serving millions, and enterprise micro-frontends in Vue 3. Each card on this wall is a real delivery. Flip them to see what was actually hard.
Selected Work
Real-Time UI
Control interface for an autonomous UV-treatment robot operating on professional soccer fields.
Execution: Built real-time RTK-GPS tracking with centimeter accuracy, treatment zone mapping, remote motor and peripheral tuning, and direct robot command surfaces with Vue 2, Vuex, Leaflet, and WebSocket.
Impact: Delivered a latency-honest UI that reflects actual robot state: command acknowledgement loop before visual confirmation.
Field Robotics Control Interface
The Hard Part
A soccer field has no reliable network. The robot moves autonomously between RTK-GPS waypoints at centimeter accuracy, but operators need to override, reroute, emergency-stop, and remotely tune motors and peripherals in real time. Every millisecond of UI lag is a trust gap.
The Approach
We built a command acknowledgement loop: the UI shows command-sent, command-received, command-executing as distinct states. RTK-GPS streams are normalized client-side to smooth jitter. Remote tuning panels let operators adjust motor parameters and peripheral configs without physical access. The map persists last-known state when WebSocket drops, with a clear visual degradation indicator.
Product UI
Full custom Nuxt storefront for a home services heating company, catalog to post-purchase.
Execution: Built the complete e-commerce flow: product configurator, hybrid SSR/CSR rendering, payment integration, and post-purchase status tracking.
Impact: Shipped a constraint-driven configurator where boiler type constrains flue routing constrains installation pricing.
Home Services Storefront
The Hard Part
A boiler installation isn't a simple product. It's a constraint graph. Boiler type limits flue options, flue routing affects installation complexity, and every combination changes the price. Customers need to feel guided, not overwhelmed.
The Approach
We modeled the product catalog as a directed constraint graph. Each configurator step runs constraint propagation to disable invalid options before the user sees them. Progressive disclosure reveals complexity only when the customer's choices demand it. SSR for SEO-critical pages, CSR for the interactive configurator.
Conversion UX
Critical conversion path for a major Dutch health insurer, millions of annual visitors during open enrollment.
Execution: Built plan comparison, coverage customization, and checkout flow with step-level conversion instrumentation and behavioral A/B testing.
Impact: Every render cycle has a conversion cost. Instrumented interaction latency per step and A/B tested layouts against completion rate.
National Insurance Enrollment Funnel
The Hard Part
Open enrollment means millions of visitors in a 6-week window. Every extra second of load time, every confusing label, every unnecessary click compounds into lost conversions at national scale.
The Approach
We instrumented every step transition with timing and drop-off metrics. A/B tested not just layouts but interaction patterns: toggle vs. accordion for coverage options, progressive vs. upfront pricing disclosure. Built a behavioral analytics layer that correlates interaction latency with completion rate per step.
Design Systems
Micro-frontend architecture for wellness and life insurance products at a major Dutch insurer.
Execution: Designed cross-team MFE interface contracts, shared design token system, and independent deploy pipelines with Sitecore CMS orchestration.
Impact: Explicit contract surfaces between independently deployed MFEs and the CMS orchestrator enabled autonomous squad delivery.
Enterprise Insurance MFE Suite
The Hard Part
Three product squads shipping independently into one customer-facing portal, orchestrated by a CMS that owns the page shell. Any squad's deploy can break the shared experience if contracts aren't explicit.
The Approach
We defined typed interface contracts between each MFE and the Sitecore orchestrator: routing handoff protocol, shared state schema, design token consumption rules. Each squad owns their deploy pipeline but consumes shared tokens from a single source of truth. Contract tests run on every PR.
Interaction Feed
Waiting for runner trigger
Runner Activated Content
When the character hangs on a card edge, the card flips and this feed updates with deeper implementation details.
In real-time robot control and national-scale funnels alike, perceived responsiveness is designed and measured, not hoped for.
Vue 2 to 3 taught me incremental migration preserves velocity. Strangler patterns over big-bang rewrites.
MFEs, design systems, and cross-team delivery break down at the interface boundary. Define contracts first.
Track step completion, decision points, and drop-off patterns, not just page loads and error rates.
Studio Shelf
Contract-driven micro-frontend orchestration beyond Sitecore: Module Federation, import maps, runtime composition for Vue 3.
Offline-first state management and optimistic UI for IoT dashboards with intermittent connectivity.
Progressive disclosure and cognitive load reduction for multi-step decision funnels at scale.
Personal Philosophy