technostrea/trouvetonprofile
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

refacto page mon profile

Browse Source
This commit is contained in:
styve Lioumba
2025-11-15 17:30:09 +01:00
parent 620b781219
commit b669190bce
29 changed files with 1702 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/app/routes/profile/profile-detail/profile-detail.component.html
View File

@@ -1,7 +1,8 @@
<section class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
<section
class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800"
>
<div class="container mx-auto px-4 py-6 md:py-12">
<div class="max-w-5xl mx-auto">
<!-- Header avec bannière et bouton retour -->
<div class="relative rounded-2xl overflow-hidden shadow-xl mb-8 animate-fade-in">
<div class="h-48 md:h-64 bg-cover bg-center bg-auth relative">
@@ -31,7 +32,9 @@
<!-- Badge vérifié -->
@if (profile().estVerifier) {
<div class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow">
<div
class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
@@ -56,13 +59,17 @@
<div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6">
<!-- Avatar avec animation -->
<div class="relative group animate-slide-up">
<div class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300">
<div
class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300"
>
<div class="w-full h-full rounded-full overflow-hidden bg-white">
@if (user().avatar) {
<img
alt="{{ user().username }}"
class="object-cover w-full h-full"
src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{ user().avatar }}"
src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{
user().avatar
}}"
loading="lazy"
/>
} @else {
@@ -76,11 +83,15 @@
</div>
</div>
<!-- Indicateur en ligne (optionnel) -->
<div class="absolute bottom-2 right-2 w-4 h-4 md:w-5 md:h-5 bg-green-500 rounded-full border-4 border-white shadow-lg"></div>
<div
class="absolute bottom-2 right-2 w-4 h-4 md:w-5 md:h-5 bg-green-500 rounded-full border-4 border-white shadow-lg"
></div>
</div>
<!-- Nom et profession -->
<div class="flex-1 text-center md:text-left mb-4 md:mb-0 animate-slide-up animation-delay-100">
<div
class="flex-1 text-center md:text-left mb-4 md:mb-0 animate-slide-up animation-delay-100"
>
@if (user().name) {
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
{{ user().name }}
@@ -105,20 +116,33 @@
<!-- Contenu principal -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
<!-- Colonne gauche - Informations -->
<div class="lg:col-span-1 space-y-6 animate-slide-up animation-delay-200">
<!-- Card Biographie -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
<div
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
>
<h3
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
clip-rule="evenodd"
/>
</svg>
Biographie
</h3>
@if (profile().bio) {
<p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">{{ profile().bio }}</p>
<p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
{{ profile().bio }}
</p>
} @else {
<p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
@@ -130,10 +154,21 @@
<!-- Card Secteur -->
@if (profile().secteur) {
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
<div
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
>
<h3
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
/>
</svg>
Secteur
</h3>
@@ -143,11 +178,24 @@
<!-- Card Réseaux -->
@if (profile().reseaux) {
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
<path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
<div
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
>
<h3
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"
/>
<path
d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"
/>
</svg>
Réseaux
</h3>
@@ -158,12 +206,24 @@
<!-- Colonne droite - À propos et Projets -->
<div class="lg:col-span-2 space-y-6 animate-slide-up animation-delay-300">
<!-- Card À propos -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
<div
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
>
<h2
class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/>
</svg>
À propos
</h2>
@@ -173,9 +233,18 @@
</div>
<!-- Card Projets -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
<div
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
>
<h2
class="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-indigo-500"
viewBox="0 0 20 20"
fill="currentColor"
>
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
Projets

3
src/app/routes/profile/profile-detail/profile-detail.component.scss
View File

@@ -22,7 +22,8 @@
}
@keyframes pulseSlow {
0%, 100% {
0%,
100% {
opacity: 1;
}
50% {

8
src/app/routes/profile/profile-detail/profile-detail.component.ts
View File

@@ -12,13 +12,7 @@ import { Profile } from '@app/domain/profiles/profile.model';
@Component({
selector: 'app-profile-detail',
standalone: true,
imports: [
ChipsComponent,
ReseauxComponent,
RouterLink,
UpperCasePipe,
ProjectListComponent,
],
imports: [ChipsComponent, ReseauxComponent, RouterLink, UpperCasePipe, ProjectListComponent],
templateUrl: './profile-detail.component.html',
styleUrl: './profile-detail.component.scss',
})

45
src/app/routes/profile/profile-list/profile-list.component.html
View File

@@ -1,19 +1,31 @@
<section class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-16">
<section
class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-16"
>
<!-- Hero Section avec recherche -->
<div class="relative overflow-hidden">
<!-- Décorations de fond -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
<div
class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"
></div>
<div
class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"
></div>
<div
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"
></div>
</div>
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-12">
<!-- Titre de la page -->
<div class="text-center mb-8 animate-fade-in">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4">
<h1
class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4"
>
Découvrez les
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">
<span
class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600"
>
meilleurs profils
</span>
</h1>
@@ -24,7 +36,9 @@
<!-- Barre de recherche améliorée -->
<div class="max-w-3xl mx-auto animate-slide-up animation-delay-200">
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 hover:shadow-2xl transition-shadow duration-300">
<div
class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 hover:shadow-2xl transition-shadow duration-300"
>
<app-search (onSearchChange)="showNewQuery($event)" />
</div>
</div>
@@ -34,16 +48,21 @@
<!-- Liste des profils -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
@if (loading().isLoading) {
<app-loading message="Chargement des profils..."/>
<app-loading message="Chargement des profils..." />
} @else {
<!-- Titre de section -->
<div class="mb-6 flex items-center justify-between animate-fade-in">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
Tous les profils
</h2>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Tous les profils</h2>
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
/>
</svg>
<span>{{ profiles().length }} profil(s)</span>
</div>

3
src/app/routes/profile/profile-list/profile-list.component.scss
View File

@@ -1,6 +1,7 @@
/* Animations blob pour le fond */
@keyframes blob {
0%, 100% {
0%,
100% {
transform: translate(0, 0) scale(1);
}
25% {

4
src/app/routes/profile/profile-list/profile-list.component.ts
View File

@@ -3,8 +3,8 @@ import { SearchComponent } from '@app/shared/features/search/search.component';
import { VerticalProfileListComponent } from '@app/shared/components/vertical-profile-list/vertical-profile-list.component';
import { UntilDestroy } from '@ngneat/until-destroy';
import { ProfileFacade } from '@app/ui/profiles/profile.facade';
import {LoadingComponent} from "@app/shared/components/loading/loading.component";
import {Router} from "@angular/router";
import { LoadingComponent } from '@app/shared/components/loading/loading.component';
import { Router } from '@angular/router';
@Component({
selector: 'app-profile-list',