- React & TypeScript
- Design systems & tokens
- Motion & interaction
- Accessibility
// Sol Arden is
designer cartographer engineer
Design engineer building maps and data stories for the web.
Hong Kong from Phoenix
Scroll to explore
About
01 / about
I’m a designer‑engineer obsessed with the space where code meets craft. I turn bold ideas into playful, high‑performance websites that people actually want to explore — one shader, one easing curve, one pixel at a time.
0Years on the web
0Projects shipped
0Open-source libraries
0Cities called home
02 / selected work
Recent
projects
- 01tidelinesTide and ferry map · WebGL, TypeScriptA live map of Victoria Harbour: tides, ferry routes and vessel positions drawn as moving points, readable on a phone at the pier.2026
- 02dustlightAir-quality atlas · D3, CanvasAn atlas of desert air: ten years of dust and ozone readings across Arizona, with a timeline to scrub and stations to compare.2025
- 03legendDesign system · React, design tokensA design system for mapping tools: tokens, forty components and motion rules, documented with live examples and accessibility notes.2025
- 04nightshiftData story · scrollytellingA scrolling story about a city after dark, told with transit, energy and noise data. Every chart has a text alternative.2024
- 05contourOpen-source library · TypeScriptA small library that turns elevation data into contour lines in the browser. No dependencies, 6 kB.2024
- 06waypointTrail planner · offline-first PWAA trail planner that works without signal: routes, water sources and elevation profiles stored on the device.2023
03 / capabilities
Expertise
- Charts that explain
- Maps & geodata
- Large datasets
- Scrollytelling
- WebGL & Three.js
- Shaders
- Generative art
- Procedural animation
- Figma to code
- Interaction studies
- User testing
- Design reviews
- Node & Python
- Build pipelines
- Testing
- AI tools
04 / experience
Where I’ve
delivered
From a studio in Phoenix to a harbour-side desk in Hong Kong: interfaces that make data easy to read.
Work · 01
Arden Studio
Independent · 2023 → now
- Design and build interactive maps and data stories for newsrooms, transit agencies and research groups.
- Maintain contour and legend, two open-source libraries used in production.
Work · 02
Tidewater Maps
Senior design engineer · Hong Kong
- Led the front end of a live harbour map used by ferry operators and commuters.
- Built the design system shared by four product teams, and cut the main bundle by 40%.
- Set up accessibility reviews: every release is tested with a keyboard and a screen reader.
Work · 03
Saguaro Labs
Front-end developer · Phoenix
- Built dashboards of air-quality and water data for city agencies.
- Moved the charts from images to Canvas and WebGL, so large datasets stay smooth.
Education
Sonoran Institute of Design
2012 → 2016
- B.F.A. in Interaction Design, with a minor in Geography.
Next
Open to what’s next
Hong Kong · from Phoenix
- Design engineering on maps, data and creative tools.
- Small teams that care how things feel as well as how they work.
05 / toolkit
Tools I
build with
What I design and build with, and how I keep projects moving.
Design & build
Interfaces built in React and TypeScript, with motion and accessibility handled properly.
- TypeScript
- React
- Next.js
- Tailwind
- Motion
- Three.js
- Figma
Maps & data
Turning large, messy datasets into maps and charts people can read.
- D3
- MapLibre
- Observable Plot
- Python
- SQL
Delivery
Work kept visible and shipped in small steps, so nobody is surprised at the end.
- GitHub
- Linear
- Playwright
- Vitest
- Storybook