Skip to content

Commit 8a084b4

Browse files
muhammad-awais-web-devmuhammad-awais-web-dev
committed
add js for tracking active section
1 parent 4f8f516 commit 8a084b4

File tree

3 files changed

+85
-38
lines changed

3 files changed

+85
-38
lines changed

‎index.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
<body>
1818
<nav id="navbar">
1919
<div id="navbar-container">
20-
<a href="index.html" id="navbar-logo">Portfolio</a>
20+
<a href="index.html" id="navbar-logo">Awais.</a>
2121
<button id="navbar-toggle">
2222
<span class="bar"></span>
2323
<span class="bar"></span>
2424
<span class="bar"></span>
2525
</button>
2626
<ul id="navbar-menu">
27-
<li><a class="nav-link" href="#hero">Home</a></li>
28-
<li><a class="nav-link" href="#about">About</a></li>
29-
<li><a class="nav-link" href="#">Skills</a></li>
30-
<li><a class="nav-link" href="#">Certfications</a></li>
31-
<li><a class="nav-link" href="#">Contact</a></li>
27+
<li><a class="nav-link link" href="#hero">Home</a></li>
28+
<li><a class="nav-link link" href="#about">About</a></li>
29+
<li><a class="nav-link link" href="#skills">Skills</a></li>
30+
<li><a class="nav-link link" href="#certifications">Certfications</a></li>
31+
<li><a class="nav-link link" href="#contact">Contact</a></li>
3232
</ul>
3333
</div>
3434
</nav>
@@ -42,19 +42,19 @@ <h1>Hi, I am a Web Developer and UX/Ui Designer</h1>
4242
<p>Crafting modern, responsive, and user-focused websites that bring ideas to life.</p>
4343
<span class="tagline">"Web Development" | "UI/UX Design" | "Responsive Design"</span>
4444
<div class="buttons">
45-
<a href="#" ><span>Contact</span></a>
46-
<a href="curriculum vitae.pdf" download ><span>Download CV</span></a>
45+
<a class="link" href="#contact" ><span><i class="fa-solid fa-phone"></i> Contact</span></a>
46+
<a href="curriculum vitae.pdf" download ><span><i class="fa-solid fa-download"></i> Download CV</span></a>
4747
</div>
4848
<div class="social-buttons-container">
49-
<a href="#" class="social-button">
49+
<a href="https://www.linkedin.com/in/muhammad-awais-webdev" class="social-button">
5050
<i class="fa-brands fa-linkedin-in"></i>
5151
<span class="icon-text">LinkedIn</span>
5252
</a>
53-
<a href="#" class="social-button">
53+
<a href="https://www.facebook.com/profile.php?id=61573732746181" class="social-button">
5454
<i class="fa-brands fa-facebook-f"></i>
5555
<span class="icon-text">Facebook</span>
5656
</a>
57-
<a href="#" class="social-button">
57+
<a href="https://x.com/WebMorph_Studio" class="social-button">
5858
<i class="fa-brands fa-x-twitter"></i>
5959
<span class="icon-text">X (Twetter)</span>
6060
</a>
@@ -145,6 +145,9 @@ <h2>About Me</h2>
145145
</div> -->
146146
</div>
147147
</section>
148+
<section id="skills"><h2>Skills</h2></section>
149+
<section id="certifications"><h2>Certifications</h2></section>
150+
<section id="contact"><h2>Contact</h2></section>
148151
</main>
149152
<script src="javascript.js"></script>
150153
<script src="https://kit.fontawesome.com/4cfda748cf.js" crossorigin="anonymous"></script>

