File size: 4,015 Bytes
b049770 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
// ===== THEME TOGGLE =====
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
const themeIcon = document.getElementById("themeIcon");
html.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
themeIcon.className = newTheme === "dark" ? "ri-sun-fill" : "ri-moon-fill";
}
// ===== MOBILE MENU TOGGLE =====
function toggleMenu() {
const navLinks = document.getElementById("navLinks");
navLinks.classList.toggle("active");
}
// ===== LOAD SAVED THEME =====
window.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme") || "light";
const themeIcon = document.getElementById("themeIcon");
document.documentElement.setAttribute("data-theme", savedTheme);
themeIcon.className = savedTheme === "dark" ? "ri-sun-fill" : "ri-moon-fill";
});
// ===== SMOOTH SCROLL WITH OFFSET =====
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
if (target) {
const offset = 80;
const targetPosition = target.offsetTop - offset;
window.scrollTo({
top: targetPosition,
behavior: "smooth",
});
// Close mobile menu if open
document.getElementById("navLinks").classList.remove("active");
}
});
});
// ===== SCROLL ANIMATION =====
const observerOptions = {
threshold: 0.1,
rootMargin: "0px 0px -100px 0px",
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = "1";
entry.target.style.transform = "translateY(0)";
}
});
}, observerOptions);
document.querySelectorAll(".glass-card, .timeline-item").forEach((el) => {
el.style.opacity = "0";
el.style.transform = "translateY(20px)";
el.style.transition = "all 0.6s ease";
observer.observe(el);
});
// ===== SOCIAL LINKS PLACEHOLDERS =====
// Update these with your actual links
const socialLinks = {
scholar: "https://scholar.google.com/citations?user=h126goIAAAAJ", // Add your Google Scholar URL here
github: "https://github.com/ntphuc149", // Add your GitHub URL here
linkedin: "https://www.linkedin.com/in/ntphuc149/", // Add your LinkedIn URL here
};
document.getElementById("scholarLink").addEventListener("click", (e) => {
if (!socialLinks.scholar) {
e.preventDefault();
alert("Please update your Google Scholar link in the script.js file");
} else {
window.open(socialLinks.scholar, "_blank");
}
});
document.getElementById("githubLink").addEventListener("click", (e) => {
if (!socialLinks.github) {
e.preventDefault();
alert("Please update your GitHub link in the script.js file");
} else {
window.open(socialLinks.github, "_blank");
}
});
document.getElementById("linkedinLink").addEventListener("click", (e) => {
if (!socialLinks.linkedin) {
e.preventDefault();
alert("Please update your LinkedIn link in the script.js file");
} else {
window.open(socialLinks.linkedin, "_blank");
}
});
// ===== EXPERIENCE TABS SWITCHING =====
function switchTab(tabName) {
// Get all tab buttons and contents
const tabButtons = document.querySelectorAll(".tab-btn");
const tabContents = document.querySelectorAll(".tab-content");
// Remove active class from all buttons and contents
tabButtons.forEach((btn) => btn.classList.remove("active"));
tabContents.forEach((content) => content.classList.remove("active"));
// Add active class to clicked button
const clickedButton = event.target.closest(".tab-btn");
if (clickedButton) {
clickedButton.classList.add("active");
}
// Show corresponding tab content
const targetTab = document.getElementById(tabName + "-tab");
if (targetTab) {
targetTab.classList.add("active");
}
}
|