├── .gitattributes ├── .nojekyll ├── .well-known └── discord ├── README.md ├── assets ├── achive.jpg ├── coding.gif ├── cursor.png ├── cursor_blue.png ├── en.png ├── favicon.ico ├── favicon.png ├── hand.png ├── hand_blue.png ├── logo_aquatrack.png ├── logo_brickshop.png ├── logo_handwriting.png ├── logo_mymusic.png ├── logo_omacha.png ├── logo_puzzle.png ├── logo_puzzle0.png ├── logo_zstyle.png ├── logo_zstyle.svg ├── my-image.jpg ├── my_image.jpg ├── type.gif └── vn.png ├── brickshop.html ├── contact.html ├── css ├── github.css └── styles.css ├── github-readme.html ├── github.html ├── index.html ├── js ├── cursor.js ├── github.js ├── render-readme.js └── scripts.js ├── projects.html └── resume.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/.nojekyll -------------------------------------------------------------------------------- /.well-known/discord: -------------------------------------------------------------------------------- 1 | dh=e71642a6383c0e39b4c4ae1b1d6afdfad70eea32 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Hi 👋, I'm Tran Huu Dat

5 |

I'm a Software Engineering student at Ton Duc Thang University (TDTU) from Vietnam.

6 | 7 | Coding Animation 8 | 9 | 10 |

Profile Views

11 | 12 | 13 | 14 | 15 | Here's a little bit about me: 16 | - 🌱 I’m currently deepening my knowledge in **Web Development**. 17 | - 👯 I’m open to collaborating on **Web Development projects**. 18 | - 📫 How to reach me: **huudat.peashooer@gmail.com** 19 | 20 | 21 |

Connect with me:

22 |

23 | 24 | 25 | 26 | Facebook 27 | Instagram 28 | 29 | 30 | 31 |

32 | 33 |

Languages and Tools:

34 |

35 | 36 | 37 | 38 | 39 | 40 | figma 41 | java 42 | 43 | 44 | 45 | 46 | mssql 47 | mysql 48 | 49 | 50 | 51 | python 52 | html5 53 | css3 54 | 55 | NodeJS 56 | Express 57 | php 58 | bootstrap 59 | tailwind 60 |

61 | 62 |

63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |

71 | 72 |

73 | 74 | GitHub Streak 75 | 76 | 77 |

78 | 79 | ### 🏆 Academic Projects: 80 | 81 | #### 🌐 Web Development: 82 | 83 |

84 | BrickShop Logo 85 |

