Tailwind CSS Portfolio

<section class="bg-gray-100 py-16">
  <div class="container mx-auto px-6">
    <h2 class="text-4xl font-bold text-center text-gray-800 mb-12">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Portfolio Item -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg">
        <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-72 object-cover transform group-hover:scale-110 transition duration-500">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <h3 class="text-white text-lg font-bold">Project Title</h3>
        </div>
      </div>
      <!-- Portfolio Item -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg">
        <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-72 object-cover transform group-hover:scale-110 transition duration-500">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <h3 class="text-white text-lg font-bold">Project Title</h3>
        </div>
      </div>
      <!-- Portfolio Item -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg">
        <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-72 object-cover transform group-hover:scale-110 transition duration-500">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <h3 class="text-white text-lg font-bold">Project Title</h3>
        </div>
      </div>
      <!-- Portfolio Item -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg">
        <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-72 object-cover transform group-hover:scale-110 transition duration-500">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <h3 class="text-white text-lg font-bold">Project Title</h3>
        </div>
      </div>
      <!-- Portfolio Item -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg">
        <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-72 object-cover transform group-hover:scale-110 transition duration-500">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <h3 class="text-white text-lg font-bold">Project Title</h3>
        </div>
      </div>
      <!-- Portfolio Item -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg">
        <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-72 object-cover transform group-hover:scale-110 transition duration-500">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <h3 class="text-white text-lg font-bold">Project Title</h3>
        </div>
      </div>
    </div>

  </div>
</section>

<section class="bg-white py-20">
  <div class="container mx-auto px-6">
    <h2 class="text-3xl font-bold text-center text-gray-800 mb-10">My Creative Work</h2>
    <div class="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
      <!-- Portfolio Item -->
      <div class="break-inside">
        <a href="/ui/images/bald-eagle.jpg" target="_blank" class="block relative overflow-hidden rounded-lg">
          <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-full object-cover transform hover:scale-105 transition duration-300">
        </a>
      </div>
      <!-- Portfolio Item -->
      <div class="break-inside">
        <a href="/ui/images/bald-eagle.jpg" target="_blank" class="block relative overflow-hidden rounded-lg">
          <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-full object-cover transform hover:scale-105 transition duration-300">
        </a>
      </div>
      <!-- Portfolio Item -->
      <div class="break-inside">
        <a href="/ui/images/bald-eagle.jpg" target="_blank" class="block relative overflow-hidden rounded-lg">
          <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-full object-cover transform hover:scale-105 transition duration-300">
        </a>
      </div>
      <!-- Portfolio Item -->
      <div class="break-inside">
        <a href="/ui/images/bald-eagle.jpg" target="_blank" class="block relative overflow-hidden rounded-lg">
          <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-full object-cover transform hover:scale-105 transition duration-300">
        </a>
      </div>
      <!-- Portfolio Item -->
      <div class="break-inside">
        <a href="/ui/images/bald-eagle.jpg" target="_blank" class="block relative overflow-hidden rounded-lg">
          <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-full object-cover transform hover:scale-105 transition duration-300">
        </a>
      </div>
      <!-- Portfolio Item -->
      <div class="break-inside">
        <a href="/ui/images/bald-eagle.jpg" target="_blank" class="block relative overflow-hidden rounded-lg">
          <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-full object-cover transform hover:scale-105 transition duration-300">
        </a>
      </div>
    </div>
  </div>
</section>

<section class="bg-gray-900 text-white py-16">
  <div class="container mx-auto px-6">
    <h2 class="text-4xl font-bold text-center mb-10">Featured Projects</h2>
    <div class="relative group">
      <div class="flex space-x-4 overflow-x-scroll scrollbar-hide snap-x snap-mandatory">
        <!-- Portfolio Item -->
        <div class="min-w-[300px] h-80 bg-gray-800 rounded-lg flex items-center justify-center snap-start">
          <h3 class="text-xl font-bold">Project 1</h3>
        </div>
        <!-- Portfolio Item -->
        <div class="min-w-[300px] h-80 bg-gray-800 rounded-lg flex items-center justify-center snap-start">
          <h3 class="text-xl font-bold">Project 1</h3>
        </div>
        <!-- Portfolio Item -->
        <div class="min-w-[300px] h-80 bg-gray-800 rounded-lg flex items-center justify-center snap-start">
          <h3 class="text-xl font-bold">Project 1</h3>
        </div>
        <!-- Portfolio Item -->
        <div class="min-w-[300px] h-80 bg-gray-800 rounded-lg flex items-center justify-center snap-start">
          <h3 class="text-xl font-bold">Project 1</h3>
        </div>
        <!-- Portfolio Item -->
        <div class="min-w-[300px] h-80 bg-gray-800 rounded-lg flex items-center justify-center snap-start">
          <h3 class="text-xl font-bold">Project 1</h3>
        </div>
      </div>
      <!-- Navigation Arrows -->
      <button class="hidden group-hover:block absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-700 p-2 rounded-full">❮</button>
      <button class="hidden group-hover:block absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-700 p-2 rounded-full">❯</button>
    </div>
  </div>
