diff --git a/README.md b/README.md
index 2eb365a..2df1996 100644
--- a/README.md
+++ b/README.md
@@ -1,59 +1,14 @@
-# ENIAngular
+# 🌐 Portfolio - Johan Leroy
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.1.
+Bienvenue dans le dépôt de mon portfolio personnel : [johanleroy.fr](https://johanleroy.fr)  
+Ce site vitrine a été développé pour présenter mon profil, mes projets, et offrir un moyen simple de me contacter.
 
-## Development server
+## ✨ Stack Technique
 
-To start a local development server, run:
-
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the project run:
-
-```bash
-ng build
-```
-
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- **Framework** : [Angular 19](https://angular.io/)
+- **Style** : [TailwindCSS](https://tailwindcss.com/)
+- **Déploiement** : hébergé sur [johanleroy.fr](https://johanleroy.fr)
+- **Autres** :
+  - Responsive Design
+  - SEO Friendly (balises meta, titles dynamiques, etc.)
+  - Dark Mode 🌒 (si activé)
diff --git a/public/img/icon/C.png b/public/img/icon/C.png
new file mode 100644
index 0000000..efbd0dd
Binary files /dev/null and b/public/img/icon/C.png differ
diff --git a/public/img/icon/CPP.png b/public/img/icon/CPP.png
new file mode 100644
index 0000000..59e7c2c
Binary files /dev/null and b/public/img/icon/CPP.png differ
diff --git a/public/img/icon/FastAPI.png b/public/img/icon/FastAPI.png
new file mode 100644
index 0000000..28a3b6d
Binary files /dev/null and b/public/img/icon/FastAPI.png differ
diff --git a/public/img/icon/SQL-Server.png b/public/img/icon/SQL-Server.png
index fed9cdd..cc7e128 100644
Binary files a/public/img/icon/SQL-Server.png and b/public/img/icon/SQL-Server.png differ
diff --git a/public/img/icon/SQLite.png b/public/img/icon/SQLite.png
new file mode 100644
index 0000000..b09c94d
Binary files /dev/null and b/public/img/icon/SQLite.png differ
diff --git a/public/img/icon/angular.png b/public/img/icon/angular.png
index 1b52700..1721f39 100644
Binary files a/public/img/icon/angular.png and b/public/img/icon/angular.png differ
diff --git a/public/img/icon/bootstrap.png b/public/img/icon/bootstrap.png
new file mode 100644
index 0000000..8cf8101
Binary files /dev/null and b/public/img/icon/bootstrap.png differ
diff --git a/public/img/icon/expressjs.png b/public/img/icon/expressjs.png
new file mode 100644
index 0000000..b0441f5
Binary files /dev/null and b/public/img/icon/expressjs.png differ
diff --git a/public/img/icon/flutter.png b/public/img/icon/flutter.png
index 4892803..3c91c97 100644
Binary files a/public/img/icon/flutter.png and b/public/img/icon/flutter.png differ
diff --git a/public/img/icon/kotlin.png b/public/img/icon/kotlin.png
index beb83ad..70559e8 100644
Binary files a/public/img/icon/kotlin.png and b/public/img/icon/kotlin.png differ
diff --git a/public/img/icon/phpstorm.png b/public/img/icon/phpstorm.png
index 00cce71..b10726d 100644
Binary files a/public/img/icon/phpstorm.png and b/public/img/icon/phpstorm.png differ
diff --git a/public/img/icon/sf.png b/public/img/icon/sf.png
index 70ec254..61d56e1 100644
Binary files a/public/img/icon/sf.png and b/public/img/icon/sf.png differ
diff --git a/public/img/icon/spring.png b/public/img/icon/spring.png
index f6e482f..a884acf 100644
Binary files a/public/img/icon/spring.png and b/public/img/icon/spring.png differ
diff --git a/public/img/icon/tailwind.png b/public/img/icon/tailwind.png
index bbbc39d..a7e02ff 100644
Binary files a/public/img/icon/tailwind.png and b/public/img/icon/tailwind.png differ
diff --git a/public/src/assets/cv.pdf b/public/src/assets/cv.pdf
index 31638e1..842aa64 100644
Binary files a/public/src/assets/cv.pdf and b/public/src/assets/cv.pdf differ
diff --git a/src/app/_models/particule.ts b/src/app/_models/particule.ts
new file mode 100644
index 0000000..6befeae
--- /dev/null
+++ b/src/app/_models/particule.ts
@@ -0,0 +1,10 @@
+export interface Particle {
+  id: number;
+  size: number;
+  x: number;
+  y: number;
+  opacity: number;
+  rotation: number;
+  speed: number;
+  element: HTMLDivElement;
+}
diff --git a/src/app/public/pages/experience/experience.component.html b/src/app/public/pages/experience/experience.component.html
index f404d78..8ecc9b9 100644
--- a/src/app/public/pages/experience/experience.component.html
+++ b/src/app/public/pages/experience/experience.component.html
@@ -1,184 +1,184 @@
 <!-- Section Expérience Professionnelle -->
-<section id="experience" class="py-20 bg-gradient-to-b from-[#FFFAFF] to-[#F8F9FA]">
+<section id="experience" class="py-20">
   <div class="container mx-auto px-4">
     <!-- En-tête de la section -->
     <div class="text-center mb-16">
-      <h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mon Expérience Professionnelle</h2>
-      <div class="w-24 h-1 bg-[#D8315B] mx-auto"></div>
-      <p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">Mon parcours professionnel dans le développement informatique et les technologies.</p>
+      <h2 class="text-4xl font-bold text-primary-blue dark:text-primary-light mb-4">Mon Expérience Professionnelle</h2>
+      <div class="w-24 h-1 bg-primary-accent mx-auto"></div>
+      <p class="mt-6 text-lg text-primary-dark dark:text-primary-white max-w-2xl mx-auto">Mon parcours professionnel dans le développement informatique et les technologies.</p>
     </div>
 
     <!-- Carte d'expérience 1 -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
+    <div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
       <div class="flex flex-col md:flex-row">
         <!-- Logo entreprise ou illustration -->
-        <div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
+        <div class="bg-primary-blue dark:bg-primary-light text-primary-white w-full md:w-1/4 p-6 flex items-center justify-center">
           <div class="text-center">
             <div class="w-24 h-24 mx-auto mb-4">
               <img src="img/company/almeria.png" alt="Almeria" class="w-full h-full" />
             </div>
             <h3 class="text-xl font-bold">Développeur</h3>
-            <p class="text-[#3E92CC] font-medium">Depuis 2023</p>
+            <p class="text-primary-light dark:text-primary-blue font-medium">Depuis 2023</p>
           </div>
         </div>
         <!-- Contenu -->
         <div class="w-full md:w-3/4 p-6 md:p-8">
           <div class="flex justify-between items-start mb-4">
-            <h3 class="text-2xl font-bold text-[#0A2463]">Almeria</h3>
-            <span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
+            <h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Almeria</h3>
+            <span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
           </div>
-          <p class="text-gray-600 mb-6">Conception et développement d'applications web et de logiciels d'intégration ERP.</p>
-          <h4 class="font-semibold text-[#0A2463] mb-3">Missions principales:</h4>
+          <p class="text-primary-dark dark:text-primary-white mb-6">Conception et développement d'applications web et de logiciels d'intégration ERP.</p>
+          <h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
           <ul class="space-y-2 mb-6">
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Analyse, conception et développement d'applications web</span>
+              <span class="text-black dark:text-white">Analyse, conception et développement d'applications web</span>
             </li>
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Création de logiciels d'intégration ERP</span>
+              <span class="text-black dark:text-white">Création de logiciels d'intégration ERP</span>
             </li>
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Maintenance et évolution des applications existantes</span>
+              <span class="text-black dark:text-white">Maintenance et évolution des applications existantes</span>
             </li>
           </ul>
           <div class="flex flex-wrap gap-2">
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Angular</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Express JS</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">SQL server</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Angular</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Express JS</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">SQL server</span>
           </div>
         </div>
       </div>
     </div>
 
     <!-- Carte d'expérience 2 -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
+    <div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
       <div class="flex flex-col md:flex-row">
         <!-- Logo entreprise ou illustration -->
-        <div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
+        <div class="bg-primary-blue dark:bg-primary-light text-primary-white w-full md:w-1/4 p-6 flex items-center justify-center">
           <div class="text-center">
             <div class="w-32 h-32 mx-auto mb-4">
               <img src="img/company/cerema.png" alt="CEREMA" class="w-full h-full" />
             </div>
             <h3 class="text-xl font-bold">Technicien</h3>
-            <p class="text-[#3E92CC] font-medium">2021 - 2023</p>
+            <p class="text-primary-light dark:text-primary-blue font-medium">2021 - 2023</p>
           </div>
         </div>
         <!-- Contenu -->
         <div class="w-full md:w-3/4 p-6 md:p-8">
           <div class="flex justify-between items-start mb-4">
-            <h3 class="text-2xl font-bold text-[#0A2463]">CEREMA</h3>
-            <span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
+            <h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">CEREMA</h3>
+            <span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
           </div>
-          <p class="text-gray-600 mb-6">Technicien évaluation mesure trafic et mobilité, spécialisé dans l'installation de capteurs et l'analyse de données.</p>
-          <h4 class="font-semibold text-[#0A2463] mb-3">Missions principales:</h4>
+          <p class="text-primary-dark dark:text-primary-white mb-6">Technicien évaluation mesure trafic et mobilité, spécialisé dans l'installation de capteurs et l'analyse de données.</p>
+          <h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
           <ul class="space-y-2 mb-6">
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Installation de capteurs provisoires dans le secteur mobilité</span>
+              <span class="text-black dark:text-white">Installation de capteurs provisoires dans le secteur mobilité</span>
             </li>
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Optimisation des données dans l'innovation d'outils numériques</span>
+              <span class="text-black dark:text-white">Optimisation des données dans l'innovation d'outils numériques</span>
             </li>
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Analyse et traitement des données de trafic et mobilité</span>
+              <span class="text-black dark:text-white">Analyse et traitement des données de trafic et mobilité</span>
             </li>
           </ul>
           <div class="flex flex-wrap gap-2">
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Analyse de données</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">PHP</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">mariaDB</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Analyse de données</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">PHP</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">mariaDB</span>
           </div>
         </div>
       </div>
     </div>
 
     <!-- Carte d'expérience 3 -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
+    <div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
       <div class="flex flex-col md:flex-row">
         <!-- Logo entreprise ou illustration -->
-        <div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
+        <div class="bg-primary-blue dark:bg-primary-light text-primary-white w-full md:w-1/4 p-6 flex items-center justify-center">
           <div class="text-center">
             <div class="w-30 h-24 mx-auto mb-4">
               <img src="img/company/sncf.png" alt="SNCF réseau" class="w-full h-full" />
             </div>
             <h3 class="text-xl font-bold">Agent télécom</h3>
-            <p class="text-[#3E92CC] font-medium">2019 - 2021</p>
+            <p class="text-primary-light dark:text-primary-blue font-medium">2019 - 2021</p>
           </div>
         </div>
         <!-- Contenu -->
         <div class="w-full md:w-3/4 p-6 md:p-8">
           <div class="flex justify-between items-start mb-4">
-            <h3 class="text-2xl font-bold text-[#0A2463]">RESEAU SNCF</h3>
-            <span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
+            <h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">RESEAU SNCF</h3>
+            <span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
           </div>
-          <p class="text-gray-600 mb-6">Agent télécom chargé de la maintenance des équipements de sonorisation, d'affichage et de téléphonie sur le réseau ferroviaire.</p>
-          <h4 class="font-semibold text-[#0A2463] mb-3">Missions principales:</h4>
+          <p class="text-primary-dark dark:text-primary-white mb-6">Agent télécom chargé de la maintenance des équipements de sonorisation, d'affichage et de téléphonie sur le réseau ferroviaire.</p>
+          <h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
           <ul class="space-y-2 mb-6">
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Maintenance préventive et corrective des équipements</span>
+              <span class="text-black dark:text-white">Maintenance préventive et corrective des équipements</span>
             </li>
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Installation et réparation des systèmes d'affichage en gare</span>
+              <span class="text-black dark:text-white">Installation et réparation des systèmes d'affichage en gare</span>
             </li>
             <li class="flex items-start">
-              <svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span>Gestion des équipements téléphoniques sur les voies ferrées</span>
+              <span class="text-black dark:text-white">Gestion des équipements téléphoniques sur les voies ferrées</span>
             </li>
           </ul>
           <div class="flex flex-wrap gap-2">
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Télécommunications</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Maintenance</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Équipements audio</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Affichage dynamique</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Télécommunications</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Maintenance</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Équipements audio</span>
+            <span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Affichage dynamique</span>
           </div>
         </div>
       </div>
     </div>
 
     <!-- Carte d'expérience 4 -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
+    <div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
       <div class="flex flex-col md:flex-row">
         <!-- Logo entreprise ou illustration -->
-        <div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
+        <div class="bg-primary-blue dark:bg-primary-light text-primary-white w-full md:w-1/4 p-6 flex items-center justify-center">
           <div class="text-center">
             <div class="w-40 h-12 mx-auto mb-4">
               <img src="img/company/novoferm.png" alt="Novoferm" class="w-full h-full" />
             </div>
             <h3 class="text-xl font-bold">Stage développeur</h3>
-            <p class="text-[#3E92CC] font-medium">2019</p>
+            <p class="text-primary-light dark:text-primary-blue font-medium">2019</p>
           </div>
         </div>
         <!-- Contenu -->
         <div class="w-full md:w-3/4 p-6 md:p-8">
           <div class="flex justify-between items-start mb-4">
-            <h3 class="text-2xl font-bold text-[#0A2463]">Novoferm</h3>
-            <span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">7 semaines</span>
+            <h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Novoferm</h3>
+            <span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">7 semaines</span>
           </div>
-          <p class="text-gray-600 mb-6">
+          <p class="text-primary-dark dark:text-primary-white mb-6">
             Stage de développement d'application web qui permet de récupérer des fichiers stockés dans SharePoint.
             Système et réseau, réparation et configuration de PC, imprimante et téléphone.</p>
         </div>
@@ -186,25 +186,25 @@
     </div>
 
     <!-- Carte d'expérience 5 -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
+    <div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
       <div class="flex flex-col md:flex-row">
         <!-- Logo entreprise ou illustration -->
-        <div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
+        <div class="bg-primary-blue dark:bg-primary-light text-primary-white text-white w-full md:w-1/4 p-6 flex items-center justify-center">
           <div class="text-center">
             <div class="w-30 h-16 mx-auto mb-4">
               <img src="img/company/pivotpoint.png" alt="Pivot Point" class="w-full h-full" />
             </div>
             <h3 class="text-xl font-bold">Stage développeur</h3>
-            <p class="text-[#3E92CC] font-medium">2018</p>
+            <p class="text-primary-light dark:text-primary-blue font-medium">2018</p>
           </div>
         </div>
         <!-- Contenu -->
         <div class="w-full md:w-3/4 p-6 md:p-8">
           <div class="flex justify-between items-start mb-4">
-            <h3 class="text-2xl font-bold text-[#0A2463]">Pivot Point</h3>
-            <span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">1 semaine</span>
+            <h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Pivot Point</h3>
+            <span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">1 semaine</span>
           </div>
-          <p class="text-gray-600 mb-6">
+          <p class="text-primary-dark dark:text-primary-white mb-6">
             Stage de développement d'un site internet en php
           </p>
         </div>
@@ -212,25 +212,25 @@
     </div>
 
     <!-- Carte d'expérience 6 -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
+    <div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
       <div class="flex flex-col md:flex-row">
         <!-- Logo entreprise ou illustration -->
-        <div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
+        <div class="bg-primary-blue dark:bg-primary-light text-primary-white text-white w-full md:w-1/4 p-6 flex items-center justify-center">
           <div class="text-center">
             <div class="w-40 h-6 mx-auto mb-4">
               <img src="img/company/actemium.png" alt="Pivot Point" class="w-full h-full" />
             </div>
             <h3 class="text-xl font-bold">Stage développeur</h3>
-            <p class="text-[#3E92CC] font-medium">2018</p>
+            <p class="text-primary-light dark:text-primary-blue font-medium">2018</p>
           </div>
         </div>
         <!-- Contenu -->
         <div class="w-full md:w-3/4 p-6 md:p-8">
           <div class="flex justify-between items-start mb-4">
-            <h3 class="text-2xl font-bold text-[#0A2463]">Actemium</h3>
-            <span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">1 semaine</span>
+            <h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Actemium</h3>
+            <span class="bg-primary-light dark:bg-primary-blue text-primary-white text-white px-3 py-1 rounded-full text-sm">1 semaine</span>
           </div>
-          <p class="text-gray-600 mb-6">
+          <p class="text-primary-dark dark:text-primary-white mb-6">
             Stage de développement application windows d'automatisation
           </p>
         </div>
@@ -239,12 +239,12 @@
 
     <!-- Compétences professionnelles -->
     <div class="mt-20">
-      <h3 class="text-2xl font-bold text-[#0A2463] mb-10 text-center">Compétences professionnelles</h3>
+      <h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light mb-10 text-center">Compétences professionnelles</h3>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
         <!-- Compétences techniques -->
-        <div class="bg-white p-6 rounded-lg shadow-md">
-          <h4 class="text-xl font-semibold text-[#0A2463] mb-6 flex items-center">
-            <svg class="w-6 h-6 mr-2 text-[#D8315B]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <div class="bg-white dark:bg-black p-6 rounded-lg shadow-md border-2 border-primary-blue dark:border-primary-light">
+          <h4 class="text-xl font-semibold text-primary-blue dark:text-primary-light mb-6 flex items-center">
+            <svg class="w-6 h-6 mr-2 text-primary-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
             </svg>
@@ -252,60 +252,60 @@
           </h4>
           <div class="grid grid-cols-2 gap-x-4 gap-y-6">
             <div class="flex items-center">
-              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Développement Frontend</span>
+              <span class="text-primary-dark dark:text-primary-white">Développement Frontend</span>
             </div>
             <div class="flex items-center">
-              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Développement Backend</span>
+              <span class="text-primary-dark dark:text-primary-white">Développement Backend</span>
             </div>
             <div class="flex items-center">
-              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Analyse et traitement de données</span>
+              <span class="text-primary-dark dark:text-primary-white">Analyse et traitement de données</span>
             </div>
             <div class="flex items-center">
-              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Mise en production</span>
+              <span class="text-primary-dark dark:text-primary-white">Mise en production</span>
             </div>
             <div class="flex items-center">
-              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Analyse de base de données</span>
+              <span class="text-primary-dark dark:text-primary-white">Analyse de base de données</span>
             </div>
             <div class="flex items-center">
-              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Modélisation UML</span>
+              <span class="text-primary-dark dark:text-primary-white">Modélisation UML</span>
             </div>
             <div class="flex items-center">
-              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Maquettage</span>
+              <span class="text-primary-dark dark:text-primary-white">Maquettage</span>
             </div>
             <div class="flex items-center">
-              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Sécurité</span>
+              <span class="text-primary-dark dark:text-primary-white">Sécurité</span>
             </div>
           </div>
         </div>
 
         <!-- Compétences transversales -->
-        <div class="bg-white p-6 rounded-lg shadow-md">
-          <h4 class="text-xl font-semibold text-[#0A2463] mb-6 flex items-center">
-            <svg class="w-6 h-6 mr-2 text-[#D8315B]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <div class="bg-white dark:bg-black p-6 rounded-lg shadow-md border-2 border-primary-blue dark:border-primary-light">
+          <h4 class="text-xl font-semibold text-primary-blue dark:text-primary-light mb-6 flex items-center">
+            <svg class="w-6 h-6 mr-2 text-primary-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
             </svg>
             Compétences transversales
@@ -315,49 +315,49 @@
               <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Gestion de projet</span>
+              <span class="text-primary-dark dark:text-primary-white">Gestion de projet</span>
             </div>
             <div class="flex items-center">
               <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Travail en équipe</span>
+              <span class="text-primary-dark dark:text-primary-white">Travail en équipe</span>
             </div>
             <div class="flex items-center">
               <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Analyse de projet</span>
+              <span class="text-primary-dark dark:text-primary-white">Analyse de projet</span>
             </div>
             <div class="flex items-center">
               <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Communication</span>
+              <span class="text-primary-dark dark:text-primary-white">Communication</span>
             </div>
             <div class="flex items-center">
               <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Autonomie</span>
+              <span class="text-primary-dark dark:text-primary-white">Autonomie</span>
             </div>
             <div class="flex items-center">
               <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Organisation</span>
+              <span class="text-primary-dark dark:text-primary-white">Organisation</span>
             </div>
             <div class="flex items-center">
               <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Adaptation</span>
+              <span class="text-primary-dark dark:text-primary-white">Adaptation</span>
             </div>
             <div class="flex items-center">
               <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
               </svg>
-              <span class="text-gray-700">Veille technologique</span>
+              <span class="text-primary-dark dark:text-primary-white">Veille technologique</span>
             </div>
           </div>
         </div>
diff --git a/src/app/public/pages/formations/formations.component.html b/src/app/public/pages/formations/formations.component.html
index 3bb142b..2c022c5 100644
--- a/src/app/public/pages/formations/formations.component.html
+++ b/src/app/public/pages/formations/formations.component.html
@@ -1,51 +1,51 @@
 <!-- Section Formations -->
-<section id="formations" class="py-20 bg-[#FFFAFF]">
+<section id="formations" class="py-20">
   <div class="container mx-auto px-4">
     <!-- En-tête de la section -->
     <div class="text-center mb-16">
-      <h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mes Formations</h2>
-      <div class="w-24 h-1 bg-[#D8315B] mx-auto"></div>
-      <p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">Mon parcours d'étude dans le domaine du développement et des systèmes numériques.</p>
+      <h2 class="text-4xl font-bold text-primary-blue dark:text-primary-light mb-4">Mes Formations</h2>
+      <div class="w-24 h-1 bg-primary-accent mx-auto"></div>
+      <p class="mt-6 text-lg text-primary-dark dark:text-primary-white max-w-2xl mx-auto">Mon parcours d'étude dans le domaine du développement et des systèmes numériques.</p>
     </div>
     <!-- Timeline des formations -->
     <div class="relative">
       <!-- Ligne verticale centrale -->
-      <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-[#3E92CC]"></div>
+      <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-primary-light"></div>
 
       <!-- Formation 1 -->
       <div class="mb-16 md:mb-0 relative">
         <div class="flex flex-col md:flex-row items-center">
           <!-- Date pour mobile -->
-          <div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
+          <div class="md:hidden mb-4 bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
             Depuis 2023
           </div>
           <!-- Contenu gauche -->
           <div class="md:w-1/2 md:pr-12 md:text-right">
             <div class="hidden md:block">
-              <h3 class="text-xl font-bold text-[#0A2463] mb-2">Concepteur Développeur d'Application</h3>
-              <p class="text-gray-500 hover:text-gray-400 underline mb-2">
+              <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">Concepteur Développeur d'Application</h3>
+              <p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2">
                 <a href="https://www.eni-ecole.fr" target="_blank">Campus ENI Nantes</a>
               </p>
-              <p class="text-gray-600">
+              <p class="text-primary-dark dark:text-primary-white">
                 Formation sur la conception et le développement d'applications web et mobiles. Acquisition des compétences en architecture logicielle et gestion de projets informatiques.
               </p>
             </div>
           </div>
           <!-- Indicateur central -->
-          <div class="md:w-8 md:h-8 bg-[#D8315B] rounded-full border-4 border-[#FFFAFF] absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
+          <div class="md:w-8 md:h-8 bg-primary-accent rounded-full border-4 border-primary-white dark:border-primary-dark absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
           <!-- Date (desktop) -->
           <div class="hidden md:flex md:w-1/2 md:pl-12 items-center">
-            <div class="bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
+            <div class="bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
               Depuis 2023
             </div>
           </div>
           <!-- Contenu pour mobile -->
           <div class="md:hidden">
-            <h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">Concepteur Développeur d'Application</h3>
-            <p class="text-gray-500 mb-2 text-center underline">
+            <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 text-center">Concepteur Développeur d'Application</h3>
+            <p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2 text-center">
               <a href="https://www.eni-ecole.fr" target="_blank">Campus ENI Nantes</a>
             </p>
-            <p class="text-gray-600">Formation sur la conception et le développement d'applications web et mobiles. Acquisition des compétences en architecture logicielle et gestion de projets informatiques.</p>
+            <p class="text-primary-dark dark:text-primary-white">Formation sur la conception et le développement d'applications web et mobiles. Acquisition des compétences en architecture logicielle et gestion de projets informatiques.</p>
           </div>
         </div>
       </div>
@@ -54,36 +54,36 @@
       <div class="mb-16 md:mb-0 relative md:mt-32">
         <div class="flex flex-col md:flex-row items-center">
           <!-- Date pour mobile -->
-          <div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
+          <div class="md:hidden mb-4 bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
             2021 - 2023
           </div>
           <!-- Date (desktop) -->
           <div class="hidden md:flex md:w-1/2 md:pr-12 md:justify-end">
-            <div class="bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
+            <div class="bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
               2021 - 2023
             </div>
           </div>
           <!-- Indicateur central -->
-          <div class="md:w-8 md:h-8 bg-[#D8315B] rounded-full border-4 border-[#FFFAFF] absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
+          <div class="md:w-8 md:h-8 bg-primary-accent rounded-full border-4 border-primary-white dark:border-primary-dark absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
           <!-- Contenu droite -->
           <div class="md:w-1/2 md:pl-12">
             <div class="hidden md:block">
-              <h3 class="text-xl font-bold text-[#0A2463] mb-2">BTS Systèmes Numériques</h3>
-              <p class="text-gray-500 hover:text-gray-400 underline mb-2">
+              <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">BTS Systèmes Numériques</h3>
+              <p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2">
                 <a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
               </p>
-              <p class="text-gray-600">
+              <p class="text-primary-dark dark:text-primary-white">
                 Formation technique supérieur sur les systèmes électroniques et informatiques, avec une spécialisation dans l'informatique industrielle et les réseaux.
               </p>
             </div>
           </div>
           <!-- Contenu pour mobile -->
           <div class="md:hidden">
-            <h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">BTS Systèmes Numériques</h3>
-            <p class="text-gray-500 hover:text-gray-400 underline mb-2 text-center">
+            <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 text-center">BTS Systèmes Numériques</h3>
+            <p class="text-primary-dark dark:text-primary-white underline mb-2 text-center">
               <a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
             </p>
-            <p class="text-gray-600">
+            <p class="text-primary-dark dark:text-primary-white">
               Formation technique supérieur sur les systèmes électroniques et informatiques, avec une spécialisation dans l'informatique industrielle et les réseaux.
             </p>
           </div>
@@ -94,36 +94,36 @@
       <div class="mb-16 md:mb-0 relative md:mt-32">
         <div class="flex flex-col md:flex-row items-center">
           <!-- Date pour mobile -->
-          <div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
+          <div class="md:hidden mb-4 bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
             2018 - 2021
           </div>
           <!-- Contenu gauche -->
           <div class="md:w-1/2 md:pr-12 md:text-right">
             <div class="hidden md:block">
-              <h3 class="text-xl font-bold text-[#0A2463] mb-2">BAC PRO Systèmes Numériques</h3>
-              <p class="text-gray-500 hover:text-gray-400 underline mb-2">
+              <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">BAC PRO Systèmes Numériques</h3>
+              <p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2">
                 <a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
               </p>
-              <p class="text-gray-600">
+              <p class="text-primary-dark dark:text-primary-white">
                 Formation aux systèmes électroniques et réseaux informatiques. Apprentissage des bases de l'installation et de la maintenance de systèmes numériques.
               </p>
             </div>
           </div>
           <!-- Indicateur central -->
-          <div class="md:w-8 md:h-8 bg-[#D8315B] rounded-full border-4 border-[#FFFAFF] absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
+          <div class="md:w-8 md:h-8 bg-primary-accent rounded-full border-4 border-primary-white dark:border-primary-dark absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
           <!-- Date (desktop) -->
           <div class="hidden md:flex md:w-1/2 md:pl-12 items-center">
-            <div class="bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
+            <div class="bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
               2018 - 2021
             </div>
           </div>
           <!-- Contenu pour mobile -->
           <div class="md:hidden">
-            <h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">BAC PRO Systèmes Numériques</h3>
-            <p class="text-gray-500 hover:text-gray-400 underline mb-2 text-center">
+            <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 text-center">BAC PRO Systèmes Numériques</h3>
+            <p class="text-primary-dark dark:text-primary-white underline mb-2 text-center">
               <a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
             </p>
-            <p class="text-gray-600">
+            <p class="text-primary-dark dark:text-primary-white">
               Formation aux systèmes électroniques et réseaux informatiques. Apprentissage des bases de l'installation et de la maintenance de systèmes numériques.
             </p>
           </div>
@@ -134,30 +134,30 @@
       <div class="mb-16 md:mb-0 relative md:mt-32">
         <div class="flex flex-col md:flex-row items-center">
           <!-- Date pour mobile -->
-          <div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
+          <div class="md:hidden mb-4 bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
             Avant 2018
           </div>
           <!-- Date (desktop) -->
           <div class="hidden md:flex md:w-1/2 md:pr-12 md:justify-end">
-            <div class="bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
+            <div class="bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
               Avant 2018
             </div>
           </div>
           <!-- Indicateur central -->
-          <div class="md:w-8 md:h-8 bg-[#D8315B] rounded-full border-4 border-[#FFFAFF] absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
+          <div class="md:w-8 md:h-8 bg-primary-accent rounded-full border-4 border-primary-white dark:border-primary-dark absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
           <!-- Contenu droite -->
           <div class="md:w-1/2 md:pl-12">
             <div class="hidden md:block">
-              <h3 class="text-xl font-bold text-[#0A2463] mb-2">Diplôme National du Brevet</h3>
-              <p class="text-gray-500 hover:text-gray-400 underline mb-2">
+              <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">Diplôme National du Brevet</h3>
+              <p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2">
                 <a href="https://www.ensemble-scolaire-saint-pere.fr" target="_blank">Ensemble scolaire Saint Père En Retz</a>
               </p>
             </div>
           </div>
           <!-- Contenu pour mobile -->
           <div class="md:hidden">
-            <h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">Diplôme National du Brevet</h3>
-            <p class="text-gray-500 hover:text-gray-400 underline mb-2 text-center">
+            <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 text-center">Diplôme National du Brevet</h3>
+            <p class="text-primary-dark dark:text-primary-white underline mb-2 text-center">
               <a href="https://www.ensemble-scolaire-saint-pere.fr" target="_blank">Ensemble scolaire Saint Père En Retz</a>
             </p>
           </div>
diff --git a/src/app/public/pages/home/home.component.css b/src/app/public/pages/home/home.component.css
index e69de29..d72f5dd 100644
--- a/src/app/public/pages/home/home.component.css
+++ b/src/app/public/pages/home/home.component.css
@@ -0,0 +1,24 @@
+.profile-shadow {
+  animation: profile-glow 3s infinite alternate ease-in-out;
+}
+
+@keyframes profile-glow {
+  from { box-shadow: 0 0 15px rgba(62, 146, 204, 0.4); }
+  to { box-shadow: 0 0 40px rgba(62, 146, 204, 0.7); }
+}
+
+/* Animation du nom */
+.name-glow {
+  animation: text-glow 4s infinite alternate ease-in-out;
+}
+
+@keyframes text-glow {
+  from {
+    text-shadow: 0 0 10px rgba(62, 146, 204, 0.5);
+    transform: scale(1);
+  }
+  to {
+    text-shadow: 0 0 25px rgba(62, 146, 204, 0.8);
+    transform: scale(1.03);
+  }
+}
diff --git a/src/app/public/pages/home/home.component.html b/src/app/public/pages/home/home.component.html
index 04ca118..0859f45 100644
--- a/src/app/public/pages/home/home.component.html
+++ b/src/app/public/pages/home/home.component.html
@@ -1,20 +1,24 @@
-<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-[#181818] to-[#0A2463]">
-  <div class="container mx-auto px-4">
+<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary-light to-primary-white dark:from-primary-dark dark:to-primary-blue relative overflow-hidden">
+  <!-- Animation layer - contrôlé par Angular -->
+  <div class="absolute inset-0 z-0" #particleContainer></div>
+
+  <div class="container mx-auto px-4 relative z-10">
     <div class="flex flex-col md:flex-row items-center">
       <div class="md:w-1/2 text-center md:text-left text-[#FFFAFF] mb-8 md:mb-0">
         <h1 class="text-4xl md:text-5xl font-bold mb-4">
-          <span class="text-[#3E92CC]">Johan Leroy</span>
+          <span class="text-primary-blue dark:text-primary-light inline-block transition duration-500 name-glow">Johan Leroy</span>
         </h1>
         <h2 class="text-2xl md:text-3xl mb-6">Développeur</h2>
         <p class="text-lg mb-8">Passionné par le développement d'applications et l'innovation technologique.</p>
         <div class="flex justify-center md:justify-start space-x-4">
-          <a href="src/assets/cv.pdf" target="_blank" class="bg-[#3E92CC] hover:bg-[#0A2463] text-[#FFFAFF] px-6 py-3 rounded-md transition-colors font-medium">Télcharger mon CV</a>
-          <a routerLink="/projets" class="bg-transparent border-2 border-[#3E92CC] text-[#FFFAFF] hover:bg-[#3E92CC] px-6 py-3 rounded-md transition-colors font-medium">Voir mes projets</a>
+          <a href="src/assets/cv.pdf" target="_blank" class="bg-primary-blue hover:bg-primary-dark dark:bg-primary-light dark:hover:bg-primary-blue text-primary-white px-6 py-3 rounded-md transition duration-300 transform hover:scale-105 font-medium">Télécharger mon CV</a>
+          <a routerLink="/projets" class="bg-transparent border-2 border-primary-dark dark:border-primary-light dark:text-primary-white hover:bg-primary-dark dark:hover:bg-primary-light px-6 py-3 rounded-md transition duration-300 transform hover:scale-105 font-medium">Voir mes projets</a>
         </div>
       </div>
       <div class="md:w-1/2 flex justify-center">
-        <!-- Image de profil -->
-        <div class="w-64 h-64 rounded-full overflow-hidden border-4 border-[#3E92CC] shadow-lg">
+        <!-- Image de profil avec animation -->
+        <div class="w-64 h-64 rounded-full overflow-hidden border-4 border-primary-dark dark:border-primary-light shadow-xl transition duration-300 transform hover:scale-105 profile-shadow"
+             #profileImage>
           <img
             src="img/pp.jpeg"
             alt="Johan Leroy"
@@ -23,213 +27,285 @@
         </div>
       </div>
     </div>
-  </div>
-</section>
-<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">
+    <h2 class="text-4xl font-bold text-center text-primary-blue dark:text-primary-light my-5">Mes compétences</h2>
+    <h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Technologies maîtrisées</h3>
+    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-16">
       <!-- 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="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <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-primary-blue dark:text-primary-light">Langages</h3>
           <div class="grid grid-cols-3 gap-4">
-            <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>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Java</span>
             </div>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">JS</span>
             </div>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">TS</span>
             </div>
 
             <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 class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/python.png" alt="python" class="max-w-full max-h-full opacity-75" />
               </div>
-              <span class="text-xs text-gray-600 text-center">Kotlin</span>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Python</span>
             </div>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
-
-            <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">PHP</span>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 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="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <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-primary-blue dark:text-primary-light">Frameworks</h3>
           <div class="grid grid-cols-3 gap-4">
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Angular</span>
             </div>
 
             <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 class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/expressjs.png" alt="Express" class="max-w-full max-h-full" />
               </div>
-              <span class="text-xs text-gray-600 text-center">Flutter</span>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Express JS</span>
             </div>
 
             <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 class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/spring.png" alt="spring boot" class="max-w-full max-h-full opacity-75" />
               </div>
-              <span class="text-xs text-gray-600 text-center">Symfony</span>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Spring</span>
             </div>
 
             <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>
-
-            <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Tailwind</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/bootstrap.png" alt="bootstrap" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Bootstrap</span>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 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="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <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-primary-blue dark:text-primary-light">Bases de données</h3>
           <div class="grid grid-cols-3 gap-4">
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">MariaDB</span>
             </div>
 
             <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>
-
-            <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">MySQL</span>
             </div>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/SQL-Server.png" alt="SQLserver" class="max-w-full max-h-full opacity-75" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">SQL Server</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
-
-            <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">PostgreSQL</span>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 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="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <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-primary-blue dark:text-primary-light">Outils</h3>
           <div class="grid grid-cols-3 gap-4">
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Android</span>
             </div>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Git</span>
             </div>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">PhpStorm</span>
             </div>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">WebStorm</span>
             </div>
 
             <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 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                 <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>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">VS Code</span>
             </div>
           </div>
         </div>
       </div>
 
       <!-- 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="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
         <div class="p-6">
-          <h3 class="text-xl font-semibold mb-6 text-[#0A2463]">Centres d'intérêt</h3>
+          <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Centres d'intérêt</h3>
           <div class="flex flex-wrap gap-2">
-            <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>
+            <span class="bg-primary-accent 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-primary-accent 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-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">DJ</span>
+            <span class="bg-primary-accent 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>
+
+    <!-- Technologies débutantes -->
+    <h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Technologies en apprentissage</h3>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Langages débutants -->
+      <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
+        <div class="p-6">
+          <h3 class="text-xl font-semibold mb-6 text-primary-light dark:text-primary-white">Langages</h3>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/dart.png" alt="dart" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">Dart</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/kotlin.png" alt="kotlin" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">Kotlin</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/C.png" alt="C#" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">C#</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/CPP.png" alt="C++" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">C++</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Frameworks débutants -->
+      <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
+        <div class="p-6">
+          <h3 class="text-xl font-semibold mb-6 text-[#3E92CC]">Frameworks</h3>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/sf.png" alt="Symfony" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">Symfony</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/flutter.png" alt="flutter" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">Flutter</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/FastAPI.png" alt="FastAPI" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">FastAPI</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bases de données débutantes -->
+      <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
+        <div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
+        <div class="p-6">
+          <h3 class="text-xl font-semibold mb-6 text-[#3E92CC]">Bases de données</h3>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/SQLite.png" alt="SQLite" class="max-w-full max-h-full opacity-75" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">SQLite</span>
+            </div>
+
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/mongo.png" alt="mongoDB" class="max-w-full max-h-full opacity-75" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">MongoDB</span>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/app/public/pages/home/home.component.ts b/src/app/public/pages/home/home.component.ts
index ef26450..c86a38f 100644
--- a/src/app/public/pages/home/home.component.ts
+++ b/src/app/public/pages/home/home.component.ts
@@ -1,6 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {SeoService} from '../../../_services/seo.service';
+import {Particle} from '../../../_models/particule';
 
 @Component({
   selector: 'app-home',
@@ -10,9 +11,20 @@ import {SeoService} from '../../../_services/seo.service';
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
 
-  constructor(private seoService: SeoService) { }
+  @ViewChild('particleContainer') particleContainer!: ElementRef;
+  @ViewChild('profileImage') profileImage!: ElementRef;
+
+  private particles: Particle[] = [];
+  private particleCount = 20;
+  private animationFrameId: number | null = null;
+  private mouseX = 0;
+  private mouseY = 0;
+  private windowWidth = 0;
+  private windowHeight = 0;
+
+  constructor(private seoService: SeoService, private ngZone: NgZone) { }
 
   ngOnInit(): void {
     this.seoService.updateSEOMetaTags({
@@ -22,6 +34,127 @@ export class HomeComponent implements OnInit {
       ogImage: 'https://johanleroy.fr/favicon.ico'
     });
     this.seoService.createCanonicalLink();
+    this.windowWidth = window.innerWidth;
+    this.windowHeight = window.innerHeight;
+  }
+
+  ngAfterViewInit(): void {
+    // Exécuter les animations en dehors de la zone Angular pour de meilleures performances
+    this.ngZone.runOutsideAngular(() => {
+      this.createParticles();
+      this.setupMouseTracking();
+      this.startAnimationLoop();
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+    }
+    window.removeEventListener('mousemove', this.handleMouseMove);
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  private createParticles(): void {
+    const container = this.particleContainer.nativeElement as HTMLElement;
+    container.innerHTML = '';
+
+    for (let i = 0; i < this.particleCount; i++) {
+      const size = Math.random() * 60 + 20; // Entre 20px et 80px
+      const x = Math.random() * 100; // Position en %
+      const y = Math.random() * 100 + 50; // Position en %
+      const opacity = Math.random() * 0.3 + 0.1; // Opacité entre 0.1 et 0.4
+      const speed = Math.random() * 0.5 + 0.2; // Vitesse variable
+
+      const particleEl = document.createElement('div');
+      particleEl.style.position = 'absolute';
+      particleEl.style.width = `${size}px`;
+      particleEl.style.height = `${size}px`;
+      particleEl.style.borderRadius = '50%';
+      particleEl.style.background = `rgba(62, 146, 204, ${opacity})`;
+      particleEl.style.left = `${x}%`;
+      particleEl.style.top = `${y}%`;
+      particleEl.style.transition = 'transform 0.3s ease-out';
+      particleEl.style.pointerEvents = 'none';
+      particleEl.style.backdropFilter = 'blur(1px)'; // Effet de flou léger
+
+      container.appendChild(particleEl);
+
+      this.particles.push({
+        id: i,
+        size,
+        x,
+        y,
+        opacity,
+        rotation: Math.random() * 360,
+        speed,
+        element: particleEl
+      });
+    }
+  }
+
+  private handleMouseMove = (e: MouseEvent): void => {
+    this.mouseX = e.clientX;
+    this.mouseY = e.clientY;
+  }
+
+  private handleResize = (): void => {
+    this.windowWidth = window.innerWidth;
+    this.windowHeight = window.innerHeight;
+  }
+
+  private setupMouseTracking(): void {
+    window.addEventListener('mousemove', this.handleMouseMove);
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  private startAnimationLoop(): void {
+    let lastTimestamp = 0;
+
+    const animate = (timestamp: number): void => {
+      const deltaTime = lastTimestamp ? timestamp - lastTimestamp : 16;
+      lastTimestamp = timestamp;
+
+      // Calculer l'effet parallaxe basé sur la position de la souris
+      const centerX = this.windowWidth / 2;
+      const centerY = this.windowHeight / 2;
+      const moveX = (this.mouseX - centerX) / centerX; // -1 à 1
+      const moveY = (this.mouseY - centerY) / centerY; // -1 à 1
+
+      // Animer l'image de profil - effet de parallaxe
+      if (this.profileImage?.nativeElement) {
+        const el = this.profileImage.nativeElement;
+        el.style.transform = `translate(${moveX * 8}px, ${moveY * 8}px)`;
+      }
+
+      // Animer les particules
+      this.particles.forEach(particle => {
+        // Mouvement montant avec léger déplacement latéral
+        particle.y -= particle.speed * (deltaTime / 16);
+        particle.x += Math.sin(timestamp / 2000 + particle.id) * 0.03 * (deltaTime / 16);
+        particle.rotation += 0.1 * (deltaTime / 16);
+
+        // Réinitialiser les particules qui sortent de l'écran
+        if (particle.y < -10) {
+          particle.y = 110;
+          particle.x = Math.random() * 100;
+          particle.opacity = Math.random() * 0.3 + 0.1;
+        }
+
+        // Effet parallaxe sur les particules
+        const parallaxX = moveX * (particle.size / 40) * 10;
+        const parallaxY = moveY * (particle.size / 40) * 10;
+
+        // Appliquer les transformations
+        particle.element.style.top = `${particle.y}%`;
+        particle.element.style.left = `${particle.x}%`;
+        particle.element.style.transform = `translate(${parallaxX}px, ${parallaxY}px) rotate(${particle.rotation}deg)`;
+      });
+
+      this.animationFrameId = requestAnimationFrame(animate);
+    };
+
+    this.animationFrameId = requestAnimationFrame(animate);
   }
 
 }
diff --git a/src/app/public/pages/projets/projets.component.html b/src/app/public/pages/projets/projets.component.html
index 956ce26..2f2fd7d 100644
--- a/src/app/public/pages/projets/projets.component.html
+++ b/src/app/public/pages/projets/projets.component.html
@@ -1,67 +1,76 @@
-<!-- Section Projets -->
-<section id="projets" class="py-20 bg-[#FFFAFF]">
+<section id="projets" class="py-20">
   <div class="container mx-auto px-4">
     <!-- En-tête de la section -->
     <div class="text-center mb-16">
-      <h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mes Projets</h2>
-      <div class="w-24 h-1 bg-[#D8315B] mx-auto"></div>
-      <p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">
+      <h2 class="text-4xl font-bold text-primary-blue dark:text-primary-light mb-4">Mes Projets</h2>
+      <div class="w-24 h-1 bg-primary-accent mx-auto"></div>
+      <p class="mt-6 text-lg text-primary-dark dark:text-primary-white max-w-2xl mx-auto">
         Une sélection de mes réalisations personnelles dans le domaine du développement.
         Seuls les projets en production sont mis en avant.
       </p>
     </div>
-
-    <!-- Grille de projets -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 
       <!-- Projet 1 -->
-      <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-        <div class="h-48 bg-white relative">
-          <img src="img/projet/techos.png" alt="Techos" class="w-full h-full object-cover" />
-          <div class="absolute top-4 right-4 bg-[#D8315B] text-white py-1 px-3 rounded-full text-sm font-medium">
+      <a href="https://techos-asso.fr" target="_blank" rel="noopener noreferrer"
+         class="group block bg-white dark:bg-black border-2 border-primary-blue dark:border-primary-light rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-blue">
+
+        <div class="relative h-48 bg-white">
+          <img src="img/projet/techos.png" alt="Site de l'association Techos"
+               class="w-full h-full object-cover" />
+          <div class="absolute top-4 right-4 bg-primary-accent text-white py-1 px-3 rounded-full text-sm font-medium">
             Web
           </div>
         </div>
+
         <div class="p-6">
-          <h3 class="text-xl font-bold text-[#0A2463] mb-2">Site vitrine de l'association Techos</h3>
-          <p class="text-gray-600 mb-4">
+          <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 group-hover:underline">
+            Site vitrine de l'association Techos
+          </h3>
+          <p class="text-primary-dark dark:text-primary-white mb-4">
             Développement d'un site web vitrine complète pour l'association Techos.
           </p>
           <div class="flex flex-wrap gap-2 mb-4">
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Angular</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Express JS</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">mariaDB</span>
+            <span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Angular</span>
+            <span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Express JS</span>
+            <span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">mariaDB</span>
           </div>
-          <a href="https://techos-asso.fr" target="_blank" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
+          <span class="inline-block text-sm text-primary-blue dark:text-primary-light font-medium underline group-hover:no-underline">
             Voir le projet
-          </a>
+          </span>
         </div>
-      </div>
+      </a>
 
       <!-- Projet 2 -->
-      <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-        <div class="h-48 bg-[#3E92CC] relative">
-          <img src="img/projet/lplv.png" alt="Projet 2" class="w-full h-full object-cover" />
-          <div class="absolute top-4 right-4 bg-[#D8315B] text-white py-1 px-3 rounded-full text-sm font-medium">
+      <a href="https://libertypourlavie.fr" target="_blank" rel="noopener noreferrer"
+         class="group block bg-white dark:bg-black border-2 border-primary-blue dark:border-primary-light rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-blue">
+
+        <div class="relative h-48">
+          <img src="img/projet/lplv.png" alt="Site de l'association Liberty Pour La Vie"
+               class="w-full h-full object-cover" />
+          <div class="absolute top-4 right-4 bg-primary-accent text-white py-1 px-3 rounded-full text-sm font-medium">
             Web
           </div>
         </div>
+
         <div class="p-6">
-          <h3 class="text-xl font-bold text-[#0A2463] mb-2">Site web de l'association Liberty Pour La Vie</h3>
-          <p class="text-gray-600 mb-4">
-            Développement d'un site web complète pour l'association Liberty Pour La Vie.
+          <h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 group-hover:underline">
+            Site web de l'association Liberty Pour La Vie
+          </h3>
+          <p class="text-primary-dark dark:text-primary-white mb-4">
+            Développement d'un site web complet pour l'association Liberty Pour La Vie.
           </p>
           <div class="flex flex-wrap gap-2 mb-4">
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Java Spring Boot</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Thymeleaf</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Bootstrap</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">mariaDB</span>
+            <span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Java Spring Boot</span>
+            <span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Thymeleaf</span>
+            <span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Bootstrap</span>
+            <span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">mariaDB</span>
           </div>
-          <a href="https://libertypourlavie.fr" target="_blank" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
+          <span class="inline-block text-sm text-primary-blue dark:text-primary-light font-medium underline group-hover:no-underline">
             Voir le projet
-          </a>
+          </span>
         </div>
-      </div>
+      </a>
 
     </div>
   </div>
diff --git a/src/app/public/public-layout/public-layout.component.html b/src/app/public/public-layout/public-layout.component.html
index 15689e1..2407fd3 100644
--- a/src/app/public/public-layout/public-layout.component.html
+++ b/src/app/public/public-layout/public-layout.component.html
@@ -1,26 +1,50 @@
-<div class="min-h-screen bg-[#FFFAFF]">
-  <header class="bg-[#181818] text-[#FFFAFF] shadow-lg fixed w-full z-10">
+<div class="min-h-screen bg-primary-white text-primary-white  dark:bg-primary-dark dark:text-primary-white transition-colors duration-300">
+  <header class="bg-primary-light dark:bg-primary-blue shadow-lg fixed w-full z-100">
     <div class="container mx-auto px-4 py-4">
       <div class="flex justify-between items-center">
         <!-- Logo / Nom -->
         <div class="text-xl font-bold">
           <a routerLink="/" class="flex items-center">
-            <span class="text-[#3E92CC]">Johan</span>
+            <span class="text-primary-dark dark:text-primary-light">Johan</span>
             <span class="ml-1">Leroy</span>
           </a>
         </div>
 
         <!-- Navigation -->
-        <nav class="hidden md:flex space-x-8">
-          <a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
-          <a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</a>
-          <a routerLink="/experience" class="hover:text-[#3E92CC] transition-colors">Mon expérience professionnelle</a>
-          <a routerLink="/projets" class="hover:text-[#3E92CC] transition-colors">Mes projets</a>
+        <nav class="hidden md:flex items-center space-x-8">
+          <a routerLink="/" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Accueil</a>
+          <a routerLink="/formations" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes formations</a>
+          <a routerLink="/experience" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mon expérience professionnelle</a>
+          <a routerLink="/projets" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes projets</a>
+
+          <!-- Dark Mode Toggle Button pour Desktop -->
+          <button (click)="toggleDarkMode()" class="focus:outline-none p-1 rounded-full hover:bg-gray-700 transition-colors">
+            <!-- Icône soleil (visible en mode sombre) -->
+            <svg *ngIf="isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+            <!-- Icône lune (visible en mode clair) -->
+            <svg *ngIf="!isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+            </svg>
+          </button>
         </nav>
 
-        <!-- Menu mobile -->
-        <div class="md:hidden">
-          <button (click)="toggleMobileMenu()" class="text-[#FFFAFF] focus:outline-none">
+        <div class="flex items-center md:hidden">
+          <!-- Dark Mode Toggle Button pour Mobile -->
+          <button (click)="toggleDarkMode()" class="mr-4 focus:outline-none p-1 rounded-full hover:bg-gray-700 transition-colors">
+            <!-- Icône soleil (visible en mode sombre) -->
+            <svg *ngIf="isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+            <!-- Icône lune (visible en mode clair) -->
+            <svg *ngIf="!isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+            </svg>
+          </button>
+
+          <!-- Menu mobile -->
+          <button (click)="toggleMobileMenu()" class="text-primary-white focus:outline-none">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
             </svg>
@@ -31,10 +55,10 @@
       <!-- Menu mobile déroulant -->
       <div *ngIf="mobileMenuOpen" class="md:hidden mt-4 pb-4">
         <div class="flex flex-col space-y-3">
-          <a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
-          <a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</a>
-          <a routerLink="/experience" class="hover:text-[#3E92CC] transition-colors">Mon expérience professionnelle</a>
-          <a routerLink="/projets" class="hover:text-[#3E92CC] transition-colors">Mes projets</a>
+          <a routerLink="/" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Accueil</a>
+          <a routerLink="/formations" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes formations</a>
+          <a routerLink="/experience" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mon expérience professionnelle</a>
+          <a routerLink="/projets" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes projets</a>
         </div>
       </div>
     </div>
diff --git a/src/app/public/public-layout/public-layout.component.ts b/src/app/public/public-layout/public-layout.component.ts
index f9ca699..8852501 100644
--- a/src/app/public/public-layout/public-layout.component.ts
+++ b/src/app/public/public-layout/public-layout.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {RouterLink, RouterOutlet} from '@angular/router';
 import {NgIf} from '@angular/common';
 
@@ -12,12 +12,37 @@ import {NgIf} from '@angular/common';
   templateUrl: './public-layout.component.html',
   styleUrl: './public-layout.component.css'
 })
-export class PublicLayoutComponent {
+export class PublicLayoutComponent implements OnInit {
 
   mobileMenuOpen = false;
+  isDarkMode = false;
 
   toggleMobileMenu() {
     this.mobileMenuOpen = !this.mobileMenuOpen;
   }
 
+  ngOnInit() {
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (savedTheme === 'dark' || (savedTheme === null && prefersDark)) {
+      this.isDarkMode = true;
+      document.documentElement.classList.add('dark');
+    } else {
+      this.isDarkMode = false;
+      document.documentElement.classList.remove('dark');
+    }
+  }
+
+  toggleDarkMode() {
+    this.isDarkMode = !this.isDarkMode;
+
+    if (this.isDarkMode) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  }
+
 }
diff --git a/src/styles.css b/src/styles.css
index 1168819..c4e462c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,9 +1,11 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where([class=dark], [class=dark] *));
+
 @theme {
   --color-primary-dark: #181818;
   --color-primary-blue: #0A2463;
-  --colo-primary-light: #3E92CC;
-  --colo-primary-white: #FFFAFF;
-  --colo-primary-accent: #D8315B;
+  --color-primary-light: #3E92CC;
+  --color-primary-white: #FFFAFF;
+  --color-primary-accent: #D8315B;
 }