improved menu and translation alignment

Author: AlexDevFlow

portfolio/file_converter.lottie

@@ -50,18 +50,20 @@
 
   <main id="main-content">
 
+  <div id="mobile-menu-overlay" class="mobile-menu-overlay" aria-hidden="true"></div>
+
 
   <div id="mobile-menu" class="mobile-menu bg-white bg-opacity-70 backdrop-blur-md" role="dialog" aria-modal="true" aria-label="Navigation menu">
     <div class="mobile-menu-header">
       <h2 class="text-xl font-bold" data-i18n="nav.menu">Menu</h2>
       <button id="mobile-menu-close" class="mobile-menu-close" type="button" aria-label="Close menu">&times;</button>
     </div>
     <div class="mobile-menu-items">
-      <a href="#home" data-i18n="nav.home">Home</a>
-      <a href="#about" data-i18n="nav.about">About</a>
-      <a href="#skills" data-i18n="nav.skills">Skills</a>
-      <a href="#projects" data-i18n="nav.projects">Projects</a>
-      <a href="#contact" data-i18n="nav.contact">Contact</a>
+      <a href="#home"><span class="menu-emoji" aria-hidden="true">🏠</span><span data-i18n="nav.home">Home</span></a>
+      <a href="#about"><span class="menu-emoji" aria-hidden="true">👤</span><span data-i18n="nav.about">About</span></a>
+      <a href="#skills"><span class="menu-emoji" aria-hidden="true">🛠️</span><span data-i18n="nav.skills">Skills</span></a>
+      <a href="#projects"><span class="menu-emoji" aria-hidden="true">🧩</span><span data-i18n="nav.projects">Projects</span></a>
+      <a href="#contact"><span class="menu-emoji" aria-hidden="true">✉️</span><span data-i18n="nav.contact">Contact</span></a>
     </div>
   </div>
 

portfolio/index.html

@@ -92,21 +92,25 @@ gsap.from("#projects .project-card", {
 const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
 const mobileMenu = document.getElementById("mobile-menu");
 const mobileMenuClose = document.getElementById("mobile-menu-close");
+const mobileMenuOverlay = document.getElementById("mobile-menu-overlay");
 
 function openMobileMenu() {
   mobileMenu.classList.add("active");
+  mobileMenuOverlay?.classList.add("active");
   document.body.style.overflow = "hidden";
   mobileMenuToggle.setAttribute("aria-expanded", "true");
 }
 
 function closeMobileMenu() {
   mobileMenu.classList.remove("active");
+  mobileMenuOverlay?.classList.remove("active");
   document.body.style.overflow = "";
   mobileMenuToggle.setAttribute("aria-expanded", "false");
 }
 
 mobileMenuToggle.addEventListener("click", openMobileMenu);
 mobileMenuClose.addEventListener("click", closeMobileMenu);
+mobileMenuOverlay?.addEventListener("click", closeMobileMenu);
 
 document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
   anchor.addEventListener("click", function (e) {

portfolio/script/script.js

@@ -226,64 +226,77 @@ h3 {
 .mobile-menu {
   position: fixed;
   top: 0;
-  left: -100%;
+  left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.9);
+  padding: 2.75rem 1.75rem 2.25rem;
+  background: linear-gradient(145deg, rgba(239, 224, 197, 0.98), rgba(241, 236, 226, 0.96));
+  backdrop-filter: blur(14px);
   z-index: 999;
-  transition: left 0.3s ease;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  gap: 2rem;
+  transform: translateY(-6%);
+  opacity: 0;
+  visibility: hidden;
+  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
 }
 
 .mobile-menu.active {
-  left: 0;
+  transform: translateY(0);
+  opacity: 1;
+  visibility: visible;
 }
 
 .mobile-menu-header {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .mobile-menu-close {
-  font-size: 2.5rem;
-  color: white;
+  font-size: 2.2rem;
+  color: var(--primary-color);
   cursor: pointer;
 }
 
 .mobile-menu-items {
+  width: min(440px, 100%);
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  gap: 1rem;
 }
 
 .mobile-menu-items a {
-  font-size: 2rem;
-  color: white;
-  margin: 1.5rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  width: 100%;
   text-decoration: none;
-  transition: color 0.3s ease;
-  position: relative;
+  background: rgba(9, 167, 224, 0.12);
+  color: var(--primary-color);
+  font-size: 1.35rem;
+  font-weight: 700;
+  padding: 0.95rem 1.1rem;
+  border-radius: 16px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }
 
-.mobile-menu-items a:after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 2px;
-  bottom: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: white;
-  transition: width 0.3s ease;
+.mobile-menu-items .menu-emoji {
+  font-size: 1.25rem;
+  display: inline-block;
+  width: 1.4rem;
+  text-align: center;
 }
 
-.mobile-menu-items a:hover:after {
-  width: 100%;
+.mobile-menu-items a:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
+  background: rgba(9, 167, 224, 0.18);
 }
 
 .bento-grid {

portfolio/style/style.css

@@ -125,6 +125,22 @@ body {
   z-index: 20;
 }
 
+@media (max-width: 480px) {
+  .language-switch {
+    top: 10px;
+    right: 10px;
+  }
+
+  .language-switch button {
+    padding: 6px 11px;
+    font-size: 0.9rem;
+  }
+
+  body {
+    padding-top: 18px;
+  }
+}
+
 .language-switch button {
   background: linear-gradient(135deg, var(--button-bg), var(--accent-color));
   color: white;