Trong thị trường lao động IT cạnh tranh năm 2026, một portfolio website cá nhân không còn là lựa chọn mà là yêu cầu tối thiểu. CV giấy chỉ liệt kê kỹ năng, trong khi portfolio cho nhà tuyển dụng thấy sản phẩm thực tế bạn đã làm.

Theo khảo sát từ TopDev năm 2026, ứng viên có portfolio website được mời phỏng vấn nhiều hơn 40% so với ứng viên chỉ gửi CV.

Portfolio thể hiện: kỹ năng kỹ thuật thực tế, gu thẩm mỹ và thiết kế, khả năng hoàn thành dự án từ đầu đến cuối, và sự chuyên nghiệp và đầu tư vào thương hiệu cá nhân.

Bắt đầu bằng cách tạo dự án Next.js với App Router:

npx create-next-app@latest portfolio --typescript --tailwind --app

Cấu trúc thư mục khuyến nghị:

```

portfolio/

app/

layout.tsx

page.tsx

about/page.tsx

projects/page.tsx

contact/page.tsx

components/

Navbar.tsx

Footer.tsx

ProjectCard.tsx

SkillBadge.tsx

lib/

projects.ts

utils.ts

public/

images/

```

Cài thêm dependencies cần thiết:

npm install framer-motion lucide-react

Navbar sticky với hiệu ứng glassmorphism:

Dùng Tailwind CSS để tạo navbar trong suốt, có hiệu ứng mờ khi scroll:

```tsx

```

Hero Section với Framer Motion:

```tsx

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

transition={{ duration: 0.6 }}

className="min-h-screen flex flex-col justify-center items-center text-center px-4"

>

Hi, I'm John

Full-stack developer with 3+ years of experience building modern web applications

```

Thêm viewport={{ once: true }} để animation chỉ chạy một lần khi scroll vào viewport.

Trang projects là phần quan trọng nhất của portfolio. Thiết kế grid layout với Project Card mỗi dự án:

```tsx

interface Project {

title: string;

description: string;

tags: string[];

image: string;

liveUrl?: string;

githubUrl?: string;

}

```

Mẹo tạo Project Card thu hút:

• Dùng hình ảnh thực tế của dự án (screenshot) thay vì ảnh stock.
• Thêm tech stack badges dưới mỗi dự án (React, Node.js, MongoDB...).
• Nếu dự án đã deploy, thêm link live demo là điểm cộng lớn.
• Mô tả dự án bằng action verbs và kết quả cụ thể: 'Xây dựng hệ thống đặt vé cho rạp chiếu phim, phục vụ 500+ người dùng mỗi ngày'.

Sử dụng server components để tối ưu SEO:

```tsx

// app/projects/page.tsx - Server Component

async function ProjectsPage() {

const projects = await getProjects(); // Fetch từ CMS hoặc local data

return (

);

}

```

Portfolio của bạn cần xuất hiện trên Google khi ai đó tìm kiếm tên bạn.

Đây là cách tối ưu SEO: Metadata với Next.js:

```tsx

// app/layout.tsx

export const metadata = {

title: 'John Developer | Portfolio',

description: 'Full-stack developer specializing in React, Next.js and Node.js',

openGraph: {

title: 'John Developer | Portfolio',

description: 'Hire a passionate full-stack developer',

images: ['/images/og-image.png'],

},

}

```

Tối ưu hiệu suất:

• Dùng Next.js Image component để tự động tối ưu ảnh: import Image from 'next/image'.
• Static Generation (SSG) cho trang portfolio: export const dynamic = 'force-static'.
• Lazy load các section dưới fold với Intersection Observer.
• Bundle phân tích với next/bundle-analyzer để đảm bảo không có dependency thừa.

Google Analytics và SEO tools:

• Thêm Google Analytics 4 hoặc Plausible (privacy-friendly).
• Submit sitemap lên Google Search Console.
• Cấu hình robots.txt để Google index đúng trang.

Blog Section:

Blog là cách tuyệt vời để thể hiện chuyên môn và cải thiện SEO. Dùng MDX (Markdown với JSX) để viết bài blog ngay trong Next.js:

npm install @next/mdx

```tsx

// app/blog/[slug]/page.tsx

import { MDXRemote } from 'next-mdx-remote/rsc'

export default async function BlogPost({ params }) {

const source = await getPostContent(params.slug)

return

}

```

Contact Form với Resend (miễn phí):

Không cần backend riêng, dùng API routes của Next.js:

```tsx

// app/api/contact/route.ts

import { Resend } from 'resend'

export async function POST(request: Request) {

const { name, email, message } = await request.json()

const resend = new Resend(process.env.RESEND_API_KEY)

await resend.emails.send({

from: 'portfolio@yourdomain.com',

to: 'you@email.com',

subject: New message from ${name},

html:

${message}

})

return Response.json({ success: true })

}

```

Resend cung cấp 100 email/tháng miễn phí, đủ cho portfolio cá nhân.

Dùng Zod để validate dữ liệu đầu vào: kiểm tra email hợp lệ, message không trống, không chứa link độc hại.

Vercel là nền tảng deploy Next.js tốt nhất, hoàn toàn miễn phí cho portfolio cá nhân.

Các bước deploy:

(1) Push code lên GitHub repository.

(2) Vào vercel.com, import repository.

(3) Vercel tự động detect Next.js và cấu hình build.

(4) Set environment variables (RESEND_API_KEY) trong Vercel Dashboard.

(5) Deploy xong, Vercel cấp domain your-project.vercel.app.

Custom domain:

• Mua domain (tên miền) từ các nhà cung cấp: Nhân Hòa, PA Vietnam, hoặc Namecheap.
• Chi phí khoảng 150-300k/năm.
• Trỏ domain về Vercel bằng cách thêm CNAME record trong DNS settings.

Continuous Deployment:

Mỗi lần push code lên GitHub, Vercel tự động build và deploy lại. Không cần thao tác thủ công.

Ví dụ: huynguyen.dev hoặc minhtri.me. Domain ngắn, dễ nhớ là lợi thế khi ghi trên CV.

Portfolio không phải làm một lần xong. Nó cần được cập nhật thường xuyên để luôn fresh và chuyên nghiệp.

Lịch bảo trì khuyến nghị:

• Hàng tháng: Thêm dự án mới, cập nhật kỹ năng, kiểm tra link còn hoạt động không.
• Mỗi quý: Cập nhật blog với bài viết mới, refresh CV, cập nhật ảnh đại diện.
• Mỗi năm: Redesign lại nếu cần, upgrade lên phiên bản Next.js mới, audit performance.

Nội dung nên thêm vào portfolio:

• Case study chi tiết cho dự án tâm đắc nhất (vấn đề, giải pháp, kết quả).
• Testimonial từ khách hàng hoặc đồng nghiệp.
• Open source contributions: link GitHub repo, số star, số contributor.
• Chứng chỉ và khóa học đã hoàn thành (nếu relevant).