feat: Thêm quy trình tự động cập nhật số liệu GitHub

Author: TranHuuDat2004

.github/workflows/update-stats.yml

@@ -0,0 +1,38 @@
+name: Update GitHub Stats
+
+# Các trình kích hoạt (triggers) cho workflow
+on:
+  # 1. Chạy tự động mỗi ngày vào lúc 1:00 sáng (giờ Việt Nam)
+  schedule:
+    - cron: '0 18 * * *' # Đây là 18:00 UTC, tương đương 1:00 sáng hôm sau ở VN
+  
+  # 2. Cho phép chạy thủ công từ tab "Actions" trên GitHub
+  workflow_dispatch:
+
+jobs:
+  update-stats:
+    runs-on: ubuntu-latest # Chạy trên một máy ảo Ubuntu mới nhất
+    steps:
+      # Bước 1: Lấy mã nguồn của bạn từ kho lưu trữ
+      - name: Check out repository
+        uses: actions/checkout@v3
+
+      # Bước 2: Thiết lập môi trường Node.js
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18' # Sử dụng Node.js phiên bản 18
+
+      # Bước 3: Chạy tập lệnh update-stats.js
+      - name: Run update script
+        run: node scripts/update-stats.js
+
+      # Bước 4: Tự động commit và đẩy các thay đổi (nếu có)
+      - name: Commit and push changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: 'chore: Tự động cập nhật số liệu thống kê GitHub'
+          file_pattern: 'github_stats.json' # Chỉ commit nếu tệp này thay đổi
+          commit_user_name: 'GitHub Actions Bot'
+          commit_user_email: 'actions@github.com'
+          commit_author: 'GitHub Actions Bot <actions@github.com>'

GEMINI.md

