Skip to content

Commit 75cde46

Browse files
TranHuuDat2004TranHuuDat2004
committed
sửa lại thanh tiến trình
1 parent 8878f21 commit 75cde46

7 files changed

Lines changed: 588 additions & 656 deletions

File tree

‎birthday.html‎

Lines changed: 39 additions & 424 deletions
Large diffs are not rendered by default.

‎error.jpg‎

-22.8 KB
Binary file not shown.

‎halloween.html‎

Lines changed: 48 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,9 @@ <h4 id="song-title">This Is Halloween</h4>
213213
<i class="fas fa-volume-high"></i>
214214
</div>
215215

216+
<!-- ====================================================== -->
217+
<!-- Section 2: About Me (CẬP NHẬT) -->
218+
<!-- ====================================================== -->
216219
<section id="about" class="content-section">
217220
<div class="container">
218221
<div class="section-header animate-on-scroll">
@@ -223,109 +226,75 @@ <h2 class="section-title">About Me</h2>
223226
<div class="about-grid">
224227
<div class="about-image-wrapper animate-on-scroll">
225228
<img src="assets/my_image.jpg" alt="A pensive anime character in a snowy city scene">
226-
<div class="status-tag"><span class="green-dot"></span> Available for work</div>
229+
<div class="status-tag">
230+
<span class="green-dot"></span> Available for work
231+
</div>
227232
</div>
228233
<div class="about-text-content animate-on-scroll">
229-
<p>I am a dedicated Software Engineering student at Ton Duc Thang University with a deep passion for building efficient and user-friendly web solutions. My journey into programming started with a curiosity to understand how things work, and it has grown into a drive to create meaningful applications.</p>
230-
<p>I enjoy tackling challenging problems and continuously expanding my skill set in the ever-evolving world of technology. From developing full-stack e-commerce platforms to creating fun, interactive web apps, my goal is to leverage my technical abilities to build impactful products.</p>
234+
<p>I am a dedicated Software Engineering student at Ton Duc Thang University with a deep passion
235+
for building efficient and user-friendly web solutions. My journey into programming started
236+
with a curiosity to understand how things work, and it has grown into a drive to create
237+
meaningful applications.</p>
238+
<p>I enjoy tackling challenging problems and continuously expanding my skill set in the
239+
ever-evolving world of technology. From developing full-stack e-commerce platforms to
240+
creating fun, interactive web apps, my goal is to leverage my technical abilities to build
241+
impactful products.</p>
231242
<div class="info-box-wrapper glass-card">
232243
<div class="info-box">
233-
<div><span class="info-label">Name</span><p>Trần Hữu Đạt</p></div>
234-
<div><span class="info-label">Email</span><p>tranhuudat.cv@gmail.com</p></div>
235-
<div><span class="info-label">Location</span><p>Ho Chi Minh City, VN</p></div>
236-
<div><span class="info-label">Availability</span><p class="available-status">Open to Internship</p></div>
244+
<div>
245+
<span class="info-label">Name</span>
246+
<p>Trần Hữu Đạt</p>
247+
</div>
248+
<div>
249+
<span class="info-label">Email</span>
250+
<p>tranhuudat.cv@gmail.com</p>
251+
</div>
252+
<div>
253+
<span class="info-label">Location</span>
254+
<p>Ho Chi Minh City, VN</p>
255+
</div>
256+
<div>
257+
<span class="info-label">Availability</span>
258+
<p class="available-status">Open to Internship</p>
259+
</div>
237260
</div>
238-
<a href="download-resume.html" download class="btn-download-resume">Download Resume <i class="fas fa-download"></i></a>
261+
<a href="download-resume.html" download class="btn-download-resume">Download Resume <i
262+
class="fas fa-download"></i></a>
239263
</div>
240264
</div>
241265
</div>
242266
</div>
243267
</section>
244268

269+
<!-- ====================================================== -->
270+
<!-- Section 3: Skills (CẬP NHẬT) -->
271+
<!-- ====================================================== -->
245272
<section id="skills" class="content-section">
246273
<div class="container">
247274
<div class="section-header animate-on-scroll">
275+
<!-- Thêm lại badge "My Skills" -->
248276
<div class="section-badge">My Skills</div>
277+
<!-- Đổi tiêu đề -->
249278
<h2 class="section-title">Technical Stack</h2>
250279
<div class="title-underline"></div>
251280
</div>
252-
<div class="skills-wrapper"><div class="skills-grid"><p class="skills-loading"><i class="fas fa-spinner fa-spin"></i> Loading technical skills...</p></div></div>
253-
</div>
254-
</section>
255281