86 | 87 | 1. **[BrickShop](https://github.com/TranHuuDat2004/BrickShop):** Engineered an e-commerce hub for building block fans (Qman, Keeppley, LEGO). Key features include seamless product browsing, secure checkout, order management, and a dedicated administration dashboard for efficient business operations. 88 | * *Frontend:* HTML5, CSS3, JavaScript, Bootstrap (Customer UI), Tailwind CSS (Admin UI) 89 | * *Backend:* Node.js, Express.js 90 | * *Database:* MySQL 91 | 92 |
93 | 94 |

95 | ZStyle Logo 96 |

97 | 98 | 2. **[ZStyle](https://github.com/TranHuuDat2004/ZStyle):** Developed a foundational e-commerce website for clothing as a course project. Implemented core functionalities for users to explore fashion items and proceed through a basic purchase flow. 99 | * *Frontend:* HTML5, CSS3, JavaScript 100 | * *Backend:* PHP 101 | * *Database:* MySQL 102 | 103 |
104 | 105 |

106 | Omacha Shop Logo 107 |

108 | 109 | 3. **[Omacha Shop](https://github.com/TranHuuDat2004/Omacha_Shop):** A delightful e-commerce platform specializing in toys, developed as a full-stack web application. Features comprehensive online shopping experience for customers and a robust administration system for efficient management. 110 | * *Frontend:* HTML5, CSS3, JavaScript, Bootstrap 111 | * *Backend:* PHP 112 | * *Database:* MySQL 113 | 114 | #### 📱 Mobile Development (Android - Java): 115 | 116 |

117 | AquaTrack Logo 118 |

119 | 120 | 1. **[AquaTrack (Water_Reminder)](https://github.com/TranHuuDat2004/Water_Reminder):** Created AquaTrack, a native Android application promoting better hydration. Allows users to easily log water consumption, visualize progress towards daily goals, and store data persistently using Firebase Firestore. 121 | * *Platform:* Android 122 | * *Language:* Java 123 | * *Database:* Firebase Firestore 124 | 125 | #### 🧠 Machine Learning: 126 | 127 |

128 | Handwriting Signature Recognition 129 |

130 | 131 | 1. **[Handwriting Signature Recognition](https://github.com/TranHuuDat2004/handwriting-signature-recognition):** Developed a machine learning model for authenticating handwritten signatures. This project explores techniques for feature extraction and classification to verify signature authenticity. 132 | * *Language:* Python 133 | * *Libraries/Frameworks:* (e.g., TensorFlow/Keras, scikit-learn, OpenCV) - *Please add specific ML libraries if you remember them.* 134 | 135 | 136 | 137 | --- 138 | 139 | ### 🚀 Personal Projects & Live Demos (GitHub Pages): 140 | 141 |

142 | Puzzle Logo 143 |

144 | 145 | 1. **Puzzle & Image Tools Suite:** 146 | * **Description:** An engaging web application featuring an interactive jigsaw puzzle game and a set of practical image manipulation tools (square cropper, grid splitter, resizer). Designed for entertainment and utility. 147 | * 🔗 **Live Demo:** [https://tranhuudat2004.github.io/games_tools/] 148 | * 💡 **Key Features:** 149 | * Jigsaw puzzle with diverse image collections and intuitive drag & drop. 150 | * Image tools: Crop to square, split into grid, resize with aspect ratio control. 151 | * *Tech Stack:* HTML5, CSS3, JavaScript, Bootstrap. 152 | 153 | 154 | 155 |

156 | Mymusic Logo 157 |

158 | 159 | 2. **MyMusic Player Interface:** 160 | * **Description:** A sleek, modern online music player interface inspired by platforms like Spotify. This project showcases UI/UX design skills and front-end development proficiency with a focus on a clean, responsive, and interactive user experience. 161 | * 🔗 **Live Demo:** [https://tranhuudat2004.github.io/mymusic/] 162 | * 💡 **Key Features:** 163 | * Intuitive music playback controls (play/pause, progress, volume). 164 | * Responsive design for desktop and mobile. 165 | * Dynamic UI elements built with vanilla JavaScript. 166 | * *Tech Stack:* HTML5, CSS3, JavaScript (ES6+). 167 | 168 | 169 | 170 | --- 171 | 172 | * ➡️ Explore more of my projects in the [Repositories tab](https://github.com/TranHuuDat2004?tab=repositories). 173 | 174 | --- 175 | 176 |

177 | Thanks for visiting! 178 | 179 |

180 |

181 | Coding GIF - Thanks for visiting! 182 | 183 |

184 | -------------------------------------------------------------------------------- /assets/achive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/achive.jpg -------------------------------------------------------------------------------- /assets/coding.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/coding.gif -------------------------------------------------------------------------------- /assets/cursor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/cursor.png -------------------------------------------------------------------------------- /assets/cursor_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/cursor_blue.png -------------------------------------------------------------------------------- /assets/en.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/en.png -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/favicon.ico -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/favicon.png -------------------------------------------------------------------------------- /assets/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/hand.png -------------------------------------------------------------------------------- /assets/hand_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/hand_blue.png -------------------------------------------------------------------------------- /assets/logo_aquatrack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/logo_aquatrack.png -------------------------------------------------------------------------------- /assets/logo_brickshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/logo_brickshop.png -------------------------------------------------------------------------------- /assets/logo_handwriting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/logo_handwriting.png -------------------------------------------------------------------------------- /assets/logo_mymusic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/logo_mymusic.png -------------------------------------------------------------------------------- /assets/logo_omacha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/logo_omacha.png -------------------------------------------------------------------------------- /assets/logo_puzzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/logo_puzzle.png -------------------------------------------------------------------------------- /assets/logo_puzzle0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/logo_puzzle0.png -------------------------------------------------------------------------------- /assets/logo_zstyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/logo_zstyle.png -------------------------------------------------------------------------------- /assets/my-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/my-image.jpg -------------------------------------------------------------------------------- /assets/my_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/my_image.jpg -------------------------------------------------------------------------------- /assets/type.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/type.gif -------------------------------------------------------------------------------- /assets/vn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004.github.io/f6b3446decadde93e1b4157f18aa9d47581b59cf/assets/vn.png -------------------------------------------------------------------------------- /brickshop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | Dự án: BrickShop - Trần Hữu Đạt 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 143 | 144 | 145 | 146 | 147 |
148 | 149 | 181 | 182 | 183 |
184 |
185 |
186 |

Thông tin chi tiết của dự án

187 |
188 |
189 |
190 | 191 |
192 |
193 |
194 |
PT E-commerce
195 |
196 |
197 |
198 |

BrickShop - Thiên đường Đồ chơi Lắp ráp 🧱

199 |

Chào mừng đến với BrickShop, một dự án website thương mại điện tử chuyên cung cấp đồ chơi lắp ráp sáng tạo từ các thương hiệu hàng đầu như Qman, Keeppley, và LEGO. Khám phá một thế giới sáng tạo với các chủ đề đa dạng và trải nghiệm mua sắm liền mạch.

200 | 201 |
Ngăn xếp Công nghệ:
202 |
203 | HTML5 204 | CSS3 205 | Bootstrap 206 | JavaScript 207 | Node.js 208 | MySQL 209 |
210 | 211 |
Tổng quan Tính năng Chính:
212 |
213 |
214 |
Dành cho Khách hàng:
215 |
    216 |
  • Xác thực & Quản lý Tài khoản
    • 217 |
  • Duyệt, Lọc & Tìm kiếm Sản phẩm
    • 218 |
  • Xem chi tiết & Thư viện ảnh
    • 219 |
  • Giỏ hàng & Thanh toán (Voucher, QR)
    • 220 |
  • Lịch sử & Theo dõi Đơn hàng
    • 221 |
222 |
223 |
224 |
Dành cho Quản trị viên:
225 |
    226 |
  • Bảng điều khiển với số liệu chính
    • 227 |
  • Quản lý Người dùng, SP, Đơn hàng
    • 228 |
  • Quản lý Giảm giá & Danh mục
    • 229 |
  • Nhập liệu sản phẩm đa ngôn ngữ
    • 230 |
231 |
232 |
233 | 234 |

235 | Trang quản trị xây dựng bằng Tailwind CSS, trang khách hàng bằng Bootstrap. Chi tiết đầy đủ trên GitHub. 236 |

237 |

238 | 239 | Xem trên GitHub 240 | 241 |

242 |

Giấy phép: CC BY-NC 4.0

243 | 244 |
245 |
Ảnh chụp Giao diện Khách hàng (Bootstrap)
246 |

Lưu ý: Đảm bảo các tệp ảnh chụp màn hình được đặt trong thư mục assets/screenshots/ với tên chính xác.

247 |
248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 |
Trang ChủGiới thiệu LEGOGiới thiệu Qman
BrickShop Home PageBrickShop LEGO IntroductionBrickShop Qman Introduction
Giới thiệu KeeppleyTrang Sản phẩmTrang Chi tiết Sản phẩm
BrickShop Keeppley IntroductionBrickShop Products PageBrickShop Product Detail Page
Cài đặt - Thông tinCài đặt - Ảnh đại diệnCài đặt - Mạng xã hội
BrickShop Account Settings - InfoBrickShop Account Settings - AvatarBrickShop Account Settings - Social Links
Chi tiết Đơn hàng  
BrickShop Order Detail  
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 | 302 | 318 | 319 |
320 | Custom Cursor Icon 321 | Huu Dat 322 |
323 | 324 | 325 | 326 | 508 | 509 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Liên hệ - Trần Hữu Đạt 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 74 | 75 | 76 | 77 |
78 | 79 | 111 | 112 |
113 |
114 |
115 |
116 |
117 |

Liên Lạc

118 |

Tôi rất mong nhận được phản hồi từ bạn! Hãy kết nối nhé.

119 |
120 |
121 |
122 |
123 |
124 | 125 | 126 |
Vui lòng nhập tên.
127 |
128 |
129 | 130 | 131 |
Vui lòng nhập email.
132 |
Email không hợp lệ.
133 |
134 |
135 | 136 | 137 |
138 |
139 | 140 | 141 |
Vui lòng nhập tin nhắn.
142 |
143 |
144 |
145 |
Gửi biểu mẫu thành công! Cảm ơn bạn.
146 |
147 |
148 |
149 |
Lỗi khi gửi tin nhắn! Vui lòng thử lại.
150 |
151 |
152 |
153 |
154 |
155 |

Hoặc liên hệ trực tiếp:

156 |

huudat.peashooer@gmail.com

157 |

158 | Hồ sơ LinkedIn của tôi 159 |

160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 | 168 | 184 | 185 |
186 | Custom Cursor Icon 187 | Hữu Đạt 188 |
189 | 190 | 191 | 192 | 193 | 194 | 195 | 383 | 384 | 385 | -------------------------------------------------------------------------------- /css/github.css: -------------------------------------------------------------------------------- 1 | .project-card-image { 2 | max-width: 150px; 3 | /* Kích thước logo trên mobile */ 4 | /* margin-bottom: 1rem; Khoảng cách với text khi ở dạng cột (nếu ảnh ở trên) */ 5 | /* Nếu ảnh ở bên, margin-bottom không cần thiết khi flex-direction: column */ 6 | display: block; 7 | /* Loại bỏ khoảng trắng thừa nếu là ảnh inline */ 8 | margin-left: auto; 9 | /* Căn giữa ảnh trên mobile nếu text-align:center cho div cha */ 10 | margin-right: auto; 11 | } 12 | 13 | .featured-projects h2 { 14 | text-align: center; 15 | color: #fff; 16 | margin-bottom: 2rem; 17 | } 18 | 19 | .projects-grid { 20 | display: grid; 21 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 22 | gap: 1.5rem; 23 | max-width: 1200px; 24 | margin: 0 auto; 25 | padding: 0 1rem; 26 | } 27 | 28 | .project-card { 29 | background-color: white; 30 | 31 | border-radius: 6px; 32 | padding: 1.5rem; 33 | display: flex; 34 | flex-direction: column; 35 | justify-content: space-between; 36 | } 37 | 38 | .card-header { 39 | display: flex; 40 | justify-content: space-between; 41 | align-items: center; 42 | margin-bottom: 0.75rem; 43 | } 44 | 45 | .project-title { 46 | font-size: 1.25rem; 47 | font-weight: 600; 48 | color: #58a6ff; 49 | /* Màu tiêu đề */ 50 | } 51 | 52 | .external-link-icon svg { 53 | width: 16px; 54 | height: 16px; 55 | fill: #8b949e; 56 | } 57 | 58 | .project-description { 59 | font-size: 0.875rem; 60 | color: #8b949e; 61 | margin-bottom: 1rem; 62 | flex-grow: 1; 63 | /* Để description chiếm không gian còn lại */ 64 | line-height: 1.5; 65 | } 66 | 67 | .card-footer { 68 | display: flex; 69 | justify-content: space-between; 70 | align-items: center; 71 | font-size: 0.875rem; 72 | color: #8b949e; 73 | } 74 | 75 | .project-language { 76 | display: flex; 77 | align-items: center; 78 | } 79 | 80 | .language-dot { 81 | width: 12px; 82 | height: 12px; 83 | border-radius: 50%; 84 | margin-right: 6px; 85 | } 86 | 87 | .language-dot.ruby { 88 | background-color: #701516; 89 | } 90 | 91 | .language-dot.css { 92 | background-color: #563d7c; 93 | } 94 | 95 | .language-dot.html { 96 | background-color: #e34c26; 97 | } 98 | 99 | .language-dot.javascript { 100 | background-color: #f1e05a; 101 | } 102 | 103 | .language-dot.unknown, .language-dot.jupyter-notebook { 104 | background-color: #ccc; 105 | } 106 | 107 | .language-dot.php { 108 | background-color: #777BB4; 109 | } 110 | 111 | .language-dot.dart { 112 | background-color: #00B4AB; 113 | } 114 | 115 | .language-dot.java { 116 | background-color: #b07219; 117 | } 118 | 119 | .language-dot.nodejs { 120 | background-color: #339933; 121 | } 122 | 123 | .language-dot.ejs { 124 | background-color: #a91e50; 125 | } 126 | 127 | /* Thêm các ngôn ngữ/công nghệ khác nếu cần */ 128 | .language-dot.python { 129 | background-color: #3572A5; 130 | /* Xanh dương của Python */ 131 | } 132 | 133 | .language-dot.csharp { 134 | /* Cho C# */ 135 | background-color: #178600; 136 | /* Xanh lá cây đậm */ 137 | } 138 | 139 | .language-dot.swift { 140 | background-color: #FA7343; 141 | /* Cam của Swift */ 142 | } 143 | 144 | .language-dot.kotlin { 145 | background-color: #7F52FF; 146 | /* Tím của Kotlin */ 147 | } 148 | 149 | .language-dot.go { 150 | background-color: #00ADD8; 151 | /* Xanh da trời của Go */ 152 | } 153 | 154 | .language-dot.typescript { 155 | background-color: #3178c6; 156 | /* Xanh dương của TypeScript */ 157 | } 158 | 159 | .project-stats span { 160 | margin-left: 1rem; 161 | } 162 | 163 | .project-stats .stars::before { 164 | content: '⭐'; 165 | margin-right: 4px; 166 | } 167 | 168 | /* Hoặc dùng SVG icon */ 169 | .project-stats .forks::before { 170 | content: '🍴'; 171 | margin-right: 4px; 172 | } 173 | -------------------------------------------------------------------------------- /github-readme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Projects - Tran Huu Dat 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 588 | 589 | 590 | 591 |
592 | 593 | 610 |
611 |
612 |
613 |

My Projects

614 |
615 | 616 |
617 |
618 | 619 |
620 |
621 |
622 |
623 | 624 | 625 | 626 |
627 |
628 | 629 | 646 | 647 | 648 |
649 | Custom Cursor Icon 650 | Huu Dat 651 |
652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | -------------------------------------------------------------------------------- /github.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Projects - Tran Huu Dat 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 192 | 193 | 194 | 195 |
196 | 197 | 214 | 215 |
216 |
217 |
218 |

My Projects on 219 | GitHub

220 |
221 |
222 |
223 | 224 | 225 |
226 |
227 | 228 | 229 |
230 |

Project description here.

231 |
232 | 233 | 234 | Ruby 235 | 236 |
237 | ⭐ 545 238 | 🍴 207 239 |
240 |
241 |
242 | 243 |
244 |
245 | 246 |
247 | 248 |
249 | 250 | 267 | 268 | 269 |
270 | Custom Cursor Icon 271 | Huu Dat 272 |
273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 366 | 367 | 368 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | Trần Hữu Đạt - Portfolio Lập trình viên Web 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 182 | 183 | 184 | 185 | 186 |
187 | 188 | 225 | 226 |
227 |
228 |
229 |
230 | 231 |
232 |
233 |
Phát triển Web · Full-Stack 234 | · Di động
235 |
236 |
Xin chào, tôi là 237 |
238 |

Trần Hữu 239 | Đạt

240 |

Một sinh 241 | viên Kỹ thuật Phần mềm đầy nhiệt huyết, chuyên về phát triển ứng dụng web và di động, 242 | luôn mong muốn học hỏi công nghệ mới và đóng góp vào các dự án sáng tạo.

243 |
245 | Hồ sơ của tôi 247 | Dự án của tôi 249 |
250 |
251 |
252 |
253 |
254 |
255 | Ảnh đại diện Trần Hữu Đạt 256 |
257 |
258 |
259 |
260 |
261 |
262 | 263 | 264 |
265 |
266 |

Kỹ Năng Của Tôi

268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
279 | 280 |
281 |

Kỹ Năng Chuyên Môn

283 |
284 |

Chuyên Môn Chung

286 |
287 |
288 |
Phát triển Web
290 |
Phát triển Di động
292 |
Thiết kế UI/UX
294 |
Giải quyết vấn đề
296 |
Làm việc nhóm
298 |
299 |
300 |

Công Cụ

302 |
303 |
304 |
VSCode
305 |
Docker
306 |
Git & GitHub
307 |
308 |
309 |

Phần Mềm Thiết Kế

311 |
312 |
313 |
Figma
314 |
Canva
315 |
316 |
317 |
318 |
319 |
320 |
322 | 323 |
324 |

Ngăn Xếp Công Nghệ

326 |
327 |
328 |
329 |
HTML5
330 |
CSS3
331 |
JavaScript (ES6+)
332 |
Node.js
333 |
Express.js
334 |
PHP
335 |
MySQL
336 |
Firebase (Firestore)
337 |
WordPress
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 | 349 | 350 |
351 |
352 |
353 |

Các Dự Án Của Tôi trên GitHub

355 |
356 |
357 |
358 |
359 | 360 |
361 |
362 |
363 | Khám phá thêm các dự án của tôi trong tab Kho lưu trữ. 366 |
367 |
368 | 369 | 370 |
371 |
372 |
373 |
374 |

Giới thiệu sơ lược về tôi

376 |

Tôi là Trần Hữu Đạt, một sinh viên 377 | kỹ thuật phần mềm tận tâm tại trường Đại học Tôn Đức Thắng.

378 |

Đam mê tạo ra các giải pháp web và di 379 | động hiệu quả và thân thiện với người dùng. Tôi thích giải quyết các vấn đề thách thức và liên 380 | tục mở rộng bộ kỹ năng của mình trong thế giới công nghệ không ngừng phát triển. Mục tiêu của 381 | tôi là tận dụng khả năng kỹ thuật của mình để xây dựng các ứng dụng có tầm ảnh hưởng và đóng góp 382 | vào các dự án ý nghĩa. Hiện đang tìm kiếm cơ hội để áp dụng kiến thức và phát triển như một lập 383 | trình viên chuyên nghiệp.

384 |
385 | 387 | 389 | 391 |
392 |
393 |
394 |
395 |
396 | 397 | 398 | 399 | 414 | 415 | 416 |
417 | Custom Cursor Icon 418 | Hữu Đạt 419 |
420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 626 | 627 | 628 | -------------------------------------------------------------------------------- /js/cursor.js: -------------------------------------------------------------------------------- 1 | 2 | const cursorElement = document.querySelector('.cursor-element'); 3 | const cursorTextElement = cursorElement ? cursorElement.querySelector('.cursor-text') : null; 4 | 5 | let autoTextCurrentIndex = 0; 6 | let autoTextInterval; 7 | let isTextFading = false; 8 | let isCustomCursorActive = true; // Theo dõi trạng thái của custom cursor 9 | 10 | const autoTexts = [ 11 | "Hello!", 12 | "I'm Tran Huu Dat", 13 | "I'm a Web Developer", 14 | "I'm looking for a job", 15 | "Thanks for visiting!" 16 | ]; 17 | 18 | function updateCursorPosition(x, y) { 19 | if (!cursorElement) return; 20 | cursorElement.style.left = x + 'px'; 21 | cursorElement.style.top = y + 'px'; 22 | } 23 | 24 | function showCustomCursor() { 25 | if (!cursorElement) return; 26 | isCustomCursorActive = true; 27 | cursorElement.classList.add('visible'); 28 | // Khởi động lại auto text nếu có và chưa chạy 29 | if (cursorTextElement && !autoTextInterval) { 30 | updateAutoCursorText(); // Hiển thị text ngay 31 | autoTextInterval = setInterval(updateAutoCursorText, 3000); 32 | } 33 | } 34 | 35 | function hideCustomCursor() { 36 | if (!cursorElement) return; 37 | isCustomCursorActive = false; 38 | cursorElement.classList.remove('visible'); 39 | // Dừng auto text 40 | if (autoTextInterval) { 41 | clearInterval(autoTextInterval); 42 | autoTextInterval = null; 43 | } 44 | } 45 | 46 | function changeCursorTextWithFade(newText) { 47 | if (!cursorTextElement || isTextFading || cursorTextElement.textContent === newText) { 48 | return; 49 | } 50 | isTextFading = true; 51 | cursorTextElement.classList.add('fade-out'); 52 | 53 | setTimeout(() => { 54 | cursorTextElement.textContent = newText; 55 | cursorTextElement.classList.remove('fade-out'); 56 | isTextFading = false; 57 | }, 200); // Giảm thời gian fade 58 | } 59 | 60 | function updateAutoCursorText() { 61 | if (!isCustomCursorActive || !cursorTextElement) return; // Chỉ chạy nếu custom cursor đang active 62 | const newTextToShow = autoTexts[autoTextCurrentIndex]; 63 | autoTextCurrentIndex = (autoTextCurrentIndex + 1) % autoTexts.length; 64 | changeCursorTextWithFade(newTextToShow); 65 | } 66 | 67 | if (cursorElement) { 68 | document.addEventListener('mousemove', (e) => { 69 | updateCursorPosition(e.clientX, e.clientY); 70 | // Chỉ hiển thị custom cursor nếu nó đang active (không hover qua link/button) 71 | // và nó chưa visible (trường hợp ban đầu hoặc sau khi mouseleave khỏi body) 72 | if (isCustomCursorActive && !cursorElement.classList.contains('visible')) { 73 | showCustomCursor(); 74 | } 75 | }); 76 | 77 | 78 | 79 | // Các element tương tác sẽ ẩn custom cursor và hiển thị cursor mặc định (hand.png) 80 | const interactiveElements = document.querySelectorAll('a, button, input[type="submit"], .form-control'); 81 | interactiveElements.forEach(el => { 82 | el.addEventListener('mouseenter', () => { 83 | hideCustomCursor(); 84 | }); 85 | el.addEventListener('mouseleave', (e) => { 86 | // Khi rời khỏi, cập nhật vị trí và hiển thị lại custom cursor 87 | updateCursorPosition(e.clientX, e.clientY); 88 | showCustomCursor(); 89 | }); 90 | }); 91 | 92 | // Hiển thị cursor lần đầu 93 | setTimeout(showCustomCursor, 100); 94 | 95 | } else { 96 | console.error("Cursor element not found!"); 97 | } 98 | -------------------------------------------------------------------------------- /js/github.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const username = 'TranHuuDat2004'; // THAY BẰNG USERNAME CỦA BẠN 3 | const projectsGrid = document.querySelector('.projects-grid'); 4 | const externalLinkIconSvg = ` 5 | `; // SVG for external link icon 8 | 9 | // Function to map language names to CSS classes for dots 10 | function getLanguageColorClass(language) { 11 | if (!language) return 'unknown'; 12 | return language.toLowerCase().replace(/#/g, 'sharp').replace(/\+/g, 'plus'); 13 | } 14 | 15 | fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=9&type=owner`) 16 | .then(response => { 17 | if (!response.ok) { 18 | throw new Error(`GitHub API error: ${response.status}`); 19 | } 20 | return response.json(); 21 | }) 22 | .then(repos => { 23 | if (!projectsGrid) { 24 | console.error('Projects grid container not found!'); 25 | return; 26 | } 27 | projectsGrid.innerHTML = ''; // Clear any placeholders 28 | 29 | repos.forEach(repo => { 30 | const card = document.createElement('div'); 31 | card.classList.add('project-card'); 32 | 33 | const description = repo.description || 'No description available.'; 34 | const language = repo.language || 'Unknown'; 35 | const langClass = getLanguageColorClass(language); 36 | 37 | card.innerHTML = ` 38 |
39 |

${repo.name}

40 | 41 | ${externalLinkIconSvg} 42 | 43 |
44 |

${description}

45 |
46 | 47 | 48 | ${language} 49 | 50 |
51 | ${repo.stargazers_count} 52 | ${repo.forks_count} 53 |
54 |
55 | `; 56 | projectsGrid.appendChild(card); 57 | 58 | // Dynamically add CSS for new language colors if not already present 59 | if (language !== 'Unknown' && !document.getElementById(`lang-style-${langClass}`)) { 60 | const style = document.createElement('style'); 61 | style.id = `lang-style-${langClass}`; 62 | // Fetch actual language color from GitHub's Linguist if you want to be super accurate, 63 | // or predefine common ones. For simplicity here, we'll just rely on predefined CSS. 64 | // For example, if you had a 'languages.json' from Linguist: 65 | // fetch('path/to/languages.json').then(res => res.json()).then(colors => { 66 | // if (colors[language] && colors[language].color) { 67 | // style.innerHTML = `.language-dot.${langClass} { background-color: ${colors[language].color}; }`; 68 | // document.head.appendChild(style); 69 | // } 70 | // }); 71 | // For now, ensure you have CSS for common languages like: 72 | // .language-dot.javascript { background-color: #f1e05a; } 73 | // .language-dot.python { background-color: #3572A5; } 74 | // etc. 75 | } 76 | }); 77 | }) 78 | .catch(error => { 79 | console.error('Failed to fetch repositories:', error); 80 | if (projectsGrid) { 81 | projectsGrid.innerHTML = '

Could not load projects. Please try again later.

'; 82 | } 83 | }); 84 | }); -------------------------------------------------------------------------------- /js/render-readme.js: -------------------------------------------------------------------------------- 1 | 2 | // js/render-readme.js 3 | document.addEventListener('DOMContentLoaded', function () { 4 | const username = 'TranHuuDat2004'; // <-- THAY BẰNG USERNAME GITHUB CỦA BẠN 5 | const repoName = 'TranHuuDat2004'; // <-- THAY BẰNG TÊN REPO CHỨA README.MD (thường trùng với username cho profile README) 6 | const readmeContainer = document.getElementById('readme-content'); 7 | 8 | if (!readmeContainer) { 9 | console.error('Không tìm thấy container #readme-content để hiển thị README.'); 10 | return; 11 | } 12 | 13 | // Hiển thị trạng thái loading (tùy chọn) 14 | readmeContainer.innerHTML = '

Loading README content...

'; 15 | 16 | // API endpoint để lấy nội dung file README.md 17 | // Endpoint này sẽ tự động tìm README.md, README.rst, v.v. 18 | // Hoặc bạn có thể dùng: `https://api.github.com/repos/${username}/${repoName}/contents/README.md` 19 | // nếu bạn chắc chắn tên file là README.md 20 | fetch(`https://api.github.com/repos/${username}/${repoName}/readme`, { 21 | headers: { 22 | // GitHub API khuyến khích đặt header 'Accept' để đảm bảo nhận đúng định dạng 23 | 'Accept': 'application/vnd.github.v3.raw+json' // Lấy nội dung thô, không cần base64 24 | // Hoặc 'application/vnd.github.v3+json' nếu bạn muốn lấy cả metadata và tự giải mã base64 25 | } 26 | }) 27 | .then(response => { 28 | if (!response.ok) { 29 | // Nếu dùng 'application/vnd.github.v3+json', bạn cần xử lý lỗi ở đây nếu file không tìm thấy 30 | // Còn với 'application/vnd.github.v3.raw+json', nếu file không tìm thấy sẽ trả 404 31 | throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`); 32 | } 33 | return response.text(); // Nhận nội dung Markdown thô trực tiếp 34 | }) 35 | .then(markdownContent => { 36 | // Cấu hình Marked.js 37 | marked.setOptions({ 38 | gfm: true, 39 | breaks: true, 40 | headerIds: true, 41 | mangle: false 42 | }); 43 | // Chuyển đổi Markdown sang HTML và chèn vào container 44 | readmeContainer.innerHTML = marked.parse(markdownContent); 45 | 46 | // (Tùy chọn) Xử lý đường dẫn tương đối cho ảnh trong README 47 | // Nếu các ảnh trong README.md của bạn dùng đường dẫn tương đối (ví dụ: 'assets/logo.png') 48 | // và bạn muốn chúng trỏ đến repo gốc của README trên GitHub, bạn có thể thêm logic sau: 49 | const images = readmeContainer.querySelectorAll('img'); 50 | images.forEach(img => { 51 | const src = img.getAttribute('src'); 52 | if (src && !src.startsWith('http') && !src.startsWith('data:')) { 53 | // Giả sử các assets nằm trong cùng repo với README.md 54 | // Cần điều chỉnh base URL này nếu cấu trúc repo của bạn khác 55 | // Ví dụ: Nếu ảnh là `assets/type.gif` trong repo `TranHuuDat2004/TranHuuDat2004` 56 | // nó sẽ trở thành `https://raw.githubusercontent.com/TranHuuDat2004/TranHuuDat2004/main/assets/type.gif` 57 | // (thay 'main' bằng default branch của bạn nếu khác) 58 | img.src = `https://raw.githubusercontent.com/${username}/${repoName}/main/${src}`; 59 | // Hoặc nếu bạn muốn link đến blob view (ít phổ biến hơn cho ảnh thô): 60 | // img.src = `https://github.com/${username}/${repoName}/blob/main/${src}?raw=true`; 61 | } 62 | }); 63 | 64 | }) 65 | .catch(error => { 66 | console.error('Failed to fetch or render README:', error); 67 | readmeContainer.innerHTML = `

Could not load README. Error: ${error.message}

`; 68 | }); 69 | }); -------------------------------------------------------------------------------- /js/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Personal v1.0.1 (https://startbootstrap.com/template-overviews/personal) 3 | * Copyright 2013-2023 Start Bootstrap 4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-personal/blob/master/LICENSE) 5 | */ 6 | // This file is intentionally blank 7 | // Use this file to add JavaScript to your project -------------------------------------------------------------------------------- /projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Dự án - Trần Hữu Đạt 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 140 | 141 | 142 | 143 |
144 | 145 | 178 | 179 |
180 |
181 |
182 |

Các Dự án của Tôi

183 |
184 | 185 | 186 |
187 |

Trang web Full-Stack

188 |
189 |
190 | 191 |
192 |
193 |
194 |
195 | BrickShop Logo 197 |
198 |
199 |

BrickShop - Thương mại điện tử

200 |

Xây dựng một trung tâm thương mại điện tử cho những người đam mê đồ chơi lắp ráp (Qman, Keeppley, LEGO). Các tính năng bao gồm duyệt sản phẩm liền mạch, thanh toán an toàn, quản lý đơn hàng và trang quản trị riêng.

201 |

Tech: Node.js, Express.js, MySQL, HTML, CSS, JS, Bootstrap, Tailwind CSS.

202 | 203 | Xem thông tin chi tiết 206 | 207 | Xem Kho lưu trữ 210 | 211 |
212 |
213 |
214 |
215 | 216 |
217 |
218 |
219 |
220 | ZStyle Logo 222 |
223 |
224 |

ZStyle - Thương mại điện tử Thời trang

225 |

Phát triển một trang web thương mại điện tử cơ bản về quần áo trong khuôn khổ đồ án môn học, triển khai các chức năng cốt lõi để người dùng khám phá các mặt hàng thời trang.

226 |

Tech: PHP, MySQL, HTML5, CSS3, JavaScript.

227 | Xem Kho lưu trữ 230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 | 238 | 239 |
240 |

GitHub Pages & Frontend

241 |
242 |
243 | 244 |
245 |
246 |
247 |
248 | Puzzle & Image Tools Suite Logo 250 |
251 |
252 |

Bộ Công cụ Xếp hình & Hình ảnh

253 |

Một ứng dụng web hấp dẫn bao gồm trò chơi xếp hình tương tác và các công cụ xử lý ảnh thực tế (cắt ảnh vuông, chia lưới, thay đổi kích thước).

254 |

Tech: HTML5, CSS3, JavaScript, Bootstrap.

255 | Xem trực tiếp 258 | Xem Kho lưu trữ 261 |
262 |
263 |
264 |
265 | 266 |
267 |
268 |
269 |
270 | MyMusic Player Logo 272 |
273 |
274 |

Giao diện Trình phát nhạc MyMusic

275 |

Một giao diện trình phát nhạc trực tuyến đẹp mắt, hiện đại, lấy cảm hứng từ các nền tảng như Spotify, thể hiện khả năng thiết kế UI/UX và kỹ năng frontend với trọng tâm vào trải nghiệm tương tác và đáp ứng (responsive).

276 |

Tech: HTML5, CSS3, JavaScript (ES6+).

277 | Xem trực tiếp 280 | Xem Kho lưu trữ 283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 | 291 | 292 |
293 |

Học Máy (Machine Learning)

294 |
295 |
296 | 297 |
298 |
299 |
300 |
301 | Signature Verification Logo 303 |
304 |
305 |

Hệ thống Xác thực Chữ ký

306 |

Phát triển một mô hình để xác thực chữ ký viết tay bằng các kỹ thuật Học máy trong Google Colab, đạt độ chính xác cao trong việc xác định chữ ký thật và giả mạo.

307 |

Tech: Python, TensorFlow/Keras, OpenCV, Matplotlib, Colab.

308 | Xem Kho lưu trữ 311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 | 321 | 322 |
323 |
324 |
325 |

Hãy cùng nhau xây dựng một điều gì đó

326 | Liên hệ với tôi 327 |
328 |
329 |
330 |
331 | 332 | 348 | 349 | 350 |
351 | Custom Cursor Icon 352 | Hữu Đạt 353 |
354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 537 | 538 | 539 | -------------------------------------------------------------------------------- /resume.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Hồ sơ - Trần Hữu Đạt 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 105 | 106 | 107 | 108 |
109 | 110 | 143 | 144 |
145 |
146 |

Hồ sơ

147 |
148 |
149 |
150 | 151 |
152 |
153 |

Kinh nghiệm

154 | 156 |
157 | Tải CV 158 | 159 |
160 | 161 | 162 |
163 |
164 |
165 |
166 |
167 |
2024 - Hiện tại
168 |
Giám thị (Bán thời gian)
169 |
Đại học Tôn Đức Thắng
170 |
TP. Hồ Chí Minh, VN
171 |
172 |
173 |
174 |
175 |
    176 |
  • Đảm bảo tính liêm chính và công bằng của các kỳ thi đại học bằng cách tuân thủ nghiêm ngặt các quy chế thi.
    • 177 |
  • Giám sát thí sinh, quản lý tài liệu thi và giải quyết các thắc mắc về thủ tục để duy trì một môi trường thi cử suôn sẻ.
    • 178 |
  • Phát triển tính kỷ luật, sự tỉ mỉ đến từng chi tiết và khả năng giữ bình tĩnh và quyết đoán dưới áp lực.
    • 179 |
  • Nâng cao kỹ năng quan sát và tính chuyên nghiệp thông qua tương tác với giảng viên và sinh viên.
    • 180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 | 188 | 189 |
190 |

Học vấn

191 |
192 |
193 |
194 |
195 |
196 |
2022 - 2026 (Dự kiến)
197 |
198 |
Đại học Tôn Đức Thắng
199 |
TP. Hồ Chí Minh, VN
200 |
201 |
202 |
Chuyên ngành: Kỹ thuật Phần mềm
203 |
204 |
205 |
206 |
207 |
Điểm trung bình: ~7.8/10
208 |
209 |
210 |
211 |
212 |
213 | 214 | 215 |
216 |

Giải thưởng & Thành tích

217 |
218 |
219 |
220 |
221 |
222 |
Tháng 4, 2023
223 |
Giải Khuyến khích
224 |
225 |
Cuộc thi "Thiết kế Website Lớp năm 2023"
226 |
227 |
228 |
Khoa Công nghệ Thông tin, Đại học Tôn Đức Thắng
229 |
230 |
231 |
232 |
233 |
234 |
    235 |
  • Đạt giải Khuyến khích cùng đội đại diện lớp 22H50201 trong cuộc thi toàn trường với hơn 20 lớp tham gia.
    • 236 |
  • Cuộc thi là một phần của "Tháng Thanh niên 2023" với chủ đề "Tuổi trẻ tiên phong chuyển đổi số".
    • 237 |
  • Phát triển một trang web lớp học nhằm thúc đẩy trao đổi học thuật và lưu giữ kỷ niệm của lớp.
    • 238 |
  • Đóng góp vào thiết kế UI/UX và tùy chỉnh giao diện WordPress.
    • 239 |
  • Thể hiện tinh thần đồng đội, sự sáng tạo và ứng dụng sớm các kỹ năng phát triển web trong một môi trường cạnh tranh.
    • 240 |
  • Lưu ý: Trang web cuộc thi do trường lưu trữ (itclass.tdtu.edu.vn/ktpm2022clc01/) đã được lưu trữ và không còn truy cập công khai.
    • 241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 | 249 | 250 |
251 |

Một Khoảnh khắc Tự hào

252 |
253 | A memorable moment - Receiving award at TDTU 2023 255 |
256 |

Nhận giải thưởng thiết kế tại TDTU, 2023

257 |
258 |
259 |
260 |
261 |
262 | 263 | 279 | 280 | 281 |
282 | Custom Cursor Icon 283 | Hữu Đạt 284 |
285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 483 | 484 | 485 | --------------------------------------------------------------------------------