@@ -0,0 +1,129 @@
+## Cuộc trò chuyện với Gemini CLI
+
+**Ngày:** Sunday, October 26, 2025
+**Hệ điều hành:** win32
+**Thư mục làm việc:** D:\Huu Dat\my-portfolio-2024
+
+---
+
+### Phân tích dự án và các vấn đề tiềm ẩn
+
+**Người dùng:** what are the possible issues that you could find from this project
+
+**Gemini:** Dựa trên phân tích của tôi về dự án, đây là một số vấn đề tiềm ẩn, từ nhỏ đến đáng kể:
+
+**Vấn đề Tác động Cao**
+
+*   **Gọi API GitHub không xác thực:** Script `js/github.js` gọi đến API của GitHub mà không có xác thực. Điều này là một vấn đề lớn vì các yêu cầu không xác thực bị giới hạn rất nghiêm ngặt (60 yêu cầu mỗi giờ cho mỗi địa chỉ IP). Nếu trang web có lượng truy cập vừa phải, giới hạn API sẽ nhanh chóng bị cạn kiệt, khiến mục "My Projects on GitHub" không thể tải được cho những người dùng truy cập sau.
+*   **Header/Footer được chèn bằng JavaScript:** Trang web sử dụng một phương pháp không chuẩn là dùng các thẻ `<header-placeholder>` và `<footer-placeholder>`, sau đó dùng `header.js` và `footer.js` để chèn nội dung HTML vào. Điều này có hại cho Tối ưu hóa Công cụ Tìm kiếm (SEO), vì các trình thu thập dữ liệu của công cụ tìm kiếm có thể không thực thi JavaScript và do đó không nhìn thấy nội dung và các liên kết điều hướng trong header và footer. Nó cũng có thể gây ra hiện tượng "nhấp nháy" nội dung khi trang tải.
+
+**Vấn đề Tác động Trung bình**
+
+*   **Tệp CSS lớn, nguyên khối:** Tệp `css/styles.css` chứa toàn bộ framework Bootstrap 5.2.3. Tệp này rất lớn và sẽ ảnh hưởng tiêu cực đến thời gian tải trang, vì trình duyệt phải tải xuống và phân tích toàn bộ tệp, ngay cả khi chỉ một phần nhỏ các style được sử dụng.
+*   **JavaScript inline quá nhiều:** Một lượng lớn mã JavaScript, bao gồm hệ thống dịch ngôn ngữ và logic con trỏ tương tác, được đặt trực tiếp trong thẻ `<script>` trong tệp `index.html`. Điều này làm cho mã khó bảo trì, gỡ lỗi và tái sử dụng hơn. Nó cũng ngăn trình duyệt lưu trữ mã này vào bộ đệm một cách riêng biệt với nội dung HTML.
+*   **Không có Trình quản lý Gói (Package Manager):** Dự án thiếu tệp `package.json` hoặc bất kỳ tệp quản lý phụ thuộc nào khác. Điều này làm cho việc cập nhật các phụ thuộc, kiểm tra lỗ hổng bảo mật hoặc cộng tác với các nhà phát triển khác trở nên rất khó khăn.
+*   **Lo ngại về Khả năng Tiếp cận (Accessibility):** Con trỏ tùy chỉnh ẩn con trỏ tiêu chuẩn của người dùng (`cursor: none;`). Mặc dù thú vị về mặt hình ảnh, điều này có thể gây nhầm lẫn và mất phương hướng cho người dùng, đặc biệt là những người bị suy giảm kỹ năng vận động hoặc những người không mong đợi hành vi này. Đây thường là một thực hành không tốt về khả năng tiếp cận.
+
+**Vấn đề Tác động Thấp & Khả năng Bảo trì**
+
+*   **Cấu trúc Dự án không rõ ràng:** Có nhiều tệp HTML trong thư mục gốc (ví dụ: `brickshop.html`, `omacha-shop.html`, `animation.html`). Không rõ liệu chúng có phải là một phần của portfolio chính, cũ hay các dự án riêng biệt, không liên quan. Điều này làm cho kho lưu trữ khó hiểu để điều hướng.
+*   **Bản dịch được hardcode:** Các chuỗi dịch cho tiếng Anh và tiếng Việt được lưu trữ trong một đối tượng JavaScript lớn bên trong `index.html`. Đối với một trang web có nhiều hơn hai ngôn ngữ hoặc nhiều nội dung hơn, cách tiếp cận này sẽ trở nên rất khó quản lý. Một thư viện i18n chuyên dụng hoặc các tệp JSON riêng cho mỗi ngôn ngữ sẽ là một giải pháp tốt hơn.
+*   **Không có Quy trình Build:** Dự án là một tập hợp các tệp tĩnh không có bước build. Một quy trình build (sử dụng các công cụ như Vite, Webpack, hoặc Parcel) có thể tự động hóa các tác vụ như tối ưu hóa hình ảnh, gộp và thu nhỏ CSS và JavaScript, và cung cấp một máy chủ phát triển tốt hơn.
+*   **CSS động cho Ngôn ngữ GitHub:** Tệp `js/github.js` cố gắng tạo động các thẻ `<style>` cho màu sắc ngôn ngữ. Đây là một cách tiếp cận không theo quy ước và hơi mong manh. Sẽ mạnh mẽ hơn nếu có một bộ các lớp CSS được xác định trước cho các ngôn ngữ lập trình phổ biến.
+
+**Người dùng:** hãy giải thích bằng tieensg việt
+
+**Gemini:** (Giải thích các vấn đề bằng tiếng Việt)
+
+**Người dùng:** các tệp brickshop, omacha shop là các project được mô tả chi tiết và hình ảnh demo mà
+
+**Gemini:** Cảm ơn bạn đã làm rõ. Tôi hiểu rằng các tệp như `brickshop.html` và `omacha-shop.html` là các trang dự án riêng biệt, chứa mô tả chi tiết và hình ảnh demo cho từng dự án. Điều này có nghĩa là chúng không phải là các tệp không sử dụng, mà là một phần có chủ đích của portfolio.
+
+Tôi sẽ tiếp tục phân tích các tệp còn lại để tìm ra các vấn đề tiềm ẩn khác. Tiếp theo, tôi sẽ đọc tệp `contact.html`.
+
+**Người dùng:** vậy bạn tạo file feedback.md cho project này của mình qua những lời nhận xét của bạn
+
+**Gemini:** (Tạo file `feedback.md` với nội dung đã được dịch sang tiếng Việt)
+
+**Người dùng:** ### 1. Sử dụng API GitHub không xác thực-
+
+**Gemini:** Để giải quyết vấn đề này, có hai hướng tiếp cận chính. Tôi sẽ giải thích cả hai và bạn có thể chọn phương án phù hợp nhất với mình.
+
+**Phương án 1: An toàn và Tốt nhất (Khuyến nghị)**
+
+Chúng ta sẽ tạo một "proxy" bằng cách sử dụng một hàm serverless (serverless function).
+
+*   **Cách hoạt động:**
+    1.  JavaScript phía client (trong trình duyệt của người dùng) sẽ không gọi trực tiếp đến API của GitHub nữa.
+    2.  Thay vào đó, nó sẽ gọi đến một hàm serverless mà chúng ta sẽ tạo (ví dụ: `/.netlify/functions/github-proxy`).
+    3.  Hàm serverless này, chạy trên một máy chủ an toàn, sẽ chứa API token của bạn. Nó sẽ nhận yêu cầu từ client, thêm token vào và gọi đến API của GitHub.
+    4.  Cuối cùng, nó sẽ trả kết quả từ GitHub về lại cho client.
+*   **Ưu điểm:** API token của bạn được giữ bí mật tuyệt đối, không bao giờ bị lộ ra ngoài. Đây là cách làm chuyên nghiệp và an toàn nhất.
+*   **Nhược điểm:** Phức tạp hơn một chút để thiết lập ban đầu. Bạn sẽ cần một nền tảng hosting hỗ trợ serverless functions như Netlify hoặc Vercel.
+
+**Phương án 2: Đơn giản nhưng Kém an toàn (Không khuyến nghị cho dự án công khai)**
+
+Chúng ta sẽ sử dụng trực tiếp một Personal Access Token (PAT) trong mã JavaScript.
+
+*   **Cách hoạt động:**
+    1.  Bạn tạo một PAT trên tài khoản GitHub của mình.
+    2.  Bạn dán token này trực tiếp vào các tệp `js/github.js` và `js/render-readme.js`.
+*   **Ưu điểm:** Rất nhanh và dễ thực hiện.
+*   **Nhược điểm:** **CỰC KỲ RỦI RO.** Bất kỳ ai xem mã nguồn trang web của bạn (chỉ cần "View Page Source") đều có thể thấy và sao chép token của bạn. Với token đó, họ có thể thực hiện các hành động thay mặt bạn trên GitHub, tùy thuộc vào quyền bạn đã cấp cho token. **Chỉ nên sử dụng cách này nếu repository của bạn là riêng tư (private) và bạn chấp nhận rủi ro.**
+
+Tôi khuyên bạn nên chọn **Phương án 1**. Mặc dù tốn thêm một chút công sức, nó sẽ đảm bảo an toàn cho tài khoản của bạn và là một kỹ năng rất hữu ích để học.
+
+Bạn muốn tiếp tục với phương án nào?
+
+**Người dùng:** mà dự án này thuần html để chạy github pages mà, loại bỏ và xóa file github.html luôn
+
+**Gemini:** Bạn nói đúng. Nếu đây là một trang thuần HTML cho GitHub Pages, việc gọi API động sẽ gây ra các vấn đề như tôi đã nêu.
+
+Vậy tôi hiểu rằng bạn muốn:
+1.  Xóa bỏ phần "Các Dự Án Của Tôi trên GitHub" đang được tải động trên trang `index.html`.
+2.  Xóa hoàn toàn tệp `github-readme.html` và tệp `js/render-readme.js` liên quan.
+3.  Xóa luôn tệp `js/github.js` vì nó sẽ không còn được sử dụng.
+
+Điều này có đúng không?
+
+**Người dùng:** chính xác, bạn thực hiện đi
+
+**Gemini:** (Thực hiện xóa phần GitHub Projects khỏi `index.html` và xóa các tệp `github-readme.html`, `js/render-readme.js`, `js/github.js`)
+
+**Người dùng:** cái vấn biểu mẫu không hoạt ddooongj, có api key nào hoạt động miễn phí khhoong
+
+**Gemini:** (Giải thích về Formspree và cách tích hợp)
+
+**Người dùng:** https://formspree.io/f/xpwozknb đây là form của mình bạn chỉnh file contact nhé
+
+**Gemini:** (Thực hiện tích hợp Formspree vào `contact.html`)
+
+**Người dùng:** Vấn đề về Bảo trì & Hiệu suất trùng lặp mã js và header footer giải quyết bằng js bằng cách nào, nếu viết header cho từng file html còn khó bảo trì hơn là tạo sinh bằng js chứ
+
+**Gemini:** (Giải thích giải pháp tái cấu trúc JavaScript thành `main.js`)
+
+**Người dùng:** bạn hãy thực hiện đi
+
+**Gemini:** (Thực hiện tái cấu trúc JavaScript)
+
+**Người dùng:** mình mới test form ròi nó thật sự hoạt động, bạn kiểm tra assets/test-form.png nhé
+
+**Gemini:** (Kiểm tra hình ảnh và xác nhận form hoạt động)
+
+**Người dùng:** mình thấy nhiều bạn hãy custom cursor để mang dấu ấn cá nhân hay phong cách của họ, nhưng mà bạn lại nhìn nhận góc nhìn khác là gây khó chịu cho 1 số người dùng, rất may là trang portfolio này cũ, không dùng đến nữa, mà web hiện tại này tranhuudat2004.github.io nó thay đổi rất nhiều ròi, bạn check thử nhé
+
+**Gemini:** (Cố gắng kiểm tra trang web trực tiếp nhưng gặp hạn chế với `web_fetch`)
+
+**Người dùng:** thôi không sao, bây giờ bạn viết file GEMINI.md này để lưu lại cuộc trò chuyện này, mình sẽ mở project khác và tiếp tục cuộc trò chuyện tiếp đó nhé
+
+**Gemini:** (Đang chuẩn bị tạo file GEMINI.md)
+
+---
+
+### Tiếp tục cuộc trò chuyện
+
+**Người dùng:** chào bạn, hãy dùng file GEMINI.md và tiếp tục cuộc trò chuyện này nhé
+
+**Gemini:** Tôi đã lưu lại cuộc trò chuyện của chúng ta vào file `GEMINI.md`.
+
+Bạn muốn tôi làm gì tiếp theo với dự án này? Hoặc bạn muốn chuyển sang một dự án khác như bạn đã đề cập?

