You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!-- THAY THẾ bằng ảnh chụp màn hình trang chủ portfolio của bạn -->
4
4
5
5
Welcome to the source code repository for my personal portfolio website! This site serves as a central hub to showcase my skills, projects, and professional resume. It's designed with a clean, responsive interface and enhanced with interactive elements to provide an engaging user experience.
6
+
This README is available in English and Vietnamese. Please expand the section for your preferred language.
6
7
7
8
**🚀 Live Portfolio:**[https://tranhuudat2004.github.io/](https://tranhuudat2004.github.io/)<!-- Cập nhật link nếu khác -->
***Hosting:** Deployed as a static website via [GitHub Pages](https://pages.github.com/).
41
48
42
-
## 📂 Project Structure
43
-
44
49
45
50
## 🚀 How to View / Local Setup
46
51
@@ -66,26 +71,114 @@ This portfolio is built using a combination of modern front-end technologies:
66
71
67
72
## 💡 Development Insights & Customizations
68
73
69
-
* **Contextual Cursor Text:** The custom cursor's text changes based on the page being viewed, providing relevant, cycling messages (e.g., greetings on the homepage, skill-related info when hovering over skill tags). This is achieved by defining unique `autoTexts` arrays within the JavaScript embedded in each HTML page.
70
-
***Dynamic Language Switching:** A JavaScript-driven system allows users to toggle between English and Vietnamese content. Translations are stored in a JS object, and the DOM is updated dynamically. The selected language is persisted in`localStorage`.
71
-
***GitHub Projects Showcase:** The `projects.html` page leverages the GitHub API via `js/github.js`to automatically fetch and display my public repositories as interactive project cards, keeping the project list up-to-date.
74
+
* **Contextual Cursor Text:** The custom cursor's text changes based on the page being viewed, providing relevant, cycling messages. This is achieved by defining unique `autoTexts` arrays within the JavaScript embedded in each HTML page.
75
+
***Dynamic Language Switching:** A JavaScript-driven system allows users to toggle between English and Vietnamese content. The selected language is persisted in`localStorage`.
76
+
***GitHub Projects Showcase:** The `projects.html` page leverages the GitHub API to automatically fetch and display public repositories as project cards.
72
77
73
78
## 🌟 Future Enhancements (Ideas)
74
79
75
80
* Implement a dark mode/light mode toggle.
76
81
* Add a dedicated blog section.
77
-
* Further optimize image loading for even faster performance.
78
-
* Explore more advanced animations or micro-interactions.
***LinkedIn:** [linkedin.com/in/tranhuudat2004](https://linkedin.com/in/tranhuudat2004) <!-- Cập nhật link đầy đủ -->
88
+
***LinkedIn:** [linkedin.com/in/tranhuudat2004](https://linkedin.com/in/tranhuudat2004) <!-- Full link -->
85
89
***Email:**`huudat.peashooer@gmail.com`
86
90
87
91
---
88
92
89
93
<p align="center">
90
94
Thank you for exploring my portfolio and its source code! Feel free to connect.
91
-
</p>
95
+
</p>
96
+
97
+
</details>
98
+
99
+
---
100
+
101
+
<details>
102
+
<summary><strong>Phiên bản Tiếng Việt (Nhấn để Mở rộng)</strong></summary>
103
+
104
+
## ✨ Các Tính năng Chính
105
+
106
+
Trang web portfolio này tích hợp một số tính năng chính:
107
+
108
+
***Bố cục Đa trang Toàn diện:**
109
+
***🏠 Trang chủ (`index.html`):** Giới thiệu bản thân, làm nổi bật các kỹ năng chính thông qua một lưới tương tác và cung cấp cái nhìn tổng quan về khả năng của tôi.
110
+
***📄 Hồ sơ (`resume.html`):** Trình bày chi tiết về kinh nghiệm chuyên môn, quá trình học vấn và những thành tích đáng chú ý.
111
+
***💡 Dự án (`projects.html`):** Giới thiệu các dự án phát triển phần mềm của tôi theo danh mục, kèm theo mô tả, ngăn xếp công nghệ và liên kết trực tiếp đến demo trực tuyến cũng như kho lưu trữ GitHub. Trang này tự động tải dữ liệu dự án từ GitHub API.
112
+
***✉️ Liên hệ (`contact.html`):** Một biểu mẫu liên hệ thân thiện với người dùng (sử dụng SB Forms - *cần thiết lập API token để hoạt động đầy đủ*) cùng với thông tin liên hệ trực tiếp.
113
+
***🖱️ Con trỏ Chuột Tùy chỉnh Tương tác:** Một con trỏ chuột được thiết kế tùy chỉnh độc đáo, theo dõi chuyển động của người dùng trên tất cả các trang. Nó hiển thị văn bản thay đổi động (với hiệu ứng fade-in/fade-out) được **điều chỉnh theo ngữ cảnh cho từng trang cụ thể** (Trang chủ, Hồ sơ, Dự án, Liên hệ), cung cấp các thông điệp chào mừng hoặc thông tin liên quan. Con trỏ cũng thay đổi giao diện khi di chuột qua các yếu tố tương tác.
114
+
***🌐 Hỗ trợ Song ngữ (Tiếng Anh/Tiếng Việt):** Người dùng có thể chuyển đổi liền mạch nội dung trang web giữa tiếng Anh và tiếng Việt bằng cách sử dụng bộ chọn ngôn ngữ trực quan trên thanh điều hướng. Tùy chọn ngôn ngữ được lưu cục bộ để mang lại trải nghiệm nhất quán.
115
+
***📱 Thiết kế Đáp ứng (Responsive):** Được xây dựng với Bootstrap 5, đảm bảo trang web hiển thị đẹp mắt và hoạt động tối ưu trên nhiều kích thước màn hình khác nhau, bao gồm máy tính để bàn, máy tính bảng và thiết bị di động.
116
+
***🛠️ Hiển thị Kỹ năng Tương tác:** Các kỹ năng kỹ thuật được trình bày dưới dạng lưới tương tác hấp dẫn trên trang Chủ và Hồ sơ, nơi việc di chuột qua sẽ hiển thị thêm thông tin thông qua con trỏ tùy chỉnh.
117
+
118
+
## 🛠️ Ngăn xếp Công nghệ
119
+
120
+
Portfolio này được xây dựng bằng sự kết hợp của các công nghệ front-end hiện đại:
121
+
122
+
***HTML5:** Đánh dấu ngữ nghĩa để cấu trúc nội dung của tất cả các trang.
123
+
***CSS3:** Tạo kiểu tùy chỉnh cho giao diện, quản lý bố cục (Flexbox, Grid) và hiệu ứng động.
124
+
***Bootstrap 5:** Được tận dụng cho hệ thống lưới đáp ứng mạnh mẽ, các thành phần UI được tạo kiểu sẵn và các lớp tiện ích.
125
+
***JavaScript (ES6+):** Cung cấp năng lượng cho tất cả các chức năng động:
126
+
***Logic Con trỏ Tùy chỉnh:** Quản lý chuyển động của con trỏ, thay đổi văn bản theo chu kỳ với hiệu ứng mờ dần và hiển thị văn bản theo ngữ cảnh (được nhúng trong từng trang HTML).
127
+
***Hệ thống Song ngữ:** Tải và áp dụng các bản dịch ngôn ngữ động cho nội dung trang.
128
+
***Tích hợp GitHub API (`js/github.js`):** Tìm nạp và hiển thị thông tin dự án trên trang "Dự án".
129
+
***Tương tác UI:** Xử lý các sự kiện cho bộ chọn ngôn ngữ, lưới tương tác và các yếu tố động khác.
*(Thay thế bằng URL kho lưu trữ thực tế của bạn nếu khác)*
148
+
* Điều hướng vào thư mục dự án vừa sao chép:
149
+
```bash
150
+
cd tranhuudat2004.github.io
151
+
```
152
+
* Mở bất kỳ tệp `.html` nào (ví dụ: `index.html`) trực tiếp bằng trình duyệt web của bạn. Không cần các bước build đặc biệt vì đây là một trang web tĩnh.
153
+
154
+
***Lưu ý Quan trọng cho Biểu mẫu Liên hệ:** Biểu mẫu liên hệ trên `contact.html` sử dụng SB Forms. Để nó hoạt động gửi email, bạn phải:
155
+
1. Đăng ký tại [https://startbootstrap.com/solution/contact-forms](https://startbootstrap.com/solution/contact-forms).
156
+
2. Lấy API token duy nhất của bạn.
157
+
3. Thay thế placeholder `API_TOKEN_CUA_BAN` trong thuộc tính `data-sb-form-api-token` của thẻ `<form>` trong `contact.html` bằng token thực tế của bạn.
158
+
159
+
## 💡 Điểm Nổi bật & Tùy chỉnh Phát triển
160
+
161
+
***Văn bản Con trỏ theo Ngữ cảnh:** Văn bản của con trỏ tùy chỉnh thay đổi dựa trên trang đang xem, cung cấp các thông điệp theo chu kỳ liên quan. Điều này đạt được bằng cách định nghĩa các mảng `autoTexts` duy nhất trong JavaScript được nhúng trong mỗi trang HTML.
162
+
***Chuyển đổi Ngôn ngữ Động:** Một hệ thống dựa trên JavaScript cho phép người dùng chuyển đổi giữa nội dung tiếng Anh và tiếng Việt. Ngôn ngữ được chọn sẽ được lưu trong `localStorage`.
163
+
***Giới thiệu Dự án từ GitHub:** Trang `projects.html` tận dụng GitHub API để tự động tải và hiển thị các kho lưu trữ GitHub công khai của tôi dưới dạng các thẻ dự án tương tác.
0 commit comments