← Back to Selected Work
2025/Frontend / Design Engineering

Dual-Mode Portfolio

Nuxt 4Vue 3Three.jsGSAPTailwindCSS v4TypeScript

This portfolio itself is a design engineering showcase. It delivers two completely different interactive experiences within a single Nuxt 4 codebase — a Professional Mode built on editorial typography, data-table filtering, and GSAP scroll-triggered animations, and a Creative Mode featuring Three.js particle fields, ScrambleText decoding, SplitText multi-directional word reveals, and Flip-animated skill filtering. A full-screen GSAP state-machine transition with mode-specific loaders separates the two experiences. The entire application uses Static Site Generation for zero-server deployment, OkLch color tokens for perceptually uniform theming, and comprehensive prefers-reduced-motion support across every animation.

Key Highlights

  • 01Duality Pattern — Strategy Pattern architecture rendering completely different component trees per mode with zero scattered v-if conditions
  • 02Three.js hue-shifting particle field with scroll-driven parallax, 2000 particles at 60fps via low-power WebGL
  • 03GSAP ScrollTrigger composable with automatic cleanup via gsap.context(), lazy-loaded GSAP, and SSR safety
  • 04Full prefers-reduced-motion compliance — every animation in both modes gracefully degrades or disables
  • 05Static Site Generation with OkLch color tokens and 3-theme CSS architecture (Pro Light, Pro Dark, Creative)
GitHub ↗