github_stats.json

@@ -0,0 +1,9 @@
+{
+  "HTML": 2,
+  "JavaScript": 3,
+  "CSS": 3,
+  "C#": 1,
+  "Python": 3,
+  "Jupyter Notebook": 1,
+  "ShaderLab": 1
+}

github_stats_explanation.md

@@ -0,0 +1,49 @@
+# Giải thích về github_stats.json
+
+Tệp `github_stats.json` đóng vai trò là bộ đệm (cache) cho dữ liệu số liệu thống kê ngôn ngữ lấy từ API công khai của GitHub. Mục đích của nó là hiển thị động phần "Skills" (Kỹ năng) trên trang portfolio mà không phải liên tục gọi API của GitHub trực tiếp từ trình duyệt của người dùng.
+
+## Mục đích
+
+*   **Tránh giới hạn tốc độ API (Rate Limiting):** Các yêu cầu không được xác thực đến API GitHub bị giới hạn nghiêm ngặt (ví dụ: 60 yêu cầu mỗi giờ). Bằng cách sử dụng tệp tĩnh, chúng ta loại bỏ sự phụ thuộc này, đảm bảo tính năng kỹ năng luôn tải được.
+*   **Cải thiện hiệu suất tải trang:** Tải dữ liệu từ một tệp cục bộ nhanh hơn nhiều so với việc thực hiện yêu cầu mạng đến máy chủ GitHub.
+*   **Tính ổn định:** Đảm bảo tính năng kỹ năng hoạt động độc lập với tình trạng sẵn có hoặc giới hạn của API GitHub.
+
+## Cách tạo ra dữ liệu
+
+Dữ liệu trong tệp này được thu thập bằng cách:
+
+1.  **Gửi yêu cầu API:** Thực hiện một lệnh gọi HTTP đến API GitHub: `https://api.github.com/users/tranhuudat2004/repos?per_page=100&sort=pushed`. Lệnh gọi này lấy về danh sách tất cả các kho lưu trữ (repository) công khai của người dùng `tranhuudat2004`.
+2.  **Trích xuất ngôn ngữ chính:** Đối với mỗi kho lưu trữ trong danh sách trả về, chúng tôi đã trích xuất `language` chính được sử dụng trong kho đó.
+3.  **Đếm số lần xuất hiện:** Chúng tôi đã đếm số lượng kho lưu trữ cho mỗi ngôn ngữ.
+
+## Cấu trúc dữ liệu
+
+Tệp `github_stats.json` là một đối tượng JSON đơn giản, nơi các khóa (keys) là tên của các ngôn ngữ lập trình và các giá trị (values) là số lượng kho lưu trữ GitHub công khai của bạn sử dụng ngôn ngữ đó làm ngôn ngữ chính.
+
+**Ví dụ:**
+
+```json
+{
+  "HTML": 2,
+  "JavaScript": 3,
+  "CSS": 3,
+  "C#": 1,
+  "Python": 3,
+  "Jupyter Notebook": 1,
+  "ShaderLab": 1
+}
+```
+
+*   **"HTML": 2** có nghĩa là có 2 kho lưu trữ của bạn mà HTML là ngôn ngữ chính.
+*   **"JavaScript": 3** có nghĩa là có 3 kho lưu trữ của bạn mà JavaScript là ngôn ngữ chính.
+
+## Cách sử dụng
+
+Tệp `js/scripts.js` sẽ đọc dữ liệu từ `github_stats.json` và sử dụng các giá trị này để tính toán phần trăm hiển thị trong các thanh kỹ năng. Mỗi số lượng kho lưu trữ sẽ cung cấp một "điểm thưởng" nhất định cho phần trăm hiển thị của kỹ năng tương ứng, tạo ra một màn hình kỹ năng sống động và phản ánh hoạt động phát triển thực tế của bạn trên GitHub.
+
+## Cập nhật dữ liệu
+
+Khi bạn có các kho lưu trữ mới hoặc cập nhật các kho lưu trữ hiện có và muốn phần "Skills" phản ánh những thay đổi đó, bạn sẽ cần phải:
+
+1.  **Chạy lại tập lệnh tạo `github_stats.json`:** Nếu có một tập lệnh tự động hóa việc này (ví dụ: một tập lệnh Python hoặc Node.js), bạn sẽ chạy nó. Hiện tại, quá trình này được thực hiện thủ công bởi trợ lý.
+2.  **Cập nhật tệp:** Đảm bảo rằng tệp `github_stats.json` mới được tạo được đặt trong thư mục gốc của dự án.