Skip to content

Commit 40009e0

Browse files
Code-JLCode-JL
committed
Made the nav bar very nice and new
1 parent fb46872 commit 40009e0

File tree

3 files changed

+186
-52
lines changed

3 files changed

+186
-52
lines changed

‎assets/load/header.html‎

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,48 @@
1-
<nav role="navigation" aria-label="Main navigation">
2-
<ul role="menubar">
3-
<li role="none">
4-
<a href="home.html" role="menuitem" aria-label="Home">
5-
<img src="../../images/home.png" alt="" aria-hidden="true"> Home
6-
</a>
7-
</li>
8-
<li role="none">
9-
<a href="about.html" role="menuitem" aria-label="About">
10-
<img src="../../images/about.png" alt="" aria-hidden="true"> About
11-
</a>
12-
</li>
13-
<li role="none">
14-
<a href="projects.html" role="menuitem" aria-label="Projects">
15-
<img src="../../images/projects.png" alt="" aria-hidden="true"> Projects
16-
</a>
17-
</li>
18-
<li role="none">
19-
<a href="skills.html" role="menuitem" aria-label="Skills">
20-
<img src="../../images/skills.png" alt="" aria-hidden="true"> Skills
21-
</a>
22-
</li>
23-
<li role="none">
24-
<a href="education.html" role="menuitem" aria-label="Education">
25-
<img src="../../images/education.png" alt="" aria-hidden="true"> Education
26-
</a>
27-
</li>
28-
<li role="none">
29-
<a href="home.html#contact" role="menuitem" aria-label="Contact">
30-
<img src="../../images/contact.png" alt="" aria-hidden="true"> Contact
31-
</a>
32-
</li>
33-
<li role="none">
34-
<a href="resume.html" role="menuitem" aria-label="Resume">
35-
<img src="../../images/resume.png" alt="" aria-hidden="true"> Resume
36-
</a>
37-
</li>
38-
</ul>
1+
<nav role="navigation" aria-label="Main navigation" class="main-nav">
2+
<div class="nav-container">
3+
<ul role="menubar">
4+
<li role="none">
5+
<a href="home.html" role="menuitem" aria-label="Home" class="nav-link">
6+
<img src="../../images/home.png" alt="" aria-hidden="true">
7+
<span>Home</span>
8+
</a>
9+
</li>
10+
<li role="none">
11+
<a href="about.html" role="menuitem" aria-label="About" class="nav-link">
12+
<img src="../../images/about.png" alt="" aria-hidden="true">
13+
<span>About</span>
14+
</a>
15+
</li>
16+
<li role="none">
17+
<a href="projects.html" role="menuitem" aria-label="Projects" class="nav-link">
18+
<img src="../../images/projects.png" alt="" aria-hidden="true">
19+
<span>Projects</span>
20+
</a>
21+
</li>
22+
<li role="none">
23+
<a href="skills.html" role="menuitem" aria-label="Skills" class="nav-link">
24+
<img src="../../images/skills.png" alt="" aria-hidden="true">
25+
<span>Skills</span>
26+
</a>
27+
</li>
28+
<li role="none">
29+
<a href="education.html" role="menuitem" aria-label="Education" class="nav-link">
30+
<img src="../../images/education.png" alt="" aria-hidden="true">
31+
<span>Education</span>
32+
</a>
33+
</li>
34+
<li role="none">
35+
<a href="home.html#contact" role="menuitem" aria-label="Contact" class="nav-link">
36+
<img src="../../images/contact.png" alt="" aria-hidden="true">
37+
<span>Contact</span>
38+
</a>
39+
</li>
40+
<li role="none">
41+
<a href="resume.html" role="menuitem" aria-label="Resume" class="nav-link">
42+
<img src="../../images/resume.png" alt="" aria-hidden="true">
43+
<span>Resume</span>
44+
</a>
45+
</li>
46+
</ul>
47+
</div>
3948
</nav>

‎assets/load/universal.css‎

Lines changed: 116 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -70,56 +70,158 @@ li, p {
7070
font-size: 18px;
7171
}
7272

73-
/* Header */
73+
/* Header & Navigation */
7474
header {
75-
background: var(--primary-color);
75+
background: transparent;
7676
color: var(--text-light);
77-
padding: 15px 20px;
7877
position: sticky;
7978
top: 0;
8079
z-index: 1000;
81-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
80+
}
81+
82+
.main-nav {
83+
background: rgba(30, 92, 143, 0.95);
8284
backdrop-filter: blur(10px);
83-
transition: all var(--transition-speed) ease;
85+
-webkit-backdrop-filter: blur(10px);
86+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
87+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
88+
position: relative;
89+
display: flex;
90+
justify-content: center;
91+
}
92+
93+
.nav-container {
94+
max-width: 1200px;
95+
margin: 0 auto;
96+
padding: 0 20px;
8497
}
8598

8699
nav ul {
87100
list-style: none;
88-
padding: 0;
101+
padding: 10px 0;
89102
margin: 0;
90103
display: flex;
91104
justify-content: center;
105+
gap: 10px;
92106
}
93107

