Portfolio site cho freelance & outsource VN | 9 mẹo xin việc 2026
Portfolio tốt cho freelance/outsource VN không phải gallery đẹp — mà là trang thuyết phục trong 3 giây. Hero nói rõ bạn làm được gì; mỗi dự án có vấn đề – giải pháp – số liệu; site nhẹ trên mobile 4G. Recruiter và PM client không đọc README dài: họ cần bằng chứng bạn ship được feature, giao tiếp được, và không làm chậm delivery.
Ở Việt Nam, nhiều developer apply freelance, outsource, hoặc in-house vẫn gửi cùng một kiểu portfolio: slider ảnh dự án, danh sách tech stack dài, và câu “Passionate about coding”. Kết quả: PM client mở link 10 giây rồi đóng tab.
Bài này dành cho người xin việc / nhận job remote hoặc onsite qua portfolio site — đặc biệt môi trường outsourcing (body leasing, project-based) và freelance Upwork/TopDev/LinkedIn. Không phải gallery design agency; là tài liệu bán kỹ năng kỹ thuật.
Ai nên đọc bài này
- Fresher / junior muốn chuyển từ “học xong bootcamp” sang có case study đọc được
- Mid-level đang làm outsource muốn nhảy client tốt hơn hoặc freelance song song
- Backend/mobile vẫn cần site (dù ngắn) vì client thường hỏi “cho xem sản phẩm”
Không nhắm: portfolio chỉ để khoe animation nặng, hoặc site 20 trang không có CTA liên hệ.
3 giây đầu: hero phải trả lời được câu hỏi nào?
Khi recruiter hoặc PM mở URL, họ hỏi thầm:
- Người này làm vai trò gì? (FE / BE / fullstack / mobile)
- Stack nào họ đủ tin để giao task tuần đầu?
- Có bằng chứng không — demo, số liệu, repo?
NG vs OK
| NG (hay gặp) | OK (dễ scan) |
|---|---|
| "Hi, I'm a passionate developer" | "Frontend React/TypeScript — SPA & SSR, tối ưu Core Web Vitals" |
| Ảnh bản thân lớn + quote dài | 1 dòng vai trò + 3 chip stack + CTA: Xem case / Liên hệ |
| Menu 8 mục trước nội dung | Hero → 3 case nổi bật → Liên hệ; phần còn lại phía dưới |
| Chỉ tiếng Anh kém hoặc chỉ tiếng Việt jargon | Hero song ngữ ngắn nếu target client JP/US; case chi tiết tiếng Việt hoặc Anh rõ ràng |
Tip thực tế VN: Nhiều job outsource cho client Nhật/Hàn/US. Nếu target JP, thêm 1 dòng tiếng Nhật hoặc ghi “Business-level Japanese (JLPT N2)” cạnh hero — đừng chôn trong CV PDF thôi.
Case study: viết như báo cáo giao việc, không như caption Instagram
Cấu trúc tối thiểu cho mỗi dự án:
| Phần | Nội dung cần có |
|---|---|
| Bối cảnh | Loại sản phẩm, ai dùng, quy mô team (1 người / 5 FE…) |
| Vấn đề | Chậm load, thiếu auth, báo cáo thủ công… |
| Vai trò của bạn | ”Thiết kế API pagination”, không chỉ “tham gia frontend” |
| Stack & quyết định | Vì sao chọn Next thay CRA; vì sao Redis cache |
| Kết quả | Số: LCP 4.2s → 1.8s; giảm 30% ticket bug; ship trong 3 sprint |
| Link | Live / repo / video walkthrough nếu NDA |
Ví dụ viết lại
Trước: “Làm website bán hàng bằng React.”
Sau: “E-commerce B2C — Next.js + Stripe. Phụ trách listing & checkout. Listing bị chậm khi 2.000 SKU: thêm React Query cache + pagination cursor, TTI cảm nhận giảm ~40% trên máy mid-range. Repo demo + screenshot Lighthouse trước/sau.”
Số không cần hoàn hảo marketing — cần đo được và bạn giải thích được trong phỏng vấn.
Chọn dự án nào đưa lên (freelance & outsource)
| Ưu tiên cao | Ưu tiên thấp / bỏ |
|---|---|
| Feature có constraint thật (perf, auth, offline, tiếng Việt encoding) | Todo app / weather clone không customization |
| Có live URL hoặc video demo | Chỉ screenshot Figma không có code |
| Bạn own một module rõ (payment, admin, realtime) | "Làm theo tutorial YouTube" không ghi nguồn học |
| 1 dự án side có domain (fintech giả lập, logistics, LMS) | 15 repo nhỏ không README |
NDA outsource: Không lộ tên client. Viết “Client JP — logistics dashboard (NDA)” + mô tả kỹ thuật + screenshot đã che data. PM hiểu NDA; họ không hiểu khi bạn để trống hoàn toàn.
Tốc độ trang = bằng chứng kỹ năng FE
Portfolio chậm trên điện thoại Android tầm trung là tín hiệu đỏ với team frontend. Checklist nhanh:
- Ảnh hero/screenshot: chuyển WebP, giới hạn ~100–200KB/ảnh — dùng nén ảnh WebP ngay trên trình duyệt, không cần upload server lạ.
- Font: tối đa 2 family;
font-display: swap. - Không autoplay video nền; demo để nút Play.
- Host tĩnh (Cloudflare Pages, Vercel, GitHub Pages) + HTTPS.
- Đo Lighthouse mobile; mục tiêu thực tế: LCP < 2.5s trên mạng chậm giả lập.
Favicon thiếu làm site trông “chưa ship”. Tạo bộ kích thước từ 1 ảnh bằng tạo Favicon.
Khi share portfolio lên LinkedIn/Facebook, kiểm tra title–desc–ảnh bằng xem trước OGP để tránh card trống hoặc crop xấu.
SEO kỹ thuật tối thiểu (đủ để được tìm thấy)
Không cần chiến dịch content marketing ngày đầu. Làm đúng 6 điểm:
<title>: tên + vai trò + từ khóa (“Nguyen A — React Developer Portfolio”)- Meta description 140–160 ký tự, có CTA nhẹ
- Heading một
h1; case dùngh2 - URL sạch:
/projects/inventory-dashboard/ robots.txt+ sitemap nếu có blog- Ngôn ngữ:
lang="vi"hoặclang="en"đúng nội dung trang
Tìm kiếm nội địa: Nhiều ứng viên chỉ optimize tiếng Anh. Nếu target công ty VN, thêm trang hoặc section tiếng Việt — recruiter local hay search “portfolio frontend [tên]”.
Blog nhỏ: chứng minh tư duy, không spam
4–6 bài đủ. Chủ đề có giá trị bookmark:
- Fix CORS khi FE Vite + BE Nest local
- Vì sao chọn cursor pagination thay offset
- Postmortem: deploy nhầm env staging
Mỗi bài 500–800 chữ + 1 đoạn code. Link từ case study liên quan (“Chi tiết kỹ thuật trong bài viết X”).
Case study giả định (2 tình huống VN)
1) Junior outsource → client JP
Trước: Portfolio 8 dự án school, hero mơ hồ, site 4MB ảnh PNG.
Sau: Cắt còn 4 dự án; 1 dự án “Internal admin (NDA)” mô tả role rõ; nén ảnh WebP; thêm dòng “Communication: daily standup EN”. Pass screening vì PM đọc được phạm vi trách nhiệm trong 1 phút.
2) Freelance nhận job Upwork
Trước: Gửi proposal dài, không link demo.
Sau: Hero + 1 case “Landing + form lead, Astro, Lighthouse 95”, video Loom 45s. Client hỏi kỹ thuật ngay trên call thay vì nghi ngờ skill — tỷ lệ reply proposal tăng vì có bằng chứng xem được trước khi chat.
Checklist gửi CV / proposal (in đậm trước khi bấm Send)
- Hero 1 câu đọc được trong 3 giây (test với người không phải dev)
- 3 case có vai trò + kết quả; link live hoặc video
- Mobile 4G: không vỡ layout, ảnh không “trắng chờ lâu”
- Email + LinkedIn + (tuỳ) Zalo business trùng thông tin CV
- Không lộ secret: API key, data khách, screenshot PII
- OGP/favicon ổn khi share
- PDF CV và site cùng stack & title job (tránh CV “fullstack” / site chỉ “UI designer”)
Lỗi thường gặp khiến bị loại sớm
- Chỉ list logo tech — không có quyết định kỹ thuật.
- Animation nặng che mất nội dung; FPS thấp trên máy yếu.
- Không có CTA liên hệ ở above-the-fold và cuối trang.
- Repo empty commit hoặc README mặc định create-react-app.
- Copy template giống hàng loạt ứng viên cùng bootcamp — không có góc nhìn riêng.
FAQ nhanh
Portfolio có cần đăng ký tài khoản để xem không?
Không — site public. Demo app có auth thì cung cấp account test (user/pass dummy) trong case study.
Dùng subdomain hay custom domain?
Custom domain (tenban.dev) chuyên nghiệp hơn *.vercel.app khi apply mid/senior hoặc freelance rate cao. Free subdomain vẫn chấp nhận được với junior nếu nội dung mạnh.
Có nên để lương kỳ vọng trên site?
Thường không. Để trong proposal hoặc khi được hỏi. Site tập trung năng lực.
Tóm tắt hành động tuần này
- Viết lại hero 1 câu + chọn đúng 3 dự án.
- Bổ sung số liệu hoặc trước/sau cho ít nhất 1 case.
- Nén ảnh, thêm favicon, kiểm tra OGP.
- Nhờ một bạn non-dev đọc hero; sửa đến khi họ nhắc lại đúng vai trò của bạn.
Portfolio không cần hoàn hảo mãi mãi — cần đủ rõ để được gọi phỏng vấn. Cập nhật sau mỗi sprint có kết quả đo được; đó chính là tín hiệu “developer biết ship” mà outsource và freelance đều cần.