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.