Skip to content

Commit 2980441

Browse files
reazndevreazndev
committed
added navbar
1 parent df54007 commit 2980441

File tree

4 files changed

+160
-10
lines changed

4 files changed

+160
-10
lines changed

‎index.html

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<link rel="stylesheet" href="styles.css" />
88
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
10+
<link rel="stylesheet" href="styles/nav.css">
1011
</head>
1112
<body>
1213
<div class="custom-cursor"></div>
@@ -19,12 +20,6 @@ <h1>Projects</h1>
1920
<h1><img src="https://em-content.zobj.net/source/apple/354/waving-hand_1f44b.png" class="wave" alt="👋"> Hi I'm <span class="gradient-text">Reazn</span></h1>
2021
<p class="about-text">I'm a 17 year old computer science student and avid music enjoyer. <br>I love creating websites for personal use and experimenting with new technologies. <br> <br>I especially enjoy visualizing data and tracking things, like music stats from <a href="https://www.last.fm/user/syntiiix" target="_blank">Last.fm</a>.
2122

22-
23-
24-
25-
26-
27-
2823
<br><br> In my spare time I dabble in photography, graphic design and editing.</p>
2924
<div class="tech-stack">
3025
<a href="https://www.python.org" target="_blank"><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" title="Python"></a>
@@ -351,6 +346,13 @@ <h4>Top Album</h4>
351346
</div>
352347
</section>
353348

349+
<nav class="side-nav">
350+
<a href="#content" class="nav-item">Home</a>
351+
<a href="#projects-section" class="nav-item">Projects</a>
352+
<a href="#about-section" class="nav-item">About</a>
353+
<a href="#music-section" class="nav-item">Music</a>
354+
</nav>
355+
354356
<script src="script.js"></script>
355357
<script src="chart.js"></script>
356358
<script src="preview-cards.js"></script>

‎script.js

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const cursor = document.querySelector('.custom-cursor');
2-
const clickableElements = document.querySelectorAll('a, .box');
2+
// Exclude nav-items from the clickable elements selector
3+
const clickableElements = document.querySelectorAll('a:not(.nav-item), .box');
34

