Composant Composants de mise en page
Un composant de mise en page de portfolio réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue et conçu pour une complexité moyenne avec des fonctionnalités interactives pour présenter des travaux ou des produits.
HTML Code
<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>Composants associés
Composants de mise en page
Un composant de mise en page de tableau de bord réactif qui utilise des micro-interactions et une palette de couleurs pastel, conçu pour afficher la visualisation des données et les panneaux de contrôle avec prise en charge du mode sombre.
Composant Composants de mise en page
Composant de mise en page de tableau de bord réactif avec un thème sombre, doté d’une barre latérale et d’une zone de contenu principale. Il utilise une palette de couleurs triadique pour un attrait visuel.
Mise en page du portefeuille en mode sombre
Un composant de mise en page réactif en mode sombre pour les portfolios, avec une palette de couleurs monochromatiques à l’aide de Tailwind CSS. Inclut des espaces réservés pour le contenu et est conçu pour une complexité modérée sans JavaScript.