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

set animation

Browse Source
This commit is contained in:
JLEROY
2025-04-24 14:06:54 +02:00
parent 4244d96601
commit 1c21c8539f
26 changed files with 614 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/app/public/pages/experience/experience.component.html
View File

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