105 lines
6.2 KiB
HTML
105 lines
6.2 KiB
HTML
<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-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>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<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-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-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>
|
|
<span class="inline-block text-sm text-primary-blue dark:text-primary-light font-medium underline group-hover:no-underline">
|
|
Voir le projet
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<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-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-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">Tailwind CSS</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>
|
|
<span class="inline-block text-sm text-primary-blue dark:text-primary-light font-medium underline group-hover:no-underline">
|
|
Voir le projet
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://monvoisingeek.lidge.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/monvoisingeek.png" alt="Site mon voisin geek"
|
|
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-primary-blue dark:text-primary-light mb-2 group-hover:underline">
|
|
Site web vitrine Mon Voisin Geek
|
|
</h3>
|
|
<p class="text-primary-dark dark:text-primary-white mb-4">
|
|
Développement d'un site web vitrine simple.
|
|
</p>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<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">Tailwind CSS</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>
|
|
<span class="inline-block text-sm text-primary-blue dark:text-primary-light font-medium underline group-hover:no-underline">
|
|
Voir le projet
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|