Cyberpunk_Portfolio_Navigation
A complex, responsive cyberpunk-themed navigation component for a portfolio, featuring futuristic neon purple aesthetics, dark backgrounds, and interactive elements. Includes dark mode support.
HTML Code
<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>Related Components
Playful_Consulting_Navigation_Component
A simple, playful, and cheerful navigation component for consulting/services, featuring rounded elements, a monochrome color scheme with a bright accent, and full responsiveness with dark mode support.
Agriculture News Card Navigation
A simple, paper/print-inspired navigation component featuring a news card for agriculture and farming websites, using an analogous color scheme. It's fully responsive with dark mode support.
Dark Mode Media Navigation
A complex, responsive navigation component for entertainment/media platforms, featuring a dark mode UI with a forest/green color palette. Includes a logo, search bar, navigation links, user profile, and a notification bell.