feat: update "Services" navigation to link to the tech stack section and redesign the mobile navigation UI and animations.

Author: AVP-Dev

src/components/Header.astro

@@ -27,8 +27,8 @@ const homePath = `/${lang}/`;
             >
         </a>
         <ul class="nav-links">
-            <li><a href={`${homePath}#services`}>{t("nav_services")}</a></li>
             <li><a href={`${homePath}#about`}>{t("nav_about")}</a></li>
+            <li><a href={`${homePath}#stack`}>{t("nav_services")}</a></li>
             <li><a href={`/${lang}/projects/`}>{t("nav_portfolio")}</a></li>
             <li><a href={`/${lang}/blog/`}>{t("nav_blog")}</a></li>
             <li><a href={`/${lang}/brief/`}>{t("nav_brief")}</a></li>
@@ -55,8 +55,8 @@ const homePath = `/${lang}/`;
 <div class="mobile-nav-overlay"></div>
 <div class="mobile-nav">
     <ul>
-        <li><a href={`${homePath}#services`}>{t("nav_services")}</a></li>
         <li><a href={`${homePath}#about`}>{t("nav_about")}</a></li>
+        <li><a href={`${homePath}#stack`}>{t("nav_services")}</a></li>
         <li><a href={`/${lang}/projects/`}>{t("nav_portfolio")}</a></li>
         <li><a href={`/${lang}/blog/`}>{t("nav_blog")}</a></li>
         <li><a href={`/${lang}/brief/`}>{t("nav_brief")}</a></li>

src/components/sections/About.astro

@@ -44,7 +44,7 @@ const homePath = `/${lang}/`;
             </div>
         </div>
 
-        <div class="tech-stack-detailed fade-in">
+        <div id="stack" class="tech-stack-detailed fade-in">
             <h3 class="tech-stack-title">{t("about_tech")}</h3>
             <div class="tech-categories">
                 <div class="tech-category-card">

src/styles/style.css

@@ -7,6 +7,7 @@
 
 html {
     scroll-behavior: smooth;
+    scrollbar-gutter: stable;
 }
 
 body {
@@ -430,35 +431,39 @@ nav {
     transform: translateY(-9px) rotate(-45deg);
 }
 
+/* --- Mobile Navigation --- */
 .mobile-nav {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    /* Change from space-between to allow natural scroll */
     position: fixed;
-    top: 0;
-    right: 0;
-    width: 85%;
-    max-width: 400px;
-    height: 100vh;
-    height: 100dvh;
+    top: 80px;
+    /* Below header */
+    right: 50%;
+    transform: translateX(50%) translateY(-20px);
+    /* Center horizontally, slightly above for animation */
+    width: min(calc(100% - 40px), 320px);
+    height: auto;
+    max-height: calc(100vh - 100px);
     background-color: var(--glass-bg);
     backdrop-filter: blur(24px) saturate(180%);
     -webkit-backdrop-filter: blur(24px) saturate(180%);
-    transform: translateX(100%);
-    opacity: 1;
-    visibility: visible;
-    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    border: 1px solid var(--glass-border);
+    border-radius: 24px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
     z-index: 2000;
-    padding: 100px 30px calc(40px + env(safe-area-inset-bottom));
-    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
+    padding: 24px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
     overflow-y: auto;
-    /* Enable scroll if content is too tall */
 }
 
 .mobile-nav.open {
-    transform: translateX(0);
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(50%) translateY(0);
 }
 
 .mobile-nav-overlay {
@@ -478,22 +483,20 @@ nav {
 }
 
 .dark-theme .mobile-nav {
-    background-color: rgba(17, 17, 26, 0.8);
+    background-color: rgba(17, 17, 26, 0.9);
     backdrop-filter: blur(24px) saturate(180%);
     -webkit-backdrop-filter: blur(24px) saturate(180%);
-    border-left: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
 }
 
 .light-theme .mobile-nav {
-    background-color: rgba(255, 255, 255, 0.82);
+    background-color: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(24px) saturate(180%);
     -webkit-backdrop-filter: blur(24px) saturate(180%);
-    border-left: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
 }
 
-.mobile-nav.open {
-    transform: translateX(0);
-}
+
 
 .mobile-nav ul {
     list-style: none;
@@ -503,10 +506,10 @@ nav {
 }
 
 .mobile-nav li {
-    margin: 0.75rem 0;
-    transform: translateY(20px);
+    margin: 0.5rem 0;
+    transform: translateY(10px);
     opacity: 0;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .mobile-nav.open li {
@@ -540,29 +543,37 @@ nav {
 
 .mobile-nav a {
     color: var(--text-color);
-    font-size: clamp(1.2rem, 6vw, 1.6rem);
+    font-size: 1.1rem;
     text-decoration: none;
     font-family: var(--font-heading);
-    font-weight: 700;
+    font-weight: 600;
     transition: color 0.3s ease;
     display: block;
-    padding: 0.4rem 0;
+    padding: 0.5rem 1rem;
+    border-radius: 12px;
+    background: transparent;
 }
 
 .mobile-nav a:hover {
-    color: var(--accent-color-start);
+    background: var(--tag-bg);
+    color: var(--text-color);
 }
 
+
+
 .mobile-controls {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    gap: 1.5rem;
+    gap: 1rem;
     width: 100%;
-    margin-top: auto;
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
     opacity: 0;
-    transform: translateY(20px);
-    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
+    transform: translateY(10px);
+    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 }
 
 .mobile-nav.open .mobile-controls {