FIX UI

2025-04-24 16:23:22 +02:00
parent 7143973594
commit 4bb9cda8df
6 changed files with 93 additions and 35 deletions
--- a/public/img/icon/aws.png
+++ b/public/img/icon/aws.png
--- a/public/img/icon/azure.png
+++ b/public/img/icon/azure.png
--- a/public/img/icon/postman.png
+++ b/public/img/icon/postman.png
--- a/src/app/public/pages/home/home.component.html
+++ b/src/app/public/pages/home/home.component.html
@@ -17,9 +17,7 @@
      </div>
      <div class="md:w-1/2 flex justify-center">
        <div
-          class="profile-container 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"
-          [class.rotate-3d]="isRotating"
-          (click)="toggleRotation()">
+          class="profile-container 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">
          <img
            src="img/pp.jpeg"
            alt="Johan Leroy"
@@ -29,9 +27,9 @@
      </div>
    </div>

-    <h2 class="text-4xl font-bold text-center text-primary-blue dark:text-primary-light my-5">Mes compétences</h2>
+    <h2 class="text-4xl font-bold text-center text-primary-blue dark:text-primary-light my-12">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">
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-16">
      <!-- Langages -->
      <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
@@ -178,6 +176,13 @@
              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Git</span>
            </div>

+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/postman.png" alt="Postman" class="max-w-full max-h-full" />
+              </div>
+              <span class="text-xs text-primary-blue dark:text-primary-light text-center">Postman</span>
+            </div>
+
            <div class="flex flex-col items-center">
              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
                <img src="img/icon/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
@@ -201,26 +206,11 @@
          </div>
        </div>
      </div>
-
-      <!-- Centres d'intérêt -->
-      <div class="bg-white dark:bg-black rounded-lg shadow-lg transition-transform duration-300 hover:-translate-y-1 hover:shadow-xl">
-        <div class="border-t-4 border-primary-blue dark:border-primary-light rounded-t-lg"></div>
-        <div class="p-6">
-          <h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">Centres d'intérêt</h3>
-          <div class="flex flex-wrap gap-2">
-            <span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Jeux vidéo</span>
-            <span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Films & Séries</span>
-            <span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">DJ</span>
-            <span class="bg-primary-accent text-white px-3 py-1 rounded-full text-sm hover:bg-opacity-80 transition-all duration-300">Projet personnel</span>
-          </div>
-        </div>
-      </div>
    </div>

-    <!-- Technologies débutantes -->
-    <h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Technologies en apprentissage</h3>
-
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <!-- Technologies manipulé -->
+    <h3 class="text-2xl font-semibold text-primary-blue dark:text-primary-light mb-6 text-center">Autres technologies manipulées</h3>
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-16">
      <!-- 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>
@@ -262,7 +252,7 @@
      <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>
+          <h3 class="text-xl font-semibold mb-6 text-primary-light dark:text-primary-white">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">
@@ -292,7 +282,7 @@
      <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>
+          <h3 class="text-xl font-semibold mb-6 text-primary-light dark:text-primary-white">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">
@@ -310,6 +300,83 @@
          </div>
        </div>
      </div>
+
+      <!-- Outils 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-primary-light dark:text-primary-white">Outils</h3>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="flex flex-col items-center">
+              <div class="w-12 h-12 flex items-center justify-center mb-2 bg-gray-50 dark:bg-gray-950 rounded-full p-2 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
+                <img src="img/icon/azure.png" alt="azure" class="max-w-full max-h-full opacity-75" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">Azure</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/aws.png" alt="aws" class="max-w-full max-h-full opacity-75" />
+              </div>
+              <span class="text-xs text-primary-light dark:text-primary-white text-center">AWS</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Centres d'intérêt -->
+    <div class="bg-primary-white dark:bg-primary-dark rounded-lg shadow-lg overflow-hidden">
+      <div class="bg-gradient-to-r from-primary-blue to-primary-light h-2 w-full"></div>
+      <div class="p-6">
+        <h2 class="text-2xl text-primary-dark dark:text-white mb-6">Centres d'intérêt</h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <!-- Jeux vidéo -->
+          <div class="relative group cursor-pointer">
+            <div class="absolute inset-0 bg-purple-500 rounded-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <div class="relative p-6 flex flex-col items-center justify-center bg-white dark:bg-black rounded-lg shadow-md transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+              <div class="w-12 h-12 flex items-center justify-center rounded-full bg-purple-500 text-white mb-4">
+                <i class="fas fa-gamepad text-xl"></i>
+              </div>
+              <span class="font-medium text-primary-dark dark:text-primary-white text-center">Jeux vidéo</span>
+            </div>
+          </div>
+
+          <!-- Films & Séries -->
+          <div class="relative group cursor-pointer">
+            <div class="absolute inset-0 bg-blue-500 rounded-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <div class="relative p-6 flex flex-col items-center justify-center bg-white dark:bg-black rounded-lg shadow-md transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+              <div class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-500 text-white mb-4">
+                <i class="fas fa-film text-xl"></i>
+              </div>
+              <span class="font-medium text-primary-dark dark:text-primary-white text-center">Films & Séries</span>
+            </div>
+          </div>
+
+          <!-- DJ -->
+          <div class="relative group cursor-pointer">
+            <div class="absolute inset-0 bg-green-500 rounded-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <div class="relative p-6 flex flex-col items-center justify-center bg-white dark:bg-black rounded-lg shadow-md transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+              <div class="w-12 h-12 flex items-center justify-center rounded-full bg-green-500 text-white mb-4">
+                <i class="fas fa-music text-xl"></i>
+              </div>
+              <span class="font-medium text-primary-dark dark:text-primary-white text-center">DJ</span>
+            </div>
+          </div>
+
+          <!-- Projet personnel -->
+          <div class="relative group cursor-pointer">
+            <div class="absolute inset-0 bg-orange-500 rounded-lg opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
+            <div class="relative p-6 flex flex-col items-center justify-center bg-white dark:bg-black rounded-lg shadow-md transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
+              <div class="w-12 h-12 flex items-center justify-center rounded-full bg-orange-500 text-white mb-4">
+                <i class="fas fa-laptop-code text-xl"></i>
+              </div>
+              <span class="font-medium text-primary-dark dark:text-primary-white text-center">Projet personnel</span>
+            </div>
+          </div>
+        </div>
+      </div>
    </div>
  </div>
 </section>
--- a/src/app/public/pages/home/home.component.ts
+++ b/src/app/public/pages/home/home.component.ts
@@ -18,7 +18,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
  private particles: Particle[] = [];
  private particleCount = 100;
  private animationFrameId: number | null = null;
-  isRotating: boolean = false;

  constructor(private seoService: SeoService, private ngZone: NgZone) { }

@@ -32,15 +31,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
    this.seoService.createCanonicalLink();
  }

-  toggleRotation(): void {
-    if (!this.isRotating) {
-      this.isRotating = true;
-      setTimeout(() => {
-        this.isRotating = false;
-      }, 1500);
-    }
-  }
-
  ngAfterViewInit(): void {
    this.ngZone.runOutsideAngular(() => {
      this.createParticles();
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,7 @@
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="https://kit.fontawesome.com/dbb1c9090a.js" crossorigin="anonymous"></script>
 </head>
 <body>
  <app-root></app-root>