Skip to content
Igor D.

Build · Product design and front end

Built end to end

Six products I designed and built on my own, from the first sketch to the deployed site. React and TypeScript, written quickly with AI assistance. Each one started as a design problem worth solving, not a demo.

The Nexora homepage, with the line operations that run themselves above a live workflow builder showing an order to delivery process and its run count.

Nexora

Marketing site · Workflow automation

Problem
Automation tools sell themselves as magic, which is the reason operations teams do not trust them. A black box that moves money and customer data is a liability, and most marketing sites make it worse by showing a logo wall instead of the product.
Solution
A product-led page built around one promise: you can always see why something ran. It carries a live workflow builder, a run log, an approval card that explains the model's reasoning in plain words, and four interactive feature panels. Every state on the page is real React, not a screenshot.
  • UX/UI
  • Figma
  • Design system
  • React
  • TypeScript
  • Claude Code
  • Tailwind

Open the live site (opens in a new tab)

The Afterform landing page, AFTER in huge filled letters above FORM in outline, with a live particle orbit spiralling around a dark centre between them and the caption particles held in orbital patterns.

Afterform

Experimental site · Generative studio

Problem
A studio whose work is movement cannot prove it with a grid of static case study thumbnails. If the craft is motion, the portfolio has to be the work.
Solution
A scroll-driven site where every frame is computed as you watch it. Three generative canvases you can disturb with a cursor, a code panel that writes its own output as you read it, and a drawing stage with symmetry, memory and an autopilot that takes over when you stop. There is no video anywhere.
  • UX/UI
  • Figma
  • Design system
  • React
  • TypeScript
  • Canvas
  • Claude Code

Open the live site (opens in a new tab)

The Vanta overview dashboard, with revenue, active workflows, conversion and response time tiles above a revenue chart plotted against plan.

Vanta

Product UI · Business intelligence

Problem
Dashboard design gets judged on one hero screen. The hard part is the twentieth screen: the filters, the empty states, the dense tables and the charts nobody art-directed.
Solution
A whole operations platform rather than a single view. Revenue, acquisition, traffic and workflow analytics across linked routes, with a charting layer built from scratch, comparison periods, drill-down activity feeds and a table system that stays readable at density.
  • UX/UI
  • Figma
  • Design system
  • React
  • TypeScript
  • Data visualisation
  • Claude Code

Open the live site (opens in a new tab)

The Monograph guidelines, the logo drawn on its construction grid beside the line one idea, given one clear form, with a chapter list down the left.

Monograph

Design system · Brand guidelines

Problem
Brand guidelines go stale the moment they become a PDF. The rules live in one place and the components live in another, so the two drift apart inside a quarter and nobody notices until a release.
Solution
Ten chapters of guidelines and a live component library in one document. The logo is drawn on its own construction grid in SVG, the colour and type rules are generated from the same tokens the components consume, and every example on the page is the real component.
  • UX/UI
  • Figma
  • Design system
  • React
  • TypeScript
  • Design tokens
  • SVG

Open the live site (opens in a new tab)

The Typeladder homepage, a seven step type scale from 12 to 96 pixels shown beside a ratio slider set to an augmented fourth.

Typeladder

Tool · Type scale generator

Problem
Type scale generators hand you seven numbers and leave. You only find out whether a ratio works once it meets a card title, a dense table and a mobile screen, and by then it is in production.
Solution
A tool that puts the scale on real interfaces before you commit to it: an article, a dashboard, a sign-up form, a pricing page and a mobile app. Set a base and a ratio, watch five art-directed layouts respond, then export CSS variables, Tailwind v4 or JSON tokens.
  • UX/UI
  • Figma
  • Design system
  • React
  • TypeScript
  • Claude Code
  • Design tokens

Open the live site (opens in a new tab)

The Mendo One site, the words built to be opened beside a dimensioned technical drawing of a pair of over ear headphones.

Mendo One

Concept product · Repairable headphones

Problem
Repairability is a claim every brand now makes and almost none of them show. Saying a product is repairable does nothing. You have to let someone take it apart.
Solution
An eight-sheet technical document you scroll through like a drawing set. A twelve-part exploded view that comes apart as you scroll, each part costed and timed, plus failure modes, repair guides and a frequency response chart. All of it drawn in SVG.
  • UX/UI
  • Figma
  • Design system
  • React
  • TypeScript
  • SVG
  • Claude Code

Open the live site (opens in a new tab)