Website design · Personal project, 2026
Portfolio website
- Live
- 2-week design and build (09.2026)
- Built with Claude Code
- Web, desktop and mobile
- Design system
- Background
- The portfolio had to show my product design work and my design skills to hiring teams and prospective clients, and visitors had to understand them quickly.
- Problem
- Long, detailed case studies had to be easy to scan, and I had to design and build the site alone in two weeks.
- Approach
- I first made a small design system and a reusable case-study template. Then I improved the site directly in code, using Claude Code.
- Outcome
- A live, responsive portfolio with a consistent case-study structure, reusable components, and a small set of visual styles.
Goal
Made to show how I design
The site has two goals. The first is to show my projects so that visitors can understand them quickly. The second is to show my design skills through the design of the site itself.
Design direction
Simple, consistent, easy to navigate
Five principles guide the design of this site.
Focused on the projects
The design is simple, so visitors look at the projects and not at the interface.
Consistent on every page
All pages use the same layout and the same components, so the site is easy to learn.
Few styles, used everywhere
The site uses a small number of sizes, spacings, and colours, and repeats them on every page.
Easy to navigate
Visitors can always see where they are, and they can move to another section or project in one step.
Usable on every device
The site has the same content and the same features on a phone and on a computer, and it can be used with a keyboard.
Design system
Designed as a system
One system for the whole site: every page shares the same type, spacing and components.
The full system, Pare, is documented separately: getting started, foundations, tokens, components and patterns.
Build
Built in code
The site was built with Claude Code, and the design was refined in the browser instead of in static files.
The design system is small, so it can be changed quickly: reusable components, shared tokens, and one case-study template. The design and the code were changed at the same time, with no separate handoff step.
Performance
Fast to load and accessible
The hero photo is the largest image on the site, so I planned its file size and loading as part of the design.
One photograph is upscaled once and served as WebP in four widths. The browser loads only the size the viewport needs, and motion doesn’t slow the page. Contrast and reduced-motion behaviour were checked too.
Hero photo file size by width (WebP)
Motion that doesn’t slow the page
The slow zoom of the photo is a CSS transform, and the glow animation pauses when the hero is off screen or the tab is hidden.
Contrast checked
On black, body text has a contrast ratio of 21:1, muted text 11.2:1, and the accent colour 4.58:1.
Reduced motion
When reduced motion is on, the photo does not move, the glow is drawn once and does not animate, and the text appears without an entrance animation.
Outcome
A reusable system
The portfolio was launched as a responsive site with a reusable design system and case-study template.
All case studies now use the same structure, so a new case study does not need a new page design. The code is simple enough that I can keep improving the design directly in code.
More projects
