CCHub Logo CCHub Tailwind Collection
구성 요소 Navigation Enhancement 구성 요소 Cyberpunk_Portfolio_Navigation

Cyberpunk_Portfolio_Navigation

포트폴리오를 위한 복잡하고 반응이 빠른 사이버펑크 테마 탐색 구성 요소로, 미래지향적인 네온 퍼플 미학, 어두운 배경 및 인터랙티브 요소를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<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>

관련 구성 요소

Navigation Enhancement 구성 요소

포트폴리오를 위해 설계된 반응형 탐색 구성 요소로, 파스텔 색 구성표와 다크 모드를 지원하는 잔인함 스타일을 활용합니다.

열다

Navigation Enhancement 구성 요소

스큐어모피즘(skeuomorphism)으로 설계된 내비게이션 컴포넌트로, 현실 세계의 요소를 모방한 디지털 요소를 특징으로 합니다. 반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하여 스타일이 지정됩니다.

열다

Monospace_Booking_Navigation_Complex_Triadic

모노스페이스/개발자 미학을 가진 복잡한 예약/예약 탐색 구성 요소입니다. 트라이어딕 색 구성표, 반응형 디자인 및 다크 모드 지원이 특징이며 예약 시스템에 이상적입니다.

열다