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

set animation

Browse Source
This commit is contained in:
JLEROY
2025-04-24 14:06:54 +02:00
parent 4244d96601
commit 1c21c8539f
26 changed files with 614 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,67 +1,76 @@
<!-- Section Projets -->
<section id="projets" class="py-20 bg-[#FFFAFF]">
<section id="projets" class="py-20">
<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">
<h2 class="text-4xl font-bold text-primary-blue dark:text-primary-light mb-4">Mes Projets</h2>
<div class="w-24 h-1 bg-primary-accent mx-auto"></div>
<p class="mt-6 text-lg text-primary-dark dark:text-primary-white 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 -->
<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-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">
<a href="https://techos-asso.fr" target="_blank" rel="noopener noreferrer"
class="group block bg-white dark:bg-black border-2 border-primary-blue dark:border-primary-light rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-blue">
<div class="relative h-48 bg-white">
<img src="img/projet/techos.png" alt="Site de l'association Techos"
class="w-full h-full object-cover" />
<div class="absolute top-4 right-4 bg-primary-accent 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">Site vitrine de l'association Techos</h3>
<p class="text-gray-600 mb-4">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 group-hover:underline">
Site vitrine de l'association Techos
</h3>
<p class="text-primary-dark dark:text-primary-white 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">Express JS</span>
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">mariaDB</span>
<span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Angular</span>
<span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Express JS</span>
<span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">mariaDB</span>
</div>
<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">
<span class="inline-block text-sm text-primary-blue dark:text-primary-light font-medium underline group-hover:no-underline">
Voir le projet
</a>
</span>
</div>
</div>
</a>
<!-- 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="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">
<a href="https://libertypourlavie.fr" target="_blank" rel="noopener noreferrer"
class="group block bg-white dark:bg-black border-2 border-primary-blue dark:border-primary-light rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-blue">
<div class="relative h-48">
<img src="img/projet/lplv.png" alt="Site de l'association Liberty Pour La Vie"
class="w-full h-full object-cover" />
<div class="absolute top-4 right-4 bg-primary-accent 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">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.
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 group-hover:underline">
Site web de l'association Liberty Pour La Vie
</h3>
<p class="text-primary-dark dark:text-primary-white mb-4">
Développement d'un site web complet 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">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>
<span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Java Spring Boot</span>
<span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Thymeleaf</span>
<span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">Bootstrap</span>
<span class="bg-gray-100 text-primary-dark dark:bg-gray-900 dark:text-primary-white px-2 py-1 rounded text-sm">mariaDB</span>
</div>
<a href="https://libertypourlavie.fr" target="_blank" class="inline-block bg-[#0A2463] text-white py-2 px-4 rounded hover:bg-[#3E92CC] transition-colors">
<span class="inline-block text-sm text-primary-blue dark:text-primary-light font-medium underline group-hover:no-underline">
Voir le projet
</a>
</span>
</div>
</div>
</a>
</div>
</div>