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

0
src/app/public/pages/experience/experience.component.css Normal file
View File

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>

11
src/app/public/pages/experience/experience.component.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-experience',
imports: [],
templateUrl: './experience.component.html',
styleUrl: './experience.component.css'
})
export class ExperienceComponent {
}

0
src/app/public/pages/formations/formations.component.css Normal file
View File

167
src/app/public/pages/formations/formations.component.html Normal file
View File

@@ -0,0 +1,167 @@
<!-- Section Formations -->
<section id="formations" class="py-20 bg-[#FFFAFF]">
<div class="container mx-auto px-4">
<!-- En-tête de la section -->
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mes Formations</h2>
<div class="w-24 h-1 bg-[#D8315B] mx-auto"></div>
<p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">Mon parcours académique dans le domaine du développement et des systèmes numériques.</p>
</div>
<!-- Timeline des formations -->
<div class="relative">
<!-- Ligne verticale centrale -->
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-[#3E92CC]"></div>
<!-- Formation 1 -->
<div class="mb-16 md:mb-0 relative">
<div class="flex flex-col md:flex-row items-center">
<!-- Date pour mobile -->
<div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
2021 - 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-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>
</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
</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-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>
</div>
</div>
</div>
<!-- Formation 2 -->
<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">
2018 - 2021
</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
</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-600">Formation technique 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-600">Formation technique 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="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
</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-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>
</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
</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-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>
</div>
</div>
</div>
</div>
<!-- Certifications supplémentaires -->
<div class="mt-24">
<h3 class="text-2xl font-bold text-[#0A2463] mb-8 text-center">Certifications & Formation continue</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Certification 1 -->
<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]">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>

11
src/app/public/pages/formations/formations.component.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-formations',
imports: [],
templateUrl: './formations.component.html',
styleUrl: './formations.component.css'
})
export class FormationsComponent {
}

319
src/app/public/pages/home/home.component.html
View File

