Freelancer Profile Card

Cards 357

About

Freelancer Profile Card A responsive and animated profile card component, ideal for showcasing freelancers, team members, or user profiles. It features a banner, avatar, user details, stats, and a call-to-action, all powered by props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Freelancer Profile Card to your project and fits it to your theme.

Code

How Freelancer Profile Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { FreelancerProfileCard } from "@/components/ui/freelancer-profile-card";
import { LayoutTemplate, Palette } from "lucide-react"; // Using lucide icons as placeholders for tools

// Helper component for tool icons in the demo
const ToolIcon = ({ icon: Icon }: { icon: React.ElementType }) => (
  <div className="flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground">
    <Icon className="h-4 w-4" />
  </div>
);

/**
 * Default demo for the FreelancerProfileCard.
 */
export default function FreelancerProfileCardDemo() {
  const tools = [
    <ToolIcon key="tool-1" icon={LayoutTemplate} />,
    <ToolIcon key="tool-2" icon={Palette} />,
  ];

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-10">
      <FreelancerProfileCard
        name="Henrie Ekemezie"
        title="Web & UI/UX Designer"
        avatarSrc="https://cdn.21st.dev/assets/mirror/ce/ce1536afd37b7d4e6c9ffbee65b35e6897d4467ab07efc9b6466b6c1744654f9.jpg"
        bannerSrc="https://cdn.21st.dev/assets/mirror/cc/cc664969b966d4680cb3600bd690c14c5feef5e7656f1c1c535f090d7a64ebd0.jpg"
        rating={4.0}
        duration="8 Days"
        rate="$40/hr"
        tools={tools}
        onGetInTouch={() => console.log("Get in touch clicked!")}
        onBookmark={() => console.log("Bookmark clicked!")}
      />
    </div>
  );
}