Create script.js

script.js

@@ -0,0 +1,123 @@
+// ===== 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");
+  }
+}