@@ -1,83 +1,246 @@
<!-- Section image plein écran -->
<section class="relative h-screen w-full overflow-hidden">
<img
src="/img/background.png"
alt="Image de fond"
class="absolute w-full h-full object-cover"
>
<div class="flex justify-between">
<div class="relative">
<h1 class="text-white text-6xl md:text-8xl font-bold mb-32">Développeur web</h1>
</div>
<div class="relative">
<h1 class="text-white text-6xl md:text-8xl font-bold mb-32">Johan Leroy</h1>
</div>
</div>
</section>
<!-- Section liste des projets -->
<section id="projets" class="min-h-screen bg-[#181818] py-20 px-4 md:px-8">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-white text-center">Mes Projets</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Projet 1 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 1" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 1</h3>
<p class="text-gray-700 mb-4">Description du projet 1. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-[#181818] to-[#0A2463]">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 text-center md:text-left text-[#FFFAFF] mb-8 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-4">
<span class="text-[#3E92CC]">Johan Leroy</span>
</h1>
<h2 class="text-2xl md:text-3xl mb-6">Développeur</h2>
<p class="text-lg mb-8">Passionné par le développement d'applications et l'innovation technologique.</p>
<div class="flex justify-center md:justify-start space-x-4">
<a href="src/assets/cv.pdf" target="_blank" class="bg-[#3E92CC] hover:bg-[#0A2463] text-[#FFFAFF] px-6 py-3 rounded-md transition-colors font-medium">Télcharger mon CV</a>
<a routerLink="/projets" class="bg-transparent border-2 border-[#3E92CC] text-[#FFFAFF] hover:bg-[#3E92CC] px-6 py-3 rounded-md transition-colors font-medium">Voir mes projets</a>
</div>
</div>
<!-- Projet 2 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 2" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 2</h3>
<p class="text-gray-700 mb-4">Description du projet 2. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 3 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 3" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 3</h3>
<p class="text-gray-700 mb-4">Description du projet 3. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 4 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 4" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 4</h3>
<p class="text-gray-700 mb-4">Description du projet 4. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 5 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 5" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 5</h3>
<p class="text-gray-700 mb-4">Description du projet 5. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
</div>
</div>
<!-- Projet 6 -->
<div class="bg-gray-100 rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
<img src="https://via.placeholder.com/600x400" alt="Projet 6" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Projet 6</h3>
<p class="text-gray-700 mb-4">Description du projet 6. Voici quelques détails sur ce projet et les technologies utilisées.</p>
<a href="#" class="text-blue-600 font-medium hover:underline">Voir plus</a>
<div class="md:w-1/2 flex justify-center">
<!-- Image de profil -->
<div class="w-64 h-64 rounded-full overflow-hidden border-4 border-[#3E92CC] shadow-lg">
<img
src="img/pp.jpeg"
alt="Johan Leroy"
class="w-full h-full object-cover"
/>
</div>
</div>
</div>
</div>
</section>
<section class="py-12 bg-[#FFFAFF]">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-center">
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Langages</h3>
<div class="flex flex-wrap gap-2">
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/dart.png" alt="dart" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Dart
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/java.png" alt="java" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Java
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/js.png" alt="js" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
JavaScript
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/Typescript.png" alt="ts" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
TypeScript
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/kotlin.png" alt="kotlin" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Kotlin
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/php.png" alt="php" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
PHP
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/python.png" alt="python" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Python
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">frameworks</h3>
<div class="flex flex-wrap gap-2">
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/angular.png" alt="angular" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Angular
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/flutter.png" alt="flutter" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Flutter
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/sf.png" alt="Symfony" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Symfony
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/spring.png" alt="spring boot" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Spring Boot
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/tailwind.png" alt="tailwind" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Tailwind CSS
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Bases de données</h3>
<div class="flex flex-wrap gap-2">
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/mariaDB.png" alt="mariaDB" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
mariaDB
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/mongo.png" alt="mongoDB" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
mongoDB
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/mysql.png" alt="mysql" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
MySQL
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/PostgreSQL.png" alt="postgreSQL" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
PostgreSQL
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/SQL-Server.png" alt="SQLserver" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
SQLserver
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Outils</h3>
<div class="flex flex-wrap gap-2">
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Android Studio
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/git.png" alt="git" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Git
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
PhpStorm
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/WebStorm.png" alt="webstorm" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
WebStorm
</div>
</div>
<div class="flex flex-col items-center group relative">
<div class="w-12 h-12 flex items-center justify-center mb-2">
<img src="img/icon/studio_code.png" alt="studio code" class="max-w-full max-h-full" />
</div>
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Studio Code
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/5 p-4">
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Centres d'intérêt</h3>
<div class="flex flex-wrap gap-2">
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Jeux vidéo</span>
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Films & Séries</span>
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">DJ</span>
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Projet personnel</span>
</div>
</div>
</div>
</div>

7
src/app/public/pages/home/home.component.ts
View File

@@ -1,13 +1,14 @@
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
@Component({
selector: 'app-home',
imports: [],
imports: [
RouterLink
],
templateUrl: './home.component.html',
styleUrl: './home.component.css'
})
export class HomeComponent {
}

25
src/app/public/pages/not-found/not-found.component.html
View File

@@ -1 +1,24 @@
<p>not-found works!</p>
<section class="min-h-screen bg-gradient-to-br from-[#181818] to-[#0A2463] flex items-center justify-center px-4">
<div class="text-center">
<!-- Image d'erreur stylisée -->
<div class="mb-8 flex justify-center">
<div class="relative">
<div class="text-[#D8315B] text-9xl font-bold">404</div>
</div>
</div>
<!-- Message d'erreur -->
<h1 class="text-3xl md:text-4xl font-bold mb-4 text-[#FFFAFF]">Page non trouvée</h1>
<p class="text-xl mb-8 text-[#3E92CC]">Oups ! La page que vous recherchez n'existe pas.</p>
<!-- Bouton de retour -->
<div class="flex justify-center">
<a href="/" class="bg-[#3E92CC] hover:bg-[#D8315B] text-[#FFFAFF] px-6 py-3 rounded-md transition-colors font-medium flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
Retour à l'accueil
</a>
</div>
</div>
</section>

0
src/app/public/pages/projets/projets.component.css Normal file
View File

191
src/app/public/pages/projets/projets.component.html Normal file
View File

@@ -0,0 +1,191 @@
<!-- Section Projets -->
<section id="projets" class="py-20 bg-[#FFFAFF]">
<div class="container mx-auto px-4">
<!-- En-tête de la section -->
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mes Projets</h2>
<div class="w-24 h-1 bg-[#D8315B] mx-auto"></div>
<p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">Une sélection de mes réalisations professionnelles et personnelles dans le domaine du développement.</p>
</div>
<!-- Grille de projets -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Projet 1 -->
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
<div class="h-48 bg-[#3E92CC] relative">
<img src="assets/images/projet1.jpg" alt="Projet 1" 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>
<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>
<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">MySQL</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 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" />
<div class="absolute top-4 right-4 bg-[#D8315B] text-white py-1 px-3 rounded-full text-sm font-medium">
Mobile
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Application Mobile de Fitness</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>
<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 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">
<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">GraphQL</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>
<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="#" class="inline-block bg-[#0A2463] text-white py-2 px-6 rounded hover:bg-[#3E92CC] transition-colors text-center">
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>

11
src/app/public/pages/projets/projets.component.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-projets',
imports: [],
templateUrl: './projets.component.html',
styleUrl: './projets.component.css'
})
export class ProjetsComponent {
}

