slight changes

app/src/main.js

@@ -3,22 +3,26 @@ import './style.css'
 // Initialize the application
 document.querySelector('#app').innerHTML = `
   <div class="app">
-    <!-- Floating Navigation -->
+     <!-- Enhanced Floating Navigation - Now Top Right -->
     <nav class="floating-nav" id="floatingNav">
+      <div class="nav-container">
+        <div class="nav-wrapper">
           <div class="nav-items">
             <a href="#intro" class="nav-item active" data-section="intro">
               <span class="nav-icon">🏠</span>
-          <span class="nav-text">Home</span>
+              <div class="nav-tooltip">Home</div>
             </a>
             <a href="#dashboard" class="nav-item" data-section="dashboard">
               <span class="nav-icon">🚀</span>
-          <span class="nav-text">Dashboard</span>
+              <div class="nav-tooltip">Dashboard</div>
             </a>
             <a href="#footer" class="nav-item" data-section="footer">
               <span class="nav-icon">📞</span>
-          <span class="nav-text">Contact</span>
+              <div class="nav-tooltip">Contact</div>
             </a>
           </div>
+        </div>
+      </div>
     </nav>
 
     <!-- Intro Section -->
@@ -241,7 +245,7 @@ document.querySelector('#app').innerHTML = `
           <div class="cards-grid">
             <div class="service-card" data-category="devops">
               <div class="card-header">
-                <div class="card-icon">🐙</div>
+                <div class="card-icon">🌿</div>
                 <h4>Gitea</h4>
               </div>
               <p class="card-description">Git repository management</p>
@@ -257,7 +261,7 @@ document.querySelector('#app').innerHTML = `
 
             <div class="service-card" data-category="devops">
               <div class="card-header">
-                <div class="card-icon">🏗️</div>
+                <div class="card-icon">👨‍🔧</div>
                 <h4>Jenkins</h4>
               </div>
               <p class="card-description">CI/CD automation server</p>
@@ -337,7 +341,7 @@ document.querySelector('#app').innerHTML = `
 
             <div class="service-card" data-category="devops">
               <div class="card-header">
-                <div class="card-icon">📊</div>
+                <div class="card-icon">🌊</div>
                 <h4>InfluxDB</h4>
               </div>
               <p class="card-description">Time series database</p>
@@ -442,8 +446,8 @@ document.querySelector('#app').innerHTML = `
           <div class="cards-grid">
             <div class="service-card" data-category="external">
               <div class="card-header">
-                <div class="card-icon">🏛️</div>
+                <div class="card-icon">🏢</div>
-                <h4>Taj </h4>
+                <h4>Taj Residence</h4>
               </div>
               <p class="card-description">External news portal</p>
               <div class="card-buttons">
@@ -458,7 +462,7 @@ document.querySelector('#app').innerHTML = `
 
             <div class="service-card" data-category="external">
               <div class="card-header">
-                <div class="card-icon">🌐</div>
+                <div class="card-icon">🗺️</div>
                 <h4>Global News</h4>
               </div>
               <p class="card-description">Global news platform</p>
