Animated Profile Card A modern, animated profile card to showcase user details, stats, and skills. It features a subtle hover effect and staggered animations on load, built with Framer Motion.
// demo.tsx
import React, { useState } from 'react';
import { ProfileCard, Tool } from '@/components/ui/animated-profile-card';
// Example icons, you can replace these with your preferred icon library
import { Code, Figma, Framer } from 'lucide-react';
const toolsData: Tool[] = [
{ name: 'Figma', icon: Figma },
{ name: 'Framer', icon: Framer },
{ name: 'VS Code', icon: Code },
];
const ProfileCardDemo = () => {
const [isBookmarked, setIsBookmarked] = useState(false);
const handleBookmark = () => {
setIsBookmarked((prev) => !prev);
console.log('Bookmark toggled');
};
const handleGetInTouch = () => {
console.log('Get in touch clicked');
alert(`Contacting Henrie Ekemezie`);
};
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<ProfileCard
name="Henrie Ekemezie"
role="Web & UI/UX Designer"
avatarUrl="https://cdn.21st.dev/assets/mirror/0e/0e070896705960db5025f59cd13d62e3ab4289d8702d084c79e11234b7ee1eab.jpg"
coverImageUrl="https://cdn.21st.dev/assets/mirror/65/65d87811cc913be5b3a2486c3319a85385e975c3501833c34f5779cfc749773d.jpg"
rating={4.8}
duration="8 Days"
rate="$40/hr"
tools={toolsData}
isBookmarked={isBookmarked}
onBookmark={handleBookmark}
onGetInTouch={handleGetInTouch}
/>
</div>
);
};
export default ProfileCardDemo;