From 4244d966013a68e061c4e72c66e8eafc3b39729c Mon Sep 17 00:00:00 2001
From: leroy <leroyjohan3@gmail.com>
Date: Sat, 19 Apr 2025 19:43:25 +0200
Subject: [PATCH] V1.5

---
 src/app/public/pages/home/home.component.html | 110 ++++--------------
 1 file changed, 22 insertions(+), 88 deletions(-)

diff --git a/src/app/public/pages/home/home.component.html b/src/app/public/pages/home/home.component.html
index 5f6cff8..04ca118 100644
--- a/src/app/public/pages/home/home.component.html
+++ b/src/app/public/pages/home/home.component.html
@@ -36,74 +36,53 @@
         <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="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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>
@@ -115,54 +94,39 @@
         <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="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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>
@@ -174,54 +138,39 @@
         <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="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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>
@@ -233,54 +182,39 @@
         <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="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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="group relative flex flex-col items-center">
+            <div class="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>
               <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>