V1

src/app/public/pages/experience/experience.component.html

@@ -14,23 +14,20 @@
         <!-- 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="text-center">
-            <div class="w-16 h-16 mx-auto mb-4">
+            <div class="w-24 h-24 mx-auto mb-4">
-              <img src="assets/icons/dev-icon.png" alt="Développement" class="w-full h-full" />
+              <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">Nov. 2023 - Présent</p>
+            <p class="text-[#3E92CC] 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 Solutions Informatiques</h3>
-            <span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">1,5 ans</span>
+            <span class="bg-[#3E92CC] text-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>
           <ul class="space-y-2 mb-6">
             <li class="flex items-start">
@@ -52,13 +49,10 @@
               <span>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">Spring Boot</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">TypeScript</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-[#0A2463] px-3 py-1 rounded-full text-sm">Java</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Git</span>
           </div>
         </div>
       </div>
@@ -70,23 +64,20 @@
         <!-- 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="text-center">
-            <div class="w-16 h-16 mx-auto mb-4">
+            <div class="w-32 h-32 mx-auto mb-4">
-              <img src="assets/icons/tech-icon.png" alt="Technicien" class="w-full h-full" />
+              <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>
           </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>
           </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>
           <ul class="space-y-2 mb-6">
             <li class="flex items-start">
@@ -108,47 +99,42 @@
               <span>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">IoT</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">Capteurs</span>
+            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">mariaDB</span>
-            <span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Outils numériques</span>
           </div>
         </div>
       </div>
     </div>
 
     <!-- Carte d'expérience 3 -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
+    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
       <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="text-center">
-            <div class="w-16 h-16 mx-auto mb-4">
+            <div class="w-30 h-24 mx-auto mb-4">
-              <img src="assets/icons/telecom-icon.png" alt="Télécom" class="w-full h-full" />
+              <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>
           </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>
           </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>
           <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">
                 <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 de sonorisation</span>
+              <span>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">
@@ -163,7 +149,6 @@
               <span>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>
@@ -174,10 +159,87 @@
       </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="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="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>
+          </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>
+          </div>
+          <p class="text-gray-600 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>
+      </div>
+    </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="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="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>
+          </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>
+          </div>
+          <p class="text-gray-600 mb-6">
+            Stage de développement d'un site internet en php
+          </p>
+        </div>
+      </div>
+    </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="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="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>
+          </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>
+          </div>
+          <p class="text-gray-600 mb-6">
+            Stage de développement d'un site internet en php
+          </p>
+        </div>
+      </div>
+    </div>
+
     <!-- Compétences professionnelles -->
     <div class="mt-20">
       <h3 class="text-2xl font-bold text-[#0A2463] 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">
@@ -188,57 +250,54 @@
             </svg>
             Compétences techniques
           </h4>
-
+          <div class="grid grid-cols-2 gap-x-4 gap-y-6">
-          <!-- Barres de progression -->
+            <div class="flex items-center">
-          <div class="space-y-4">
+              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <div>
+                <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>
-              <div class="flex justify-between mb-1">
+              </svg>
-                <span class="text-[#0A2463] font-medium">Développement Frontend (Angular, JS/TS)</span>
+              <span class="text-gray-700">Développement Frontend</span>
-                <span class="text-[#D8315B] font-medium">90%</span>
             </div>
-              <div class="w-full bg-gray-200 rounded-full h-2.5">
+            <div class="flex items-center">
-                <div class="bg-[#3E92CC] h-2.5 rounded-full" style="width: 90%"></div>
+              <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">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">
+                <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>
             </div>
-
+            <div class="flex items-center">
-            <div>
+              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <div class="flex justify-between mb-1">
+                <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>
-                <span class="text-[#0A2463] font-medium">Développement Backend (Java, Spring Boot)</span>
+              </svg>
-                <span class="text-[#D8315B] font-medium">85%</span>
+              <span class="text-gray-700">Mise en production</span>
             </div>
-              <div class="w-full bg-gray-200 rounded-full h-2.5">
+            <div class="flex items-center">
-                <div class="bg-[#3E92CC] h-2.5 rounded-full" style="width: 85%"></div>
+              <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 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">
+                <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>
             </div>
-
+            <div class="flex items-center">
-            <div>
+              <svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <div class="flex justify-between mb-1">
+                <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>
-                <span class="text-[#0A2463] font-medium">Intégration ERP</span>
+              </svg>
-                <span class="text-[#D8315B] font-medium">80%</span>
+              <span class="text-gray-700">Maquettage</span>
-              </div>
-              <div class="w-full bg-gray-200 rounded-full h-2.5">
-                <div class="bg-[#3E92CC] h-2.5 rounded-full" style="width: 80%"></div>
-              </div>
-            </div>
-
-            <div>
-              <div class="flex justify-between mb-1">
-                <span class="text-[#0A2463] font-medium">Analyse et traitement de données</span>
-                <span class="text-[#D8315B] font-medium">75%</span>
-              </div>
-              <div class="w-full bg-gray-200 rounded-full h-2.5">
-                <div class="bg-[#3E92CC] h-2.5 rounded-full" style="width: 75%"></div>
-              </div>
-            </div>
-
-            <div>
-              <div class="flex justify-between mb-1">
-                <span class="text-[#0A2463] font-medium">Maintenance équipements spécialisés</span>
-                <span class="text-[#D8315B] font-medium">85%</span>
-              </div>
-              <div class="w-full bg-gray-200 rounded-full h-2.5">
-                <div class="bg-[#3E92CC] h-2.5 rounded-full" style="width: 85%"></div>
             </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">Sécurité</span>
             </div>
           </div>
         </div>
@@ -251,7 +310,6 @@
             </svg>
             Compétences transversales
           </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">
@@ -259,49 +317,42 @@
               </svg>
               <span class="text-gray-700">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>
             </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">Résolution de problèmes</span>
+              <span class="text-gray-700">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>
             </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>
             </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>
             </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>
             </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>

src/app/public/pages/formations/formations.component.html

@@ -5,9 +5,8 @@
     <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 académique dans le domaine du développement et des systèmes numériques.</p>
+      <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>
     </div>
-
     <!-- Timeline des formations -->
     <div class="relative">
       <!-- Ligne verticale centrale -->
@@ -18,33 +17,35 @@
         <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">
-            2021 - 2023
+            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 mb-2">Campus ENI</p>
+              <p class="text-gray-500 hover:text-gray-400 underline mb-2">
-              <p class="text-gray-600">Formation complète 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>
+                <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>
             </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>
-
           <!-- 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">
-              2021 - 2023
+              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">Campus ENI</p>
+            <p class="text-gray-500 mb-2 text-center underline">
-            <p class="text-gray-600">Formation complète 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>
+              <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>
           </div>
         </div>
       </div>
@@ -54,114 +55,115 @@
         <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">
-            2018 - 2021
+            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">
-              2018 - 2021
+              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>
-
           <!-- 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 mb-2">Campus Saint Félix La Salle</p>
+              <p class="text-gray-500 hover:text-gray-400 underline mb-2">
-              <p class="text-gray-600">Formation technique sur les systèmes électroniques et informatiques, avec une spécialisation dans l'informatique industrielle et les réseaux.</p>
+                <a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
+              </p>
+              <p class="text-gray-600">
+                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 mb-2 text-center">Campus Saint Félix La Salle</p>
+            <p class="text-gray-500 hover:text-gray-400 underline mb-2 text-center">
-            <p class="text-gray-600">Formation technique sur les systèmes électroniques et informatiques, avec une spécialisation dans l'informatique industrielle et les réseaux.</p>
+              <a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
+            </p>
+            <p class="text-gray-600">
+              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>
       </div>
 
       <!-- Formation 3 -->
-      <div class="relative md:mt-32">
+      <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">
-            2016 - 2018
+            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 mb-2">Campus Saint Félix La Salle</p>
+              <p class="text-gray-500 hover:text-gray-400 underline mb-2">
-              <p class="text-gray-600">Formation initiale aux systèmes électroniques et réseaux informatiques. Apprentissage des bases de l'installation et de la maintenance de systèmes numériques.</p>
+                <a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
+              </p>
+              <p class="text-gray-600">
+                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>
-
           <!-- 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">
-              2016 - 2018
+              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 mb-2 text-center">Campus Saint Félix La Salle</p>
+            <p class="text-gray-500 hover:text-gray-400 underline mb-2 text-center">
-            <p class="text-gray-600">Formation initiale aux systèmes électroniques et réseaux informatiques. Apprentissage des bases de l'installation et de la maintenance de systèmes numériques.</p>
+              <a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
-          </div>
+            </p>
+            <p class="text-gray-600">
+              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>
       </div>
 
-    <!-- Certifications supplémentaires -->
+      <!-- Formation 4 -->
-    <div class="mt-24">
+      <div class="mb-16 md:mb-0 relative md:mt-32">
-      <h3 class="text-2xl font-bold text-[#0A2463] mb-8 text-center">Certifications & Formation continue</h3>
+        <div class="flex flex-col md:flex-row items-center">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <!-- Date pour mobile -->
-        <!-- Certification 1 -->
+          <div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
-        <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-[#3E92CC] hover:shadow-lg transition-shadow">
+            Avant 2018
-          <div class="flex items-center mb-4">
+          </div>
-            <div class="w-10 h-10 mr-4">
+          <!-- Date (desktop) -->
-              <img src="assets/icons/certificate.png" alt="Certification" class="w-full h-full" />
+          <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">
+              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>
+          <!-- 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">
+                <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">
+              <a href="https://www.ensemble-scolaire-saint-pere.fr" target="_blank">Ensemble scolaire Saint Père En Retz</a>
+            </p>
           </div>
-            <h4 class="text-lg font-semibold text-[#0A2463]">Angular Avancé</h4>
         </div>
-          <p class="text-gray-600">Formation spécialisée sur les fonctionnalités avancées d'Angular et les meilleures pratiques de développement</p>
-          <div class="mt-4 text-sm text-[#D8315B] font-medium">2023</div>
       </div>
 
-        <!-- Certification 2 -->
-        <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-[#3E92CC] hover:shadow-lg transition-shadow">
-          <div class="flex items-center mb-4">
-            <div class="w-10 h-10 mr-4">
-              <img src="assets/icons/certificate.png" alt="Certification" class="w-full h-full" />
-            </div>
-            <h4 class="text-lg font-semibold text-[#0A2463]">Spring Boot</h4>
-          </div>
-          <p class="text-gray-600">Maîtrise du framework Spring Boot pour le développement d'applications Java robustes et évolutives</p>
-          <div class="mt-4 text-sm text-[#D8315B] font-medium">2022</div>
-        </div>
-
-        <!-- Certification 3 -->
-        <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-[#3E92CC] hover:shadow-lg transition-shadow">
-          <div class="flex items-center mb-4">
-            <div class="w-10 h-10 mr-4">
-              <img src="assets/icons/certificate.png" alt="Certification" class="w-full h-full" />
-            </div>
-            <h4 class="text-lg font-semibold text-[#0A2463]">Git & DevOps</h4>
-          </div>
-          <p class="text-gray-600">Formation sur les méthodologies DevOps et les outils de versionnement et d'intégration continue</p>
-          <div class="mt-4 text-sm text-[#D8315B] font-medium">2021</div>
-        </div>
-      </div>
     </div>
   </div>
 </section>

src/app/public/pages/projets/projets.component.html

@@ -5,7 +5,10 @@
     <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">Une sélection de mes réalisations professionnelles et personnelles dans le domaine du développement.</p>
+      <p class="mt-6 text-lg text-gray-600 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 -->
@@ -13,21 +16,23 @@
 
       <!-- Projet 1 -->
       <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-        <div class="h-48 bg-[#3E92CC] relative">
+        <div class="h-48 bg-white relative">
-          <img src="assets/images/projet1.jpg" alt="Projet 1" class="w-full h-full object-cover" />
+          <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">
             Web
           </div>
         </div>
         <div class="p-6">
-          <h3 class="text-xl font-bold text-[#0A2463] mb-2">Application de Gestion de Tâches</h3>
+          <h3 class="text-xl font-bold text-[#0A2463] mb-2">Site vitrine de l'association Techos</h3>
-          <p class="text-gray-600 mb-4">Développement d'une application web complète pour la gestion de projets et le suivi des tâches d'équipe.</p>
+          <p class="text-gray-600 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">Spring Boot</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">MySQL</span>
+            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">mariaDB</span>
           </div>
-          <a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
+          <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">
             Voir le projet
           </a>
         </div>
@@ -36,156 +41,28 @@
       <!-- 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="assets/images/projet2.jpg" alt="Projet 2" class="w-full h-full object-cover" />
+          <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">
-            Mobile
+            Web
           </div>
         </div>
         <div class="p-6">
-          <h3 class="text-xl font-bold text-[#0A2463] mb-2">Application Mobile de Fitness</h3>
+          <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">Conception et développement d'une application mobile pour le suivi d'activités sportives et la planification d'entraînements.</p>
+          <p class="text-gray-600 mb-4">
-          <div class="flex flex-wrap gap-2 mb-4">
+            Développement d'un site web complète pour l'association Liberty Pour La Vie.
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">React Native</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Firebase</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Redux</span>
-          </div>
-          <a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
-            Voir le projet
-          </a>
-        </div>
-      </div>
-
-      <!-- Projet 3 -->
-      <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-        <div class="h-48 bg-[#3E92CC] relative">
-          <img src="assets/images/projet3.jpg" alt="Projet 3" 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">
-            API
-          </div>
-        </div>
-        <div class="p-6">
-          <h3 class="text-xl font-bold text-[#0A2463] mb-2">API de Services Bancaires</h3>
-          <p class="text-gray-600 mb-4">Développement d'une API RESTful sécurisée pour la gestion de transactions bancaires et l'authentification des utilisateurs.</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</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Spring Security</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">PostgreSQL</span>
-          </div>
-          <a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
-            Voir le projet
-          </a>
-        </div>
-      </div>
-
-      <!-- Projet 4 -->
-      <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-        <div class="h-48 bg-[#3E92CC] relative">
-          <img src="assets/images/projet4.jpg" alt="Projet 4" 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">
-            Frontend
-          </div>
-        </div>
-        <div class="p-6">
-          <h3 class="text-xl font-bold text-[#0A2463] mb-2">Dashboard Analytique</h3>
-          <p class="text-gray-600 mb-4">Création d'un tableau de bord interactif pour la visualisation de données commerciales avec des graphiques dynamiques.</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">Vue.js</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">D3.js</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Tailwind CSS</span>
-          </div>
-          <a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
-            Voir le projet
-          </a>
-        </div>
-      </div>
-
-      <!-- Projet 5 -->
-      <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-        <div class="h-48 bg-[#3E92CC] relative">
-          <img src="assets/images/projet5.jpg" alt="Projet 5" 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">
-            E-commerce
-          </div>
-        </div>
-        <div class="p-6">
-          <h3 class="text-xl font-bold text-[#0A2463] mb-2">Boutique en Ligne</h3>
-          <p class="text-gray-600 mb-4">Développement d'une plateforme e-commerce complète avec système de paiement et gestion des stocks.</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">React</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Node.js</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">MongoDB</span>
-          </div>
-          <a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
-            Voir le projet
-          </a>
-        </div>
-      </div>
-
-      <!-- Projet 6 -->
-      <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
-        <div class="h-48 bg-[#3E92CC] relative">
-          <img src="assets/images/projet6.jpg" alt="Projet 6" 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">
-            DevOps
-          </div>
-        </div>
-        <div class="p-6">
-          <h3 class="text-xl font-bold text-[#0A2463] mb-2">Pipeline CI/CD</h3>
-          <p class="text-gray-600 mb-4">Mise en place d'une infrastructure d'intégration et de déploiement continus pour accélérer le cycle de développement.</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">Docker</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Jenkins</span>
-            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">AWS</span>
-          </div>
-          <a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
-            Voir le projet
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <!-- Section projets en vedette -->
-    <div class="mt-24">
-      <h3 class="text-2xl font-bold text-[#0A2463] mb-8 text-center">Projet en Vedette</h3>
-      <div class="bg-white rounded-lg overflow-hidden shadow-lg">
-        <div class="flex flex-col lg:flex-row">
-          <div class="lg:w-1/2">
-            <img src="assets/images/featured-project.jpg" alt="Projet en vedette" class="w-full h-full object-cover" />
-          </div>
-          <div class="lg:w-1/2 p-8">
-            <div class="inline-block bg-[#D8315B] text-white py-1 px-3 rounded-full text-sm font-medium mb-4">
-              Full Stack
-            </div>
-            <h3 class="text-2xl font-bold text-[#0A2463] mb-4">Plateforme Collaborative pour Développeurs</h3>
-            <p class="text-gray-600 mb-6">
-              Conception et développement complet d'une plateforme permettant aux développeurs de collaborer sur des projets open source, partager des ressources et échanger des connaissances.
           </p>
-            <div class="flex flex-wrap gap-2 mb-6">
+          <div class="flex flex-wrap gap-2 mb-4">
-              <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">React</span>
+            <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">GraphQL</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">Node.js</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">MongoDB</span>
+            <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">mariaDB</span>
-              <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">AWS</span>
           </div>
-            <div class="flex flex-col sm:flex-row gap-4">
+          <a href="https://libertypourlavie.fr" target="_blank" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
-              <a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-6 rounded hover:bg-[#3E92CC] transition-colors text-center">
+            Voir le projet
-                Démonstration
           </a>
-              <a href="#" class="inline-block bg-white border border-[#0A2463] text-[#0A2463] py-2 px-6 rounded hover:bg-gray-50 transition-colors text-center">
-                Code source
-              </a>
-            </div>
-          </div>
-        </div>
         </div>
       </div>
 
-    <!-- Call to Action -->
-    <div class="mt-20 text-center">
-      <p class="text-lg text-gray-600 mb-6">Vous avez un projet en tête ? N'hésitez pas à me contacter pour en discuter.</p>
-      <a href="#contact" class="inline-block bg-[#D8315B] text-white py-3 px-8 rounded-lg hover:bg-opacity-90 transition-colors font-medium text-lg">
-        Me contacter
-      </a>
     </div>
   </div>
 </section>