</section>

<section class="bg-gray-50 py-20">
  <div class="container mx-auto px-6">
    <h2 class="text-4xl font-bold text-center text-gray-800 mb-12">My Portfolio Timeline</h2>
    <div class="relative">
      <!-- Vertical Line -->
      <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gray-300"></div>

      <!-- Timeline Item 1 -->
      <div class="relative mb-8 flex items-start">
        <div class="w-1/2 pr-8">
          <h3 class="text-xl font-semibold">Project Title 1</h3>
          <p class="mt-2 text-gray-600">Short description of Project 1. This project involved designing and developing a responsive website that enhanced user engagement.</p>
          <span class="block text-gray-500">Completion Date: January 2023</span>
          <a href="#" class="text-blue-500 hover:underline mt-2 inline-block">View Project</a>
        </div>
        <div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">1</div>
        <div class="w-1/2 pl-8"></div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="relative mb-8 flex items-start">
        <div class="w-1/2 pr-8"></div>
        <div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">2</div>
        <div class="w-1/2 pl-12">
          <h3 class="text-xl font-semibold">Project Title 2</h3>
          <p class="mt-2 text-gray-600">This project focused on creating a mobile application that streamlines task management for users.</p>
          <span class="block text-gray-500">Completion Date: March 2023</span>
          <a href="#" class="text-blue-500 hover:underline mt-2 inline-block">View Project</a>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="relative mb-8 flex items-start">
        <div class="w-1/2 pr-8">
          <h3 class="text-xl font-semibold">Project Title 3</h3>
          <p class="mt-2 text-gray-600">An innovative e-commerce platform that allows users to buy and sell products with ease.</p>
          <span class="block text-gray-500">Completion Date: May 2023</span>
          <a href="#" class="text-blue-500 hover:underline mt-2 inline-block">View Project</a>
        </div>
        <div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">3</div>
        <div class="w-1/2 pl-8"></div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="relative mb-8 flex items-start">
        <div class="w-1/2 pr-8"></div>
        <div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">4</div>
        <div class="w-1/2 pl-8">
          <h3 class="text-xl font-semibold">Project Title 4</h3>
          <p class="mt-2 text-gray-600">A social media application designed to connect users based on shared interests and activities.</p>
          <span class="block text-gray-500">Completion Date: August 2023</span>
          <a href="#" class="text-blue-500 hover:underline mt-2 inline-block">View Project</a>
        </div>
      </div>

      <!-- Timeline Item 5 -->
      <div class="relative mb-8 flex items-start">
        <div class="w-1/2 pr-8">
          <h3 class="text-xl font-semibold">Project Title 5</h3>
          <p class="mt-2 text-gray-600">A content management system that allows users to create, edit, and manage web content easily.</p>
          <span class="block text-gray-500">Completion Date: October 2023</span>
          <a href="#" class="text-blue-500 hover:underline mt-2 inline-block">View Project</a>
        </div>
        <div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">5</div>
        <div class="w-1/2 pl-8"></div>
      </div>
    </div>
  </div>
</section>

<section class="bg-gray-800 text-white py-16">
  <div class="container mx-auto px-6 text-center">
    <h2 class="text-5xl font-bold mb-12">My Work</h2>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Portfolio Item -->
      <div class="relative overflow-hidden rounded-lg group">
        <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-80 object-cover transform group-hover:scale-105 transition duration-500">
        <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <h3 class="text-2xl font-bold">Project Title</h3>
        </div>
      </div>
      <!-- Portfolio Item -->
      <div class="relative overflow-hidden rounded-lg group">
        <img src="/ui/images/bald-eagle.jpg" alt="Portfolio Item" class="w-full h-80 object-cover transform group-hover:scale-105 transition duration-500">
        <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <h3 class="text-2xl font-bold">Project Title</h3>
        </div>
      </div>
    </div>
  </div>
</section>