Portfolio Hero is the first screen of a designer or developer portfolio, built for the phone first.
What is inside
- Keyword badges that fall, pile up with rigid body physics and can be grabbed and thrown
- Avatar, name, role, two tone bio and social links
- Swipeable case carousel with scroll snap, auto advance and progress dots, arrows on desktop
- Empty states for the avatar and case covers
Technical details
- React component (TypeScript, about 900 lines) plus a demo file
- Tailwind CSS v4, Matter.js for physics
- Layout follows the container width through container queries
- Light and dark themes, follows the dark class on html
- Every text, link, badge and case is a prop
- Reduced motion support and keyboard navigation for the carousel
Files: portfolio-hero.tsx, demo.tsx, package.json, README.md.
Black FridayLifetime Pro for $224 instead of $449Ends in0d00h00m00sSee the deal