94108
nav ul li {
95109
margin-right: 15px;
96110
}
97111

98-
nav ul li a {
112+
.nav-link {
99113
font-family: 'rampage-monoline', sans-serif;
100114
font-size: 30px;
101115
color: #a9d3f5;
102116
text-decoration: none;
103117
display: flex;
104118
align-items: center;
105-
padding: 8px 16px;
106-
border-radius: 8px;
107-
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
119+
position: relative;
120+
padding: 12px 20px;
121+
border-radius: 12px;
122+
background: rgba(255, 255, 255, 0.05);
123+
border: 1px solid rgba(255, 255, 255, 0.1);
124+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
108125
}
109126

110-
nav ul li a:hover {
111-
background: var(--nav-hover);
127+
.nav-link:hover {
128+
background: rgba(255, 255, 255, 0.1);
112129
transform: translateY(-2px);
113-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
130+
border-color: var(--accent-color);
131+
box-shadow: 0 4px 15px rgba(231, 223, 105, 0.2);
114132
}
115133

116-
header nav ul li a img {
134+
.nav-link img {
117135
width: 30px;
118136
height: 30px;
119137
margin-right: 4px;
120138
vertical-align: middle;
139+
transition: transform 0.3s ease;
140+
filter: brightness(1.2);
141+
}
142+
143+
.nav-link:hover img {
144+
transform: scale(1.1);
145+
}
146+
147+
.nav-link span {
148+
position: relative;
149+
z-index: 1;
150+
}
151+
152+
.nav-link::after {
153+
content: '';
154+
position: absolute;
155+
bottom: -1px;
156+
left: 50%;
157+
width: 0;
158+
height: 2px;
159+
background: var(--accent-color);
160+
transition: all 0.3s ease;
161+
transform: translateX(-50%);
162+
}
163+
164+
.nav-link:hover::after {
165+
width: 80%;
166+
}
167+
168+
.nav-link.active {
169+
background: rgba(231, 223, 105, 0.15);
170+
border-color: var(--accent-color);
171+
}
172+
173+
@media screen and (max-width: 768px) {
174+
.nav-container {
175+
padding: 0 10px;
176+
}
177+
178+
nav ul {
179+
flex-wrap: wrap;
180+
justify-content: space-around;
181+
gap: 5px;
182+
}
183+
184+
nav ul li {
185+
margin: 5px;
186+
}
187+
188+
.nav-link {
189+
padding: 8px 12px;
190+
font-size: 24px;
191+
}
192+
193+
.nav-link img {
194+
width: 20px;
195+
height: 20px;
196+
}
197+
}
198+
199+
.nav-container::before,
200+
.nav-container::after {
201+
content: '';
202+
position: absolute;
203+
top: 50%;
204+
transform: translateY(-50%);
205+
width: 15%; /* Changed to percentage */
206+
height: 40px;
207+
background:
208+
linear-gradient(30deg, #1a1a1a 12%, transparent 12.5%, transparent 87%, #1a1a1a 87.5%, #1a1a1a),
209+
linear-gradient(150deg, #1a1a1a 12%, transparent 12.5%, transparent 87%, #1a1a1a 87.5%, #1a1a1a),
210+
linear-gradient(30deg, #1a1a1a 12%, transparent 12.5%, transparent 87%, #1a1a1a 87.5%, #1a1a1a),
211+
linear-gradient(150deg, #1a1a1a 12%, transparent 12.5%, transparent 87%, #1a1a1a 87.5%, #1a1a1a);
212+
background-size: 20px 40px;
213+
opacity: 0.5;
121214
}
122215

216+
.nav-container::before {
217+
left: 2%; /* Changed to percentage */
218+
}
219+
220+
.nav-container::after {
221+
right: 2%; /* Changed to percentage */
222+
}
223+
224+
123225
/* Section Styling */
124226
section {
125227
padding: 40px 20px;

‎assets/load/universal.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,29 @@ document.addEventListener("DOMContentLoaded", () => {
77
});
88
});
99

10+
document.addEventListener('DOMContentLoaded', () => {
11+
// Set active nav link based on current page
12+
const currentPage = window.location.pathname.split('/').pop();
13+
const navLinks = document.querySelectorAll('.nav-link');
14+
15+
navLinks.forEach(link => {
16+
if (link.getAttribute('href') === currentPage) {
17+
link.classList.add('active');
18+
}
19+
20+
// Add hover effect
21+
link.addEventListener('mouseenter', (e) => {
22+
const img = e.currentTarget.querySelector('img');
23+
img.style.transform = 'scale(1.1) rotate(5deg)';
24+
});
25+
26+
link.addEventListener('mouseleave', (e) => {
27+
const img = e.currentTarget.querySelector('img');
28+
img.style.transform = 'scale(1) rotate(0deg)';
29+
});
30+
});
31+
});
32+
1033
// Include the 'matter-wrap' plugin
1134
Matter.use('matter-wrap');
1235

0 commit comments

Comments
 (0)