Available for Projects

Design Engineer

DESIGN
&BUILD

I design interfaces with systems thinking. I build them with production-grade engineering. From component architecture to deployment, one person, full scope.

Projects40+

Years05

View Selected Work

Scroll

Sri LankaUTC +5:30

Current FocusProduct Systems

StackReact/Next

DesignFigma

Portfolio 2024

Selected Work.

Design + DevLive

2024 — Product Design

Meridian

End-to-end SaaS dashboard. Design system, component library, and full Next.js implementation with real-time data visualization.

StackNext.js · TypeScript

ScopeFull Product

Component System

Atlas UI

Open-source component library built with Radix primitives. 60+ accessible components with Figma-to-code parity.

Full-Stack App

Vault

Secure document management platform with role-based access, real-time collaboration, and end-to-end encryption.

View All Projects

Approach

How I Think

Product
Architecture

I do not separate design from engineering. A layout decision is a performance decision. A component boundary is an architecture decision. Every interface I build is a system structured for scale and built for production.

From token systems in Figma to typed props in React, the thinking is continuous. No handoff and no translation loss.

Design Systems

Token-driven design with full Figma-to-code parity. Consistent, scalable, and documented.

Frontend Architecture

Modular React patterns with type safety, server components, and optimized rendering paths.

View Process

Component LayerAtomic design with compound patterns.

Data LayerServer actions plus optimistic UI.

Methodology

Build Process

Research & Define

Map the problem space. Define constraints. Establish information architecture and user flows before visual execution.

DEFINE

DESIGN

System Design

Build the token system, component primitives, and layout structures in Figma. Every decision is a system decision.

Implement

Translate design into typed, tested, production-grade code. Server components, APIs, and database layers built to ship.

BUILD

SHIP

Refine & Deploy

Run performance audits, accessibility review, and deployment pipelines. Measure, improve, and ship with confidence.

Standards

QUALITY

Engineering Protocols

Standards that define every line of code and every pixel placed.

Type Safety

Zero Runtime Errors

CoverageStrict Mode

LanguageTypeScript

ValidationZod Schemas

P-01

Accessibility

WCAG 2.1 AA

Contrast4.5:1 Min

NavigationFull Keyboard

ReaderARIA Complete

P-02

Performance

Core Web Vitals

LCP< 2.5s

INP< 200ms

CLS< 0.1

P-03

What I Do

Services

Three disciplines. One unified output. Every engagement covers strategy through deployment.

Start a Project

Figma · Prototyping

UX & Interface Design

User research, wireframes, high-fidelity interfaces, and interactive prototypes. Design systems with token architecture that map directly to code.

User Flows · Design Tokens · Prototyping

React · Next.js · TypeScript

Frontend Engineering

Component architecture, state management, server rendering, and motion systems. Performance-first code that scales with product complexity.

Component Architecture · Motion · Rendering

Node · PostgreSQL · APIs

Full-Stack Systems

Database design, API architecture, authentication, and deployment pipelines. Complete product engineering from schema to CDN.

Schema Design · APIs · Deployments

Stack

Technology Stack

React

Next.js

TypeScript

Figma

Node

Postgres

Tailwind

Framer

40+

Projects Shipped

98%

Lighthouse Avg

5yr

Experience

Errors Tolerated

Engagement

Work With Me.

Clear scope. Direct communication. No layers. Whether it is a product sprint or long-term collaboration, the process stays consistent.