레트로 빈티지 포트폴리오 인터랙티브 컴포넌트

<div class="font-mono min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8">

  <!-- Header/Title -->
  <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-8 md:mb-12 text-center leading-tight tracking-wider uppercase drop-shadow-md text-gray-900 dark:text-gray-100" style="text-shadow: 2px 2px 0px #000, -2px -2px 0px #333;">
    _PORTFOLIO_:
    <span class="block text-2xl sm:text-3xl md:text-4xl font-normal mt-2 lowercase text-gray-700 dark:text-gray-300">[PROJECTS & WORKS]</span>
  </h1>

  <!-- Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-7xl mx-auto w-full">

    <!-- Project Card 1 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/67/400/300" alt="Project 1" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Project Alpha</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">A ground-breaking application designed to revolutionize user interaction with its intuitive interface and robust backend.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2023]</div>
    </div>

    <!-- Project Card 2 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/68/400/300" alt="Project 2" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Cyber-Connect</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">A secure communication platform emphasizing data privacy and end-to-end encryption for seamless messaging.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2022]</div>
    </div>

    <!-- Project Card 3 -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <img src="https://picsum.photos/id/69/400/300" alt="Project 3" class="w-full h-48 object-cover mb-4 border border-gray-300 dark:border-gray-700 filter grayscale group-hover:grayscale-0 transition-all duration-300">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">Bio-Synth AI</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">An advanced AI system capable of synthesizing complex biological data for research and development purposes.</p>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">VIEW DETAILS</span>
      </button>
      <div class="absolute top-3 right-3 text-sm px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-500 text-gray-700 dark:text-gray-300 shadow-sm">[2021]</div>
    </div>

    <!-- Profile Card/About me -->
    <div class="group relative bg-white dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-100 p-5 rounded-none shadow-vintage col-span-1 md:col-span-2 lg:col-span-1 transform transition-transform duration-300 hover:scale-[1.02] hover:z-10 focus-within:scale-[1.02] focus-within:z-10" style="box-shadow: 8px 8px 0px #000, -8px -8px 0px #333;">
      <div class="absolute inset-0 border-2 border-dashed border-gray-400 dark:border-gray-600 pointer-events-none"></div>
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 mb-4">
        <img src="https://randomuser.me/api/portraits/men/86.jpg" alt="Developer Avatar" class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 object-cover filter grayscale group-hover:grayscale-0 transition-all duration-300 shadow-md">
        <div class="text-center sm:text-left">
          <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 uppercase tracking-wide">Dev. Smith</h2>
          <p class="text-gray-700 dark:text-gray-300 text-lg font-semibold">[FRONTEND ENGINEER]</p>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Dedicated to crafting robust and visually striking web experiences. Specializing in responsive design and accessible user interfaces. Always pushing the boundaries of digital creation.</p>
      <div class="flex flex-wrap gap-2 mb-4">
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">HTML5</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">CSS3</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">Tailwind CSS</span>
        <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-400 dark:border-gray-600 text-xs font-semibold uppercase">JS</span>
      </div>
      <button class="relative px-6 py-3 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 border-2 border-gray-700 dark:border-gray-300 uppercase text-sm font-bold tracking-wider overflow-hidden group-hover:bg-gray-700 dark:group-hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-none transform skew-x-[-10deg]">
        <span class="block transform skew-x-[10deg]">CONTACT</span>
      </button>
    </div>

  </div>

</div>