315 lines
20 KiB
HTML
315 lines
20 KiB
HTML
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary-light to-primary-white dark:from-primary-dark dark:to-primary-blue relative overflow-hidden">
|
|
<!-- Animation layer - contrôlé par Angular -->
|
|
<div class="absolute inset-0 z-0" #particleContainer></div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<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-primary-blue dark:text-primary-light inline-block transition duration-500 name-glow">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-primary-blue hover:bg-primary-dark dark:bg-primary-light dark:hover:bg-primary-blue text-primary-white px-6 py-3 rounded-md transition duration-300 transform hover:scale-105 font-medium">Télécharger mon CV</a>
|
|
<a routerLink="/projets" class="bg-transparent border-2 border-primary-dark dark:border-primary-light dark:text-primary-white hover:bg-primary-dark dark:hover:bg-primary-light px-6 py-3 rounded-md transition duration-300 transform hover:scale-105 font-medium">Voir mes projets</a>
|
|
</div>
|
|
</div>
|
|
<div class="md:w-1/2 flex justify-center">
|
|
<!-- Image de profil avec animation -->
|
|
<div class="w-64 h-64 rounded-full overflow-hidden border-4 border-primary-dark dark:border-primary-light shadow-xl transition duration-300 transform hover:scale-105 profile-shadow"
|
|
#profileImage>
|
|
<img
|
|
src="img/pp.jpeg"
|
|
alt="Johan Leroy"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-4xl font-bold text-center text-primary-blue dark:text-primary-light my-5">Mes compétences</h2>
|
|
<h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Technologies maîtrisées</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-16">
|
|
<!-- Langages -->
|
|
<div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Langages</h3>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/java.png" alt="java" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Java</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/js.png" alt="js" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">JS</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/Typescript.png" alt="ts" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">TS</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/python.png" alt="python" class="max-w-full max-h-full opacity-75" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Python</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/php.png" alt="php" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">PHP</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Frameworks -->
|
|
<div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Frameworks</h3>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/angular.png" alt="angular" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Angular</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/expressjs.png" alt="Express" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Express JS</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/spring.png" alt="spring boot" class="max-w-full max-h-full opacity-75" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Spring</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/tailwind.png" alt="tailwind" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Tailwind</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/bootstrap.png" alt="bootstrap" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Bootstrap</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bases de données -->
|
|
<div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Bases de données</h3>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/mariaDB.png" alt="mariaDB" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">MariaDB</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/mysql.png" alt="mysql" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">MySQL</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/SQL-Server.png" alt="SQLserver" class="max-w-full max-h-full opacity-75" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">SQL Server</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/PostgreSQL.png" alt="postgreSQL" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">PostgreSQL</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Outils -->
|
|
<div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Outils</h3>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Android</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/git.png" alt="git" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Git</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">PhpStorm</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/WebStorm.png" alt="webstorm" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">WebStorm</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/studio_code.png" alt="studio code" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-blue dark:text-primary-light text-center">VS Code</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Centres d'intérêt -->
|
|
<div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Centres d'intérêt</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Jeux vidéo</span>
|
|
<span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Films & Séries</span>
|
|
<span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">DJ</span>
|
|
<span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Projet personnel</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technologies débutantes -->
|
|
<h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Technologies en apprentissage</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Langages débutants -->
|
|
<div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold mb-6 text-primary-light dark:text-primary-white">Langages</h3>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/dart.png" alt="dart" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">Dart</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/kotlin.png" alt="kotlin" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">Kotlin</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/C.png" alt="C#" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">C#</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/CPP.png" alt="C++" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">C++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Frameworks débutants -->
|
|
<div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold mb-6 text-[#3E92CC]">Frameworks</h3>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/sf.png" alt="Symfony" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">Symfony</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/flutter.png" alt="flutter" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">Flutter</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/FastAPI.png" alt="FastAPI" class="max-w-full max-h-full" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">FastAPI</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bases de données débutantes -->
|
|
<div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="border-t-4 border-primary-light dark:border-primary-white rounded-t-lg"></div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-semibold mb-6 text-[#3E92CC]">Bases de données</h3>
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/SQLite.png" alt="SQLite" class="max-w-full max-h-full opacity-75" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">SQLite</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<img src="img/icon/mongo.png" alt="mongoDB" class="max-w-full max-h-full opacity-75" />
|
|
</div>
|
|
<span class="text-xs text-primary-light dark:text-primary-white text-center">MongoDB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|