johanleroy/Portfolio_angular
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX UI

Browse Source
This commit is contained in:
JLEROY
2025-04-24 16:23:22 +02:00
parent 7143973594
commit 4bb9cda8df
6 changed files with 93 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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();

1
src/index.html
View File

@@ -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>