Card Component: ProfileCard - Chef & User Profiles

[wtfzdotnet]

User Story

As a recipe platform user, I want to see chef and user profile information so that I can learn about recipe creators and discover their other content.

Background

ProfileCard displays chef and user information across the platform, building trust and community connections while showcasing culinary expertise.

Component Requirements

Visual Elements

• Profile Avatar: High-quality headshot with fallback initials
• Name and Title: Chef name with professional designation
• Bio Summary: Brief description or expertise area
• Social Proof: Follower count, recipe count, ratings

Professional Information

• Culinary Credentials: Certifications, experience level
• Specialty Areas: Cuisine types, dietary focuses
• Achievement Badges: Top chef, verified profile, awards
• Location Information: Restaurant, city, or region

Interactive Elements

• Follow/Unfollow: Social connection functionality
• View Profile: Navigate to full profile page
• Recipe Collection: Quick access to chef's recipes
• Social Links: External social media connections

Technical Specifications

interface ProfileCardProps {
  profile: {
    id: string;
    name: string;
    avatar: string;
    title?: string;
    bio: string;
    stats: {
      followers: number;
      recipes: number;
      avgRating: number;
    };
    badges: string[];
    specialties: string[];
    location?: string;
    socialLinks?: SocialLink[];
  };
  variant?: 'compact' | 'standard' | 'detailed';
  showFollowButton?: boolean;
  onFollow?: (profileId: string) => void;
}

Layout Variants

• Compact: Sidebar or recipe attribution
• Standard: Recipe discovery and search results
• Detailed: Featured chef showcases
• Mini: Comment and review attribution

Cultural Considerations

• Global Expertise: International chef recognition
• Cultural Specialties: Authentic cuisine indicators
• Heritage Cooking: Traditional knowledge acknowledgment
• Language Support: Multilingual name and bio display

Acceptance Criteria

• Professional chef information display
• Social interaction functionality
• Cultural cuisine specialty indicators
• Verification badge system
• Mobile-responsive design
• Accessibility compliance
• Storybook stories for all variants
• Loading and error states

Dependencies

• Issue Priority 1: Core Navigation & Layout Components #46 (Core Navigation & Layout)
• Issue Priority 4: Interactive & Feedback Components #49 (Interactive & Feedback)
• User authentication system

Blocks

• Chef profile pages
• Recipe attribution
• Social following features
• Community interaction

Roles Involved

• UX/UI Designer: Professional profile presentation
• Food Historian/Anthropologist: Cultural expertise display
• Lead Developer: Social interaction functionality
• Professional Chef: Profile content requirements

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com