diff --git a/src/app/public/pages/experience/experience.component.html b/src/app/public/pages/experience/experience.component.html index 8ecc9b9..b3606bf 100644 --- a/src/app/public/pages/experience/experience.component.html +++ b/src/app/public/pages/experience/experience.component.html @@ -30,22 +30,28 @@

Conception et développement d'applications web et de logiciels d'intégration ERP.

Missions principales:

@@ -80,22 +86,28 @@

Technicien évaluation mesure trafic et mobilité, spécialisé dans l'installation de capteurs et l'analyse de données.

Missions principales:

@@ -130,22 +142,28 @@

Agent télécom chargé de la maintenance des équipements de sonorisation, d'affichage et de téléphonie sur le réseau ferroviaire.

Missions principales:

@@ -251,52 +269,68 @@ Compétences techniques
-
- - - +
+
+ + + +
Développement Frontend
-
- - - +
+
+ + + +
Développement Backend
-
- - - +
+
+ + + +
Analyse et traitement de données
-
- - - +
+
+ + + +
Mise en production
-
- - - +
+
+ + + +
Analyse de base de données
-
- - - +
+
+ + + +
Modélisation UML
-
- - - +
+
+ + + +
Maquettage
-
- - - +
+
+ + + +
Sécurité
@@ -311,52 +345,68 @@ Compétences transversales
-
- - - +
+
+ + + +
Gestion de projet
-
- - - +
+
+ + + +
Travail en équipe
-
- - - +
+
+ + + +
Analyse de projet
-
- - - +
+
+ + + +
Communication
-
- - - +
+
+ + + +
Autonomie
-
- - - +
+
+ + + +
Organisation
-
- - - +
+
+ + + +
Adaptation
-
- - - +
+
+ + + +
Veille technologique
diff --git a/src/app/public/pages/home/home.component.css b/src/app/public/pages/home/home.component.css index d72f5dd..0aaf194 100644 --- a/src/app/public/pages/home/home.component.css +++ b/src/app/public/pages/home/home.component.css @@ -22,3 +22,21 @@ transform: scale(1.03); } } + +.profile-container { + perspective: 1000px; + transform-style: preserve-3d; +} + +@keyframes flip3d { + 0% { + transform: rotateY(0deg); + } + 100% { + transform: rotateY(360deg); + } +} + +.rotate-3d { + animation: flip3d 1.5s ease-in-out; +} diff --git a/src/app/public/pages/home/home.component.html b/src/app/public/pages/home/home.component.html index 0859f45..0dfe7cf 100644 --- a/src/app/public/pages/home/home.component.html +++ b/src/app/public/pages/home/home.component.html @@ -16,9 +16,10 @@
- -
+
Johan Leroy { + this.isRotating = false; + }, 1500); + } } 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(); }); } @@ -51,8 +52,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { if (this.animationFrameId) { cancelAnimationFrame(this.animationFrameId); } - window.removeEventListener('mousemove', this.handleMouseMove); - window.removeEventListener('resize', this.handleResize); } private createParticles(): void { @@ -93,21 +92,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { } } - 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; @@ -115,18 +99,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { 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 @@ -141,14 +113,9 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { 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);