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>
</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>