Đây là một Personal Portfolio Website được phát triển theo phong cách hiện đại (Modern Interactive Portfolio), tập trung vào việc giới thiệu kỹ năng Front-end Developer thông qua trải nghiệm người dùng (UI/UX) và các hiệu ứng chuyển động mượt mà.
Website được thiết kế theo hướng:
-
Responsive trên Desktop, Tablet và Mobile
-
Animation mượt bằng Motion
-
Hiệu ứng Scroll-based
-
Thiết kế tối giản theo phong cách Figma
-
Tối ưu tốc độ tải trang
-
SEO Friendly cơ bản
2. Technology Stack
Front-end
-
React 19
-
TypeScript
-
Vite
-
TailwindCSS
-
Motion (motion/react)
Vai trò
React giúp chia toàn bộ website thành các component độc lập.
TypeScript giúp kiểm soát kiểu dữ liệu và giảm lỗi trong quá trình phát triển.
Vite được sử dụng để build nhanh và tối ưu bundle.
TailwindCSS chịu trách nhiệm toàn bộ giao diện.
Motion được dùng để tạo animation theo scroll và tương tác.
Website được chia thành nhiều module độc lập.
src
│
├── assets
│
├── components
│ ├── common
│ │ Cursor
│ │ Dot
│ │ SectionTitle
│ │
│ ├── layout
│ │ Navbar
│ │ Footer
│ │
│ └── sections
│ Hero
│ About
│ Skills
│ Works
│ Contact
│
├── constants
│
├── hooks
│
├── styles
│
├── App.tsx
│
└── main.tsx
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Portfolio Setup Guide
1. Requirements
Before running this project, make sure your computer has the following software installed:
|
Software |
Recommended Version |
|
Node.js |
20.x or later |
|
npm |
10.x or later |
|
Git |
Latest Version |
|
Visual Studio Code |
Latest Version |
Open Terminal (or Command Prompt) and run:
git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git
Go to project folder
cd portfolio
3. Install Dependencies
Run
npm install
This command will automatically install every package required by the project.
4. Open Project
Open the project in Visual Studio Code
5. Start Development Server
Run
npm run dev
http://localhost:5173
Nguồn: Topcode.vn
