johanleroy/Portfolio_angular
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V1.4

Browse Source
This commit is contained in:
leroy
2025-04-19 19:37:38 +02:00
parent 170eebb737
commit 003a93c9e3
1 changed files with 152 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
src/app/public/pages/home/home.component.html
View File

@@ -25,221 +25,277 @@
</div> </div>
</div> </div>
</section> </section>
<section class="py-12 bg-[#FFFAFF]"> <section class="py-16 bg-[#FFFAFF]">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4 max-w-7xl">
<div class="flex flex-wrap justify-center"> <h2 class="text-3xl font-bold text-center text-[#0A2463] mb-12">Mes compétences</h2>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full"> <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Langages</h3> <!-- Langages -->
<div class="flex flex-wrap gap-2"> <div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="flex flex-col items-center group relative"> <div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="p-6">
<h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Langages</h3>
<div class="grid grid-cols-3 gap-4">
<div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/dart.png" alt="dart" class="max-w-full max-h-full" /> <img src="img/icon/dart.png" alt="dart" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Dart</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Dart Dart
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/java.png" alt="java" class="max-w-full max-h-full" /> <img src="img/icon/java.png" alt="java" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Java</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Java Java
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/js.png" alt="js" class="max-w-full max-h-full" /> <img src="img/icon/js.png" alt="js" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">JS</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
JavaScript JavaScript
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/Typescript.png" alt="ts" class="max-w-full max-h-full" /> <img src="img/icon/Typescript.png" alt="ts" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">TS</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
TypeScript TypeScript
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/kotlin.png" alt="kotlin" class="max-w-full max-h-full" /> <img src="img/icon/kotlin.png" alt="kotlin" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Kotlin</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Kotlin Kotlin
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/php.png" alt="php" class="max-w-full max-h-full" /> <img src="img/icon/php.png" alt="php" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">PHP</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
PHP PHP
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/python.png" alt="python" class="max-w-full max-h-full" /> <img src="img/icon/python.png" alt="python" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Python</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Python Python
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full"> <!-- Frameworks -->
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">frameworks</h3> <div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="flex flex-wrap gap-2"> <div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<div class="flex flex-col items-center group relative"> <div class="p-6">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Frameworks</h3>
<div class="grid grid-cols-3 gap-4">
<div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/angular.png" alt="angular" class="max-w-full max-h-full" /> <img src="img/icon/angular.png" alt="angular" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Angular</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Angular Angular
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/flutter.png" alt="flutter" class="max-w-full max-h-full" /> <img src="img/icon/flutter.png" alt="flutter" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Flutter</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Flutter Flutter
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/sf.png" alt="Symfony" class="max-w-full max-h-full" /> <img src="img/icon/sf.png" alt="Symfony" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Symfony</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Symfony Symfony
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/spring.png" alt="spring boot" class="max-w-full max-h-full" /> <img src="img/icon/spring.png" alt="spring boot" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Spring</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Spring Boot Spring Boot
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/tailwind.png" alt="tailwind" class="max-w-full max-h-full" /> <img src="img/icon/tailwind.png" alt="tailwind" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Tailwind</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Tailwind CSS Tailwind CSS
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full"> <!-- Bases de données -->
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Bases de données</h3> <div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="flex flex-wrap gap-2"> <div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<div class="flex flex-col items-center group relative"> <div class="p-6">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Bases de données</h3>
<div class="grid grid-cols-3 gap-4">
<div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/mariaDB.png" alt="mariaDB" class="max-w-full max-h-full" /> <img src="img/icon/mariaDB.png" alt="mariaDB" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">MariaDB</span>
mariaDB <div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
MariaDB
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/mongo.png" alt="mongoDB" class="max-w-full max-h-full" /> <img src="img/icon/mongo.png" alt="mongoDB" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">MongoDB</span>
mongoDB <div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
MongoDB
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/mysql.png" alt="mysql" class="max-w-full max-h-full" /> <img src="img/icon/mysql.png" alt="mysql" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">MySQL</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
MySQL MySQL
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/PostgreSQL.png" alt="postgreSQL" class="max-w-full max-h-full" /> <img src="img/icon/PostgreSQL.png" alt="postgreSQL" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">PostgreSQL</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
PostgreSQL PostgreSQL
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/SQL-Server.png" alt="SQLserver" class="max-w-full max-h-full" /> <img src="img/icon/SQL-Server.png" alt="SQLserver" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">SQL Server</span>
SQLserver <div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
SQL Server
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full"> <!-- Outils -->
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Outils</h3> <div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="flex flex-wrap gap-2"> <div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<div class="flex flex-col items-center group relative"> <div class="p-6">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Outils</h3>
<div class="grid grid-cols-3 gap-4">
<div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/androidStudio.png" alt="android studio" class="max-w-full max-h-full" /> <img src="img/icon/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Android</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Android Studio Android Studio
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/git.png" alt="git" class="max-w-full max-h-full" /> <img src="img/icon/git.png" alt="git" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">Git</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Git Git
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" /> <img src="img/icon/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">PhpStorm</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
PhpStorm PhpStorm
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/WebStorm.png" alt="webstorm" class="max-w-full max-h-full" /> <img src="img/icon/WebStorm.png" alt="webstorm" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">WebStorm</span>
<div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
WebStorm WebStorm
</div> </div>
</div> </div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2"> <div class="group relative flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/studio_code.png" alt="studio code" class="max-w-full max-h-full" /> <img src="img/icon/studio_code.png" alt="studio code" class="max-w-full max-h-full" />
</div> </div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <span class="text-xs text-gray-600 text-center">VS Code</span>
Studio Code <div class="absolute -top-14 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap">
Visual Studio Code
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full"> <!-- Centres d'intérêt -->
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Centres d'intérêt</h3> <div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Centres d'intérêt</h3>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Jeux vidéo</span> <span class="bg-[#D8315B] text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Jeux vidéo</span>
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Films & Séries</span> <span class="bg-[#D8315B] text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Films & Séries</span>
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">DJ</span> <span class="bg-[#D8315B] text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">DJ</span>
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Projet personnel</span> <span class="bg-[#D8315B] text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Projet personnel</span>
</div> </div>
</div> </div>
</div> </div>