Components
The FreelancerProfileCard is a versatile and visually engaging React component designed to showcase a freelancer’s professional profile in a clean, modern layout. Built with Shadcn UI principles and Framer Motion for subtle animations, it highlights key information such as the freelancer’s name, title, avatar, location, and rating. The component also supports a grid of achievements to display metrics like completed projects, hours worked, or awards, making it highly configurable for different use cases. A built-in QR code allows for quick sharing or verification of the freelancer’s profile, while interactive buttons with tooltips let users copy the freelancer’s email or share the profile seamlessly. Designed for reusability, theme-awareness, and responsiveness, the FreelancerProfileCard serves as an elegant solution for personal portfolios, freelance marketplaces, or team dashboards.
Loading preview...
"use client";
import React from "react";
import { FreelancerProfileCard } from "@/components/ui/freelancer-profile-card";
export default function FreelancerProfileCardDemo() {
const achievements = [
{ label: "Projects Completed", value: 45 },
{ label: "Happy Clients", value: 32 },
{ label: "Hours Worked", value: "1200h" },
{ label: "Awards", value: 3 },
];
const handleCopyEmail = () => {
alert("Email copied to clipboard!");
};
const handleShare = () => {
alert("Share modal opened!");
};
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
<FreelancerProfileCard
name="Heisenberg"
title="Full Stack Developer"
avatarUrl="https://i.pravatar.cc/150?u=heisenberg"
email="heisenberg@example.com"
location="Albuquerque, NM"
rating={4.7}
achievements={achievements}
qrCodeUrl="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=freelancer-Heisenberg"
onCopyEmail={handleCopyEmail}
onShare={handleShare}
/>
</div>
);
}