added navbar

FlorianRuby · FlorianRuby · commit 29804416a669 · 2025-03-09T14:08:02.000+01:00
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="styles.css" />
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+    <link rel="stylesheet" href="styles/nav.css">
   </head>
   <body>
     <div class="custom-cursor"></div>
@@ -19,12 +20,6 @@ <h1>Projects</h1>
         <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>
         <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>.
 
-
-
-
-
-
-
           <br><br> In my spare time I dabble in photography, graphic design and editing.</p>
         <div class="tech-stack">
           <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>
       </div>
     </section>
 
+    <nav class="side-nav">
+      <a href="#content" class="nav-item">Home</a>
+      <a href="#projects-section" class="nav-item">Projects</a>
+      <a href="#about-section" class="nav-item">About</a>
+      <a href="#music-section" class="nav-item">Music</a>
+    </nav>
+
     <script src="script.js"></script>
     <script src="chart.js"></script>
     <script src="preview-cards.js"></script>
diff --git a/script.js b/script.js
@@ -1,5 +1,6 @@
 const cursor = document.querySelector('.custom-cursor');
-const clickableElements = document.querySelectorAll('a, .box');
+// Exclude nav-items from the clickable elements selector
+const clickableElements = document.querySelectorAll('a:not(.nav-item), .box');
 
 // Update cursor position
 document.addEventListener('mousemove', (e) => {
@@ -12,8 +13,8 @@ clickableElements.forEach(element => {
     element.addEventListener('mouseenter', () => {
         cursor.classList.add('active');
         
-        // Check if it's an external link
-        if (element.tagName === 'A' && !element.getAttribute('onclick')) {
+        // Check if it's an external link AND NOT a nav item
+        if (element.tagName === 'A' && !element.getAttribute('onclick') && !element.classList.contains('nav-item')) {
             cursor.classList.add('external');
             cursor.classList.remove('internal');
             cursor.setAttribute('data-href', element.getAttribute('href'));
@@ -498,4 +499,80 @@ document.addEventListener('DOMContentLoaded', function() {
       cursor.innerHTML = '';
     });
   }
+});
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Navigation highlight functionality
+  const sections = document.querySelectorAll('section[id]');
+  const navItems = document.querySelectorAll('.nav-item');
+
+  // Add click handlers for smooth scrolling
+  navItems.forEach(item => {
+    item.addEventListener('click', function(e) {
+      e.preventDefault();
+      const targetId = this.getAttribute('href');
+      let targetPosition;
+      
+      if (targetId === '#content') {
+        targetPosition = 0; // Scroll to top for home
+      } else {
+        const targetElement = document.querySelector(targetId);
+        targetPosition = targetElement.offsetTop;
+      }
+
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth'
+      });
+    });
+  });
+
+  function highlightNavigation() {
+    const scrollY = window.scrollY;
+    const windowHeight = window.innerHeight;
+    
+    // Remove active class from all items first
+    navItems.forEach(item => item.classList.remove('active'));
+    
+    // Check if we're at the top (home section)
+    if (scrollY < windowHeight * 0.3) {
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === '#content') {
+                item.classList.add('active');
+            }
+        });
+        return;
+    }
+    
+    // Find the closest section
+    let closestSection = null;
+    let closestDistance = Infinity;
+    
+    sections.forEach(section => {
+        const sectionTop = section.offsetTop - windowHeight * 0.4;
+        const sectionMiddle = sectionTop + (section.offsetHeight / 2);
+        const distance = Math.abs(scrollY - sectionMiddle);
+        
+        if (distance < closestDistance) {
+            closestDistance = distance;
+            closestSection = section;
+        }
+    });
+    
+    // Highlight the closest section
+    if (closestSection) {
+        const sectionId = closestSection.getAttribute('id');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === `#${sectionId}`) {
+                item.classList.add('active');
+            }
+        });
+    }
+  }
+
+  // Initial highlight
+  highlightNavigation();
+
+  // Update highlight on scroll
+  window.addEventListener('scroll', highlightNavigation);
 }); 
diff --git a/styles.css b/styles.css
@@ -166,6 +166,13 @@ body {
     font-family: Helvetica, 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
     background-color: var(--background-color);
     scroll-behavior: smooth;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+}
+
+/* Chrome, Safari and Opera */
+body::-webkit-scrollbar {
+    display: none;
 }
 
 .box {
@@ -1497,7 +1504,7 @@ body {
 #ascii-clock {
   position: fixed;
   top: 7vh;
-  left: 5vw;
+  left: 6vw;
   font-family: monospace;
   font-size: min(0.6vw, 3.5px);
   color: #333;
@@ -1549,4 +1556,25 @@ body {
 /* Ensure the last section doesn't have excessive bottom margin */
 .content-section:last-of-type {
   margin-bottom: 8rem; /* Provide good spacing at the bottom of the page */
+}
+
+/* Remove scrollbar but keep functionality */
+html, body {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+/* Chrome, Safari and Opera */
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}
+
+/* Ensure the scrollbar is hidden in all webkit browsers */
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
 }
diff --git a/styles/nav.css b/styles/nav.css
@@ -0,0 +1,43 @@
+.side-nav {
+  position: fixed;
+  right: 80px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  margin: 15px 0;
+  text-decoration: none;
+  color: #666;
+  text-transform: uppercase;
+  font-size: 14px;
+  letter-spacing: 1px;
+  transition: color 0.3s ease;
+  width: 140px;
+}
+
+/* Add the line before each nav item */
+.nav-item::before {
+  content: '';
+  width: 20px;
+  height: 1px;
+  background-color: #666;
+  margin-right: 10px;
+  transition: background-color 0.3s ease, width 0.3s ease;
+  flex-shrink: 0;
+}
+
+/* Style for active state only */
+.nav-item.active {
+  color: #000;
+}
+
+.nav-item.active::before {
+  background-color: #000;
+  width: 40px;
+}
+
+/* Remove hover effects */ 