‎javascript.js‎

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,53 @@
1-
const navbarToggle = document.querySelector('#navbar-toggle');
2-
const navbarMenu = document.querySelector('#navbar-menu');
3-
navbarToggle.addEventListener('click', () => {
4-
navbarToggle.classList.toggle('active');
5-
navbarMenu.classList.toggle('active');
1+
document.addEventListener('DOMContentLoaded', () => {
2+
3+
const navbarToggle = document.querySelector('#navbar-toggle');
4+
const navbarMenu = document.querySelector('#navbar-menu');
5+
navbarToggle.addEventListener('click', () => {
6+
navbarToggle.classList.toggle('active');
7+
navbarMenu.classList.toggle('active');
8+
});
9+
10+
11+
const navLinks = document.querySelectorAll('#navbar-menu .nav-link');
12+
const link = document.querySelectorAll('.link')
13+
const sections = document.querySelectorAll('section[id]');
14+
15+
const ratios = {};
16+
17+
const observer = new IntersectionObserver((entries) => {
18+
entries.forEach(entry => {
19+
ratios[entry.target.id] = entry.intersectionRatio;
20+
});
21+
22+
const visibleIds = Object.keys(ratios).filter(id => ratios[id] > 0);
23+
if (visibleIds.length === 0) return;
24+
25+
const mostVisibleId = visibleIds.reduce((a, b) => ratios[a] > ratios[b] ? a : b);
26+
27+
navLinks.forEach(link => {
28+
link.classList.toggle('active', link.getAttribute('href') === `#${mostVisibleId}`);
29+
});
30+
},{
31+
root: null,
32+
rootMargin: '-25% 0px -25% 0px',
33+
threshold:[0, 0.25, 0.5, 0.75, 1]
34+
});
35+
36+
sections.forEach(s => {
37+
ratios[s.id] = 0;
38+
observer.observe(s);
39+
});
40+
41+
link.forEach(link =>{
42+
link.addEventListener('click', (e) => {
43+
e.preventDefault();
44+
const target = document.querySelector(link.getAttribute('href'));
45+
if (!target) return;
46+
47+
target.scrollIntoView({behavior: 'smooth', block: 'start'});
48+
history.pushState(null, '', link.getAttribute('href'));
49+
navLinks.forEach(l => l.classList.toggle('active', l === link));
50+
});
51+
});
52+
653
});

‎styles.css‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,18 @@ body{
1515
main{
1616
max-width: 1400px;
1717
}
18+
section{
19+
display: flex;
20+
flex-direction: row;
21+
align-items: center;
22+
justify-content: center;
23+
min-height: 90vh;
24+
}
25+
h2{
26+
font-size: 2rem;
27+
font-weight: 600;
28+
line-height: 1.2;
29+
}
1830
#navbar{
1931
display: flex;
2032
align-items: center;
@@ -49,7 +61,7 @@ main{
4961
gap: 1.5rem;
5062
list-style: none;
5163
}
52-
#navbar-menu li a{
64+
#navbar-menu li .nav-link{
5365
color: #fff;
5466
text-decoration: none;
5567
font-size: 1.3rem;
@@ -60,11 +72,16 @@ main{
6072
transition: all 0.7s ease;
6173
white-space: nowrap;
6274
}
63-
#navbar-menu li a:hover{
75+
#navbar-menu li .nav-link:hover{
6476
background: #fffa;
6577
color: #000;
6678
border: 2px solid #fff;
6779
}
80+
#navbar-menu li .nav-link.active{
81+
background: #fff;
82+
color: #000;
83+
border: 2px solid #000;
84+
}
6885
#navbar-toggle{
6986
display: none;
7087
background: transparent;
@@ -80,14 +97,6 @@ main{
8097
margin: 5px auto;
8198
transition: all 0.3s ease;
8299
}
83-
#hero{
84-
display: flex;
85-
flex-direction: row;
86-
align-items: center;
87-
justify-content: center;
88-
min-height: 100vh;
89-
text-align: center;
90-
}
91100
.hero-decor{
92101
display: flex;
93102
justify-content: center;
@@ -233,13 +242,6 @@ main{
233242
padding: 0 10px;
234243
}
235244

236-
#about{
237-
display: flex;
238-
flex-direction: row;
239-
align-items: center;
240-
justify-content: center;
241-
min-height: 90vh;
242-
}
243245
#about-info{
244246
display: flex;
245247
flex-direction: column;
@@ -248,11 +250,6 @@ main{
248250
text-align: left;
249251
gap: 20px;
250252
}
251-
#about-info h2{
252-
font-size: 2rem;
253-
font-weight: 600;
254-
line-height: 1.2;
255-
}
256253
#about-info p{
257254
font-size: 1.2rem;
258255
text-align: justify;

0 commit comments

Comments
 (0)