@@ -528,19 +532,25 @@ const loadingInterval = setInterval(() => {
   if (progress >= 100) {
     progress = 100;
     clearInterval(loadingInterval);
-    
     setTimeout(() => {
       loadingContainer.style.opacity = '0';
       loadingContainer.style.transform = 'translateY(-20px)';
-      
       setTimeout(() => {
         loadingContainer.style.display = 'none';
         scrollIndicator.style.opacity = '1';
         scrollIndicator.style.transform = 'translateY(0)';
+        
+        const dashboardSection = document.getElementById('dashboard');
+        if (dashboardSection) {
+          dashboardSection.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+
       }, 500);
     }, 800);
   }
-  
   loadingProgress.style.width = progress + '%';
 }, 200);
 
@@ -566,7 +576,6 @@ function updateActiveNav() {
   let current = '';
   sections.forEach(section => {
     const sectionTop = section.offsetTop;
-    const sectionHeight = section.clientHeight;
     if (window.scrollY >= sectionTop - 200) {
       current = section.getAttribute('id');
     }
@@ -632,4 +641,55 @@ document.querySelectorAll('.endpoint-btn').forEach(btn => {
   btn.addEventListener('mouseleave', () => {
     btn.style.transform = 'translateY(0) scale(1)';
   });
+
+      // Smooth scrolling for navigation
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+      });
+    });
+
+    // Active navigation state
+    const sections = document.querySelectorAll('section[id]');
+    const navItems = document.querySelectorAll('.nav-item');
+
+    function updateActiveNav() {
+      let current = '';
+      sections.forEach(section => {
+        const sectionTop = section.offsetTop;
+        const sectionHeight = section.clientHeight;
+        if (window.scrollY >= sectionTop - 200) {
+          current = section.getAttribute('id');
+        }
+      });
+
+      navItems.forEach(item => {
+        item.classList.remove('active');
+        if (item.getAttribute('data-section') === current) {
+          item.classList.add('active');
+        }
+      });
+    }
+
+    window.addEventListener('scroll', updateActiveNav);
+
+    // Magnetic hover effect
+    navItems.forEach(item => {
+      item.addEventListener('mousemove', (e) => {
+        const rect = item.getBoundingClientRect();
+        const x = e.clientX - rect.left - rect.width / 2;
+        const y = e.clientY - rect.top - rect.height / 2;
+        item.style.transform = `scale(1.15) rotate(5deg) translate(${x * 0.1}px, ${y * 0.1}px)`;
+      });
+      item.addEventListener('mouseleave', () => {
+        item.style.transform = '';
+      });
+    });
 });

app/src/style.css

@@ -75,57 +75,230 @@ body {
   padding: 0 2rem;
 }
 
-/* Floating Navigation */
+/* Enhanced Floating Navigation */
 .floating-nav {
   position: fixed;
-  top: 2rem;
+  top: 80px;     /* Distance from top */
-  right: 2rem;
+  right: 2rem;   /* Distance from right */
-  z-index: 1000;
+  z-index: 9999;
-  background: var(--glass-bg);
+  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  backdrop-filter: blur(20px);
+}
-  border: 1px solid var(--glass-border);
+
-  border-radius: var(--radius-xl);
+.nav-container {
-  padding: 0.5rem;
+  position: relative;
-  box-shadow: var(--shadow-lg);
+  padding: 1rem;
+}
+
+.nav-container::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  right: -10px;
+  bottom: -10px;
+  background: linear-gradient(45deg, 
+    rgba(0, 212, 255, 0.3) 0%, 
+    rgba(255, 107, 107, 0.3) 25%, 
+    rgba(78, 205, 196, 0.3) 50%, 
+    rgba(255, 167, 38, 0.3) 75%, 
+    rgba(156, 39, 176, 0.3) 100%);
+  border-radius: 30px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  animation: cosmicRotate 8s linear infinite;
+}
+
+.nav-container:hover::before {
+  opacity: 1;
+}
+
+@keyframes cosmicRotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.nav-wrapper {
+  position: relative;
+  background: rgba(15, 15, 35, 0.85);
+  backdrop-filter: blur(25px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 25px;
+  padding: 1.5rem 0.8rem;
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+
+.nav-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgba(78, 205, 196, 0.1) 0%, transparent 50%);
+  animation: particleFloat 6s ease-in-out infinite alternate;
+}
+
+@keyframes particleFloat {
+  0% { transform: translateY(0px) rotate(0deg); }
+  100% { transform: translateY(-5px) rotate(5deg); }
 }
 
 .nav-items {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1.2rem;
+  position: relative;
+  z-index: 2;
 }
 
 .nav-item {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  justify-content: center;
-  padding: 0.75rem 1rem;
+  width: 55px;
-  border-radius: var(--radius-md);
+  height: 55px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  overflow: hidden;
   text-decoration: none;
-  color: var(--text-secondary);
+  color: #8892b0;
-  transition: var(--transition-normal);
-  min-width: 120px;
 }
 
