<section class=" dark:bg-gray-900 max-w-4xl mx-auto px-4 transition-colors duration-300">
<!-- Portfolio Content -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 transition-colors duration-300">
<!-- Header -->
<h1 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-2">My Portfolio</h1>
<p class="text-gray-600 dark:text-gray-300 text-center mb-8">A selection of my recent work</p>
<!-- Portfolio Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Portfolio Item 1 -->
<div class="relative overflow-hidden rounded-lg group">
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
alt="E-commerce Website" class="w-full h-64 object-cover rounded-lg">
<div class="absolute inset-0 bg-black dark:bg-gray-900 bg-opacity-70 dark:bg-opacity-80 flex flex-col justify-center items-center p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white text-center">
<h3 class="text-xl font-semibold mb-2">E-commerce Website</h3>
<p class="text-gray-200 dark:text-gray-300">A modern online store with product filtering and cart functionality.</p>
<a href="#" class="inline-flex items-center mt-4 px-4 py-2 bg-blue-500 dark:bg-blue-600 bg-opacity-80 hover:bg-opacity-100 rounded transition-colors duration-300 text-white">
View Project <i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
<!-- Portfolio Item 2 -->
<div class="relative overflow-hidden rounded-lg group">
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
alt="Fitness Mobile App" class="w-full h-64 object-cover rounded-lg">
<div class="absolute inset-0 bg-black dark:bg-gray-900 bg-opacity-70 dark:bg-opacity-80 flex flex-col justify-center items-center p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white text-center">
<h3 class="text-xl font-semibold mb-2">Fitness Mobile App</h3>
<p class="text-gray-200 dark:text-gray-300">A workout tracking application with personalized exercise plans.</p>
<a href="#" class="inline-flex items-center mt-4 px-4 py-2 bg-blue-500 dark:bg-blue-600 bg-opacity-80 hover:bg-opacity-100 rounded transition-colors duration-300 text-white">
View Project <i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
<!-- Portfolio Item 3 -->
<div class="relative overflow-hidden rounded-lg group">
<img src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
alt="Coffee Shop Branding" class="w-full h-64 object-cover rounded-lg">
<div class="absolute inset-0 bg-black dark:bg-gray-900 bg-opacity-70 dark:bg-opacity-80 flex flex-col justify-center items-center p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white text-center">
<h3 class="text-xl font-semibold mb-2">Coffee Shop Branding</h3>
<p class="text-gray-200 dark:text-gray-300">Complete branding package for a local coffee shop.</p>
<a href="#" class="inline-flex items-center mt-4 px-4 py-2 bg-blue-500 dark:bg-blue-600 bg-opacity-80 hover:bg-opacity-100 rounded transition-colors duration-300 text-white">
View Project <i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</section>