Designer Profile Card

Component 1

About

Designer Profile Card– Personal branding showcase. Combines a strong visual identity, professional bio, and career timeline with skills and availability badges. Ideal for portfolios, resumes, or "About Me" sections to highlight experience and personality at a glance.

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

Code

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

Usage.tsx

import { ProfileCard } from "@/components/ui/designer-profile-card"; // Adjust the import path

// Icon for the badge
const ExpertDesignerIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2 h-4 w-4">
        <circle cx="12" cy="12" r="10" />
        <circle cx="12" cy="12" r="3" />
    </svg>
);


export default function ProfileCardDemo() {
  const profileData = {
    badge: {
      icon: <ExpertDesignerIcon />,
      text: "Expert Designer",
    },
    name: "Ravi Katiyar",
    title: "Your Designer",
    subtitle: "Brief initial presentation of myself and my previous experiences.",
    imageUrl: "https://cdn.21st.dev/assets/mirror/5b/5b0f78944cac8a8ba2cee251863fc0c10b1c774b8ee6fd33a37eb478ec722948.png", // Placeholder image
    imageAlt: "Johan Beker, a professional designer.",
    status: {
      isAvailable: true,
      text: "Available for work",
    },
    greeting: "Hello I am Ravi Katiyar",
    bio: "I'm Ravi Katiyar, a dedicated Web Designer & Developer based in the vibrant city of Berlin, Germany. I specialize in creative design with seamless technical execution to craft exceptional digital experiences.",
    skills: [
      { text: "Product Design" },
      { text: "UX Design", variant: "default" }, // Highlighted skill
      { text: "UI Design" },
      { text: "Framer" },
      { text: "Branding" },
      { text: "Webflow" },
    ],
    experiences: [
      { role: "Freelance", company: "GreenLeaf Co", year: 2021, link: "#" },
      { role: "UI/UX Designer", company: "Digital Agency", year: 2022, link: "#" },
      { role: "Senior Designer", company: "Creative Studio", year: 2024, link: "#" },
    ],
  };

  return (
    <div className="flex items-center justify-center bg-background min-h-screen p-4">
      <ProfileCard {...profileData} />
    </div>
  );
}