Hướng Dẫn Tạo Website Portfolio Cá Nhân Bằng React + Tailwind + Vite

1. Chuẩn bị môi trường

✅ Cài đặt Node.js

Truy cập https://nodejs.org và tải bản LTS (Long Term Support).

Kiểm tra phiên bản:

node -v
npm -v

✅ Tạo project với Vite

npm create vite@latest my-portfolio -- --template react
cd my-portfolio
npm install

✅Cài Tailwind CSS

Chạy lệnh:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

✅Cập nhật file tailwind.config.js:

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]

✅Thêm tailwind vào src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Tạo cấu trúc trang

src/
├── components/
│   ├── Header.jsx
│   ├── About.jsx
│   ├── Projects.jsx
│   └── Footer.jsx

Ví dụ: Header.jsx

const Header = () => (
  <header className="p-4 bg-white shadow-md sticky top-0 z-10">
    <h1 className="text-2xl font-bold text-center">Nguyễn Văn A</h1>
  </header>
);
export default Header;

Tương tự bạn tạo thêm các section như:

• About: Giới thiệu bản thân

• Projects: Liệt kê các dự án đã làm

• Footer: Thông tin liên hệ, LinkedIn, GitHub, email,...