이미지 라이트박스 구성 요소

<div class="p-8 bg-gradient-to-br from-purple-700 via-pink-500 to-red-500 dark:from-gray-900 dark:via-purple-900 dark:to-black min-h-screen">
  <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-8 text-center drop-shadow-lg font-mono">My Rad Portfolio</h1>
  
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Image 1 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/vintage1/600/400" alt="Portfolio Image 1" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Project Alpha</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/retro2/600/400" alt="Portfolio Image 2" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Cyberpunk City</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/80sglitch/600/400" alt="Portfolio Image 3" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Neon Dreams</p>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/vaporwave/600/400" alt="Portfolio Image 4" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Synthwave Sunset</p>
      </div>
    </div>
    
    <!-- Image 5 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/gridscape/600/400" alt="Portfolio Image 5" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Pixel Paradise</p>
      </div>
    </div>

    <!-- Image 6 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/seed/datascape/600/400" alt="Portfolio Image 6" class="rounded-lg shadow-xl transform transition-all duration-300 group-hover:scale-105 group-hover:ring-8 group-hover:ring-yellow-400 group-hover:ring-offset-8 group-hover:ring-offset-purple-700 dark:group-hover:ring-offset-gray-900 border-4 border-yellow-300 dark:border-yellow-500">
      <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-xl font-bold font-mono">Binary Bliss</p>
      </div>
    </div>
  </div>

  <!-- Retro Footer -->
  <footer class="mt-16 text-center text-white text-lg font-mono drop-shadow-md">
    <p>&copy; 2023 My Rad Portfolio. All Rights Reserved, Dude.</p>
  </footer>
</div>