02 — Dashboard
Ágætis
We're revamping the charts at Mangomint, and I had time to experiment a bit. They came out pretty cool so I made a fake web agency and gave it a little vibe from my favorite band Sigur Rós
02.1 — The project
The charts were done as part of a work project but the site as a whole, was a playful experiment. The sidebar and connecting lines were tricky to get right, but I think I finally got them.
02.2 — The labels
- Ágætis byrjunA good beginning
- VonHope
- Takk…Thanks
- ValtariSteamroller
02.3 — The cover story
Why Ágætis
No idea. I've been a huge Sigur Rós fan since I was a teenager. There was something about their sound that got to me. I even got a bit too obsessed with Iceland as a whole, I hear they have great fly-fishing.
02.4 — The retheme
Same charts, new clothes
I picked a Rose-pine palette for the retheme. A few years ago a co-worker at Mangomint had it as his VScode theme and I loved it enough to switch. It felt natural to carry it over to this project as well.
02.5 — The copy
All fake
I had AI simulate and seed the data for me. You can toggle between english and icelandic. The english data makes sense and the icelandic data is for show, cuz I don't speak Icelandic
02.6 — First engagement
First-time vs repeat work
A line connects the card you're reading to its row in the sidebar. It finds both ends again on every scroll, which took way longer to get right than I want to admit. This is that same line, with the stack next door standing in for the sidebar.
Next.jsOne layout, three viewsReactPanels, rows, one contextTypeScriptKeeps the seeds honestD3Scales and shapes, no chartsGSAPMoves the lineSCSS ModulesOne file per part