MA
All workCase study 02 of 11

What you own, what it's worth and how you got there, in one calm screen. Returns shown net of deposits, charts drawn by hand.

Client
Personal project
Role
Product design + frontend
Year
2026
Stack
Next.js, React, TypeScript, SVG

Overview: value against money in, KPIs, allocation and activity.

Overview

Ledger is a portfolio tracker for a long-term investor with ETFs, a handful of stocks and a little crypto. Two years of history, eleven holdings, monthly deposits and dividends, on one page that answers the three questions people open these apps for: what is it worth, am I actually up, and what moved today.

01

The problem

Most portfolio apps show one big number and a line that keeps climbing simply because you keep adding money. That hides the real story. The chart had to separate money put in from money made, and every figure had to stay readable on a phone.

02

The approach

The value line is drawn against a dashed money-in line, and the headline change is net of deposits, so a monthly top-up never looks like a gain. The charts are hand-built SVG with no chart library: scrubbing the chart updates the headline, ranges redraw with a wipe, and the allocation ring is linked to its legend. Prices come from a seeded one-factor market model, so assets move together the way real ones do and the server and the browser render exactly the same numbers.

0Chart libraries
0Holdings
0Days of history
0Transactions
What I did
  • Information design: value against money in, returns net of deposits
  • Hand-built SVG charts: scrubbable area chart, allocation ring, sparklines
  • Holdings table with sorting, search and a detail drawer per position
  • Seeded market simulation and a full transaction ledger behind every number
  • Light and dark themes, EUR and USD, a real phone layout
What shipped
  • Portfolio value from one week to two years, with crosshair
  • Allocation by asset class, sector or region
  • Holdings with day change, return, weight and a 30-day trend
  • Position drawer: price chart, average cost, every transaction
  • Top movers and recent activity
  • Currency switch and dark mode
Outcome

A dashboard that answers "am I actually making money" at a glance, built without a chart library and without a single layout shift.

Next.jsReactTypeScriptSVGCSS Modules
Next case studyStraumurPayment processing for a quarter of Iceland's card acquiring. Merchant portals, onboarding, POS flows.