From 003a93c9e36ac431bbf5573abaa1c5b7688de9c1 Mon Sep 17 00:00:00 2001
From: leroy <leroyjohan3@gmail.com>
Date: Sat, 19 Apr 2025 19:37:38 +0200
Subject: [PATCH] V1.4

---
 src/app/public/pages/home/home.component.html | 248 +++++++++++-------
 1 file changed, 152 insertions(+), 96 deletions(-)

diff --git a/src/app/public/pages/home/home.component.html b/src/app/public/pages/home/home.component.html
index 6003340..5f6cff8 100644
--- a/src/app/public/pages/home/home.component.html
+++ b/src/app/public/pages/home/home.component.html
@@ -25,221 +25,277 @@
     </div>
   </div>
 </section>
-<section class="py-12 bg-[#FFFAFF]">
-  <div class="container mx-auto px-4">
-    <div class="flex flex-wrap justify-center">
-      <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">
-          <h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Langages</h3>
-          <div class="flex flex-wrap gap-2">
-            <div class="flex flex-col items-center group relative">
-              <div class="w-12 h-12 flex items-center justify-center mb-2">
+<section class="py-16 bg-[#FFFAFF]">
+  <div class="container mx-auto px-4 max-w-7xl">
+    <h2 class="text-3xl font-bold text-center text-[#0A2463] mb-12">Mes compétences</h2>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
+      <!-- Langages -->
+      <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]">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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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">
-          <h3 class="text-xl font-semibold mb-4 text-[#0A2463]">frameworks</h3>
-          <div class="flex flex-wrap gap-2">
-            <div class="flex flex-col items-center group relative">
-              <div class="w-12 h-12 flex items-center justify-center mb-2">
+
+      <!-- Frameworks -->
+      <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]">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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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">
-          <h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Bases de données</h3>
-          <div class="flex flex-wrap gap-2">
-            <div class="flex flex-col items-center group relative">
-              <div class="w-12 h-12 flex items-center justify-center mb-2">
+
+      <!-- Bases de données -->
+      <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]">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" />
               </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">
-                mariaDB
+              <span class="text-xs text-gray-600 text-center">MariaDB</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">
+                MariaDB
               </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" />
               </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">
-                mongoDB
+              <span class="text-xs text-gray-600 text-center">MongoDB</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">
+                MongoDB
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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">
-                SQLserver
+              <span class="text-xs text-gray-600 text-center">SQL Server</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">
+                SQL Server
               </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">
-          <h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Outils</h3>
-          <div class="flex flex-wrap gap-2">
-            <div class="flex flex-col items-center group relative">
-              <div class="w-12 h-12 flex items-center justify-center mb-2">
+
+      <!-- Outils -->
+      <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]">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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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
               </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" />
               </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">
-                Studio Code
+              <span class="text-xs text-gray-600 text-center">VS Code</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">
+                Visual Studio Code
               </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">
-          <h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Centres d'intérêt</h3>
+
+      <!-- Centres d'intérêt -->
+      <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">
-            <span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">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-[#FFFAFF] px-3 py-1 rounded-full text-sm">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">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">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">DJ</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>