44
src/app/public/public-layout/public-layout.component.html
View File

@@ -1 +1,43 @@
<router-outlet />
<div class="min-h-screen bg-[#FFFAFF]">
<header class="bg-[#181818] text-[#FFFAFF] shadow-lg fixed w-full z-10">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<!-- Logo / Nom -->
<div class="text-xl font-bold">
<a routerLink="/" class="flex items-center">
<span class="text-[#3E92CC]">Johan</span>
<span class="ml-1">Leroy</span>
</a>
</div>
<!-- Navigation -->
<nav class="hidden md:flex space-x-8">
<a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-[#3E92CC] transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-[#3E92CC] transition-colors">Mes projets</a>
</nav>
<!-- Menu mobile -->
<div class="md:hidden">
<button (click)="toggleMobileMenu()" class="text-[#FFFAFF] focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
<!-- Menu mobile déroulant -->
<div *ngIf="mobileMenuOpen" class="md:hidden mt-4 pb-4">
<div class="flex flex-col space-y-3">
<a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-[#3E92CC] transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-[#3E92CC] transition-colors">Mes projets</a>
</div>
</div>
</div>
</header>
<router-outlet />
</div>

13
src/app/public/public-layout/public-layout.component.ts
View File

@@ -1,14 +1,23 @@
import { Component } from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {RouterLink, RouterOutlet} from '@angular/router';
import {NgIf} from '@angular/common';
@Component({
selector: 'app-public-layout',
imports: [
RouterOutlet
RouterOutlet,
NgIf,
RouterLink
],
templateUrl: './public-layout.component.html',
styleUrl: './public-layout.component.css'
})
export class PublicLayoutComponent {
mobileMenuOpen = false;
toggleMobileMenu() {
this.mobileMenuOpen = !this.mobileMenuOpen;
}
}

7
src/app/public/public-routing.module.ts
View File

@@ -3,10 +3,17 @@ import { RouterModule, Routes } from '@angular/router';
import {NotFoundComponent} from './pages/not-found/not-found.component';
import {PublicLayoutComponent} from './public-layout/public-layout.component';
import {HomeComponent} from './pages/home/home.component';
import {FormationsComponent} from './pages/formations/formations.component';
import {ExperienceComponent} from './pages/experience/experience.component';
import {ProjetsComponent} from './pages/projets/projets.component';
const routes: Routes = [
{ path: '', component: PublicLayoutComponent, children: [
{ path: '', component: HomeComponent },
{ path: 'formations', component: FormationsComponent },
{ path: 'experience', component: ExperienceComponent },
{ path: 'projets', component: ProjetsComponent },
]
},
{ path: '**', component: NotFoundComponent },

8
src/styles.css
View File

@@ -1 +1,9 @@
@import "tailwindcss";
@theme {
--color-primary-dark: #181818;
--color-primary-blue: #0A2463;
--colo-primary-light: #3E92CC;
--colo-primary-white: #FFFAFF;
--colo-primary-accent: #D8315B;
}