필터 구성 요소

<div class="p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Explore My Portfolio</h2>

  <div class="flex flex-wrap justify-center gap-4 mb-12">
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">All Projects</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Web Development</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">UI/UX Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Graphic Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
  </div>
  
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project1/600/400" alt="Project 1" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title One</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A brief description of Project One, showcasing its key features and technologies used. This project demonstrates responsive design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">HTML</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">CSS</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Tailwind CSS</span>
      </div>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project2/600/400" alt="Project 2" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Two</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">This project focuses on a comprehensive UI/UX design approach, user flows, and wireframing for an intuitive experience.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Figma</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Prototyping</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Research</span>
      </div>
    </div>

    <!-- Project Card 3 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project3/600/400" alt="Project 3" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Three</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">An example of graphic design work including logo creation, branding guidelines, and marketing collateral design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Photoshop</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrator</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Branding</span>
      </div>
    </div>

    <!-- Project Card 4 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project4/600/400" alt="Project 4" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Four</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A web development project featuring a dynamic and interactive frontend built with modern JavaScript frameworks.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">React</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Node.js</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">API Integration</span>
      </div>
    </div>

    <!-- Project Card 5 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project5/600/400" alt="Project 5" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Five</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">UI/UX case study exploring user research, persona creation, and iterative design processes for a mobile application.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">User Research</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Wireframing</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Usability Testing</span>
      </div>
    </div>

    <!-- Project Card 6 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project6/600/400" alt="Project 6" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Six</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A sophisticated graphic design project involving complex illustrations and print media layouts for a magazine.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrations</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">InDesign</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Print Design</span>
      </div>
cv    </div>

  </div>
</div>