@@ -6,104 +6,84 @@ function scrollToMission() {
66
77// Add some interactive animations
88document . addEventListener ( 'DOMContentLoaded' , function ( ) {
9- // Animate elements on scroll
10- // const observerOptions = {
11- // threshold: 0.1,
12- // rootMargin: '0px 0px -50px 0px'
13- // };
149
15- // const observer = new IntersectionObserver((entries) => {
16- // entries.forEach(entry => {
17- // if (entry.isIntersecting) {
18- // entry.target.classList.add('fade-in');
19- // }
20- // });
21- // }, observerOptions);
2210
23- // Observe mission section paragraphs
24- // const missionParagraphs = document.querySelectorAll('#mission p');
25- // missionParagraphs.forEach((p, index) => {
26- // p.style.animationDelay = `${index * 0.2}s`;
27- // observer.observe(p);
28- // });
11+ // Intercept nav clicks
12+ // document.querySelectorAll('a.nav-item').forEach(link => {
13+ // link.addEventListener('click', async (e) => {
14+ // e.preventDefault();
2915
30- // Add hover effect to navigation items
31- // const navItems = document.querySelectorAll('.nav-item');
32- /*
33- navItems.forEach(item => {
34- item.addEventListener('mouseenter', () => {
35- item.style.transform = 'translateY(-2px)';
36- });
37- item.addEventListener('mouseleave', () => {
38- item.style.transform = 'translateY(0)';
39- });
40- });
41- */
16+ // const target = link.getAttribute('href');
4217
43- // Add click ripple effect to buttons
44- // const buttons = document.querySelectorAll('button, .github-btn');
45- // buttons.forEach(button => {
46- // button.addEventListener('click', function(e) {
47- // const ripple = document.createElement('span');
48- // const rect = this.getBoundingClientRect();
49- // const size = Math.max(rect.width, rect.height);
50- // const x = e.clientX - rect.left - size / 2;
51- // const y = e.clientY - rect.top - size / 2;
52-
53- // ripple.style.cssText = `
54- // position: absolute;
55- // width: ${size}px;
56- // height: ${size}px;
57- // left: ${x}px;
58- // top: ${y}px;
59- // background: rgba(16, 185, 129, 0.3);
60- // border-radius: 50%;
61- // transform: scale(0);
62- // animation: ripple 0.6s ease-out;
63- // pointer-events: none;
64- // `;
65-
66- // this.style.position = 'relative';
67- // this.style.overflow = 'hidden';
68- // this.appendChild(ripple);
69-
70- // setTimeout(() => {
71- // ripple.remove();
72- // }, 600);
18+ // if (target === '#Home') {
19+ // // Reload homepage hero (you could refactor into home.html too)
20+ // window.location.href = "index.html";
21+ // }
22+ // else if (target === '#Mission') {
23+ // const res = await fetch('pages/mission.html');
24+ // const html = await res.text();
25+ // document.querySelector('#content').innerHTML = html;
26+ // window.history.pushState({ page: 'mission' }, "Mission", "#mission");
27+ // }
28+ // else if (target === '#Projects') {
29+ // const res = await fetch('pages/projects.html');
30+ // const html = await res.text();
31+ // document.querySelector('#content').innerHTML = html;
32+ // window.history.pushState({ page: 'projects' }, "Projects", "#project");
33+ // }
34+ // else if (target === '#Blogs') {
35+ // const res = await fetch('pages/blogs.html');
36+ // const html = await res.text();
37+ // document.querySelector('#content').innerHTML = html;
38+ // window.history.pushState({ page: 'blogs' }, "Blogs", "#blog");
39+ // }
7340 // });
7441 // });
7542
7643 // Intercept nav clicks
77- document . querySelectorAll ( 'a.nav-item' ) . forEach ( link => {
44+ const navLinks = document . querySelectorAll ( 'a.nav-item' ) ;
45+
46+ function setActiveNav ( target ) {
47+ navLinks . forEach ( link => {
48+ if ( link . getAttribute ( 'href' ) === target ) {
49+ link . classList . add ( 'active' ) ;
50+ } else {
51+ link . classList . remove ( 'active' ) ;
52+ }
53+ } ) ;
54+ }
55+
56+ navLinks . forEach ( link => {
7857 link . addEventListener ( 'click' , async ( e ) => {
7958 e . preventDefault ( ) ;
80-
8159 const target = link . getAttribute ( 'href' ) ;
8260
8361 if ( target === '#Home' ) {
84- // Reload homepage hero (you could refactor into home.html too)
8562 window . location . href = "index.html" ;
8663 }
8764 else if ( target === '#Mission' ) {
8865 const res = await fetch ( 'pages/mission.html' ) ;
8966 const html = await res . text ( ) ;
9067 document . querySelector ( '#content' ) . innerHTML = html ;
91- window . history . pushState ( { page : 'mission' } , "Mission" , "#mission " ) ;
68+ window . history . pushState ( { page : 'mission' } , "Mission" , "#Mission " ) ;
9269 }
9370 else if ( target === '#Projects' ) {
9471 const res = await fetch ( 'pages/projects.html' ) ;
9572 const html = await res . text ( ) ;
9673 document . querySelector ( '#content' ) . innerHTML = html ;
97- window . history . pushState ( { page : 'projects' } , "Projects" , "#project " ) ;
74+ window . history . pushState ( { page : 'projects' } , "Projects" , "#Projects " ) ;
9875 }
9976 else if ( target === '#Blogs' ) {
10077 const res = await fetch ( 'pages/blogs.html' ) ;
10178 const html = await res . text ( ) ;
10279 document . querySelector ( '#content' ) . innerHTML = html ;
103- window . history . pushState ( { page : 'blogs' } , "Blogs" , "#blog" ) ;
104- }
80+ window . history . pushState ( { page : 'blogs' } , "Blogs" , "#Blogs" ) ;
81+ }
82+
83+ setActiveNav ( target ) ; // highlight correct nav link
10584 } ) ;
10685 } ) ;
86+
10787} ) ;
10888
10989// Add ripple animation
0 commit comments