first-phase: finished

js/scripts.min.js

@@ -5397,3 +5397,52 @@ $(window).load(function() {
     var b = document.getElementsByTagName("script")[0];
     b.parentNode.insertBefore(a, b)
 });
+
+
+document.addEventListener('DOMContentLoaded', function () {
+    const container = document.getElementById('careerContainer');
+    const progressBar = document.getElementById('careerProgress');
+    const stages = Array.from(document.querySelectorAll('.career-stage'));
+    const character = document.getElementById('character');
+    const timeline = document.getElementById('timeline');
+    const journeyLabel = document.getElementById('journeyLabel');
+    const journeyPercent = document.getElementById('journeyPercent');
+
+    if (!container || !progressBar || !stages.length || !character || !timeline) return;
+
+    function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+    }
+
+    function updateProgress() {
+        const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 0);
+        const scrollPos = clamp(container.scrollTop, 0, maxScroll);
+        const percent = maxScroll > 0 ? (scrollPos / maxScroll) * 100 : 0;
+        progressBar.value = percent;
+        journeyPercent.textContent = Math.round(percent) + '%';
+
+        const trackHeight = Math.max(container.clientHeight - character.offsetHeight - 32, 0);
+        const moveY = (percent / 100) * trackHeight;
+        character.style.transform = 'translateY(' + moveY + 'px)';
+
+    }
+
+    container.addEventListener('scroll', updateProgress, { passive: true });
+    window.addEventListener('resize', updateProgress);
+
+    updateProgress();
+});
+
+
+function showSection(section) {
+    const about = document.getElementById('About-Me');
+    const projects = document.getElementById('Projects');
+
+    if (section === 'About-Me') {
+        about.style.display = 'block';
+        projects.style.display = 'none';
+    } else if (section === 'Projects') {
+        about.style.display = 'none';
+        projects.style.display = 'block';
+    }
+}