256-
<section id="projects" class="content-section">
257-
<div class="container">
258-
<div class="section-header animate-on-scroll">
259-
<div class="section-badge">Some of my recent work</div>
260-
<h2 class="section-title">Featured Projects</h2>
261-
<div class="title-underline"></div>
262-
</div>
263-
<div class="project-showcase-grid animate-on-scroll">
264-
<div class="showcase-card">
265-
<div class="showcase-header"><span>Omacha Project</span></div>
266-
<div class="showcase-content">
267-
<div class="text-features">
268-
<h1>OMACHA SHOP<br>E-COMMERCE</h1>
269-
<h4 class="feature-title">FEATURES</h4>
270-
<ul>
271-
<li>Full-stack e-commerce platform built with PHP & MySQL.</li>
272-
<li>Robust admin panel for product, order, and user management.</li>
273-
<li>Responsive design ensuring a seamless experience on all devices.</li>
274-
</ul>
275-
</div>
276-
<div class="image-gallery">
277-
<img src="assets/omacha/Home1.jpg" alt="Omacha Homepage" class="showcase-img">
278-
<img src="assets/omacha/product_detail.jpg" alt="Omacha Homepage" class="showcase-img">
279-
</div>
280-
</div>
281-
</div>
282-
<div class="details-column">
283-
<h2>Omacha Shop</h2>
284-
<p class="project-category">Web, E-commerce, Full-stack</p>
285-
<div class="project-tags"><span>PHP</span><span>MySQL</span><span>JavaScript</span><span>Bootstrap</span></div>
286-
<div class="description-box glass-card"><p>A comprehensive toy e-commerce platform designed for a fun shopping experience and powerful admin tools.</p></div>
287-
<div class="project-links">
288-
<a href="https://github.com/TranHuuDat2004/Omacha_Shop" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
289-
<a href="https://tranhuudat2004.github.io/Omacha-Shop-Demo/" aria-label="Project Details"><i class="fas fa-link"></i></a>
290-
</div>
282+
<div class="skills-wrapper">
283+
<div class="skills-grid">
284+
<!-- JavaScript sẽ tự động chèn các thanh kỹ năng vào đây -->
285+
<p class="skills-loading">
286+
<i class="fas fa-spinner fa-spin"></i> Loading technical skills...
287+
</p>
291288
</div>
292289
</div>
293290
</div>
294291
</section>
295292

296-
<section id="experience" class="content-section">
297-
<div class="container">
298-
<div class="section-header animate-on-scroll">
299-
<div class="section-badge">My professional journey</div>
300-
<h2 class="section-title">Experience & Education</h2>
301-
<div class="title-underline"></div>
302-
</div>
303-
<div class="timeline">
304-
<div class="timeline-item animate-on-scroll">
305-
<div class="timeline-dot"></div>
306-
<div class="timeline-content glass-card">
307-
<h3>Bachelor of Software Engineering</h3>
308-
<p class="timeline-meta">Ton Duc Thang University | 2022 - 2026</p>
309-
<p>Building a strong foundation in computer science, algorithms, and web development principles, while maintaining a GPA of 7.8/10.</p>
310-
</div>
311-
</div>
312-
</div>
313-
</div>
314-
</section>
315293

316-
<section id="blog" class="content-section">
317-
<div class="container">
318-
<div class="section-header animate-on-scroll">
319-
<div class="section-badge">Sharing my knowledge</div>
320-
<h2 class="section-title">From The Blog (Maintenance)</h2>
321-
<div class="title-underline"></div>
322-
</div>
323-
<div class="blog-grid"></div>
324-
<div class="view-all-posts-container animate-on-scroll"><a href="blog.html" class="btn btn-secondary">View All Posts</a></div>
325-
</div>
326-
</section>
294+
<!-- Nơi các section chung sẽ được tải vào -->
295+
<div id="main-content-sections"></div>
296+
327297
</main>
328-
329298
<footer class="main-footer">
330299
<div class="container footer-container">
331300
<div class="footer-column footer-about">
@@ -361,6 +330,8 @@ <h4 class="footer-title">Connect with Me</h4>
361330
<audio id="audio-source"></audio>
362331
<script src="js/playlist.js"></script>
363332
<script src="js/scripts.js"></script>
333+
<!-- === TẢI CÁC SECTION CHUNG === -->
334+
<script src="js/load-sections.js"></script>
364335
<script>
365336
// Halloween specific scripts
366337
document.addEventListener('DOMContentLoaded', () => {

‎js/load-sections.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
document.addEventListener("DOMContentLoaded", function() {
2+
// Tìm phần tử container nơi chúng ta sẽ chèn các section
3+
const sectionsContainer = document.getElementById("main-content-sections");
4+
5+
// Nếu không tìm thấy container, dừng thực thi để tránh lỗi
6+
if (!sectionsContainer) {
7+
console.error("Không tìm thấy phần tử #main-content-sections. Vui lòng thêm thẻ div này vào file HTML của bạn.");
8+
return;
9+
}
10+
11+
// Sử dụng fetch API để lấy nội dung từ file sections.html
12+
fetch('sections.html')
13+
.then(response => {
14+
// Kiểm tra xem yêu cầu có thành công không
15+
if (!response.ok) {
16+
throw new Error("Không thể tải file sections.html");
17+
}
18+
// Chuyển đổi nội dung phản hồi sang dạng text
19+
return response.text();
20+
})
21+
.then(html => {
22+
// Chèn nội dung HTML đã lấy được vào container
23+
sectionsContainer.innerHTML = html;
24+
})
25+
.catch(error => {
26+
// Ghi lại lỗi nếu có sự cố xảy ra
27+
console.error("Đã xảy ra lỗi khi tải các section:", error);
28+
sectionsContainer.innerHTML = "<p style='text-align: center; color: red;'>Không thể tải nội dung. Vui lòng kiểm tra lại.</p>";
29+
});
30+
});

0 commit comments

Comments
 (0)