Fancy Portfolio
Study: Cards That Stack Like Physical Objects
Fanned-card layout portfolio showcasing advanced CSS transforms and interactive layouts.
The question I was exploring with this portfolio: can a browser card feel like you could pick it up? Not metaphorically, but with actual physical presence, a sense of weight and rotation and depth that makes the hand want to reach for it.
CSS 3D transforms are the enabling technology, but they are not the answer. The answer is in the physics of stacking. I had the cards fan out from a shared origin point, with the front card carrying the least rotation and the rear cards angling progressively away from the viewer. Hover shifts the frontmost determination based on 3D coordinates, not just z-index. The spring-like hover states respond immediately rather than with the floaty easing that usually signals "CSS animation" to a trained eye.
This was my fourth personal portfolio, sitting between A Portfolio in Blue and the current notebook. The discipline I set for myself was structural: no loud colors, no gradients, just form and depth and crisp borders. The whole effect depends on the card geometry being believable, so anything that would pull attention away from the physical metaphor got cut.
What followed from this experiment was a desire for something quieter. The fanned cards work, but they demand attention, they declare their cleverness. I wanted to move back toward restraint, toward a format that disappears behind the work rather than competing with it. That instinct led directly to the notebook aesthetic of the current portfolio.