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

V1

Browse Source
This commit is contained in:
leroy
2025-04-19 16:46:35 +02:00
parent 20fc934eb9
commit 2fb15b4a4c
17 changed files with 230 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">
<img src="assets/icons/dev-icon.png" alt="Développement" class="w-full h-full" />
<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">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">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>
<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>
</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">
<img src="assets/icons/tech-icon.png" alt="Technicien" class="w-full h-full" />
<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>
</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">Capteurs</span>
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Outils numériques</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>
</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">
<img src="assets/icons/telecom-icon.png" alt="Télécom" class="w-full h-full" />
<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>
</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>
<!-- 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 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">Développement Frontend</span>
</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 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">Développement Backend</span>
</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 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>
<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 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">Mise en production</span>
</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">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">
<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">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">
<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>