return

I always wanted to experiment with Framer Motion and Lenis, so I used my own resume as the perfect playground. Instead of building a static portfolio, I leaned into motion, transitions and layout rhythm to make the site feel intentional and alive. It became both a personal brand piece and a practical exercise in visual design, interaction design and frontend polish.

Next.jsTypeScriptTailwindCSSFramer MotionLenisLiveNext.jsTypeScriptTailwindCSSFramer MotionLenisLiveNext.jsTypeScriptTailwindCSSFramer MotionLenisLiveNext.jsTypeScriptTailwindCSSFramer MotionLenisLive

The challenge

Design a polished, motion-driven resume that highlights experience and craftsmanship. This case study explores building a small design system, balancing expressive motion with accessibility, and composing reusable components that remain performant. I used Framer Motion and Lenis to create smooth, intentional transitions that enhance narrative flow without distracting from content.

The process

  • How to design and manage a lightweight design system
  • Balancing expressive motion with accessibility and performance
  • Structuring reusable components for content and layout

Stack

Next.jsTypeScriptTailwindCSSFramer MotionLenis

Future ideas

  • CMS for editing resume data
  • Small admin UI to toggle design variants
  • Dedicated story/project pages powered by slugs

Other projects