Resume ↗
← Back to Selected Work
03 / WEB ART DIRECTION & DESIGN SYSTEM

This Portfolio — Systems & Craft

Treating the portfolio itself as an end-to-end product design challenge: balancing expressive creative personality with crisp information hierarchy, smooth animations, and tactile micro-interactions.

Art Direction Design Token Architecture Tactile Micro-Interactions Vanilla HTML / CSS / JS
✦
THE DESIGN CHALLENGE

Keep the personality. Sharpen the usability.

Many developer/designer portfolios either fall into generic grey templates or become chaotic art experiments that bury the actual case studies. This portfolio balances both: playful neo-brutalist energy (hard offset shadows, bold high-contrast strokes, warm paper backgrounds, stickers) with strict usability, instant readability, fluid typography, and zero-bloat performance.

0 Bloat Pure Vanilla JS & CSS with 100% lighthouse speed
2 Themes Neo-Brutalist Light & Cyber-Editorial Dark mode
3 Playgrounds Live interactive sandboxes for Type, Motion & Generative UI
01 / THE MAKING OF THIS PORTFOLIO

Systems, Architecture & Craft.

This portfolio was treated as an end-to-end product design challenge. It balances an expressive, creative personality (neo-brutalist shadows, playful interaction physics, high-contrast layouts) with strict usability and zero-bloat performance.

  • Zero Dependencies: Built entirely with vanilla HTML, CSS, and JS for maximum performance.
  • Tactile Interactivity: Custom physics-based micro-interactions, magnetic buttons, and dynamic cursor states.
  • Design Systems: Comprehensive CSS token architecture for seamless light and dark mode switching.
Portfolio creative experiments and visual playground preview
The Visual Design System & Playgrounds
RETURN HOME Explore All Projects & Playground
Return to Homepage ↗