Buổi 15: Portfolio — Showcase Tất Cả 🎨

Thành quả: Portfolio website cá nhân live trên Internet, có 5+ projects!

---

🎯 Mục tiêu buổi học

1. Hiểu tại sao Portfolio quan trọng
2. Cấu trúc Portfolio chuyên nghiệp
3. Tổng hợp tất cả dự án từ buổi 01-14
4. Tạo Portfolio website hoàn chỉnh
5. Deploy và chia sẻ

---

📖 Phần 1: Portfolio = CV Thời Đại AI

So sánh

CV truyền thống	Portfolio Website
1 trang giấy, text	Website đẹp, interactive
"Tôi biết HTML" (nói)	Live website (chứng minh!)
Gửi email	Share link
Nhàm chán	WOW!

Ai cần Portfolio?

• 👨‍💻 Developer: Show code projects
• 🎨 Designer: Show design work
• 📝 Writer: Show articles
• 🎓 Student: Show học tập journey
• 🚀 Anyone: Show khả năng!

---

📖 Phần 2: Cấu Trúc Portfolio

5 Sections Bắt Buộc

1. HERO — Tên + Tagline + Avatar
2. ABOUT — Giới thiệu bản thân (ngắn gọn)
3. SKILLS — Kỹ năng (progress bars / tags)
4. PROJECTS — 5+ dự án với demo link
5. CONTACT — Form liên lạc / Social links

Mỗi Project Card cần gì?

┌────────────────────────────────┐
│  📷 Screenshot/Thumbnail       │
│                                │
│  🏷️ Project Name               │
│  📝 Mô tả 2 dòng              │
│  🏗️ Tech: HTML, CSS, JS        │
│                                │
│  [🔗 Demo]  [📂 Source Code]   │
└────────────────────────────────┘

---

📖 Phần 3: Thu Thập Dự Án

Dự án từ khóa học

Buổi	Dự án	Type
01	Chat AI đầu tiên	✅
03	Setup Lab	⬜ (không showcase)
05	Product Brief	📄 Document
06	Wireframe + Mockup	🎨 Design
07	Profile Card	✅ Web
08	Interactive Profile (Dark Mode + Counter)	✅ Web
09	Landing Page sản phẩm	✅ Web (highlight!)
11	Content samples	📝 Writing
14	Custom Skill	🔧 Tool

Thêm dự án bonus

Nghĩ thêm 2-3 dự án mini:

• Calculator web app
• Weather app (dùng API)
• Quiz game
• Todo list
• Recipe finder

---

📖 Phần 4: Code Portfolio

Super Prompt

[P] Expert frontend developer + portfolio designer.
[T] Tạo portfolio website hoàn chỉnh cho học sinh VibeCoding.
[C] Tên: [TÊN]. Tagline: "VibeCoder | AI-Powered Creator".
    5 projects cần showcase. Tiếng Việt.
[F] Single-page, dark theme (#0a0a1a → #1a1a3e),
    gradient accents (purple→blue), glassmorphism cards,
    smooth scroll, responsive, AOS-style animations.
    Sections: Hero (typing animation), About, Skills (tags),
    Projects (cards grid), Contact (form + social).
[C] 1 file HTML (inline CSS+JS). Font: Inter.
    NO frameworks. Mobile-first.
    Projects có screenshot placeholder, demo link, source link.
    Hover effects on cards. Active nav indicator.

---

📖 Phần 5: Polish & Deploy

Checklist trước deploy

✅ Responsive (mobile + tablet + desktop)
✅ Tất cả links hoạt động
✅ Hình ảnh load nhanh (webp, ≤200KB)
✅ Meta SEO tags
✅ Favicon
✅ Smooth scroll animation
✅ Dark mode (nếu có)
✅ Contact form hoạt động
✅ Social links đúng URL
✅ Không typo tiếng Việt

Deploy

cd ~/VibeCoding/portfolio
git init
git add .
git commit -m "Portfolio v1.0 — VibeCoding Graduate"
git remote add origin https://github.com/USERNAME/portfolio.git
git push -u origin main
# → Enable GitHub Pages

---

🎓 Tóm tắt

Bước	Hành động	Output
1	Thu thập projects	Danh sách 5+
2	Viết mô tả mỗi project	Cards content
3	Code portfolio	index.html
4	Polish + test	Checklist pass
5	Deploy	Live URL!

⏭️ Buổi tiếp theo

Buổi 16: Tốt Nghiệp — Demo Day! 🎓