-.nav-item:hover,
+.nav-item::before {
-.nav-item.active {
+  content: '';
-  background: var(--glass-bg);
+  position: absolute;
-  color: var(--text-primary);
+  top: 50%;
-  transform: translateX(-4px);
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: linear-gradient(135deg, #00d4ff, #4ecdc4);
+  border-radius: 50%;
+  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: translate(-50%, -50%);
+  z-index: -1;
 }
 
-.nav-item.active {
+.nav-item:hover::before {
-  background: linear-gradient(135deg, var(--primary-color), var(--accent-secondary));
+  width: 100%;
+  height: 100%;
+}
+
+.nav-item:hover {
+  transform: scale(1.15) rotate(5deg);
   color: white;
+  box-shadow: 
+    0 15px 35px rgba(0, 212, 255, 0.4),
+    0 0 25px rgba(0, 212, 255, 0.3);
+}
+
+.nav-item.active {
+  background: linear-gradient(135deg, #00d4ff, #4ecdc4);
+  color: white;
+  transform: scale(1.1);
+  box-shadow: 
+    0 10px 25px rgba(0, 212, 255, 0.4),
+    0 0 15px rgba(0, 212, 255, 0.3);
 }
 
 .nav-icon {
-  font-size: 1.2rem;
+  font-size: 1.4rem;
+  position: relative;
+  z-index: 2;
+  transition: all 0.3s ease;
 }
 
-.nav-text {
+.nav-item:hover .nav-icon {
+  transform: scale(1.2) rotate(-5deg);
+  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
+}
+
+/* Tooltip */
+.nav-tooltip {
+  position: absolute;
+  right: 75px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-size: 0.85rem;
   font-weight: 500;
-  font-size: 0.9rem;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.nav-tooltip::after {
+  content: '';
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-left-color: rgba(0, 0, 0, 0.9);
+}
+
+.nav-item:hover .nav-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(-50%) translateX(-10px);
+}
+
+/* Pulse Animation for Active Item */
+@keyframes activePulse {
+  0%, 100% { 
+    box-shadow: 
+      0 10px 25px rgba(0, 212, 255, 0.4),
+      0 0 15px rgba(0, 212, 255, 0.3);
+  }
+  50% { 
+    box-shadow: 
+      0 15px 35px rgba(0, 212, 255, 0.6),
+      0 0 25px rgba(0, 212, 255, 0.5);
+  }
+}
+
+.nav-item.active {
+  animation: activePulse 2s ease-in-out infinite;
+}
+
+/* Sparkle Effect */
+.nav-item::after {
+  content: '✨';
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  font-size: 0.8rem;
+  opacity: 0;
+  animation: sparkle 0.6s ease-in-out;
+  pointer-events: none;
+}
+
+.nav-item:hover::after {
+  animation: sparkle 0.6s ease-in-out;
+}
+
+@keyframes sparkle {
+  0% { opacity: 0; transform: scale(0) rotate(0deg); }
+  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
+  100% { opacity: 0; transform: scale(0) rotate(360deg); }
 }
 
 /* Intro Section */
@@ -782,22 +955,21 @@ body {
 
 @media (max-width: 768px) {
   .floating-nav {
-    top: 1rem;
     right: 1rem;
   }
-  
+  .nav-tooltip {
-  .nav-items {
+    right: 65px;
-    flex-direction: row;
+    font-size: 0.75rem;
+    padding: 0.4rem 0.8rem;
   }
-  
-  .nav-text {
-    display: none;
-  }
-  
   .nav-item {
-    min-width: auto;
+    width: 50px;
-    padding: 0.75rem;
+    height: 50px;
   }
+  .nav-icon {
+    font-size: 1.2rem;
+  }
+
   
   .intro-section {
     padding: 4rem 1rem;