Skip to content

Commit ab336c8

Browse files
Arpit-Mahajan09Arpit-Mahajan09
committed
Improved nav bar
1 parent c49f9ec commit ab336c8

3 files changed

Lines changed: 120 additions & 23 deletions

File tree

‎index.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,20 @@
1010
</head>
1111

1212
<body class="Body">
13-
<heder>
1413
<div class = "intro">
15-
<nav class="nav">
14+
<nav class="nav" id="nav">
1615
<ul>
1716
<!-- <li><a href="index.html">Index</a></li> -->
18-
<li><a href="#home">HOME</a></li>
17+
<li><a href="#hero">HOME</a></li>
1918
<li><a href="#about">ABOUT</a></li>
2019
<li><a href="#skills">SKILLS</a></li>
21-
<li><a href="#projects">PROJECTS</a></li>
20+
<li><a href="#project">PROJECTS</a></li>
2221
<li><a href="#contact">CONTACT</a></li>
2322
</ul>
2423
</nav>
25-
</heder>
2624

27-
28-
<div class="heroContent">
29-
<h1 class="hero" >
25+
<div class="hero-content">
26+
<h1 class="hero" id="hero" >
3027
Arpit Mahajan
3128
</h1>
3229
<div class="hero-icons">
@@ -91,12 +88,17 @@ <h3>Given below are the highlights of my technical skills</h3> <br>
9188
<section class="project" id="project">
9289
<h3> Project</h3>
9390
<h1> Check out my creations.</h1>
91+
<div id="project-item">
92+
<a href="https://arpit-mahajan09.github.io/"><img src="image_source.jpg"></a>
93+
</div>
9494
</section>
9595

9696
<section class="contact" id="contact">
97-
<h3>Contact</h3>
97+
<br><h3>Contact</h3>
9898
<h1>I'd Love To Connect With You</h1>
99-
<br><br>
99+
<br>
100+
<h3>Would love to connect with you</h3>
101+
<br><br><br><br>
100102
<div class="contact-container">
101103
<div class="contact-item">
102104
<i class="fa-brands fa-linkedin"></i>
@@ -111,6 +113,7 @@ <h1>I'd Love To Connect With You</h1>
111113
<span>Compete on</span><a href="https://codeforces.com/profile/arpit017mahajan">Codeforces</a>
112114
</div>
113115
</div>
116+
<br>
114117
</section>
115118

116119
<footer>
@@ -124,6 +127,6 @@ <h1>I'd Love To Connect With You</h1>
124127

125128
</body>
126129

127-
130+
<script src="index.js"></script>
128131

129132
</html>

‎index.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const navLinks = document.querySelectorAll('nav ul li a');
3+
const navBar = document.querySelector('nav');
4+
const sections = Array.from(document.querySelectorAll('section')); // about, skills, project, contact
5+
let sectionOffsets = [0, ...sections.map(section => section.offsetTop)]; // [0 (home), aboutTop, skillsTop, projectTop, contactTop]
6+
7+
const getCurrentIndex = (scrollTop) => {
8+
for (let i = 1; i < sectionOffsets.length; i++) {
9+
if (scrollTop < sectionOffsets[i]) {
10+
return i - 1;
11+
}
12+
}
13+
return sectionOffsets.length - 1; // Last (contact) if at or past its start
14+
};
15+
16+
let ticking = false;
17+
const updateNav = () => {
18+
const scrollTop = window.pageYOffset;
19+
const currentIndex = getCurrentIndex(scrollTop);
20+
21+
// Remove active from all, add to current
22+
navLinks.forEach((link, index) => {
23+
link.classList.toggle('active', index === currentIndex);
24+
});
25+
26+
// Toggle scrolled on nav (not home)
27+
if (navBar) {
28+
navBar.classList.toggle('scrolled', currentIndex > 0);
29+
}
30+
31+
// TEMP DEBUG: Log to console—remove after testing
32+
console.log('ScrollTop:', scrollTop, 'CurrentIndex:', currentIndex, '(0=HOME,4=CONTACT)', 'Offsets:', sectionOffsets);
33+
34+
ticking = false;
35+
};
36+
37+
window.addEventListener('scroll', () => {
38+
if (!ticking) {
39+
requestAnimationFrame(updateNav);
40+
ticking = true;
41+
}
42+
});
43+
44+
// Initial state
45+
updateNav();
46+
47+
// Recalc offsets on resize (for responsive tweaks)
48+
window.addEventListener('resize', () => {
49+
sectionOffsets = [0, ...sections.map(section => section.offsetTop)];
50+
updateNav();
51+
});
52+
});

