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

Init pages

Browse Source
This commit is contained in:
leroy
2025-04-19 13:57:31 +02:00
parent d15f69b85e
commit 20fc934eb9
43 changed files with 1045 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
src/app/public/pages/experience/experience.component.html Normal file
View File

@@ -0,0 +1,316 @@
<!-- Section Expérience Professionnelle -->
<section id="experience" class="py-20 bg-gradient-to-b from-[#FFFAFF] to-[#F8F9FA]">
<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>
</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="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">
<img src="assets/icons/dev-icon.png" alt="Développement" 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>
</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>
</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">
<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>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">
<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>
</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">
<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>
</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">TypeScript</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>
</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="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">
<img src="assets/icons/tech-icon.png" alt="Technicien" 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">
<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>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">
<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>
</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">
<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>
</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">Capteurs</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="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">
<img src="assets/icons/telecom-icon.png" alt="Télécom" 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>
</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">
<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>
</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">
<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>
</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>
</div>
</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">
<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">
<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>
Compétences techniques
</h4>
<!-- Barres de progression -->
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-[#0A2463] font-medium">Développement Frontend (Angular, JS/TS)</span>
<span class="text-[#D8315B] font-medium">90%</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: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-[#0A2463] font-medium">Développement Backend (Java, Spring Boot)</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>
<div>
<div class="flex justify-between mb-1">
<span class="text-[#0A2463] font-medium">Intégration ERP</span>
<span class="text-[#D8315B] font-medium">80%</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>
</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">
<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
</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">
<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>
</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>
</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>
</svg>
<span class="text-gray-700">Veille technologique</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>