mari.zip

Colophon

This site is a personal experiment in bringing game UI aesthetics to the web. The design is heavily inspired by the menu system of Nier: Automata, a 2017 action jRPG by PlatinumGames. I think it's the most elegant interface ever designed for a video game.

Every element of the website such as the muted palette, geometric background, floating sidebar, window-based content panels, rotating diamond bullets; is a reference to that UI. The dark color scheme is my own twist; the original game uses warm beige tones.

My speciality is backend and systems engineering so frontend isn't my strength, thus the design of the website was made with Vercel's v0 using Claude Opus 4.6. It cost about $20 in credits to generate and refine to my taste. Integrations with third-party APIs for the Blog, Projects, Bookmarks, Playlist and Maps are all hand written.

Tech Stack

Framework
Next.js 16
Styling
Tailwind CSS v4
Components
shadcn/ui (heavily customized)
Font
Libre Baskerville
Hosting
Vercel
Domain
Porkbun

Integrations

Blog
.mdx files living in the repo tree
Projects
GitHub
Bookmarks
Raindrop.io
Playlist
Spotify
Maps (Data)
Google Timeline
Maps (Visualization)
Leaflet (OpenStreetMap tiles)
Source code of the websiteBack to Uses

"Simplicity is not the absence of complexity, it's what you build after you understand it"