Source code Portfolio Website Hiện Đại - Next.js, Tailwind CSS, Framer Motion

(1 Đánh giá)

0 147

Danh mục

Thể loại

Ngày đăng

23-6-2025

Loại file

Full code

File download

portfolio-main.zip [#]

Gửi thông báo lỗi Báo vi phạm bản quyền

Gửi ngay

CAM KẾT TỪ NGƯỜI BÁN

Hỗ trợ cài đặt

Code đầy đủ giống demo

(Hạng vàng)
Xem trang

Source code
7

Đánh giá (12)
5/5

Ngày tham gia
17/2/2024

Thiết kế hiện đại & mượt mà
Giao diện đẹp, hiệu ứng chuyển động mượt với Framer Motion tạo cảm giác chuyên nghiệp.
Dễ dàng tùy chỉnh nội dung
Các thông tin như: tên website, mô tả, liên hệ, dự án, kinh nghiệm… đều nằm trong file cấu hình đơn giản (site-config.ts, data/projects.ts, data/experience.ts).
Tối ưu SEO & hiệu suất
Sử dụng Next.js, đảm bảo website của bạn load nhanh, chuẩn SEO và dễ được Google tìm thấy.
Responsive trên mọi thiết bị
Hiển thị tốt trên cả điện thoại, tablet và máy tính. Trải nghiệm người dùng luôn mượt mà.
Code sạch, dễ đọc, dễ mở rộng
Cấu trúc code rõ ràng, phù hợp cho cả học tập và phát triển thêm tính năng.
Form liên hệ tích hợp sẵn
Giúp khách hàng tiềm năng dễ dàng gửi tin nhắn liên hệ.
Hiệu ứng đẹp mắt
Bao gồm hiệu ứng Matrix Rain và Particle System giúp website ấn tượng và độc đáo.
🔧 Công nghệ sử dụng
- Next.js – Framework React tối ưu cho production
- React + TypeScript – Viết code an toàn, dễ mở rộng
- Tailwind CSS – Thiết kế nhanh và linh hoạt
- Framer Motion – Tạo hoạt ảnh mượt và hiện đại
- Lucide React – Bộ icon đẹp, dễ dùng

HÌNH ẢNH DEMO

HƯỚNG DẪN CÀI ĐẶT

Truy cập đường dẫn GitHub của dự án
Bấm Clone hoặc tải về dạng .ZIP
Giải nén (nếu tải ZIP), rồi mở thư mục dự án bằng VS Code hoặc trình soạn thảo bạn thích

Dự án dùng pnpm để quản lý gói. Nếu máy bạn chưa có pnpm, hãy cài nó bằng lệnh:
- npm install -g pnpm (chạy trong Terminal)
Sau đó, mở Terminal ngay trong thư mục dự án và chạy:
- pnpm install
  → Quá trình này sẽ cài toàn bộ thư viện cần thiết để chạy website.

Trong thư mục chính của dự án, bạn sẽ thấy file env.example
Hãy sao chép file này và đổi tên thành .env.local
Mở file vừa tạo và kiểm tra xem có dòng nào liên quan đến API liên hệ không (ví dụ: email nhận tin nhắn từ form). Nếu có, hãy điền đúng thông tin.

Vẫn ở trong thư mục dự án, chạy lệnh:
- pnpm dev
Sau khi chạy xong, mở trình duyệt và truy cập vào địa chỉ:
- http://localhost:3000
Website của bạn đã sẵn sàng hiển thị!

Bạn có thể cập nhật thông tin cá nhân tại các file sau:

Favicon: Thay file favicon.ico trong thư mục public bằng biểu tượng của bạn
Hình ảnh dự án: Thay thế các hình như flatform.png, task.png, coffe.png trong thư mục public để phản ánh đúng dự án thật của bạn