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

67
README.md
View File

@@ -1,59 +1,14 @@
# ENIAngular
# 🌐 Portfolio - Johan Leroy
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.1.
Bienvenue dans le dépôt de mon portfolio personnel : [johanleroy.fr](https://johanleroy.fr)
Ce site vitrine a été développé pour présenter mon profil, mes projets, et offrir un moyen simple de me contacter.
## Development server
## ✨ Stack Technique
To start a local development server, run:
```bash
ng serve
```
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
## Code scaffolding
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
```bash
ng generate component component-name
```
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
```bash
ng generate --help
```
## Building
To build the project run:
```bash
ng build
```
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
## Running unit tests
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
```bash
ng test
```
## Running end-to-end tests
For end-to-end (e2e) testing, run:
```bash
ng e2e
```
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
## Additional Resources
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
- **Framework** : [Angular 19](https://angular.io/)
- **Style** : [TailwindCSS](https://tailwindcss.com/)
- **Déploiement** : hébergé sur [johanleroy.fr](https://johanleroy.fr)
- **Autres** :
- Responsive Design
- SEO Friendly (balises meta, titles dynamiques, etc.)
- Dark Mode 🌒 (si activé)

BIN
public/img/icon/C.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

BIN
public/img/icon/CPP.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/img/icon/FastAPI.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/img/icon/SQL-Server.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
public/img/icon/SQLite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
public/img/icon/angular.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 36 KiB

BIN
public/img/icon/bootstrap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/img/icon/expressjs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
public/img/icon/flutter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/img/icon/kotlin.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/img/icon/phpstorm.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
public/img/icon/sf.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
public/img/icon/spring.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
public/img/icon/tailwind.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
public/src/assets/cv.pdf
View File

Binary file not shown.

10
src/app/_models/particule.ts Normal file
View File

@@ -0,0 +1,10 @@
export interface Particle {
id: number;
size: number;
x: number;
y: number;
opacity: number;
rotation: number;
speed: number;
element: HTMLDivElement;
}

204
src/app/public/pages/experience/experience.component.html
View File

@@ -1,184 +1,184 @@
<!-- Section Expérience Professionnelle -->
<section id="experience" class="py-20 bg-gradient-to-b from-[#FFFAFF] to-[#F8F9FA]">
<section id="experience" 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">Mon Expérience Professionnelle</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">Mon parcours professionnel dans le développement informatique et les technologies.</p>
<h2 class="text-4xl font-bold text-primary-blue dark:text-primary-light mb-4">Mon Expérience Professionnelle</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">Mon parcours professionnel dans le développement informatique et les technologies.</p>
</div>
<!-- Carte d'expérience 1 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
<div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
<div class="flex flex-col md:flex-row">
<!-- Logo entreprise ou illustration -->
<div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="text-center">
<div class="w-24 h-24 mx-auto mb-4">
<img src="img/company/almeria.png" alt="Almeria" class="w-full h-full" />
</div>
<h3 class="text-xl font-bold">Développeur</h3>
<p class="text-[#3E92CC] font-medium">Depuis 2023</p>
<p class="text-primary-light dark:text-primary-blue font-medium">Depuis 2023</p>
</div>
</div>
<!-- Contenu -->
<div class="w-full md:w-3/4 p-6 md:p-8">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold text-[#0A2463]">Almeria</h3>
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Almeria</h3>
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
</div>
<p class="text-gray-600 mb-6">Conception et développement d'applications web et de logiciels d'intégration ERP.</p>
<h4 class="font-semibold text-[#0A2463] mb-3">Missions principales:</h4>
<p class="text-primary-dark dark:text-primary-white mb-6">Conception et développement d'applications web et de logiciels d'intégration ERP.</p>
<h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Analyse, conception et développement d'applications web</span>
<span class="text-black dark:text-white">Analyse, conception et développement d'applications web</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Création de logiciels d'intégration ERP</span>
<span class="text-black dark:text-white">Création de logiciels d'intégration ERP</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Maintenance et évolution des applications existantes</span>
<span class="text-black dark:text-white">Maintenance et évolution des applications existantes</span>
</li>
</ul>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Angular</span>
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Express JS</span>
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">SQL server</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Angular</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Express JS</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">SQL server</span>
</div>
</div>
</div>
</div>
<!-- Carte d'expérience 2 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
<div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
<div class="flex flex-col md:flex-row">
<!-- Logo entreprise ou illustration -->
<div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="text-center">
<div class="w-32 h-32 mx-auto mb-4">
<img src="img/company/cerema.png" alt="CEREMA" class="w-full h-full" />
</div>
<h3 class="text-xl font-bold">Technicien</h3>
<p class="text-[#3E92CC] font-medium">2021 - 2023</p>
<p class="text-primary-light dark:text-primary-blue font-medium">2021 - 2023</p>
</div>
</div>
<!-- Contenu -->
<div class="w-full md:w-3/4 p-6 md:p-8">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold text-[#0A2463]">CEREMA</h3>
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">CEREMA</h3>
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
</div>
<p class="text-gray-600 mb-6">Technicien évaluation mesure trafic et mobilité, spécialisé dans l'installation de capteurs et l'analyse de données.</p>
<h4 class="font-semibold text-[#0A2463] mb-3">Missions principales:</h4>
<p class="text-primary-dark dark:text-primary-white mb-6">Technicien évaluation mesure trafic et mobilité, spécialisé dans l'installation de capteurs et l'analyse de données.</p>
<h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Installation de capteurs provisoires dans le secteur mobilité</span>
<span class="text-black dark:text-white">Installation de capteurs provisoires dans le secteur mobilité</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Optimisation des données dans l'innovation d'outils numériques</span>
<span class="text-black dark:text-white">Optimisation des données dans l'innovation d'outils numériques</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Analyse et traitement des données de trafic et mobilité</span>
<span class="text-black dark:text-white">Analyse et traitement des données de trafic et mobilité</span>
</li>
</ul>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Analyse de données</span>
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">PHP</span>
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">mariaDB</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Analyse de données</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">PHP</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">mariaDB</span>
</div>
</div>
</div>
</div>
<!-- Carte d'expérience 3 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
<div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
<div class="flex flex-col md:flex-row">
<!-- Logo entreprise ou illustration -->
<div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="text-center">
<div class="w-30 h-24 mx-auto mb-4">
<img src="img/company/sncf.png" alt="SNCF réseau" class="w-full h-full" />
</div>
<h3 class="text-xl font-bold">Agent télécom</h3>
<p class="text-[#3E92CC] font-medium">2019 - 2021</p>
<p class="text-primary-light dark:text-primary-blue font-medium">2019 - 2021</p>
</div>
</div>
<!-- Contenu -->
<div class="w-full md:w-3/4 p-6 md:p-8">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold text-[#0A2463]">RESEAU SNCF</h3>
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">RESEAU SNCF</h3>
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
</div>
<p class="text-gray-600 mb-6">Agent télécom chargé de la maintenance des équipements de sonorisation, d'affichage et de téléphonie sur le réseau ferroviaire.</p>
<h4 class="font-semibold text-[#0A2463] mb-3">Missions principales:</h4>
<p class="text-primary-dark dark:text-primary-white mb-6">Agent télécom chargé de la maintenance des équipements de sonorisation, d'affichage et de téléphonie sur le réseau ferroviaire.</p>
<h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
<ul class="space-y-2 mb-6">
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Maintenance préventive et corrective des équipements</span>
<span class="text-black dark:text-white">Maintenance préventive et corrective des équipements</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Installation et réparation des systèmes d'affichage en gare</span>
<span class="text-black dark:text-white">Installation et réparation des systèmes d'affichage en gare</span>
</li>
<li class="flex items-start">
<svg class="w-5 h-5 text-[#D8315B] mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-accent mr-2 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span>Gestion des équipements téléphoniques sur les voies ferrées</span>
<span class="text-black dark:text-white">Gestion des équipements téléphoniques sur les voies ferrées</span>
</li>
</ul>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Télécommunications</span>
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Maintenance</span>
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Équipements audio</span>
<span class="bg-gray-100 text-[#0A2463] px-3 py-1 rounded-full text-sm">Affichage dynamique</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Télécommunications</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Maintenance</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Équipements audio</span>
<span class="bg-gray-100 text-primary-blue dark:bg-gray-900 dark:text-primary-light px-3 py-1 rounded-full text-sm">Affichage dynamique</span>
</div>
</div>
</div>
</div>
<!-- Carte d'expérience 4 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
<div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
<div class="flex flex-col md:flex-row">
<!-- Logo entreprise ou illustration -->
<div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="text-center">
<div class="w-40 h-12 mx-auto mb-4">
<img src="img/company/novoferm.png" alt="Novoferm" class="w-full h-full" />
</div>
<h3 class="text-xl font-bold">Stage développeur</h3>
<p class="text-[#3E92CC] font-medium">2019</p>
<p class="text-primary-light dark:text-primary-blue font-medium">2019</p>
</div>
</div>
<!-- Contenu -->
<div class="w-full md:w-3/4 p-6 md:p-8">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold text-[#0A2463]">Novoferm</h3>
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">7 semaines</span>
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Novoferm</h3>
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">7 semaines</span>
</div>
<p class="text-gray-600 mb-6">
<p class="text-primary-dark dark:text-primary-white mb-6">
Stage de développement d'application web qui permet de récupérer des fichiers stockés dans SharePoint.
Système et réseau, réparation et configuration de PC, imprimante et téléphone.</p>
</div>
@@ -186,25 +186,25 @@
</div>
<!-- Carte d'expérience 5 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
<div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
<div class="flex flex-col md:flex-row">
<!-- Logo entreprise ou illustration -->
<div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white text-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="text-center">
<div class="w-30 h-16 mx-auto mb-4">
<img src="img/company/pivotpoint.png" alt="Pivot Point" class="w-full h-full" />
</div>
<h3 class="text-xl font-bold">Stage développeur</h3>
<p class="text-[#3E92CC] font-medium">2018</p>
<p class="text-primary-light dark:text-primary-blue font-medium">2018</p>
</div>
</div>
<!-- Contenu -->
<div class="w-full md:w-3/4 p-6 md:p-8">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold text-[#0A2463]">Pivot Point</h3>
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">1 semaine</span>
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Pivot Point</h3>
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">1 semaine</span>
</div>
<p class="text-gray-600 mb-6">
<p class="text-primary-dark dark:text-primary-white mb-6">
Stage de développement d'un site internet en php
</p>
</div>
@@ -212,25 +212,25 @@
</div>
<!-- Carte d'expérience 6 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-10 hover:shadow-xl transition-shadow">
<div class="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden mb-10 transition-transform duration-300 hover:scale-105">
<div class="flex flex-col md:flex-row">
<!-- Logo entreprise ou illustration -->
<div class="bg-[#0A2463] text-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white text-white w-full md:w-1/4 p-6 flex items-center justify-center">
<div class="text-center">
<div class="w-40 h-6 mx-auto mb-4">
<img src="img/company/actemium.png" alt="Pivot Point" class="w-full h-full" />
</div>
<h3 class="text-xl font-bold">Stage développeur</h3>
<p class="text-[#3E92CC] font-medium">2018</p>
<p class="text-primary-light dark:text-primary-blue font-medium">2018</p>
</div>
</div>
<!-- Contenu -->
<div class="w-full md:w-3/4 p-6 md:p-8">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold text-[#0A2463]">Actemium</h3>
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">1 semaine</span>
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Actemium</h3>
<span class="bg-primary-light dark:bg-primary-blue text-primary-white text-white px-3 py-1 rounded-full text-sm">1 semaine</span>
</div>
<p class="text-gray-600 mb-6">
<p class="text-primary-dark dark:text-primary-white mb-6">
Stage de développement application windows d'automatisation
</p>
</div>
@@ -239,12 +239,12 @@
<!-- Compétences professionnelles -->
<div class="mt-20">
<h3 class="text-2xl font-bold text-[#0A2463] mb-10 text-center">Compétences professionnelles</h3>
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light mb-10 text-center">Compétences professionnelles</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Compétences techniques -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h4 class="text-xl font-semibold text-[#0A2463] mb-6 flex items-center">
<svg class="w-6 h-6 mr-2 text-[#D8315B]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<div class="bg-white dark:bg-black p-6 rounded-lg shadow-md border-2 border-primary-blue dark:border-primary-light">
<h4 class="text-xl font-semibold text-primary-blue dark:text-primary-light mb-6 flex items-center">
<svg class="w-6 h-6 mr-2 text-primary-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
@@ -252,60 +252,60 @@
</h4>
<div class="grid grid-cols-2 gap-x-4 gap-y-6">
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Développement Frontend</span>
<span class="text-primary-dark dark:text-primary-white">Développement Frontend</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Développement Backend</span>
<span class="text-primary-dark dark:text-primary-white">Développement Backend</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Analyse et traitement de données</span>
<span class="text-primary-dark dark:text-primary-white">Analyse et traitement de données</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Mise en production</span>
<span class="text-primary-dark dark:text-primary-white">Mise en production</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Analyse de base de données</span>
<span class="text-primary-dark dark:text-primary-white">Analyse de base de données</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Modélisation UML</span>
<span class="text-primary-dark dark:text-primary-white">Modélisation UML</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Maquettage</span>
<span class="text-primary-dark dark:text-primary-white">Maquettage</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg class="w-5 h-5 text-primary-light mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Sécurité</span>
<span class="text-primary-dark dark:text-primary-white">Sécurité</span>
</div>
</div>
</div>
<!-- Compétences transversales -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h4 class="text-xl font-semibold text-[#0A2463] mb-6 flex items-center">
<svg class="w-6 h-6 mr-2 text-[#D8315B]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<div class="bg-white dark:bg-black p-6 rounded-lg shadow-md border-2 border-primary-blue dark:border-primary-light">
<h4 class="text-xl font-semibold text-primary-blue dark:text-primary-light mb-6 flex items-center">
<svg class="w-6 h-6 mr-2 text-primary-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
Compétences transversales
@@ -315,49 +315,49 @@
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Gestion de projet</span>
<span class="text-primary-dark dark:text-primary-white">Gestion de projet</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Travail en équipe</span>
<span class="text-primary-dark dark:text-primary-white">Travail en équipe</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Analyse de projet</span>
<span class="text-primary-dark dark:text-primary-white">Analyse de projet</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Communication</span>
<span class="text-primary-dark dark:text-primary-white">Communication</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Autonomie</span>
<span class="text-primary-dark dark:text-primary-white">Autonomie</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Organisation</span>
<span class="text-primary-dark dark:text-primary-white">Organisation</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Adaptation</span>
<span class="text-primary-dark dark:text-primary-white">Adaptation</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 text-[#3E92CC] mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700">Veille technologique</span>
<span class="text-primary-dark dark:text-primary-white">Veille technologique</span>
</div>
</div>
</div>

78
src/app/public/pages/formations/formations.component.html
View File

@@ -1,51 +1,51 @@
<!-- Section Formations -->
<section id="formations" class="py-20 bg-[#FFFAFF]">
<section id="formations" 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 Formations</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">Mon parcours d'étude dans le domaine du développement et des systèmes numériques.</p>
<h2 class="text-4xl font-bold text-primary-blue dark:text-primary-light mb-4">Mes Formations</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">Mon parcours d'étude dans le domaine du développement et des systèmes numériques.</p>
</div>
<!-- Timeline des formations -->
<div class="relative">
<!-- Ligne verticale centrale -->
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-[#3E92CC]"></div>
<div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-primary-light"></div>
<!-- Formation 1 -->
<div class="mb-16 md:mb-0 relative">
<div class="flex flex-col md:flex-row items-center">
<!-- Date pour mobile -->
<div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
<div class="md:hidden mb-4 bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
Depuis 2023
</div>
<!-- Contenu gauche -->
<div class="md:w-1/2 md:pr-12 md:text-right">
<div class="hidden md:block">
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Concepteur Développeur d'Application</h3>
<p class="text-gray-500 hover:text-gray-400 underline mb-2">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">Concepteur Développeur d'Application</h3>
<p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2">
<a href="https://www.eni-ecole.fr" target="_blank">Campus ENI Nantes</a>
</p>
<p class="text-gray-600">
<p class="text-primary-dark dark:text-primary-white">
Formation sur la conception et le développement d'applications web et mobiles. Acquisition des compétences en architecture logicielle et gestion de projets informatiques.
</p>
</div>
</div>
<!-- Indicateur central -->
<div class="md:w-8 md:h-8 bg-[#D8315B] rounded-full border-4 border-[#FFFAFF] absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
<div class="md:w-8 md:h-8 bg-primary-accent rounded-full border-4 border-primary-white dark:border-primary-dark absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
<!-- Date (desktop) -->
<div class="hidden md:flex md:w-1/2 md:pl-12 items-center">
<div class="bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
Depuis 2023
</div>
</div>
<!-- Contenu pour mobile -->
<div class="md:hidden">
<h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">Concepteur Développeur d'Application</h3>
<p class="text-gray-500 mb-2 text-center underline">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 text-center">Concepteur Développeur d'Application</h3>
<p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2 text-center">
<a href="https://www.eni-ecole.fr" target="_blank">Campus ENI Nantes</a>
</p>
<p class="text-gray-600">Formation sur la conception et le développement d'applications web et mobiles. Acquisition des compétences en architecture logicielle et gestion de projets informatiques.</p>
<p class="text-primary-dark dark:text-primary-white">Formation sur la conception et le développement d'applications web et mobiles. Acquisition des compétences en architecture logicielle et gestion de projets informatiques.</p>
</div>
</div>
</div>
@@ -54,36 +54,36 @@
<div class="mb-16 md:mb-0 relative md:mt-32">
<div class="flex flex-col md:flex-row items-center">
<!-- Date pour mobile -->
<div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
<div class="md:hidden mb-4 bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
2021 - 2023
</div>
<!-- Date (desktop) -->
<div class="hidden md:flex md:w-1/2 md:pr-12 md:justify-end">
<div class="bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
2021 - 2023
</div>
</div>
<!-- Indicateur central -->
<div class="md:w-8 md:h-8 bg-[#D8315B] rounded-full border-4 border-[#FFFAFF] absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
<div class="md:w-8 md:h-8 bg-primary-accent rounded-full border-4 border-primary-white dark:border-primary-dark absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
<!-- Contenu droite -->
<div class="md:w-1/2 md:pl-12">
<div class="hidden md:block">
<h3 class="text-xl font-bold text-[#0A2463] mb-2">BTS Systèmes Numériques</h3>
<p class="text-gray-500 hover:text-gray-400 underline mb-2">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">BTS Systèmes Numériques</h3>
<p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2">
<a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
</p>
<p class="text-gray-600">
<p class="text-primary-dark dark:text-primary-white">
Formation technique supérieur sur les systèmes électroniques et informatiques, avec une spécialisation dans l'informatique industrielle et les réseaux.
</p>
</div>
</div>
<!-- Contenu pour mobile -->
<div class="md:hidden">
<h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">BTS Systèmes Numériques</h3>
<p class="text-gray-500 hover:text-gray-400 underline mb-2 text-center">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 text-center">BTS Systèmes Numériques</h3>
<p class="text-primary-dark dark:text-primary-white underline mb-2 text-center">
<a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
</p>
<p class="text-gray-600">
<p class="text-primary-dark dark:text-primary-white">
Formation technique supérieur sur les systèmes électroniques et informatiques, avec une spécialisation dans l'informatique industrielle et les réseaux.
</p>
</div>
@@ -94,36 +94,36 @@
<div class="mb-16 md:mb-0 relative md:mt-32">
<div class="flex flex-col md:flex-row items-center">
<!-- Date pour mobile -->
<div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
<div class="md:hidden mb-4 bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
2018 - 2021
</div>
<!-- Contenu gauche -->
<div class="md:w-1/2 md:pr-12 md:text-right">
<div class="hidden md:block">
<h3 class="text-xl font-bold text-[#0A2463] mb-2">BAC PRO Systèmes Numériques</h3>
<p class="text-gray-500 hover:text-gray-400 underline mb-2">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">BAC PRO Systèmes Numériques</h3>
<p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2">
<a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
</p>
<p class="text-gray-600">
<p class="text-primary-dark dark:text-primary-white">
Formation aux systèmes électroniques et réseaux informatiques. Apprentissage des bases de l'installation et de la maintenance de systèmes numériques.
</p>
</div>
</div>
<!-- Indicateur central -->
<div class="md:w-8 md:h-8 bg-[#D8315B] rounded-full border-4 border-[#FFFAFF] absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
<div class="md:w-8 md:h-8 bg-primary-accent rounded-full border-4 border-primary-white dark:border-primary-dark absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
<!-- Date (desktop) -->
<div class="hidden md:flex md:w-1/2 md:pl-12 items-center">
<div class="bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
2018 - 2021
</div>
</div>
<!-- Contenu pour mobile -->
<div class="md:hidden">
<h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">BAC PRO Systèmes Numériques</h3>
<p class="text-gray-500 hover:text-gray-400 underline mb-2 text-center">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 text-center">BAC PRO Systèmes Numériques</h3>
<p class="text-primary-dark dark:text-primary-white underline mb-2 text-center">
<a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
</p>
<p class="text-gray-600">
<p class="text-primary-dark dark:text-primary-white">
Formation aux systèmes électroniques et réseaux informatiques. Apprentissage des bases de l'installation et de la maintenance de systèmes numériques.
</p>
</div>
@@ -134,30 +134,30 @@
<div class="mb-16 md:mb-0 relative md:mt-32">
<div class="flex flex-col md:flex-row items-center">
<!-- Date pour mobile -->
<div class="md:hidden mb-4 bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
<div class="md:hidden mb-4 bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
Avant 2018
</div>
<!-- Date (desktop) -->
<div class="hidden md:flex md:w-1/2 md:pr-12 md:justify-end">
<div class="bg-[#0A2463] text-[#FFFAFF] py-2 px-4 rounded-lg font-semibold">
<div class="bg-primary-blue dark:bg-primary-light text-primary-white py-2 px-4 rounded-lg font-semibold">
Avant 2018
</div>
</div>
<!-- Indicateur central -->
<div class="md:w-8 md:h-8 bg-[#D8315B] rounded-full border-4 border-[#FFFAFF] absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
<div class="md:w-8 md:h-8 bg-primary-accent rounded-full border-4 border-primary-white dark:border-primary-dark absolute left-1/2 transform -translate-x-1/2 z-10 hidden md:block"></div>
<!-- Contenu droite -->
<div class="md:w-1/2 md:pl-12">
<div class="hidden md:block">
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Diplôme National du Brevet</h3>
<p class="text-gray-500 hover:text-gray-400 underline mb-2">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">Diplôme National du Brevet</h3>
<p class="text-primary-dark hover:text-primary-blue dark:text-primary-white dark:hover:text-primary-light underline mb-2">
<a href="https://www.ensemble-scolaire-saint-pere.fr" target="_blank">Ensemble scolaire Saint Père En Retz</a>
</p>
</div>
</div>
<!-- Contenu pour mobile -->
<div class="md:hidden">
<h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">Diplôme National du Brevet</h3>
<p class="text-gray-500 hover:text-gray-400 underline mb-2 text-center">
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 text-center">Diplôme National du Brevet</h3>
<p class="text-primary-dark dark:text-primary-white underline mb-2 text-center">
<a href="https://www.ensemble-scolaire-saint-pere.fr" target="_blank">Ensemble scolaire Saint Père En Retz</a>
</p>
</div>

24
src/app/public/pages/home/home.component.css
View File

@@ -0,0 +1,24 @@
.profile-shadow {
animation: profile-glow 3s infinite alternate ease-in-out;
}
@keyframes profile-glow {
from { box-shadow: 0 0 15px rgba(62, 146, 204, 0.4); }
to { box-shadow: 0 0 40px rgba(62, 146, 204, 0.7); }
}
/* Animation du nom */
.name-glow {
animation: text-glow 4s infinite alternate ease-in-out;
}
@keyframes text-glow {
from {
text-shadow: 0 0 10px rgba(62, 146, 204, 0.5);
transform: scale(1);
}
to {
text-shadow: 0 0 25px rgba(62, 146, 204, 0.8);
transform: scale(1.03);
}
}

282
src/app/public/pages/home/home.component.html
View File

@@ -1,20 +1,24 @@
<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">
<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-[#3E92CC]">Johan Leroy</span>
<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-[#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>
<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 -->
<div class="w-64 h-64 rounded-full overflow-hidden border-4 border-[#3E92CC] shadow-lg">
<!-- 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"
@@ -23,213 +27,285 @@
</div>
</div>
</div>
</div>
</section>
<section class="py-16 bg-[#FFFAFF]">
<div class="container mx-auto px-4 max-w-7xl">
<h2 class="text-3xl font-bold text-center text-[#0A2463] mb-12">Mes compétences</h2>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
<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 rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<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-[#0A2463]">Langages</h3>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/dart.png" alt="dart" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-gray-600 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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">Java</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">JS</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">TS</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/kotlin.png" alt="kotlin" class="max-w-full max-h-full" />
<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-gray-600 text-center">Kotlin</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">PHP</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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/python.png" alt="python" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-gray-600 text-center">Python</span>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">PHP</span>
</div>
</div>
</div>
</div>
<!-- Frameworks -->
<div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<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-[#0A2463]">Frameworks</h3>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">Angular</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/flutter.png" alt="flutter" class="max-w-full max-h-full" />
<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-gray-600 text-center">Flutter</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/sf.png" alt="Symfony" class="max-w-full max-h-full" />
<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-gray-600 text-center">Symfony</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/spring.png" alt="spring boot" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-gray-600 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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">Tailwind</span>
<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 rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<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-[#0A2463]">Bases de données</h3>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">MariaDB</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/mongo.png" alt="mongoDB" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-gray-600 text-center">MongoDB</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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">MySQL</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">PostgreSQL</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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<img src="img/icon/SQL-Server.png" alt="SQLserver" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-gray-600 text-center">SQL Server</span>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">PostgreSQL</span>
</div>
</div>
</div>
</div>
<!-- Outils -->
<div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<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-[#0A2463]">Outils</h3>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">Android</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">Git</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">PhpStorm</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">WebStorm</span>
<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 rounded-full p-2 transition-all duration-300 hover:bg-gray-100">
<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-gray-600 text-center">VS Code</span>
<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 rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
<div class="border-t-4 border-[#0A2463] rounded-t-lg"></div>
<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-[#0A2463]">Centres d'intérêt</h3>
<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-[#D8315B] 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-[#D8315B] 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-[#D8315B] text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">DJ</span>
<span class="bg-[#D8315B] text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Projet personnel</span>
<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>

139
src/app/public/pages/home/home.component.ts
View File

@@ -1,6 +1,7 @@
import {Component, OnInit} from '@angular/core';
import {AfterViewInit, Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {RouterLink} from '@angular/router';
import {SeoService} from '../../../_services/seo.service';
import {Particle} from '../../../_models/particule';
@Component({
selector: 'app-home',
@@ -10,9 +11,20 @@ import {SeoService} from '../../../_services/seo.service';
templateUrl: './home.component.html',
styleUrl: './home.component.css'
})
export class HomeComponent implements OnInit {
export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
constructor(private seoService: SeoService) { }
@ViewChild('particleContainer') particleContainer!: ElementRef;
@ViewChild('profileImage') profileImage!: ElementRef;
private particles: Particle[] = [];
private particleCount = 20;
private animationFrameId: number | null = null;
private mouseX = 0;
private mouseY = 0;
private windowWidth = 0;
private windowHeight = 0;
constructor(private seoService: SeoService, private ngZone: NgZone) { }
ngOnInit(): void {
this.seoService.updateSEOMetaTags({
@@ -22,6 +34,127 @@ export class HomeComponent implements OnInit {
ogImage: 'https://johanleroy.fr/favicon.ico'
});
this.seoService.createCanonicalLink();
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
}
ngAfterViewInit(): void {
// Exécuter les animations en dehors de la zone Angular pour de meilleures performances
this.ngZone.runOutsideAngular(() => {
this.createParticles();
this.setupMouseTracking();
this.startAnimationLoop();
});
}
ngOnDestroy(): void {
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
window.removeEventListener('mousemove', this.handleMouseMove);
window.removeEventListener('resize', this.handleResize);
}
private createParticles(): void {
const container = this.particleContainer.nativeElement as HTMLElement;
container.innerHTML = '';
for (let i = 0; i < this.particleCount; i++) {
const size = Math.random() * 60 + 20; // Entre 20px et 80px
const x = Math.random() * 100; // Position en %
const y = Math.random() * 100 + 50; // Position en %
const opacity = Math.random() * 0.3 + 0.1; // Opacité entre 0.1 et 0.4
const speed = Math.random() * 0.5 + 0.2; // Vitesse variable
const particleEl = document.createElement('div');
particleEl.style.position = 'absolute';
particleEl.style.width = `${size}px`;
particleEl.style.height = `${size}px`;
particleEl.style.borderRadius = '50%';
particleEl.style.background = `rgba(62, 146, 204, ${opacity})`;
particleEl.style.left = `${x}%`;
particleEl.style.top = `${y}%`;
particleEl.style.transition = 'transform 0.3s ease-out';
particleEl.style.pointerEvents = 'none';
particleEl.style.backdropFilter = 'blur(1px)'; // Effet de flou léger
container.appendChild(particleEl);
this.particles.push({
id: i,
size,
x,
y,
opacity,
rotation: Math.random() * 360,
speed,
element: particleEl
});
}
}
private handleMouseMove = (e: MouseEvent): void => {
this.mouseX = e.clientX;
this.mouseY = e.clientY;
}
private handleResize = (): void => {
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
}
private setupMouseTracking(): void {
window.addEventListener('mousemove', this.handleMouseMove);
window.addEventListener('resize', this.handleResize);
}
private startAnimationLoop(): void {
let lastTimestamp = 0;
const animate = (timestamp: number): void => {
const deltaTime = lastTimestamp ? timestamp - lastTimestamp : 16;
lastTimestamp = timestamp;
// Calculer l'effet parallaxe basé sur la position de la souris
const centerX = this.windowWidth / 2;
const centerY = this.windowHeight / 2;
const moveX = (this.mouseX - centerX) / centerX; // -1 à 1
const moveY = (this.mouseY - centerY) / centerY; // -1 à 1
// Animer l'image de profil - effet de parallaxe
if (this.profileImage?.nativeElement) {
const el = this.profileImage.nativeElement;
el.style.transform = `translate(${moveX * 8}px, ${moveY * 8}px)`;
}
// Animer les particules
this.particles.forEach(particle => {
// Mouvement montant avec léger déplacement latéral
particle.y -= particle.speed * (deltaTime / 16);
particle.x += Math.sin(timestamp / 2000 + particle.id) * 0.03 * (deltaTime / 16);
particle.rotation += 0.1 * (deltaTime / 16);
// Réinitialiser les particules qui sortent de l'écran
if (particle.y < -10) {
particle.y = 110;
particle.x = Math.random() * 100;
particle.opacity = Math.random() * 0.3 + 0.1;
}
// Effet parallaxe sur les particules
const parallaxX = moveX * (particle.size / 40) * 10;
const parallaxY = moveY * (particle.size / 40) * 10;
// Appliquer les transformations
particle.element.style.top = `${particle.y}%`;
particle.element.style.left = `${particle.x}%`;
particle.element.style.transform = `translate(${parallaxX}px, ${parallaxY}px) rotate(${particle.rotation}deg)`;
});
this.animationFrameId = requestAnimationFrame(animate);
};
this.animationFrameId = requestAnimationFrame(animate);
}
}

89
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">
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>
</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">
Voir le projet
</a>
</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">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>
<!-- 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
</span>
</div>
</a>
</div>
</div>
</div>
</div>

52
src/app/public/public-layout/public-layout.component.html
View File

@@ -1,26 +1,50 @@
<div class="min-h-screen bg-[#FFFAFF]">
<header class="bg-[#181818] text-[#FFFAFF] shadow-lg fixed w-full z-10">
<div class="min-h-screen bg-primary-white text-primary-white dark:bg-primary-dark dark:text-primary-white transition-colors duration-300">
<header class="bg-primary-light dark:bg-primary-blue shadow-lg fixed w-full z-100">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<!-- Logo / Nom -->
<div class="text-xl font-bold">
<a routerLink="/" class="flex items-center">
<span class="text-[#3E92CC]">Johan</span>
<span class="text-primary-dark dark:text-primary-light">Johan</span>
<span class="ml-1">Leroy</span>
</a>
</div>
<!-- Navigation -->
<nav class="hidden md:flex space-x-8">
<a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-[#3E92CC] transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-[#3E92CC] transition-colors">Mes projets</a>
<nav class="hidden md:flex items-center space-x-8">
<a routerLink="/" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes projets</a>
<!-- Dark Mode Toggle Button pour Desktop -->
<button (click)="toggleDarkMode()" class="focus:outline-none p-1 rounded-full hover:bg-gray-700 transition-colors">
<!-- Icône soleil (visible en mode sombre) -->
<svg *ngIf="isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Icône lune (visible en mode clair) -->
<svg *ngIf="!isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
</nav>
<div class="flex items-center md:hidden">
<!-- Dark Mode Toggle Button pour Mobile -->
<button (click)="toggleDarkMode()" class="mr-4 focus:outline-none p-1 rounded-full hover:bg-gray-700 transition-colors">
<!-- Icône soleil (visible en mode sombre) -->
<svg *ngIf="isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Icône lune (visible en mode clair) -->
<svg *ngIf="!isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<!-- Menu mobile -->
<div class="md:hidden">
<button (click)="toggleMobileMenu()" class="text-[#FFFAFF] focus:outline-none">
<button (click)="toggleMobileMenu()" class="text-primary-white focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
@@ -31,10 +55,10 @@
<!-- Menu mobile déroulant -->
<div *ngIf="mobileMenuOpen" class="md:hidden mt-4 pb-4">
<div class="flex flex-col space-y-3">
<a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-[#3E92CC] transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-[#3E92CC] transition-colors">Mes projets</a>
<a routerLink="/" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes projets</a>
</div>
</div>
</div>

29
src/app/public/public-layout/public-layout.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router';
import {NgIf} from '@angular/common';
@@ -12,12 +12,37 @@ import {NgIf} from '@angular/common';
templateUrl: './public-layout.component.html',
styleUrl: './public-layout.component.css'
})
export class PublicLayoutComponent {
export class PublicLayoutComponent implements OnInit {
mobileMenuOpen = false;
isDarkMode = false;
toggleMobileMenu() {
this.mobileMenuOpen = !this.mobileMenuOpen;
}
ngOnInit() {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (savedTheme === null && prefersDark)) {
this.isDarkMode = true;
document.documentElement.classList.add('dark');
} else {
this.isDarkMode = false;
document.documentElement.classList.remove('dark');
}
}
toggleDarkMode() {
this.isDarkMode = !this.isDarkMode;
if (this.isDarkMode) {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
}
}

8
src/styles.css
View File

@@ -1,9 +1,11 @@
@import "tailwindcss";
@custom-variant dark (&:where([class=dark], [class=dark] *));
@theme {
--color-primary-dark: #181818;
--color-primary-blue: #0A2463;
--colo-primary-light: #3E92CC;
--colo-primary-white: #FFFAFF;
--colo-primary-accent: #D8315B;
--color-primary-light: #3E92CC;
--color-primary-white: #FFFAFF;
--color-primary-accent: #D8315B;
}