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

V1.5

Browse Source
This commit is contained in:
leroy
2025-04-19 19:43:25 +02:00
parent 003a93c9e3
commit 4244d96601
1 changed files with 22 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,74 +36,53 @@
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Langages</h3> <h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Langages</h3>
<div class="grid grid-cols-3 gap-4"> <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"> <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>
<span class="text-xs text-gray-600 text-center">Dart</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">Java</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">JS</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">TS</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">Kotlin</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">PHP</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">Python</span> <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> </div>
@@ -115,54 +94,39 @@
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Frameworks</h3> <h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Frameworks</h3>
<div class="grid grid-cols-3 gap-4"> <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"> <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>
<span class="text-xs text-gray-600 text-center">Angular</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">Flutter</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">Symfony</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">Spring</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">Tailwind</span> <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> </div>
@@ -174,54 +138,39 @@
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Bases de données</h3> <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="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"> <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>
<span class="text-xs text-gray-600 text-center">MariaDB</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">MongoDB</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">MySQL</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">PostgreSQL</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">SQL Server</span> <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> </div>
@@ -233,54 +182,39 @@
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Outils</h3> <h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Outils</h3>
<div class="grid grid-cols-3 gap-4"> <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"> <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>
<span class="text-xs text-gray-600 text-center">Android</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">Git</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">PhpStorm</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">WebStorm</span> <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>
<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"> <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>
<span class="text-xs text-gray-600 text-center">VS Code</span> <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> </div>