Composant de portefeuille interactif
Un composant de portefeuille réactif avec des micro-interactions et une palette de couleurs pastel, prenant en charge le mode sombre avec Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">My Portfolio</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
</div>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
</div>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
</div>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=4" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
</div>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=5" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
</div>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/300?random=6" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About Me</h3>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
<div>
<h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Your Name</h4>
<p class="text-gray-600 dark:text-gray-400">A short bio or description about yourself and your work.</p>
</div>
</div>
</div>
<button class="mt-4 bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 transition duration-300 ease-in-out">Contact Me</button>
</div>Composants associés
Retro Vintage Portfolio Composants interactifs
Un composant de portfolio à thème rétro-vintage en niveaux de gris avec des éléments interactifs, adapté à la présentation de travaux ou de produits. Dispose d’un design réactif et d’une prise en charge du mode sombre.
Social_Dating_Interactive_Component
Un composant complexe et interactif de plate-forme sociale/de rencontre conçu avec un style d’entreprise propre et digne de confiance utilisant une palette de couleurs violet/violet. Comprend une mise en page réactive et la prise en charge du mode sombre.
Composante des composantes interactives
Un composant interactif conçu pour les plateformes d’emploi et de carrière, avec des lignes fluides organiques inspirées de la nature et une palette de couleurs vives de bonbons et de sucreries. Il comprend des cartes de travail avec des boutons d’application et des étiquettes de compétence, prenant en charge la réactivité et le mode sombre.