45
// Update cursor position
56
document.addEventListener('mousemove', (e) => {
@@ -12,8 +13,8 @@ clickableElements.forEach(element => {
1213
element.addEventListener('mouseenter', () => {
1314
cursor.classList.add('active');
1415

15-
// Check if it's an external link
16-
if (element.tagName === 'A' && !element.getAttribute('onclick')) {
16+
// Check if it's an external link AND NOT a nav item
17+
if (element.tagName === 'A' && !element.getAttribute('onclick') && !element.classList.contains('nav-item')) {
1718
cursor.classList.add('external');
1819
cursor.classList.remove('internal');
1920
cursor.setAttribute('data-href', element.getAttribute('href'));
@@ -498,4 +499,80 @@ document.addEventListener('DOMContentLoaded', function() {
498499
cursor.innerHTML = '';
499500
});
500501
}
502+
});
503+
504+
document.addEventListener('DOMContentLoaded', function() {
505+
// Navigation highlight functionality
506+
const sections = document.querySelectorAll('section[id]');
507+
const navItems = document.querySelectorAll('.nav-item');
508+
509+
// Add click handlers for smooth scrolling
510+
navItems.forEach(item => {
511+
item.addEventListener('click', function(e) {
512+
e.preventDefault();
513+
const targetId = this.getAttribute('href');
514+
let targetPosition;
515+
516+
if (targetId === '#content') {
517+
targetPosition = 0; // Scroll to top for home
518+
} else {
519+
const targetElement = document.querySelector(targetId);
520+
targetPosition = targetElement.offsetTop;
521+
}
522+
523+
window.scrollTo({
524+
top: targetPosition,
525+
behavior: 'smooth'
526+
});
527+
});
528+
});
529+
530+
function highlightNavigation() {
531+
const scrollY = window.scrollY;
532+
const windowHeight = window.innerHeight;
533+
534+
// Remove active class from all items first
535+
navItems.forEach(item => item.classList.remove('active'));
536+
537+
// Check if we're at the top (home section)
538+
if (scrollY < windowHeight * 0.3) {
539+
navItems.forEach(item => {
540+
if (item.getAttribute('href') === '#content') {
541+
item.classList.add('active');
542+
}
543+
});
544+
return;
545+
}
546+
547+
// Find the closest section
548+
let closestSection = null;
549+
let closestDistance = Infinity;
550+
551+
sections.forEach(section => {
552+
const sectionTop = section.offsetTop - windowHeight * 0.4;
553+
const sectionMiddle = sectionTop + (section.offsetHeight / 2);
554+
const distance = Math.abs(scrollY - sectionMiddle);
555+
556+
if (distance < closestDistance) {
557+
closestDistance = distance;
558+
closestSection = section;
559+
}
560+
});
561+
562+
// Highlight the closest section
563+
if (closestSection) {
564+
const sectionId = closestSection.getAttribute('id');
565+
navItems.forEach(item => {
566+
if (item.getAttribute('href') === `#${sectionId}`) {
567+
item.classList.add('active');
568+
}
569+
});
570+
}
571+
}
572+
573+
// Initial highlight
574+
highlightNavigation();
575+
576+
// Update highlight on scroll
577+
window.addEventListener('scroll', highlightNavigation);
501578
});

‎styles.css

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,13 @@ body {
166166
font-family: Helvetica, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
167167
background-color: var(--background-color);
168168
scroll-behavior: smooth;
169+
scrollbar-width: none; /* Firefox */
170+
-ms-overflow-style: none; /* IE and Edge */
171+
}
172+
173+
/* Chrome, Safari and Opera */
174+
body::-webkit-scrollbar {
175+
display: none;
169176
}
170177

171178
.box {
@@ -1497,7 +1504,7 @@ body {
14971504
#ascii-clock {
14981505
position: fixed;
14991506
top: 7vh;
1500-
left: 5vw;
1507+
left: 6vw;
15011508
font-family: monospace;
15021509
font-size: min(0.6vw, 3.5px);
15031510
color: #333;
@@ -1549,4 +1556,25 @@ body {
15491556
/* Ensure the last section doesn't have excessive bottom margin */
15501557
.content-section:last-of-type {
15511558
margin-bottom: 8rem; /* Provide good spacing at the bottom of the page */
1559+
}
1560+
1561+
/* Remove scrollbar but keep functionality */
1562+
html, body {
1563+
scrollbar-width: none; /* Firefox */
1564+
-ms-overflow-style: none; /* IE and Edge */
1565+
}
1566+
1567+
/* Chrome, Safari and Opera */
1568+
html::-webkit-scrollbar,
1569+
body::-webkit-scrollbar {
1570+
display: none;
1571+
width: 0;
1572+
background: transparent;
1573+
}
1574+
1575+
/* Ensure the scrollbar is hidden in all webkit browsers */
1576+
::-webkit-scrollbar {
1577+
display: none;
1578+
width: 0;
1579+
background: transparent;
15521580
}

‎styles/nav.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.side-nav {
2+
position: fixed;
3+
right: 80px;
4+
top: 50%;
5+
transform: translateY(-50%);
6+
z-index: 100;
7+
}
8+
9+
.nav-item {
10+
display: flex;
11+
align-items: center;
12+
margin: 15px 0;
13+
text-decoration: none;
14+
color: #666;
15+
text-transform: uppercase;
16+
font-size: 14px;
17+
letter-spacing: 1px;
18+
transition: color 0.3s ease;
19+
width: 140px;
20+
}
21+
22+
/* Add the line before each nav item */
23+
.nav-item::before {
24+
content: '';
25+
width: 20px;
26+
height: 1px;
27+
background-color: #666;
28+
margin-right: 10px;
29+
transition: background-color 0.3s ease, width 0.3s ease;
30+
flex-shrink: 0;
31+
}
32+
33+
/* Style for active state only */
34+
.nav-item.active {
35+
color: #000;
36+
}
37+
38+
.nav-item.active::before {
39+
background-color: #000;
40+
width: 40px;
41+
}
42+
43+
/* Remove hover effects */

0 commit comments

Comments
 (0)