Init pages
This commit is contained in:
leroy
@@ -1,83 +1,246 @@
|
||||
<!-- 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>
|
||||
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-[#181818] to-[#0A2463]">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<div class="md:w-1/2 text-center md:text-left text-[#FFFAFF] mb-8 md:mb-0">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">
|
||||
<span class="text-[#3E92CC]">Johan Leroy</span>
|
||||
</h1>
|
||||
<h2 class="text-2xl md:text-3xl mb-6">Développeur</h2>
|
||||
<p class="text-lg mb-8">Passionné par le développement d'applications et l'innovation technologique.</p>
|
||||
<div class="flex justify-center md:justify-start space-x-4">
|
||||
<a href="src/assets/cv.pdf" target="_blank" class="bg-[#3E92CC] hover:bg-[#0A2463] text-[#FFFAFF] px-6 py-3 rounded-md transition-colors font-medium">Télcharger mon CV</a>
|
||||
<a routerLink="/projets" class="bg-transparent border-2 border-[#3E92CC] text-[#FFFAFF] hover:bg-[#3E92CC] px-6 py-3 rounded-md transition-colors font-medium">Voir mes projets</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 class="md:w-1/2 flex justify-center">
|
||||
<!-- Image de profil -->
|
||||
<div class="w-64 h-64 rounded-full overflow-hidden border-4 border-[#3E92CC] shadow-lg">
|
||||
<img
|
||||
src="img/pp.jpeg"
|
||||
alt="Johan Leroy"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-12 bg-[#FFFAFF]">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full md:w-1/5 p-4">
|
||||
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Langages</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/dart.png" alt="dart" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Dart
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/java.png" alt="java" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Java
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/js.png" alt="js" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
JavaScript
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/Typescript.png" alt="ts" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
TypeScript
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/kotlin.png" alt="kotlin" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Kotlin
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/php.png" alt="php" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
PHP
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/python.png" alt="python" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Python
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/5 p-4">
|
||||
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">frameworks</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/angular.png" alt="angular" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Angular
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/flutter.png" alt="flutter" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Flutter
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/sf.png" alt="Symfony" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Symfony
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/spring.png" alt="spring boot" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Spring Boot
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/tailwind.png" alt="tailwind" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Tailwind CSS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/5 p-4">
|
||||
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Bases de données</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/mariaDB.png" alt="mariaDB" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
mariaDB
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/mongo.png" alt="mongoDB" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
mongoDB
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/mysql.png" alt="mysql" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
MySQL
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/PostgreSQL.png" alt="postgreSQL" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
PostgreSQL
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/SQL-Server.png" alt="SQLserver" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
SQLserver
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/5 p-4">
|
||||
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Outils</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Android Studio
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/git.png" alt="git" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Git
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
PhpStorm
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/WebStorm.png" alt="webstorm" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
WebStorm
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center group relative">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-2">
|
||||
<img src="img/icon/studio_code.png" alt="studio code" class="max-w-full max-h-full" />
|
||||
</div>
|
||||
<div class="absolute bottom-full mb-2 bg-black text-white text-sm px-3 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Studio Code
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/5 p-4">
|
||||
<div class="bg-[#FFFAFF] shadow-lg rounded-lg p-6 border-t-4 border-[#0A2463] h-full">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[#0A2463]">Centres d'intérêt</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Jeux vidéo</span>
|
||||
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Films & Séries</span>
|
||||
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">DJ</span>
|
||||
<span class="bg-[#D8315B] text-[#FFFAFF] px-3 py-1 rounded-full text-sm">Projet personnel</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user