‎style.css‎

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,8 @@
6868

6969

7070
.nav ul{
71-
72-
/* background-image: url(background.jpg); */
73-
padding: 12px;
74-
width: 100%;
71+
/* background-color: rgba(255, 255, 255, 0.1); */
72+
/* background-image: url(background.jpg); */
7573
display: flex;
7674
flex-direction: row;
7775
gap: 30px;
@@ -89,15 +87,50 @@
8987
a:hover {
9088
color: rgb(0, 0, 0);
9189
}
92-
a:active {
93-
color: rgb(0, 0, 0);
94-
}
90+
/* a:active {
91+
color: orange;
92+
} */
9593
a:focus {
9694
color: rgb(0, 0, 0);
9795
background-color: rgb(150, 176, 204);
9896
}
9997
}
10098

99+
nav ul li a {
100+
color: white;
101+
text-decoration: none;
102+
padding: 7px 13px;
103+
transition: background-color 0.5s;
104+
}
105+
106+
nav ul li a.active {
107+
color: rgb(255, 0, 128);
108+
border: 1px #555;
109+
border-radius: 3px;
110+
}
111+
112+
.nav {
113+
/* background-color: rgba(255, 255, 255, 0.1); */
114+
/* background-image: url(background.jpg); */
115+
padding: 12px;
116+
display: flex;
117+
flex-direction: row;
118+
gap: 30px;
119+
justify-content: center;
120+
font-weight:700;
121+
font-size: 18px;
122+
background-color: transparent;
123+
transition: background-color 0.3s ease;
124+
position: fixed;
125+
width: 100%;
126+
z-index: 1000;
127+
128+
}
129+
130+
nav.scrolled {
131+
background-color: rgba(0, 0, 0, 0.9);
132+
}
133+
101134

102135

103136
body{
@@ -111,13 +144,17 @@ body{
111144
.about{
112145
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;/*'Geneva', Tahoma,Verdana, sans-serif*/
113146
line-height: 1.6;
114-
padding:40px 450px ;
147+
padding:40px 60px ;
115148
font-size: 18px;
116149
width:100%;
117150
background-color: rgb(0, 0, 0);
118151
color: rgb(199, 199, 199);
119152
text-align:left;
120153
}
154+
.about p{
155+
max-width: 800px;
156+
margin: 0 auto;
157+
}
121158

122159
.skills{
123160
font-family: Impact,Arial,sans-serif;/*'Geneva', Tahoma,Verdana, sans-serif*/
@@ -131,12 +168,13 @@ body{
131168

132169
.skills-container{
133170
padding: 10px 150px;
171+
max-width: 1800px;
134172
display: flex;
135173
justify-content: center;
136174
flex-direction: row;
137175
align-items: flex-start;
138176
flex-wrap: wrap;
139-
gap: 90px
177+
gap: 70px
140178
}
141179

142180
.skills button{
@@ -183,6 +221,10 @@ body{
183221
text-align: center;
184222
}
185223

224+
.project-item{
225+
display: flex
226+
}
227+
186228

187229

188230

@@ -229,12 +271,12 @@ body{
229271

230272

231273
footer ul{
232-
233-
padding: 12px;
274+
padding: 20px;
275+
font-size: 15px;
234276
width: 100%;
235277
background-color: rgb(0, 0, 0);
236278
color: rgb(55, 55, 55);
237-
279+
list-style-type: none;
238280
display: flex;
239281
flex-direction: row;
240282
gap: 20px;

0 commit comments

Comments
 (0)