다크 모드 포트폴리오 탐색
포트폴리오 웹 사이트를 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 유사한 색상의 다크 모드 UI를 특징으로 하며 작업 또는 제품을 선보이도록 설계되었습니다. 데스크톱, 태블릿 및 모바일 레이아웃과 드롭다운 및 사용자 아바타가 포함됩니다.
HTML 코드
<nav class="bg-gray-800 dark:bg-gray-950 shadow-lg dark:shadow-xl">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex-shrink-0 text-white text-2xl font-bold tracking-wider">
Portfolio
</a>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Home</a>
<div class="relative group">
<button class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300 flex items-center">
Projects
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</button>
<div class="absolute hidden group-hover:block z-10 mt-2 w-48 rounded-md shadow-lg py-1 bg-gray-800 dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
</div>
</div>
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Contact</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="relative p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white transition-colors duration-300">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="relative ml-3 group">
<div>
<button type="button" class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full"
src="https://randomuser.me/api/portraits/men/45.jpg"
alt="User Avatar">
</button>
</div>
<div class="absolute hidden group-hover:block right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-gray-800 dark:bg-gray-900 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<button class="dark-mode-toggle block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition duration-300" role="menuitem" tabindex="-1" id="user-menu-item-2">
Toggle Dark Mode
</button>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-3">Sign out</a>
</div>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg class="block h-6 w-6 menu-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg class="hidden h-6 w-6 close-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden hidden mobile-menu" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Home</a>
<div class="relative group">
<button class="flex items-center w-full text-left text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">
Projects
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</button>
<div class="pl-6 py-1 mobile-submenu hidden">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
</div>
</div>
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Contact</a>
</div>
<div class="border-t border-gray-700 pb-3 pt-4">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">John Doe</div>
<div class="text-sm font-medium leading-none text-gray-400">[email protected]</div>
</div>
<button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
</div>
<div class="mt-3 space-y-1 px-2">
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Your Profile</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Settings</a>
<button class="dark-mode-toggle block w-full text-left rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 transition duration-300">
Toggle Dark Mode
</button>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Sign out</a>
</div>
</div>
</div>
</nav>
<script>
// Dark mode toggle functionality
const darkModeToggleButtons = document.querySelectorAll('.dark-mode-toggle');
darkModeToggleButtons.forEach(button => {
button.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
// Store user preference in local storage
if (document.documentElement.classList.contains('dark')) {
localStorage.theme = 'dark';
} else {
localStorage.theme = 'light';
}
});
});
// Check for stored theme preference on load
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// Mobile menu toggle functionality
const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
const menuIcon = mobileMenuButton.querySelector('.menu-icon');
const closeIcon = mobileMenuButton.querySelector('.close-icon');
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false;
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('hidden');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
// Mobile submenu toggle functionality (simple for demonstration)
const mobileProjectsButton = document.querySelector('#mobile-menu .group button');
const mobileSubmenu = document.querySelector('#mobile-menu .mobile-submenu');
if (mobileProjectsButton) {
mobileProjectsButton.addEventListener('click', () => {
mobileSubmenu.classList.toggle('hidden');
});
}
</script>