HTML 代码
<div class="min-h-screen bg-gray-800 text-white p-6">
<header class="mb-6">
<h1 class="text-4xl font-bold text-center">My Retro Portfolio</h1>
</header>
<main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 1</h2>
<p class="text-gray-300">Description of the project showcasing the retro design style.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 2</h2>
<p class="text-gray-300">Description of the project highlighting nostalgic elements from the past eras.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 3</h2>
<p class="text-gray-300">Description of the project with a vintage flair and interactive features.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Portfolio Item 4" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 4</h2>
<p class="text-gray-300">Snapshot of the work that resonates with the audience's nostalgia.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Portfolio Item 5" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 5</h2>
<p class="text-gray-300">Work details that emphasize the vintage aesthetics of the project.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Portfolio Item 6" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold">Project Title 6</h2>
<p class="text-gray-300">Project insights with a nostalgic touch to engage viewers.</p>
</div>
</main>
<footer class="mt-6 text-center">
<h3 class="text-lg font-medium">About Me</h3>
<div class="flex justify-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-500">
</div>
<p class="mt-2">Check out my work and get in touch!</p>
</footer>
</div>