diff --git a/app/src/main.js b/app/src/main.js index a6fa5f8..c77f17e 100644 --- a/app/src/main.js +++ b/app/src/main.js @@ -3,21 +3,25 @@ import './style.css' // Initialize the application document.querySelector('#app').innerHTML = `
- + @@ -241,7 +245,7 @@ document.querySelector('#app').innerHTML = `
-
πŸ™
+
🌿

Gitea

Git repository management

@@ -257,7 +261,7 @@ document.querySelector('#app').innerHTML = `
-
πŸ—οΈ
+
πŸ‘¨β€πŸ”§

Jenkins

CI/CD automation server

@@ -337,7 +341,7 @@ document.querySelector('#app').innerHTML = `
-
πŸ“Š
+
🌊

InfluxDB

Time series database

@@ -442,8 +446,8 @@ document.querySelector('#app').innerHTML = `
-
πŸ›οΈ
-

Taj

+
🏒
+

Taj Residence

External news portal

@@ -458,7 +462,7 @@ document.querySelector('#app').innerHTML = `
-
🌐
+
πŸ—ΊοΈ

Global News

Global news platform

@@ -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 = ''; + }); + }); }); \ No newline at end of file diff --git a/app/src/style.css b/app/src/style.css index 4613be2..9eca630 100644 --- a/app/src/style.css +++ b/app/src/style.css @@ -75,57 +75,230 @@ body { padding: 0 2rem; } -/* Floating Navigation */ +/* Enhanced Floating Navigation */ .floating-nav { position: fixed; - top: 2rem; - right: 2rem; - z-index: 1000; - background: var(--glass-bg); - backdrop-filter: blur(20px); - border: 1px solid var(--glass-border); - border-radius: var(--radius-xl); - padding: 0.5rem; - box-shadow: var(--shadow-lg); + top: 80px; /* Distance from top */ + right: 2rem; /* Distance from right */ + z-index: 9999; + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.nav-container { + position: relative; + 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; - padding: 0.75rem 1rem; - border-radius: var(--radius-md); + justify-content: center; + width: 55px; + 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); - transition: var(--transition-normal); - min-width: 120px; + color: #8892b0; } -.nav-item:hover, -.nav-item.active { - background: var(--glass-bg); - color: var(--text-primary); - transform: translateX(-4px); +.nav-item::before { + content: ''; + position: absolute; + top: 50%; + 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 { - background: linear-gradient(135deg, var(--primary-color), var(--accent-secondary)); +.nav-item:hover::before { + 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-items { - flex-direction: row; + .nav-tooltip { + right: 65px; + font-size: 0.75rem; + padding: 0.4rem 0.8rem; } - - .nav-text { - display: none; - } - .nav-item { - min-width: auto; - padding: 0.75rem; + width: 50px; + height: 50px; } + .nav-icon { + font-size: 1.2rem; + } + .intro-section { padding: 4rem 1rem;