set animation
This commit is contained in:
JLEROY
67
README.md
67
README.md
@@ -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:
|
- **Framework** : [Angular 19](https://angular.io/)
|
||||||
|
- **Style** : [TailwindCSS](https://tailwindcss.com/)
|
||||||
```bash
|
- **Déploiement** : hébergé sur [johanleroy.fr](https://johanleroy.fr)
|
||||||
ng serve
|
- **Autres** :
|
||||||
```
|
- Responsive Design
|
||||||
|
- SEO Friendly (balises meta, titles dynamiques, etc.)
|
||||||
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.
|
- Dark Mode 🌒 (si activé)
|
||||||
|
|
||||||
## 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.
|
|
||||||
|
|||||||
BIN
public/img/icon/C.png
Normal file
BIN
public/img/icon/C.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
public/img/icon/CPP.png
Normal file
BIN
public/img/icon/CPP.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/img/icon/FastAPI.png
Normal file
BIN
public/img/icon/FastAPI.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 30 KiB |
BIN
public/img/icon/SQLite.png
Normal file
BIN
public/img/icon/SQLite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 36 KiB |
BIN
public/img/icon/bootstrap.png
Normal file
BIN
public/img/icon/bootstrap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/img/icon/expressjs.png
Normal file
BIN
public/img/icon/expressjs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
10
src/app/_models/particule.ts
Normal file
10
src/app/_models/particule.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
export interface Particle {
|
||||||
|
id: number;
|
||||||
|
size: number;
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
opacity: number;
|
||||||
|
rotation: number;
|
||||||
|
speed: number;
|
||||||
|
element: HTMLDivElement;
|
||||||
|
}
|
||||||
@@ -1,184 +1,184 @@
|
|||||||
<!-- Section Expérience Professionnelle -->
|
<!-- 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">
|
<div class="container mx-auto px-4">
|
||||||
<!-- En-tête de la section -->
|
<!-- En-tête de la section -->
|
||||||
<div class="text-center mb-16">
|
<div class="text-center mb-16">
|
||||||
<h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mon Expérience Professionnelle</h2>
|
<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-[#D8315B] mx-auto"></div>
|
<div class="w-24 h-1 bg-primary-accent 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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<!-- Carte d'expérience 1 -->
|
<!-- 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">
|
<div class="flex flex-col md:flex-row">
|
||||||
<!-- Logo entreprise ou illustration -->
|
<!-- 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="text-center">
|
||||||
<div class="w-24 h-24 mx-auto mb-4">
|
<div class="w-24 h-24 mx-auto mb-4">
|
||||||
<img src="img/company/almeria.png" alt="Almeria" class="w-full h-full" />
|
<img src="img/company/almeria.png" alt="Almeria" class="w-full h-full" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-xl font-bold">Développeur</h3>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu -->
|
<!-- Contenu -->
|
||||||
<div class="w-full md:w-3/4 p-6 md:p-8">
|
<div class="w-full md:w-3/4 p-6 md:p-8">
|
||||||
<div class="flex justify-between items-start mb-4">
|
<div class="flex justify-between items-start mb-4">
|
||||||
<h3 class="text-2xl font-bold text-[#0A2463]">Almeria</h3>
|
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Almeria</h3>
|
||||||
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
|
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-gray-600 mb-6">Conception et développement d'applications web et de logiciels d'intégration ERP.</p>
|
<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-[#0A2463] mb-3">Missions principales:</h4>
|
<h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
|
||||||
<ul class="space-y-2 mb-6">
|
<ul class="space-y-2 mb-6">
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</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>
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</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>
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</svg>
|
||||||
<span>Maintenance et évolution des applications existantes</span>
|
<span class="text-black dark:text-white">Maintenance et évolution des applications existantes</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="flex flex-wrap gap-2">
|
<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-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-[#0A2463] 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">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">SQL server</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Carte d'expérience 2 -->
|
<!-- 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">
|
<div class="flex flex-col md:flex-row">
|
||||||
<!-- Logo entreprise ou illustration -->
|
<!-- 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="text-center">
|
||||||
<div class="w-32 h-32 mx-auto mb-4">
|
<div class="w-32 h-32 mx-auto mb-4">
|
||||||
<img src="img/company/cerema.png" alt="CEREMA" class="w-full h-full" />
|
<img src="img/company/cerema.png" alt="CEREMA" class="w-full h-full" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-xl font-bold">Technicien</h3>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu -->
|
<!-- Contenu -->
|
||||||
<div class="w-full md:w-3/4 p-6 md:p-8">
|
<div class="w-full md:w-3/4 p-6 md:p-8">
|
||||||
<div class="flex justify-between items-start mb-4">
|
<div class="flex justify-between items-start mb-4">
|
||||||
<h3 class="text-2xl font-bold text-[#0A2463]">CEREMA</h3>
|
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">CEREMA</h3>
|
||||||
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
|
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
|
||||||
</div>
|
</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>
|
<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-[#0A2463] mb-3">Missions principales:</h4>
|
<h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
|
||||||
<ul class="space-y-2 mb-6">
|
<ul class="space-y-2 mb-6">
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</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>
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</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>
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="flex flex-wrap gap-2">
|
<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-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-[#0A2463] 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">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">mariaDB</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Carte d'expérience 3 -->
|
<!-- 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">
|
<div class="flex flex-col md:flex-row">
|
||||||
<!-- Logo entreprise ou illustration -->
|
<!-- 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="text-center">
|
||||||
<div class="w-30 h-24 mx-auto mb-4">
|
<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" />
|
<img src="img/company/sncf.png" alt="SNCF réseau" class="w-full h-full" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-xl font-bold">Agent télécom</h3>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu -->
|
<!-- Contenu -->
|
||||||
<div class="w-full md:w-3/4 p-6 md:p-8">
|
<div class="w-full md:w-3/4 p-6 md:p-8">
|
||||||
<div class="flex justify-between items-start mb-4">
|
<div class="flex justify-between items-start mb-4">
|
||||||
<h3 class="text-2xl font-bold text-[#0A2463]">RESEAU SNCF</h3>
|
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">RESEAU SNCF</h3>
|
||||||
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">2 ans</span>
|
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">2 ans</span>
|
||||||
</div>
|
</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>
|
<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-[#0A2463] mb-3">Missions principales:</h4>
|
<h4 class="font-semibold text-primary-blue dark:text-primary-light mb-3">Missions principales:</h4>
|
||||||
<ul class="space-y-2 mb-6">
|
<ul class="space-y-2 mb-6">
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</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>
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</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>
|
||||||
<li class="flex items-start">
|
<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>
|
<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>
|
</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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="flex flex-wrap gap-2">
|
<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-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-[#0A2463] 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">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-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-[#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">Affichage dynamique</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Carte d'expérience 4 -->
|
<!-- 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">
|
<div class="flex flex-col md:flex-row">
|
||||||
<!-- Logo entreprise ou illustration -->
|
<!-- 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="text-center">
|
||||||
<div class="w-40 h-12 mx-auto mb-4">
|
<div class="w-40 h-12 mx-auto mb-4">
|
||||||
<img src="img/company/novoferm.png" alt="Novoferm" class="w-full h-full" />
|
<img src="img/company/novoferm.png" alt="Novoferm" class="w-full h-full" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-xl font-bold">Stage développeur</h3>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu -->
|
<!-- Contenu -->
|
||||||
<div class="w-full md:w-3/4 p-6 md:p-8">
|
<div class="w-full md:w-3/4 p-6 md:p-8">
|
||||||
<div class="flex justify-between items-start mb-4">
|
<div class="flex justify-between items-start mb-4">
|
||||||
<h3 class="text-2xl font-bold text-[#0A2463]">Novoferm</h3>
|
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Novoferm</h3>
|
||||||
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">7 semaines</span>
|
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">7 semaines</span>
|
||||||
</div>
|
</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.
|
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>
|
Système et réseau, réparation et configuration de PC, imprimante et téléphone.</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -186,25 +186,25 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Carte d'expérience 5 -->
|
<!-- 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">
|
<div class="flex flex-col md:flex-row">
|
||||||
<!-- Logo entreprise ou illustration -->
|
<!-- 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="text-center">
|
||||||
<div class="w-30 h-16 mx-auto mb-4">
|
<div class="w-30 h-16 mx-auto mb-4">
|
||||||
<img src="img/company/pivotpoint.png" alt="Pivot Point" class="w-full h-full" />
|
<img src="img/company/pivotpoint.png" alt="Pivot Point" class="w-full h-full" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-xl font-bold">Stage développeur</h3>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu -->
|
<!-- Contenu -->
|
||||||
<div class="w-full md:w-3/4 p-6 md:p-8">
|
<div class="w-full md:w-3/4 p-6 md:p-8">
|
||||||
<div class="flex justify-between items-start mb-4">
|
<div class="flex justify-between items-start mb-4">
|
||||||
<h3 class="text-2xl font-bold text-[#0A2463]">Pivot Point</h3>
|
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Pivot Point</h3>
|
||||||
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">1 semaine</span>
|
<span class="bg-primary-light dark:bg-primary-blue text-primary-white px-3 py-1 rounded-full text-sm">1 semaine</span>
|
||||||
</div>
|
</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
|
Stage de développement d'un site internet en php
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -212,25 +212,25 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Carte d'expérience 6 -->
|
<!-- 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">
|
<div class="flex flex-col md:flex-row">
|
||||||
<!-- Logo entreprise ou illustration -->
|
<!-- 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="text-center">
|
||||||
<div class="w-40 h-6 mx-auto mb-4">
|
<div class="w-40 h-6 mx-auto mb-4">
|
||||||
<img src="img/company/actemium.png" alt="Pivot Point" class="w-full h-full" />
|
<img src="img/company/actemium.png" alt="Pivot Point" class="w-full h-full" />
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-xl font-bold">Stage développeur</h3>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu -->
|
<!-- Contenu -->
|
||||||
<div class="w-full md:w-3/4 p-6 md:p-8">
|
<div class="w-full md:w-3/4 p-6 md:p-8">
|
||||||
<div class="flex justify-between items-start mb-4">
|
<div class="flex justify-between items-start mb-4">
|
||||||
<h3 class="text-2xl font-bold text-[#0A2463]">Actemium</h3>
|
<h3 class="text-2xl font-bold text-primary-blue dark:text-primary-light">Actemium</h3>
|
||||||
<span class="bg-[#3E92CC] text-white px-3 py-1 rounded-full text-sm">1 semaine</span>
|
<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>
|
</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
|
Stage de développement application windows d'automatisation
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -239,12 +239,12 @@
|
|||||||
|
|
||||||
<!-- Compétences professionnelles -->
|
<!-- Compétences professionnelles -->
|
||||||
<div class="mt-20">
|
<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">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
<!-- Compétences techniques -->
|
<!-- Compétences techniques -->
|
||||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
<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-[#0A2463] mb-6 flex items-center">
|
<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-[#D8315B]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
<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="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>
|
<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>
|
</svg>
|
||||||
@@ -252,60 +252,60 @@
|
|||||||
</h4>
|
</h4>
|
||||||
<div class="grid grid-cols-2 gap-x-4 gap-y-6">
|
<div class="grid grid-cols-2 gap-x-4 gap-y-6">
|
||||||
<div class="flex items-center">
|
<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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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>
|
<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>
|
</svg>
|
||||||
<span class="text-gray-700">Maquettage</span>
|
<span class="text-primary-dark dark:text-primary-white">Maquettage</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<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>
|
<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>
|
</svg>
|
||||||
<span class="text-gray-700">Sécurité</span>
|
<span class="text-primary-dark dark:text-primary-white">Sécurité</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Compétences transversales -->
|
<!-- Compétences transversales -->
|
||||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
<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-[#0A2463] mb-6 flex items-center">
|
<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-[#D8315B]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
<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>
|
<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>
|
</svg>
|
||||||
Compétences transversales
|
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">
|
<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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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-[#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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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-[#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>
|
<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>
|
</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>
|
||||||
<div class="flex items-center">
|
<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-[#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>
|
<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>
|
</svg>
|
||||||
<span class="text-gray-700">Communication</span>
|
<span class="text-primary-dark dark:text-primary-white">Communication</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<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-[#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>
|
<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>
|
</svg>
|
||||||
<span class="text-gray-700">Autonomie</span>
|
<span class="text-primary-dark dark:text-primary-white">Autonomie</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<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-[#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>
|
<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>
|
</svg>
|
||||||
<span class="text-gray-700">Organisation</span>
|
<span class="text-primary-dark dark:text-primary-white">Organisation</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<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-[#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>
|
<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>
|
</svg>
|
||||||
<span class="text-gray-700">Adaptation</span>
|
<span class="text-primary-dark dark:text-primary-white">Adaptation</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<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-[#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>
|
<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>
|
</svg>
|
||||||
<span class="text-gray-700">Veille technologique</span>
|
<span class="text-primary-dark dark:text-primary-white">Veille technologique</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,51 +1,51 @@
|
|||||||
<!-- Section Formations -->
|
<!-- Section Formations -->
|
||||||
<section id="formations" class="py-20 bg-[#FFFAFF]">
|
<section id="formations" class="py-20">
|
||||||
<div class="container mx-auto px-4">
|
<div class="container mx-auto px-4">
|
||||||
<!-- En-tête de la section -->
|
<!-- En-tête de la section -->
|
||||||
<div class="text-center mb-16">
|
<div class="text-center mb-16">
|
||||||
<h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mes Formations</h2>
|
<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-[#D8315B] mx-auto"></div>
|
<div class="w-24 h-1 bg-primary-accent 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>
|
<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>
|
</div>
|
||||||
<!-- Timeline des formations -->
|
<!-- Timeline des formations -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<!-- Ligne verticale centrale -->
|
<!-- 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 -->
|
<!-- Formation 1 -->
|
||||||
<div class="mb-16 md:mb-0 relative">
|
<div class="mb-16 md:mb-0 relative">
|
||||||
<div class="flex flex-col md:flex-row items-center">
|
<div class="flex flex-col md:flex-row items-center">
|
||||||
<!-- Date pour mobile -->
|
<!-- 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
|
Depuis 2023
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu gauche -->
|
<!-- Contenu gauche -->
|
||||||
<div class="md:w-1/2 md:pr-12 md:text-right">
|
<div class="md:w-1/2 md:pr-12 md:text-right">
|
||||||
<div class="hidden md:block">
|
<div class="hidden md:block">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Concepteur Développeur d'Application</h3>
|
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">Concepteur Développeur d'Application</h3>
|
||||||
<p class="text-gray-500 hover:text-gray-400 underline mb-2">
|
<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>
|
<a href="https://www.eni-ecole.fr" target="_blank">Campus ENI Nantes</a>
|
||||||
</p>
|
</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.
|
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Indicateur central -->
|
<!-- 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) -->
|
<!-- Date (desktop) -->
|
||||||
<div class="hidden md:flex md:w-1/2 md:pl-12 items-center">
|
<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
|
Depuis 2023
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu pour mobile -->
|
<!-- Contenu pour mobile -->
|
||||||
<div class="md:hidden">
|
<div class="md:hidden">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">Concepteur Développeur d'Application</h3>
|
<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-gray-500 mb-2 text-center underline">
|
<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>
|
<a href="https://www.eni-ecole.fr" target="_blank">Campus ENI Nantes</a>
|
||||||
</p>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,36 +54,36 @@
|
|||||||
<div class="mb-16 md:mb-0 relative md:mt-32">
|
<div class="mb-16 md:mb-0 relative md:mt-32">
|
||||||
<div class="flex flex-col md:flex-row items-center">
|
<div class="flex flex-col md:flex-row items-center">
|
||||||
<!-- Date pour mobile -->
|
<!-- 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
|
2021 - 2023
|
||||||
</div>
|
</div>
|
||||||
<!-- Date (desktop) -->
|
<!-- Date (desktop) -->
|
||||||
<div class="hidden md:flex md:w-1/2 md:pr-12 md:justify-end">
|
<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
|
2021 - 2023
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Indicateur central -->
|
<!-- 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 -->
|
<!-- Contenu droite -->
|
||||||
<div class="md:w-1/2 md:pl-12">
|
<div class="md:w-1/2 md:pl-12">
|
||||||
<div class="hidden md:block">
|
<div class="hidden md:block">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2">BTS Systèmes Numériques</h3>
|
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">BTS Systèmes Numériques</h3>
|
||||||
<p class="text-gray-500 hover:text-gray-400 underline mb-2">
|
<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>
|
<a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
|
||||||
</p>
|
</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.
|
Formation technique supérieur sur les systèmes électroniques et informatiques, avec une spécialisation dans l'informatique industrielle et les réseaux.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu pour mobile -->
|
<!-- Contenu pour mobile -->
|
||||||
<div class="md:hidden">
|
<div class="md:hidden">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">BTS Systèmes Numériques</h3>
|
<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-gray-500 hover:text-gray-400 underline mb-2 text-center">
|
<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>
|
<a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
|
||||||
</p>
|
</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.
|
Formation technique supérieur sur les systèmes électroniques et informatiques, avec une spécialisation dans l'informatique industrielle et les réseaux.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -94,36 +94,36 @@
|
|||||||
<div class="mb-16 md:mb-0 relative md:mt-32">
|
<div class="mb-16 md:mb-0 relative md:mt-32">
|
||||||
<div class="flex flex-col md:flex-row items-center">
|
<div class="flex flex-col md:flex-row items-center">
|
||||||
<!-- Date pour mobile -->
|
<!-- 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
|
2018 - 2021
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu gauche -->
|
<!-- Contenu gauche -->
|
||||||
<div class="md:w-1/2 md:pr-12 md:text-right">
|
<div class="md:w-1/2 md:pr-12 md:text-right">
|
||||||
<div class="hidden md:block">
|
<div class="hidden md:block">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2">BAC PRO Systèmes Numériques</h3>
|
<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-gray-500 hover:text-gray-400 underline mb-2">
|
<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>
|
<a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
|
||||||
</p>
|
</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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Indicateur central -->
|
<!-- 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) -->
|
<!-- Date (desktop) -->
|
||||||
<div class="hidden md:flex md:w-1/2 md:pl-12 items-center">
|
<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
|
2018 - 2021
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu pour mobile -->
|
<!-- Contenu pour mobile -->
|
||||||
<div class="md:hidden">
|
<div class="md:hidden">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">BAC PRO Systèmes Numériques</h3>
|
<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-gray-500 hover:text-gray-400 underline mb-2 text-center">
|
<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>
|
<a href="https://stfelixlasalle.fr" target="_blank">Campus Saint Félix La Salle Nantes</a>
|
||||||
</p>
|
</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.
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -134,30 +134,30 @@
|
|||||||
<div class="mb-16 md:mb-0 relative md:mt-32">
|
<div class="mb-16 md:mb-0 relative md:mt-32">
|
||||||
<div class="flex flex-col md:flex-row items-center">
|
<div class="flex flex-col md:flex-row items-center">
|
||||||
<!-- Date pour mobile -->
|
<!-- 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
|
Avant 2018
|
||||||
</div>
|
</div>
|
||||||
<!-- Date (desktop) -->
|
<!-- Date (desktop) -->
|
||||||
<div class="hidden md:flex md:w-1/2 md:pr-12 md:justify-end">
|
<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
|
Avant 2018
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Indicateur central -->
|
<!-- 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 -->
|
<!-- Contenu droite -->
|
||||||
<div class="md:w-1/2 md:pl-12">
|
<div class="md:w-1/2 md:pl-12">
|
||||||
<div class="hidden md:block">
|
<div class="hidden md:block">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Diplôme National du Brevet</h3>
|
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2">Diplôme National du Brevet</h3>
|
||||||
<p class="text-gray-500 hover:text-gray-400 underline mb-2">
|
<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>
|
<a href="https://www.ensemble-scolaire-saint-pere.fr" target="_blank">Ensemble scolaire Saint Père En Retz</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Contenu pour mobile -->
|
<!-- Contenu pour mobile -->
|
||||||
<div class="md:hidden">
|
<div class="md:hidden">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2 text-center">Diplôme National du Brevet</h3>
|
<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-gray-500 hover:text-gray-400 underline mb-2 text-center">
|
<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>
|
<a href="https://www.ensemble-scolaire-saint-pere.fr" target="_blank">Ensemble scolaire Saint Père En Retz</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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]">
|
<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">
|
||||||
<div class="container mx-auto px-4">
|
<!-- 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="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">
|
<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">
|
<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>
|
</h1>
|
||||||
<h2 class="text-2xl md:text-3xl mb-6">Développeur</h2>
|
<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>
|
<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">
|
<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 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-[#3E92CC] text-[#FFFAFF] hover:bg-[#3E92CC] px-6 py-3 rounded-md transition-colors font-medium">Voir mes projets</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>
|
</div>
|
||||||
<div class="md:w-1/2 flex justify-center">
|
<div class="md:w-1/2 flex justify-center">
|
||||||
<!-- Image de profil -->
|
<!-- Image de profil avec animation -->
|
||||||
<div class="w-64 h-64 rounded-full overflow-hidden border-4 border-[#3E92CC] shadow-lg">
|
<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
|
<img
|
||||||
src="img/pp.jpeg"
|
src="img/pp.jpeg"
|
||||||
alt="Johan Leroy"
|
alt="Johan Leroy"
|
||||||
@@ -23,213 +27,285 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 -->
|
<!-- Langages -->
|
||||||
<div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
<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-[#0A2463] rounded-t-lg"></div>
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
||||||
<div class="p-6">
|
<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="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="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" />
|
<img src="img/icon/java.png" alt="java" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/js.png" alt="js" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/Typescript.png" alt="ts" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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/kotlin.png" alt="kotlin" class="max-w-full max-h-full" />
|
<img src="img/icon/python.png" alt="python" class="max-w-full max-h-full opacity-75" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/php.png" alt="php" class="max-w-full max-h-full" />
|
||||||
</div>
|
</div>
|
||||||
<span class="text-xs text-gray-600 text-center">PHP</span>
|
<span class="text-xs text-primary-blue dark:text-primary-light 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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Frameworks -->
|
<!-- Frameworks -->
|
||||||
<div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
<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-[#0A2463] rounded-t-lg"></div>
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
||||||
<div class="p-6">
|
<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="grid grid-cols-3 gap-4">
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/angular.png" alt="angular" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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/flutter.png" alt="flutter" class="max-w-full max-h-full" />
|
<img src="img/icon/expressjs.png" alt="Express" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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/sf.png" alt="Symfony" class="max-w-full max-h-full" />
|
<img src="img/icon/spring.png" alt="spring boot" class="max-w-full max-h-full opacity-75" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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/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">
|
|
||||||
<img src="img/icon/tailwind.png" alt="tailwind" class="max-w-full max-h-full" />
|
<img src="img/icon/tailwind.png" alt="tailwind" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bases de données -->
|
<!-- 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="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-[#0A2463] rounded-t-lg"></div>
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
||||||
<div class="p-6">
|
<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="grid grid-cols-3 gap-4">
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/mariaDB.png" alt="mariaDB" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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/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">
|
|
||||||
<img src="img/icon/mysql.png" alt="mysql" class="max-w-full max-h-full" />
|
<img src="img/icon/mysql.png" alt="mysql" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/PostgreSQL.png" alt="postgreSQL" class="max-w-full max-h-full" />
|
||||||
</div>
|
</div>
|
||||||
<span class="text-xs text-gray-600 text-center">PostgreSQL</span>
|
<span class="text-xs text-primary-blue dark:text-primary-light 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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Outils -->
|
<!-- Outils -->
|
||||||
<div class="bg-white rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
|
<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-[#0A2463] rounded-t-lg"></div>
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
||||||
<div class="p-6">
|
<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="grid grid-cols-3 gap-4">
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/git.png" alt="git" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/WebStorm.png" alt="webstorm" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="flex flex-col items-center">
|
<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" />
|
<img src="img/icon/studio_code.png" alt="studio code" class="max-w-full max-h-full" />
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Centres d'intérêt -->
|
<!-- 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="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-[#0A2463] rounded-t-lg"></div>
|
<div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
|
||||||
<div class="p-6">
|
<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">
|
<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-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-[#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-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-[#D8315B] 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">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">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>
|
</div>
|
||||||
|
|||||||
@@ -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 {RouterLink} from '@angular/router';
|
||||||
import {SeoService} from '../../../_services/seo.service';
|
import {SeoService} from '../../../_services/seo.service';
|
||||||
|
import {Particle} from '../../../_models/particule';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-home',
|
selector: 'app-home',
|
||||||
@@ -10,9 +11,20 @@ import {SeoService} from '../../../_services/seo.service';
|
|||||||
templateUrl: './home.component.html',
|
templateUrl: './home.component.html',
|
||||||
styleUrl: './home.component.css'
|
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 {
|
ngOnInit(): void {
|
||||||
this.seoService.updateSEOMetaTags({
|
this.seoService.updateSEOMetaTags({
|
||||||
@@ -22,6 +34,127 @@ export class HomeComponent implements OnInit {
|
|||||||
ogImage: 'https://johanleroy.fr/favicon.ico'
|
ogImage: 'https://johanleroy.fr/favicon.ico'
|
||||||
});
|
});
|
||||||
this.seoService.createCanonicalLink();
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,67 +1,76 @@
|
|||||||
<!-- Section Projets -->
|
<section id="projets" class="py-20">
|
||||||
<section id="projets" class="py-20 bg-[#FFFAFF]">
|
|
||||||
<div class="container mx-auto px-4">
|
<div class="container mx-auto px-4">
|
||||||
<!-- En-tête de la section -->
|
<!-- En-tête de la section -->
|
||||||
<div class="text-center mb-16">
|
<div class="text-center mb-16">
|
||||||
<h2 class="text-4xl font-bold text-[#0A2463] mb-4">Mes Projets</h2>
|
<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-[#D8315B] mx-auto"></div>
|
<div class="w-24 h-1 bg-primary-accent mx-auto"></div>
|
||||||
<p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">
|
<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.
|
Une sélection de mes réalisations personnelles dans le domaine du développement.
|
||||||
Seuls les projets en production sont mis en avant.
|
Seuls les projets en production sont mis en avant.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Grille de projets -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
|
||||||
<!-- Projet 1 -->
|
<!-- Projet 1 -->
|
||||||
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
|
<a href="https://techos-asso.fr" target="_blank" rel="noopener noreferrer"
|
||||||
<div class="h-48 bg-white relative">
|
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">
|
||||||
<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">
|
<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
|
Web
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Site vitrine de l'association Techos</h3>
|
<div class="p-6">
|
||||||
<p class="text-gray-600 mb-4">
|
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 group-hover:underline">
|
||||||
Développement d'un site web vitrine complète pour l'association Techos.
|
Site vitrine de l'association Techos
|
||||||
</p>
|
</h3>
|
||||||
<div class="flex flex-wrap gap-2 mb-4">
|
<p class="text-primary-dark dark:text-primary-white mb-4">
|
||||||
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Angular</span>
|
Développement d'un site web vitrine complète pour l'association Techos.
|
||||||
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">Express JS</span>
|
</p>
|
||||||
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-sm">mariaDB</span>
|
<div class="flex flex-wrap gap-2 mb-4">
|
||||||
</div>
|
<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>
|
||||||
<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">
|
<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>
|
||||||
Voir le projet
|
<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>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
<span class="inline-block text-sm text-primary-blue dark:text-primary-light font-medium underline group-hover:no-underline">
|
||||||
</div>
|
Voir le projet
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<!-- Projet 2 -->
|
<!-- Projet 2 -->
|
||||||
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow">
|
<a href="https://libertypourlavie.fr" target="_blank" rel="noopener noreferrer"
|
||||||
<div class="h-48 bg-[#3E92CC] relative">
|
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">
|
||||||
<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">
|
<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
|
Web
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h3 class="text-xl font-bold text-[#0A2463] mb-2">Site web de l'association Liberty Pour La Vie</h3>
|
<h3 class="text-xl font-bold text-primary-blue dark:text-primary-light mb-2 group-hover:underline">
|
||||||
<p class="text-gray-600 mb-4">
|
Site web de l'association Liberty Pour La Vie
|
||||||
Développement d'un site web complète pour 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>
|
</p>
|
||||||
<div class="flex flex-wrap gap-2 mb-4">
|
<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-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-gray-700 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">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-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-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">mariaDB</span>
|
||||||
</div>
|
</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
|
Voir le projet
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,26 +1,50 @@
|
|||||||
<div class="min-h-screen bg-[#FFFAFF]">
|
<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-[#181818] text-[#FFFAFF] shadow-lg fixed w-full z-10">
|
<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="container mx-auto px-4 py-4">
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
<!-- Logo / Nom -->
|
<!-- Logo / Nom -->
|
||||||
<div class="text-xl font-bold">
|
<div class="text-xl font-bold">
|
||||||
<a routerLink="/" class="flex items-center">
|
<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>
|
<span class="ml-1">Leroy</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
<nav class="hidden md:flex space-x-8">
|
<nav class="hidden md:flex items-center space-x-8">
|
||||||
<a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
|
<a routerLink="/" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Accueil</a>
|
||||||
<a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</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-[#3E92CC] transition-colors">Mon expérience professionnelle</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-[#3E92CC] transition-colors">Mes projets</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>
|
</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 -->
|
<!-- Menu mobile -->
|
||||||
<div class="md:hidden">
|
<button (click)="toggleMobileMenu()" class="text-primary-white focus:outline-none">
|
||||||
<button (click)="toggleMobileMenu()" class="text-[#FFFAFF] 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">
|
<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" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
</svg>
|
</svg>
|
||||||
@@ -31,10 +55,10 @@
|
|||||||
<!-- Menu mobile déroulant -->
|
<!-- Menu mobile déroulant -->
|
||||||
<div *ngIf="mobileMenuOpen" class="md:hidden mt-4 pb-4">
|
<div *ngIf="mobileMenuOpen" class="md:hidden mt-4 pb-4">
|
||||||
<div class="flex flex-col space-y-3">
|
<div class="flex flex-col space-y-3">
|
||||||
<a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
|
<a routerLink="/" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Accueil</a>
|
||||||
<a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</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-[#3E92CC] transition-colors">Mon expérience professionnelle</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-[#3E92CC] transition-colors">Mes projets</a>
|
<a routerLink="/projets" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes projets</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { Component } from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {RouterLink, RouterOutlet} from '@angular/router';
|
import {RouterLink, RouterOutlet} from '@angular/router';
|
||||||
import {NgIf} from '@angular/common';
|
import {NgIf} from '@angular/common';
|
||||||
|
|
||||||
@@ -12,12 +12,37 @@ import {NgIf} from '@angular/common';
|
|||||||
templateUrl: './public-layout.component.html',
|
templateUrl: './public-layout.component.html',
|
||||||
styleUrl: './public-layout.component.css'
|
styleUrl: './public-layout.component.css'
|
||||||
})
|
})
|
||||||
export class PublicLayoutComponent {
|
export class PublicLayoutComponent implements OnInit {
|
||||||
|
|
||||||
mobileMenuOpen = false;
|
mobileMenuOpen = false;
|
||||||
|
isDarkMode = false;
|
||||||
|
|
||||||
toggleMobileMenu() {
|
toggleMobileMenu() {
|
||||||
this.mobileMenuOpen = !this.mobileMenuOpen;
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@custom-variant dark (&:where([class=dark], [class=dark] *));
|
||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
--color-primary-dark: #181818;
|
--color-primary-dark: #181818;
|
||||||
--color-primary-blue: #0A2463;
|
--color-primary-blue: #0A2463;
|
||||||
--colo-primary-light: #3E92CC;
|
--color-primary-light: #3E92CC;
|
||||||
--colo-primary-white: #FFFAFF;
|
--color-primary-white: #FFFAFF;
|
||||||
--colo-primary-accent: #D8315B;
|
--color-primary-accent: #D8315B;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user