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

171
src/app/public/pages/projets/projets.component.html
View File

@@ -5,7 +5,10 @@
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mes Projets</h2>
<div class="w-24 h-1 bg-[#D8315B] mx-auto"></div>
<p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">Une sélection de mes réalisations professionnelles et personnelles dans le domaine du développement.</p>
<p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">
Une sélection de mes réalisations personnelles dans le domaine du développement.
Seuls les projets en production sont mis en avant.
</p>
</div>
<!-- Grille de projets -->
@@ -13,21 +16,23 @@
<!-- Projet 1 -->
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
<div class="h-48 bg-[#3E92CC] relative">
<img src="assets/images/projet1.jpg" alt="Projet 1" class="w-full h-full object-cover" />
<div class="h-48 bg-white relative">
<img src="img/projet/techos.png" alt="Techos" class="w-full h-full object-cover" />
<div class="absolute top-4 right-4 bg-[#D8315B] text-white py-1 px-3 rounded-full text-sm font-medium">
Web
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Application de Gestion de Tâches</h3>
<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>
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Site vitrine de l'association Techos</h3>
<p class="text-gray-600 mb-4">
Développement d'un site web vitrine complète pour l'association Techos.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Angular</span>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Spring Boot</span>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">MySQL</span>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Express JS</span>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">mariaDB</span>
</div>
<a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
<a href="https://techos-asso.fr" target="_blank" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
Voir le projet
</a>
</div>
@@ -36,156 +41,28 @@
<!-- Projet 2 -->
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
<div class="h-48 bg-[#3E92CC] relative">
<img src="assets/images/projet2.jpg" alt="Projet 2" class="w-full h-full object-cover" />
<img src="img/projet/lplv.png" alt="Projet 2" class="w-full h-full object-cover" />
<div class="absolute top-4 right-4 bg-[#D8315B] text-white py-1 px-3 rounded-full text-sm font-medium">
Mobile
Web
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Application Mobile de Fitness</h3>
<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>
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Site web de l'association Liberty Pour La Vie</h3>
<p class="text-gray-600 mb-4">
Développement d'un site web complète pour l'association Liberty Pour La Vie.
</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>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Java Spring Boot</span>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Thymeleaf</span>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Bootstrap</span>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">mariaDB</span>
</div>
<a href="#" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
<a href="https://libertypourlavie.fr" target="_blank" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
Voir le projet
</a>
</div>
</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>