Profile

Overview

The profile module provides comprehensive user profiles with editable sections for professional information, marketplace services, and a follow system.

Module path: src/lib/modules/profile/ Routes: /profile, /profile-by-username/[id], /public-profile/[id]

Profile Sections

Section	Description
Personal Info	Name, avatar, banner, about me, tagline
Work Experience	Job history with companies, skills, achievements
Education	Degrees, institutions, dates
Skills	Skill name, level (beginner-expert), category
Projects	Portfolio items with media, dates, skills used
Testimonials	Client testimonials with author info
Certifications	Professional certifications with credentials
Social Links	Platform links (GitHub, LinkedIn, etc.)
CTAs	Call-to-action buttons (hire, contact, schedule)

Follow System

interface Follow {
  followerId: string;
  followingId: string;
  createdAt: Timestamp;
}

followManager

followManager.isFollowing;   // Is following viewed profile
followManager.myFollowers;   // Users following me
followManager.myFollowing;   // Users I follow
followManager.mutualFollows; // Bidirectional follows
followManager.toggleFollow();

Firestore collection: follows/{followerId}_{followingId}

Marketplace Services

Profiles can include marketplace service listings:

interface Service {
  title: string;
  description: string;
  category: ServiceCategory;
  subcategory: string;
  packages: ServicePackage[];  // basic/standard/premium
  status: 'published' | 'archived' | 'draft';
  media: MediaItem[];
  faqs: FAQ[];
  requirements: string;
}

State Management

profileManager

profileManager.loadProfileById(id);
profileManager.createProfile(data);
profileManager.updateProfile(updates);
profileManager.openPreviewDialog();
profileManager.openBusinessCardDialog();

Manages subcollections: testimonials, skills, workExperience, education, certifications, projects, ctas, socialLinks.

Components

Profile Editing

• profile-editor.svelte - Main editor wrapper
• personal-information.svelte - Name and contact
• profile-avatar.svelte / profile-banner.svelte - Image management
• about-me.svelte - Bio, tagline, contact, languages, location
• experiences-principal.svelte - Work history
• education.svelte - Education entries
• projects.svelte - Portfolio with drag-drop media
• testimonials.svelte - Client testimonials
• certifications.svelte - Professional certs
• cta.svelte - Call-to-action buttons
• social-links.svelte - Social platform links

Profile View

• profile-preview.svelte - Full profile display
• profile-header.svelte - Header with avatar and stats
• Section-by-id components for each section

Service Editor

• service-editor.svelte - Service creation/editing
• service-edit-packages.svelte - Pricing tiers
• service-edit-faq.svelte - FAQ management
• service-edit-media.svelte - Media uploads

Firestore Structure

profiles/{userId}/
├── testimonials/{id}
├── skills/{id}
├── workExperience/{id}
├── education/{id}
├── certifications/{id}
├── projects/{id}
├── ctas/{id}
└── socialLinks/{id}

Routes

Route	Purpose
/profile	Edit own profile
/profile-by-username/[id]	View profile by username (authenticated)
/public-profile/[id]	Public profile view (no auth required)