Folio

Personal portfolio with living card system and 3D interactions.

Live preview

Features

  • Living card system with breathing organic borders
  • 3D tilt on hover (rotateX/Y springs)
  • Scroll-driven entry animations
  • Spotlight card effect with cursor tracking
  • Skills, experience, and project sections

Best For

Developer portfolios, designer showcases, personal websites, freelancer landing pages.

Tech

  • Next.js 16, React 19, Tailwind CSS v4
  • Three.js (React Three Fiber) for 3D hero
  • CSS @property for living card border animations
  • Framer Motion for scroll and tilt effects

Customization Tips

Living cards use CSS classes (.living-card) that can be applied to any container. The breathing animation range and speed are adjustable in globals.css. The 3D tilt spring stiffness and damping are props on the card component.