Init pages
This commit is contained in:
leroy
191
src/app/public/pages/projets/projets.component.html
Normal file
191
src/app/public/pages/projets/projets.component.html
Normal 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>
|
||||
Reference in New Issue
Block a user