J
John
It's been 5 years since I got into design. I now have clear principles, the main one being “value instead of mindless execution”. It's easy to print generic solutions, but what we designers are hired for is our unique point of view and creative thinking. Usability combined with aesthetics is the key to memorable and enjoyable products.
The Portfolio component creates an interactive and animated profile card that expands to reveal bio information and social links. It features smooth transitions between states and provides a modern, engaging user experience perfect for personal websites and portfolio displays.
Installation
Examples
Default Configuration
Custom Styling and Links
Configuration
The component accepts a configuration object with the following interface:
Features
The Portfolio component includes several interactive features:
- Animated state transitions using Framer Motion
- Three distinct states: closed, open, and bio view
- Social media links menu with icons
- Customizable biography text with emphasized sections
- Profile image support with fallback to initials
- Responsive design with mobile optimization
- Color customization for different UI elements
- Interactive plus button with rotation animation
- Bio visualization with custom waveform design
- Smooth menu transitions with icon animations
Styling
The component uses Tailwind CSS for styling and supports customization through:
- Custom background colors for buttons
- Responsive sizing and spacing
- Smooth transitions and animations
- Hover state effects
- Flexible layout adaptation
Best Practices
- Provide appropriately sized profile images (recommended 42x42px)
- Use contrasting colors for better visibility
- Keep bio text concise for better readability
- Ensure all links are valid and accessible
- Test animations on different devices and browsers
- Maintain consistent color themes across buttons