Scene 01The Idea

Everything starts
with an idea.

New project

What's the idea?

No code yet. First I need the problem, the people it belongs to, and what the thing actually has to do. Keep scrolling — I'll show you.

Idea → Information

Problem

What is actually broken today, stated in one sentence.

If I can't name it plainly, I don't understand it yet.

User

Who it is for, where they are, and what they already know.

The context decides the interface more than taste does.

Idea

The smallest thing that solves it — sharpened until it fits one line.

Requirements

What it must do, what it must never do, what can wait.

Constraints first: device, connection, data, deadline.

So, how do I turn an idea into an experience?

Scene 02The Mindset

I'm Aaron. A Frontend Developer focused on turning ideas, designs and requirements into thoughtful digital experiences.

I care about the details. How it looks. How it feels. How it behaves. How it works.

Below is the whole route from a requirement to a shipped product, in six phases. Scroll drives the experience — down advances, up reverses, and each phase unfolds as you move through it.

01Understand
Make it clear
02Design
Make it feel right
03Experience
Make it easy to use
04System
Make it consistent
05Build & Tools
Make it work, with the right tools
06Refine
Make it better

Understand — Make it clear

Problem — what is actually broken

Requirements — what it must do

Users — who carries the cost of getting it wrong

Information hierarchy — what to read first

User flows — the route through the product

Goals — how we know it worked

Read the briefAsk what's missingAgree the goal

Design — Make it feel right

Font

AaTrial 01 — grotesk, boldTrial 02 — grotesk, tightLocked — Bodoni italic

Colour

Scale

64 · 24 · 16 · 11

Experience — Make it easy to use

01Click

02Feedback

03State change

04Understands

Four things happen at once. Nothing tells the user which one answered them.So put them back in the order a person actually lives them.Click, then feedback, then the state changes — and only then does it make sense.

System — Make it consistent

ButtonInputPanelLabel

HeaderLabel

Work indexPanel ×2

ContactButtonSame component, no new rules

Build & Tools — Make it work, with the right tools

Development

JavaScript

TypeScript

React

Next.js

Tailwind CSS

GSAP

Node.js

MySQL

PostgreSQL

Tools & Workflow

Git

GitHub

FigmaClaudeNotion

TeamsZoom

Refine — Make it better

BuildTestFindImprovePolish

Six viewports, each one designed — not scaled downEdge cases, loading and error statesKeyboard, contrast, reduced motionPerformance under a real connectionFaster

Scene 03 — 04The Process · The Work

The Process and The Work

01PRD

02Figma

03Frontend

04Integration

05Product

01PRD

02Research

03Design

04Frontend

05Integration

06Product

01Idea

02Research

03Design

04Frontend

05Integration

06Product

Same makerme

ProductShipped

completeOne outcome

And there's more.View GitHub

And then, it came out to life

Built from an idea. Made for impact.

View live preview

How the work begins

Every project starts differently.

Different beginnings. One finished product.

01 — PRD to frontend

02 — PRD without UI/UX

03 — From zero

Different starting points → me

Process → completed product

Selected work

Scroll

Scene 05The Playground

Play with it.

A few things I like to build when I'm not building products.

Type01

Size, weight, tracking and leading — the four dials that decide whether a page can be read.

Type is an experience.

Size42pxWeight400Tracking-3/100emLeading105%

Color02

Four values, one relationship. Contrast is reported live, because a palette that fails is not a palette.

Colour carries meaning.Primary sets the tone, secondary answers it.PrimarySecondary

PrimarySecondaryBackgroundText

Contrast 9.78:1 — passes AA

Motion03

Motion should answer the cursor, not perform for it. Move across the panel.

Follows youSubtle beats clever.

Component04

One button, six states. A component is only finished when every state is designed.

Responsive05

Drag the edge. Each width is a different design decision, not the same one scaled.

Desktop

StudioWorkAboutContact

Drag the right edge—

Scene 06The End

An idea is only the beginning.

Let's turn it into an experience.

Aaron Zanett Samudra — 2026