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

Initial commit

Browse Source
This commit is contained in:
jleroy
2025-03-19 14:29:22 +01:00
commit d15f69b85e
41 changed files with 799 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/app/public/pages/home/home.component.html Normal file
View File

@@ -0,0 +1,85 @@
<!-- 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>
</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>
</div>
</div>
</div>
</section>