feat/frontend-portfolio

HUONG_DAN_THEM_ANH.md

+# Hướng Dẫn Thêm Và Đổi Tên Ảnh Cho Portfolio
+
+Dự án này sử dụng Vite, do đó tất cả các tệp tĩnh (như hình ảnh, icon) cần được đặt trong thư mục `public` để mã nguồn có thể nhận diện mà không cần cấu hình phức tạp.
+
+## Các Bước Thực Hiện
+
+### Bước 1: Tạo thư mục chứa ảnh
+1. Mở thư mục dự án của bạn (`hieu-portfolio`).
+2. Tìm thư mục có tên là **`public`** (thư mục này nằm cùng cấp với thư mục `src`).
+3. Bên trong thư mục `public`, tạo một thư mục mới và đặt tên là **`assets`** (nếu bạn chưa tạo).
+
+*(Đường dẫn chính xác trên máy của bạn sẽ là: `public/assets/`)*
+
+### Bước 2: Chuẩn bị và đổi tên ảnh
+Bạn cần chuẩn bị các bức ảnh và đổi tên chúng **chính xác** như danh sách dưới đây, sau đó chép (copy) chúng vào thư mục `public/assets/`:
+
+**Ảnh Cá Nhân & Dự Án:**
+1. **`profile.jpg`**: Ảnh chân dung của bạn (hiển thị to ở trang chủ). Nên chọn ảnh tỷ lệ vuông (1:1).
+2. **`ds-assistant-demo.png`**: Ảnh minh họa cho dự án **Data Science Assistant**. (Tỷ lệ màn hình ngang 16:9).
+3. **`ptit-chatbot-demo.png`**: Ảnh minh họa cho dự án **PTIT RAG Chatbot**. (Tỷ lệ màn hình ngang 16:9).
+
+**Logo Học Vấn & Chứng Chỉ (Mới thêm):**
+4. **`ptit-logo.png`**: Logo của trường Đại học PTIT. Nên dùng ảnh có nền trong suốt (PNG).
+5. **`toeic-logo.png`**: Logo chứng chỉ TOEIC.
+6. **`harvard-logo.png`**: Logo chứng chỉ Harvard CS50x.
+
+> **Mẹo:** Các logo sẽ hiển thị đẹp nhất nếu nó có dạng hình vuông (1:1) và có nền trong suốt. Nếu website không tìm thấy ảnh logo, nó sẽ tự động ẩn ô ảnh đi để không làm hỏng giao diện.
+
+### Bước 3: Xem kết quả
+Khi bạn đã chép xong ảnh với đúng tên gọi vào thư mục `public/assets/`, trang web đang chạy sẽ tự động tải lại và hiển thị ảnh của bạn ngay lập tức!
+
+---
+
+## 🛠 Cách tùy biến (Nếu ảnh có tên hoặc đuôi khác)
+
+Nếu bạn lỡ lưu logo bằng định dạng `.jpg` hoặc `.jpeg` thay vì `.png`, bạn hãy vào tệp `src/App.jsx`, lướt tới phần **Education Section** (khoảng dòng 350-380) và tìm các dòng tương tự như sau để thay đổi tên/đuôi file:
+
+```jsx
+<img src="/assets/ptit-logo.png" ... />
+<img src="/assets/toeic-logo.png" ... />
+<img src="/assets/harvard-logo.png" ... />
+```

package.json

@@ -10,11 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.42.0",
+    "lucide-react": "^1.22.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.3.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.2",
@@ -22,6 +25,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
     "globals": "^17.6.0",
+    "tailwindcss": "^4.3.1",
     "vite": "^8.1.0"
   }
 }

src/index.css

-:root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+@import "tailwindcss";
 
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
+@theme {
+  --color-light-bg: #f8fafc; /* slate-50 */
+  --color-light-card: #ffffff;
+  --color-light-border: #e2e8f0; /* slate-200 */
+  --color-primary: #2563eb; /* blue-600 */
+  --color-primary-hover: #1d4ed8; /* blue-700 */
+  --color-accent: #8b5cf6; /* violet-500 */
 }
 
 body {
-  margin: 0;
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
+  background-color: var(--color-light-bg);
+  color: #1e293b; /* slate-800 */
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  scroll-behavior: smooth; /* For smooth scrolling to sections */
 }
 
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
+::selection {
+  background-color: rgba(37, 99, 235, 0.2);
 }
 
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
+/* Hide scrollbar but allow scrolling */
+::-webkit-scrollbar {
+  width: 8px;
 }
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
+::-webkit-scrollbar-track {
+  background: transparent; 
 }
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1; 
   border-radius: 4px;
-  color: var(--text-h);
 }
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8; 
 }

vite.config.js

 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })