Jack 3D Portfolio — Single-page Portfolio cho 3D Creator

Giới thiệu dự án

Jack 3D Portfolio là template portfolio một trang dành cho 3D artist, motion designer hoặc creative freelancer cần một landing 'wow' nhưng vẫn nhẹ. Toàn bộ trang là static — không backend, không routing — gồm 5 section cuộn dọc trên nền #0C0C0C: Hero với heading khổng lồ + nhân vật hút theo chuột (magnet effect), Marquee 2 hàng GIF chạy ngược chiều theo scroll, About với chữ-từng-ký-tự fade theo scroll progress, Services nền trắng bo góc trên, và Projects dùng card sticky-stack scale dần. Code React 18 + TypeScript + Vite 5, Tailwind 3, animation bằng framer-motion, font Kanit từ Google Fonts. Bộ component tái sử dụng (FadeIn, Magnet, AnimatedText, ContactButton, LiveProjectButton) export qua barrel src/components/index.ts — kéo sang dự án khác chỉ bằng paste folder.

Tính năng nổi bật

• 5 section dọc trên nền tối #0C0C0C — Hero, Marquee, About, Services, Projects
• Hero magnet effect: nhân vật và button hút theo con trỏ chuột qua component Magnet
• Marquee 2 hàng GIF chạy ngược chiều, tốc độ liên kết với scrollY (parallax)
• About section dùng AnimatedText — mỗi ký tự fade từ opacity 0.2 → 1 theo scroll progress
• Projects card sticky-stack scale dần theo scroll, tạo hiệu ứng card chồng cinematic
• Bộ component reusable (FadeIn, Magnet, AnimatedText) export qua barrel src/components/index.ts

Công nghệ sử dụng

• React 18
• TypeScript
• Vite 5
• Tailwind CSS 3
• Framer Motion

Hướng dẫn sử dụng

1. Bước 1

   Tải và giải nén source

   Tải file nén ở nút phía trên rồi giải nén. Mở terminal tại thư mục jack-3d-portfolio.

2. Bước 2

   Yêu cầu Node.js ≥ 18

   Vite 5 yêu cầu Node 18 trở lên. Kiểm tra phiên bản hiện tại — nếu thấp hơn, cài qua nvm hoặc trang chủ Node.

   node --version

3. Bước 3

   Cài dependencies

   Cài React 18, TypeScript 5, Vite 5, Tailwind 3, framer-motion và lucide-react.

   npm install

4. Bước 4

   Chạy dev server

   Mở http://localhost:5173 để xem portfolio. Hot reload sẵn sàng — sửa file trong src/ để thấy update ngay.

   npm run dev

5. Bước 5

   Build production

   Lệnh build chạy tsc -b trước để type-check, sau đó vite build xuất ra thư mục dist/. Bundle khoảng 290 KB (94 KB gzip), phần lớn là framer-motion.

   npm run build
   npm run preview

6. Bước 6

   (Tuỳ chọn) Fix ESLint config

   eslint.config.js đang dùng reactHooks.configs.flat.recommended — eslint-plugin-react-hooks@5.2.0 đã rename thành reactHooks.configs.recommended. Sửa nhanh:

   // eslint.config.js
   - reactHooks.configs.flat.recommended,
   + reactHooks.configs.recommended,

7. Bước 7

   (Tuỳ chọn) Thay external assets

   Trang đang nạp ảnh từ shrug-person-78902957.figma.site, motionsites.ai, và images.higgs.ai — các URL này nằm ngoài tầm kiểm soát. Trước khi go-live nên tải về public/ hoặc src/assets/ rồi replace URL trong các file section.

8. Bước 8

   Deploy

   Sản phẩm là static site — deploy được lên Vercel, Netlify, Cloudflare Pages hoặc bất kỳ host tĩnh nào. Vite được auto-detect, không cần config thêm. Upload thư mục dist/ sau khi build.

   npm run build
   # upload thư mục dist/