1+ <!DOCTYPE html>
2+ < html lang ="vi ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ <!-- Thêm data-translate-key cho title -->
8+ < title data-translate-key ="pageTitle "> Trần Hữu Đạt - Web Developer Portfolio</ title >
9+ < link rel ="icon " type ="image/png " href ="assets/favicon.png " />
10+ < link rel ="stylesheet " href ="css/animation.css ">
11+ <!-- Link đến Bootstrap Icons -->
12+ < link href ="
https://cdn.jsdelivr.net/npm/[email protected] /font/bootstrap-icons.css "
rel ="
stylesheet "
/> 13+ </ head >
14+
15+ < body >
16+ <!-- NÚT CHUYỂN NGÔN NGỮ ĐƯỢC THÊM VÀO ĐÂY -->
17+ < div class ="language-switcher-container ">
18+ < div class ="language-switcher ">
19+ < div class ="current-flag ">
20+ < img id ="current-flag-img " src ="assets/vn.png " alt ="Current Language ">
21+ </ div >
22+ < div class ="language-dropdown ">
23+ < a href ="# " class ="lang-option " data-lang ="en ">
24+ < img src ="assets/en.png " alt ="English Flag ">
25+ < span > English</ span >
26+ </ a >
27+ < a href ="# " class ="lang-option " data-lang ="vi ">
28+ < img src ="assets/vn.png " alt ="Vietnamese Flag ">
29+ < span > Tiếng Việt</ span >
30+ </ a >
31+ </ div >
32+ </ div >
33+ </ div >
34+
35+ < div class ="particles "> </ div >
36+
37+ < div class ="container ">
38+ < div class ="left-section ">
39+ < div class ="logo ">
40+ < span class ="animated-icon " style ="font-size: 20px; "> 🚀</ span >
41+ < h1 > Trần Hữu Đạt</ h1 >
42+ </ div >
43+
44+ < h2 > Web Developer</ h2 >
45+ < p class ="subtitle " data-translate-key ="subtitle "> Chào mừng đến với không gian sáng tạo của tôi! Tôi là một sinh viên Kỹ thuật Phần mềm đam mê xây dựng các ứng dụng web đẹp và hữu ích.</ p >
46+
47+ < div class ="instruction ">
48+ < h3 > < span class ="animated-icon " style ="font-size: 18px; "> 🛠️</ span > < span data-translate-key ="skillsTitle "> Kỹ năng & Công nghệ</ span > </ h3 >
49+ < p data-translate-key ="skillsDesc "> Tôi thành thạo các công nghệ hiện đại để xây dựng các sản phẩm full-stack: JavaScript (ES6+), Node.js, PHP, SQL, HTML5 & CSS3.</ p >
50+ </ div >
51+
52+ < div class ="warning ">
53+ < h3 > < span class ="animated-icon " style ="font-size: 18px; "> 🏆</ span > < span data-translate-key ="projectsTitle "> Dự án nổi bật</ span > </ h3 >
54+ < p data-translate-key ="projectsDesc "> Khám phá các dự án từ E-commerce, nền tảng streaming đến các công cụ hữu ích mà tôi đã xây dựng. Mỗi dự án là một câu chuyện về sự học hỏi và sáng tạo.</ p >
55+ </ div >
56+
57+ < div style ="text-align: center; margin: 36px 0; ">
58+ < a href ="projects.html " class ="btn btn-primary ">
59+ < span class ="animated-icon " style ="font-size: 18px; "> ✨</ span >
60+ < span data-translate-key ="viewProjectsBtn "> Xem các dự án của tôi</ span >
61+ </ a >
62+ </ div >
63+
64+ < div class ="footer ">
65+ < ul >
66+ < li > < a href ="https://github.com/TranHuuDat2004 " target ="_blank " rel ="noopener noreferrer " style ="color: inherit; text-decoration: none; "> < span class ="animated-icon " style ="font-size: 16px; "> 🐱</ span > GitHub</ a > </ li >
67+ < li > < a href ="https://linkedin.com/in/tranhuudat2004 " target ="_blank " rel ="noopener noreferrer " style ="color: inherit; text-decoration: none; "> < span class ="animated-icon " style ="font-size: 16px; "> 💼</ span > LinkedIn</ a > </ li >
68+ < li > < a href ="
mailto:[email protected] "
style ="
color: inherit; text-decoration: none; "
> < span class ="
animated-icon "
style ="
font-size: 16px; "
> 📧
</ span > Email
</ a > </ li > 69+ </ ul >
70+ </ div >
71+ </ div >
72+
73+ < div class ="right-section ">
74+ < div class ="anime-illustration ">
75+ < img src ="assets/my_image.jpg " alt ="Trần Hữu Đạt " />
76+ </ div >
77+
78+ < h3 data-translate-key ="exploreTitle "> Khám phá Portfolio </ h3 >
79+ < p data-translate-key ="exploreDesc "> Mỗi trang là một phần trong hành trình phát triển của tôi. Hãy cùng khám phá nhé! ✨</ p >
80+
81+ < ul class ="feature-list ">
82+ < li > < a href ="index.html " style ="text-decoration: none; display: flex; align-items: center; gap: 15px; "> < span style ="font-size: 22px; " class ="animated-icon "> 🏠</ span > < span data-translate-key ="navHome "> Trang chủ</ span > </ a > </ li >
83+ < li > < a href ="resume.html " style ="text-decoration: none; display: flex; align-items: center; gap: 15px; "> < span style ="font-size: 22px; " class ="animated-icon "> 📄</ span > < span data-translate-key ="navResume "> Hồ sơ & CV</ span > </ a > </ li >
84+ < li > < a href ="projects.html " style ="text-decoration: none; display: flex; align-items: center; gap: 15px; "> < span style ="font-size: 22px; " class ="animated-icon "> 🚀</ span > < span data-translate-key ="navProjects "> Dự án chi tiết</ span > </ a > </ li >
85+ < li > < a href ="contact.html " style ="text-decoration: none; display: flex; align-items: center; gap: 15px; "> < span style ="font-size: 22px; " class ="animated-icon "> 📬</ span > < span data-translate-key ="navContact "> Liên hệ</ span > </ a > </ li >
86+ </ ul >
87+ </ div >
88+ </ div >
89+
90+ < script src ="js/animation.js "> </ script >
91+ </ body >
92+ </ html >
0 commit comments