⚔️ LINK START! | Nguyễn Thiết Duy Đan Portfolio

"This, although this is a game, but it's not just something to play." - Kayaba Akihiko

Chào mừng đến với Expert System, trang Portfolio cá nhân của tôi được thiết kế theo phong cách giao diện Sword Art Online (SAO). Đây không chỉ là nơi trưng bày kỹ năng và dự án, mà còn là một trải nghiệm tương tác với các hiệu ứng hình ảnh và hoạt cảnh độc đáo.

---

✨ Điểm Nhấn (Highlights)

• 🖥 SAO "Link Start" Intro: Hiệu ứng khởi động (Intro) tái hiện cảnh đăng nhập kinh điển của Sword Art Online với Tunnel Effect, System Checks và Particle Animation.
• 🎨 Cyberpunk/Sci-Fi Theme: Giao diện tối (Dark Mode), phối màu Neon (Cyan/Purple/Pink), hiệu ứng Glitch và CRT Scanline.
• ⌨️ Interactive Skills Keyboard: Khu vực kỹ năng được trình bày dưới dạng bàn phím cơ 3D Isometric tương tác.
• 🕹️ Mini-Game Easter Egg: Tích hợp trò chơi nhỏ "Space Invaders" ngay trên portfolio.
• 📡 Real-time Viewer Counter: Bộ đếm người xem trực gian thực sử dụng Firebase Realtime Database.
• 📧 Email Transmission Simulation: Mô phỏng quá trình gửi email (Client -> Server -> Receiver) với animation trực quan.
• 🌍 Đa ngôn ngữ (i18n): Hỗ trợ Tiếng Việt và Tiếng Anh.

---

🛠 Công Nghệ Sử Dụng (Tech Stack)

Dự án được xây dựng dựa trên các công nghệ web hiện đại để đảm bảo hiệu năng và trải nghiệm người dùng tốt nhất:

Category	Technology
Core	React 18, TypeScript, Vite
Styling	Tailwind CSS, Custom CSS Variables
Animation	Framer Motion (Advanced Animations)
Backend/Data	Firebase (Realtime Database for Views)
Icons	Lucide React
Internationalization	i18next, react-i18next
Deploy	Vercel

---

📂 Cấu Trúc Dự Án (Project Structure)

portfolio/
├── src/
│   ├── components/         # Các thành phần UI (Nav, Hero, Skills, Contact...)
│   │   ├── LinkStart.tsx   # Animation Intro SAO
│   │   ├── MiniGame.tsx    # Game ẩn
│   │   ├── ViewerCounter.tsx # Bộ đếm view Firebase
│   │   └── ...
│   ├── styles/             # Global CSS & Tailwind setups
│   │   ├── cyber.css       # Hiệu ứng Cyberpunk/Glitch
│   │   └── keyboard.css    # CSS cho bàn phím 3D
│   ├── App.tsx             # Main Entry
│   └── text.json           # Resource ngôn ngữ (i18n)
├── public/                 # Static Assets (Cursor, Icons)
└── package.json

---

🚀 Cài Đặt & Chạy (Installation)

Yêu cầu: Node.js 18+

1. Clone repository:

   git clone https://github.com/nguyenduydan/portfolio.git
   cd portfolio

2. Cài đặt dependencies:

   npm install
   # hoặc
   yarn install

3. Cấu hình môi trường (.env): Tạo file .env và điền thông tin config Firebase của bạn (nếu muốn chạy tính năng đếm view):

   VITE_FIREBASE_API_KEY=your_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   VITE_FIREBASE_DATABASE_URL=your_database_url
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_id
   VITE_FIREBASE_APP_ID=your_app_id

4. Chạy Developer Sever:

   npm run dev

   Truy cập http://localhost:5173 để trải nghiệm.

---

📬 Liên Hệ (Contact)

Nếu bạn ấn tượng với "Hệ thống" này và muốn hợp tác:

• Name: Nguyễn Thiết Duy Đan
• Role: Software Engineer / Frontend Developer
• Email: duydan.cv@gmail.com
• GitHub: github.com/nguyenduydan

---

System Call: Generate Luminous Element... 🌟