Showcase Profile: Sản Phẩm Cuối Khóa
Đây là project thực hành đỉnh cao - tạo một profile page chuyên nghiệp có thể dùng ngay trên các marketplace như Upwork, Fiverr.
Profile Structure
Prompt Cho Layout:
Tạo Freelancer Profile page:
Sections:
1. Hero: Avatar, name, headline, location, availability badge
2. About: Bio paragraph, key highlights
3. Skills: Tags grid với proficiency levels
4. Portfolio: Project cards với thumbnails
5. Experience: Timeline hoặc cards
6. Reviews/Testimonials: Client feedback
7. Contact: CTA button, social links
Layout: single column, max-w-4xl, centered
Style: clean như Upwork/Toptal profiles
Hero Section
Profile hero design:
Left side:
- Avatar: 120px rounded-full, border-4 border-white shadow-lg
- Online indicator: green dot absolute bottom-right
Right side (flex-1):
- Name: text-3xl font-bold
- Headline: text-lg text-slate-600
- Location + timezone: text-sm với icon
- Hourly rate: text-xl font-semibold text-emerald-600
- Badges: "Top Rated", "100% Job Success"
CTA: "Contact Me" button prominent
Portfolio Section
Portfolio project cards:
Grid: 2 columns, gap-6
Each card:
- Thumbnail: aspect-video rounded-lg
- Title: text-lg font-semibold
- Category: badge
- Description: 2-line truncate
- Link: "View Project" với arrow icon
Hover:
- Image slight zoom
- Shadow increase
- CTA button appear
Skills Display
Skills section với levels:
Layout: flex flex-wrap gap-3
Skill tag:
- bg-slate-100 px-4 py-2 rounded-full
- Text: skill name
- Optional: proficiency bar bên trong
Categories:
- Primary Skills (large, colored bg)
- Secondary Skills (smaller, subtle)
- Tools (icons + text)
Prompt: "Highlight 5 primary skills, show 10+ secondary với subtle style"
Reviews Section
Testimonials carousel:
Card design:
- Quote: text-lg italic
- Client: avatar + name + company
- Rating: 5 stars
- Project context: brief
Layout options:
- Grid 3 columns (desktop)
- Horizontal scroll (mobile)
- Carousel với dots indicator
Animation: fade in khi scroll vào view
Call-to-Action
Contact CTA section:
Background: subtle gradient hoặc pattern
Content centered:
- Headline: "Sẵn sàng cho dự án tiếp theo"
- Subtext: "Available for full-time và contract work"
- Primary CTA: "Schedule a Call" (large, prominent)
- Secondary: "Download CV" (outline style)
Floating contact: sticky bottom bar trên mobile
Integration Points
Third-party integrations:
- Calendly: embed hoặc popup cho booking
- LinkedIn: profile link và activity feed
- GitHub: contribution graph embed
- Dribbble/Behance: portfolio API fetch
- Twitter: recent tweets
Prompt: "Add Calendly booking button với modal popup"
Responsive Considerations
| Element | Desktop | Mobile |
|---|---|---|
| Avatar | 120px | 80px |
| Layout | 2-col sections | Single column |
| Portfolio | Grid 2x2 | Horizontal scroll |
| CTAs | Inline | Sticky bottom |
🎯 Goal: Profile phải answer: "Why should I hire this person?" trong 5 seconds đầu tiên.