My portfolio homepage is a deck builder: a shelf of trading card decks in vanilla JavaScript, with card art from FLUX.2 on my own GPU. I have spent a lot of hours in Wildfrost, Pokemon and Balatro. Each makes a unit's stats readable at a glance, and a project card works the same way.

Decks are methods: Vision, Audio, Language, Data, CG & Design

Each deck is a way of working, and picking one deals its cards.

  • A project has a type, one or two methods, a date, a toolset and a result.
  • Methods won because a visitor's real question is "what does this person do".
  • Format was already on every card as a type badge.

A card is three layers: dual typing, editions and seal state

Dual typing comes from Pokemon and editions from Balatro, and the seal marks unfinished work.

  • A card carries at most two methods and is dealt from every deck it belongs to.
  • Peer-reviewed papers are foils. Pinned cards are gold, and the newest unpinned card is the trending one.
  • In-progress work is dealt face down, with a one-line teaser and no link.

Nothing runs over about 400 ms

Wildfrost and Balatro set the motion rules: everything eases out, travels from somewhere to somewhere, and the screen is never busy.

  • Cards deal out of the box, measured with FLIP so they travel instead of teleporting.
  • Cards flip to show the finding, and the shelf slides up into a header strip during the deal.
  • prefers-reduced-motion drops it all to a plain page. That, keyboard access and real-phone touch were ship-blockers.

A plain list is one button away

A visible "See all projects" button goes to the plain list, for anyone who does not want a card game.

  • The deck page earned the homepage on criteria set in advance: works on a real phone, findable without instruction, still liked after two weeks.
  • Cards read the same work.json as the rest of the site, so every new article becomes a card.
  • The writing side of that pipeline is its own tool.

The same rules run the rest of the site

The About section, the article charts and the audio player follow the same rules: vanilla JavaScript, eased motion, nothing over 400 ms.

The trajectory steps through my years with the mouse wheel

The About section's trajectory splits into a curved year rail on the left and the open year's roles on the right.

  • With the pointer on the rail, each wheel notch moves one year. Arrow keys, a click on a year and a swipe do the same.
  • Hovering a role lights the stretch of years it covers, in the colour of its first topic.
  • Years further from the open one shrink and fade.

The radars tilt toward the pointer

The About section has two radars, Methods and Topics, each plotting how many projects sit on every axis.

  • The panel tilts up to 14 degrees toward the pointer, on mouse and trackpad only, and stays flat with reduced motion.
  • Each edge of the shape blends between the colours of the two axes it joins.
  • Hovering an axis dims the others and previews its projects. A click opens them in Collections.

The photo opens into one bubble per method and topic

Around my photo at the end of the About section, each bubble is a method or topic, sized by its number of projects.

  • Bubbles pack around the photo without overlap. A click opens that set in Collections.
  • On a phone they open when the photo reaches the middle of the screen.
  • Bubble radius follows the square root of the count, so area tracks the number of projects.

The bubble chart turns each ring into a donut

The One Punch Man cast chart packs one bubble per character, with area set by mentions.

  • At rest each ring is three grey arcs, one per season. On hover they take the season colours and thicken into a donut.
  • The face flips to its back. Wider bubbles show the total there, and the widest add the count for each season.

One line reveals a texture map, and its handle picks the map

The texture slider is a single line: drag it to reveal a map over the UV layout, and open the handle to switch maps.

  • Hovering the handle opens a column of round map icons, joined by an SVG goo filter. On touch, a tap opens it.
  • The same component shows the Moebius Zero maps and the election poster line art.

The audio player draws the clip's own waveform

Every audio block on the site becomes this player, drawn from the file itself in the browser.

  • The Web Audio API decodes the file into 168 bars, each the peak of its slice.
  • Dragging on the waveform seeks, and starting one clip pauses any other.
  • My voice-cloned race commentary plays every clip through it.