Cyberpunk_Portfolio_Navigation

<header class="bg-zinc-950 text-purple-400 shadow-lg shadow-purple-900/50 dark:bg-zinc-900 dark:text-purple-300 dark:shadow-purple-700/30 font-mono tracking-wide relative z-50">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between lg:py-4">
    <a href="#" class="flex items-center space-x-2 group">
      <svg class="h-8 w-8 text-purple-600 group-hover:text-purple-400 transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M19.5 10l.91-1m-1.54-5.5l.01-.01M7.05 12.05l-.01-.01M2.27 14L4 15.5l.65-.65V18l2-2v-.65l.65-.65H11l-.45-.45-1.07-1.07M12 17.25L10.5 16ZM6 10V6l1-1h6l1 1v4l-1 1H7l-1-1zm4.75-5l-.5-.5L4 8.75l-.5.5L7 12.25l.5.5zM12.25 17.25L16 13.5l.5-.5L12.25 9.75l-.5-.5zM17 10V6l1-1h6l1 1v4l-1 1h-6l-1-1z" />
      </svg>
      <span class="text-2xl font-bold text-purple-500 group-hover:text-purple-300 transition-colors duration-300">[SYNAPTIC]</span>
    </a>

    <nav class="hidden lg:flex space-x-8">
      <a href="#projects" class="text-lg relative group overflow-hidden py-1 leading-none">
        Projects
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#skills" class="text-lg relative group overflow-hidden py-1 leading-none">
        Skills
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#experience" class="text-lg relative group overflow-hidden py-1 leading-none">
        Experience
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#contact" class="text-lg relative group overflow-hidden py-1 leading-none">
        Contact
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
    </nav>

    <div class="flex items-center space-x-4">
      <!-- Dark Mode Toggle (placeholder for JS functionality) -->
      <button aria-label="Toggle dark mode" class="p-2 rounded-full bg-purple-800 text-purple-200 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-zinc-950 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-offset-zinc-900 transition-colors duration-300">
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
      </button>

      <!-- Mobile Menu Button -->
      <button aria-label="Open menu" class="lg:hidden p-2 rounded-md bg-purple-800 text-purple-200 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-zinc-950 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-offset-zinc-900 transition-colors duration-300">
        <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, would be toggled by JS) -->
  <div class="lg:hidden absolute top-full left-0 w-full bg-zinc-900 border-t border-purple-800 shadow-xl shadow-purple-900/50 dark:bg-zinc-800 dark:border-purple-700 dark:shadow-purple-700/30 overflow-hidden" style="max-height: 0; transition: max-height 0.4s ease-out;">
    <nav class="flex flex-col p-4 space-y-3">
      <a href="#projects" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Projects</a>
      <a href="#skills" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Skills</a>
      <a href="#experience" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Experience</a>
      <a href="#contact" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Contact</a>
    </nav>
    <div class="flex justify-center p-4 border-t border-purple-800 dark:border-purple-700">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Developer Avatar" class="w-16 h-16 rounded-full border-2 border-purple-600 shadow-md shadow-purple-700/50 object-cover">
    </div>
  </div>
</header>