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 17:13:33 +02:00
parent 4bb9cda8df
commit ec857a03c9
8 changed files with 98 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/icon/debian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
public/img/icon/docker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/img/icon/eclipse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/img/icon/firebase.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/img/icon/swagger.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/img/icon/ubuntu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/img/icon/windows.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

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

@@ -29,14 +29,13 @@
<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-4 gap-6 mb-16">
<div class="grid grid-cols-1 md:grid-cols-3 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>
<div class="p-6">
<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-5 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/java.png" alt="java" class="max-w-full max-h-full" />
@@ -80,7 +79,7 @@
<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">Frameworks</h3>
<div class="grid grid-cols-3 gap-4">
<div class="grid grid-cols-5 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/angular.png" alt="angular" class="max-w-full max-h-full" />
@@ -124,7 +123,7 @@
<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">Bases de données</h3>
<div class="grid grid-cols-3 gap-4">
<div class="grid grid-cols-4 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/mariaDB.png" alt="mariaDB" class="max-w-full max-h-full" />
@@ -156,33 +155,12 @@
</div>
</div>
<!-- Outils -->
<!-- IDE -->
<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">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/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Android</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/git.png" alt="git" class="max-w-full max-h-full" />
</div>
<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>
<h3 class="text-xl font-semibold mb-6 text-primary-blue dark:text-primary-light">IDE</h3>
<div class="grid grid-cols-5 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/phpstorm.png" alt="phpstorm" class="max-w-full max-h-full" />
@@ -197,12 +175,86 @@
<span class="text-xs text-primary-blue dark:text-primary-light text-center">WebStorm</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/eclipse.png" alt="eclipse" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Eclipse</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/studio_code.png" alt="studio code" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">VS Code</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/androidStudio.png" alt="android studio" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Android</span>
</div>
</div>
</div>
</div>
<!-- Outils -->
<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">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/git.png" alt="git" class="max-w-full max-h-full" />
</div>
<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/docker.png" alt="docker" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Docker</span>
</div>
</div>
</div>
</div>
<!-- OS -->
<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">Systèmes d'exploitation</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/windows.png" alt="windows" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Windows</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/debian.png" alt="debian" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Debian</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/ubuntu.png" alt="ubuntu" class="max-w-full max-h-full" />
</div>
<span class="text-xs text-primary-blue dark:text-primary-light text-center">Ubuntu</span>
</div>
</div>
</div>
</div>
@@ -216,7 +268,7 @@
<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="grid grid-cols-4 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" />
@@ -283,7 +335,7 @@
<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">Bases de données</h3>
<div class="grid grid-cols-3 gap-4">
<div class="grid grid-cols-2 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" />
@@ -306,7 +358,7 @@
<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="grid grid-cols-4 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" />
@@ -320,6 +372,20 @@
</div>
<span class="text-xs text-primary-light dark:text-primary-white text-center">AWS</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/firebase.png" alt="firebase" class="max-w-full max-h-full opacity-75" />
</div>
<span class="text-xs text-primary-light dark:text-primary-white text-center">Firebase</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/swagger.png" alt="swagger" class="max-w-full max-h-full opacity-75" />
</div>
<span class="text-xs text-primary-light dark:text-primary-white text-center">Swagger</span>
</div>
</div>
</div>
</div>