Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/animated-profile-card// 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://i.pravatar.cc/150?u=henrie"
coverImageUrl="https://images.unsplash.com/photo-1554147090-e1221a04a025?q=80&w=2070&auto=format&fit=crop"
rating={4.8}
duration="8 Days"
rate="$40/hr"
tools={toolsData}
isBookmarked={isBookmarked}
onBookmark={handleBookmark}
onGetInTouch={handleGetInTouch}
/>
</div>
);
};
export default ProfileCardDemo;