Hugging Face's logo

Spaces:
Antoineh
/
neuralskillnet-explorer
Running

App Files Community
Antoineh commited on
Commit
a0bda81
·
verified ·
1 Parent(s): 2e03e90

Promote version ca837c5 to main

Browse files

Promoted commit ca837c5c41fea45d498ba6ac7149fcaabecfd372 to main branch

Files changed (1) hide show
  1. index.html +48 -80
index.html CHANGED
@@ -9,48 +9,23 @@
9
  </head>
10
  <body class="text-white">
11
  <div class="container mx-auto px-6 py-16">
12
- <h1 class="text-5xl font-bold mb-12 text-center bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-600">
13
- My Tech Stack
14
  </h1>
15
- <div class="skills-dome-container relative h-[600px] w-full perspective-1000">
16
- <div class="skills-dome absolute w-full h-full transform-style-preserve-3d" style="transform: rotateY(0deg) rotateX(15deg)">
17
- <!-- HTML/CSS -->
18
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-orange-500 to-red-600 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-orange-500/30" style="transform: rotateY(0deg) translateZ(300px) rotateX(0deg)">
19
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent">
20
- </div>
21
- </div>
22
-
23
- <style>
24
- .perspective-1000 {
25
- perspective: 1000px;
26
- }
27
- .transform-style-preserve-3d {
28
- transform-style: preserve-3d;
29
- }
30
- .skills-dome {
31
- animation: spin 40s linear infinite;
32
- }
33
- @keyframes spin {
34
- 0% { transform: rotateY(0deg) rotateX(15deg); }
35
- 100% { transform: rotateY(360deg) rotateX(15deg); }
36
- }
37
- .skill-card {
38
- width: 200px;
39
- height: 200px;
40
- backface-visibility: hidden;
41
- transform-origin: center center 300px;
42
- }
43
- </style>
44
- <div class="relative z-10 flex flex-col items-center justify-center gap-2 h-full">
45
- <div class="bg-white/20 p-4 rounded-lg hover:bg-white/30 transition-all">
46
- <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" class="w-12 h-12" alt="HTML/CSS"/>
47
  </div>
48
  <h3 class="text-xl font-bold">HTML/CSS</h3>
49
  </div>
50
  </div>
51
  <!-- Tailwind CSS -->
52
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-cyan-500/30" style="transform: rotateY(30deg) translateZ(300px) rotateX(0deg)">
53
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
54
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
55
  <div class="bg-white/20 p-4 rounded-lg">
56
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-plain.svg" class="w-12 h-12" alt="Tailwind CSS"/>
@@ -59,8 +34,8 @@
59
  </div>
60
  </div>
61
  <!-- React -->
62
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/30" style="transform: rotateY(60deg) translateZ(300px) rotateX(0deg)">
63
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
64
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
65
  <div class="bg-white/20 p-4 rounded-lg">
66
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" class="w-12 h-12" alt="React"/>
@@ -69,8 +44,8 @@
69
  </div>
70
  </div>
71
  <!-- Next.js -->
72
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-gray-500/30" style="transform: rotateY(90deg) translateZ(300px) rotateX(0deg)">
73
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
74
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
75
  <div class="bg-white/20 p-4 rounded-lg">
76
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" class="w-12 h-12" alt="Next.js"/>
@@ -79,8 +54,8 @@
79
  </div>
80
  </div>
81
  <!-- TypeScript -->
82
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-blue-600 to-blue-800 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/30" style="transform: rotateY(120deg) translateZ(300px) rotateX(0deg)">
83
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
84
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
85
  <div class="bg-white/20 p-4 rounded-lg">
86
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" class="w-12 h-12" alt="TypeScript"/>
@@ -89,8 +64,8 @@
89
  </div>
90
  </div>
91
  <!-- JavaScript -->
92
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-yellow-500 to-yellow-600 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-yellow-500/30" style="transform: rotateY(150deg) translateZ(300px) rotateX(0deg)">
93
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
94
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
95
  <div class="bg-white/20 p-4 rounded-lg">
96
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" class="w-12 h-12" alt="JavaScript"/>
@@ -99,8 +74,8 @@
99
  </div>
100
  </div>
101
  <!-- Angular -->
102
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-red-500 to-red-600 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-red-500/30" style="transform: rotateY(180deg) translateZ(300px) rotateX(0deg)">
103
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
104
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
105
  <div class="bg-white/20 p-4 rounded-lg">
106
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg" class="w-12 h-12" alt="Angular"/>
@@ -109,8 +84,8 @@
109
  </div>
110
  </div>
111
  <!-- Flutter -->
112
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-teal-500 to-teal-600 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-teal-500/30" style="transform: rotateY(210deg) translateZ(300px) rotateX(0deg)">
113
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
114
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
115
  <div class="bg-white/20 p-4 rounded-lg">
116
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg" class="w-12 h-12" alt="Flutter"/>
@@ -119,8 +94,8 @@
119
  </div>
120
  </div>
121
  <!-- Dart -->
122
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-blue-400 to-blue-500 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/30" style="transform: rotateY(240deg) translateZ(300px) rotateX(0deg)">
123
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
124
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
125
  <div class="bg-white/20 p-4 rounded-lg">
126
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg" class="w-12 h-12" alt="Dart"/>
@@ -129,8 +104,8 @@
129
  </div>
130
  </div>
131
  <!-- PHP -->
132
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-purple-700 to-indigo-800 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-purple-500/30" style="transform: rotateY(270deg) translateZ(300px) rotateX(0deg)">
133
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
134
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
135
  <div class="bg-white/20 p-4 rounded-lg">
136
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" class="w-12 h-12" alt="PHP"/>
@@ -139,8 +114,8 @@
139
  </div>
140
  </div>
141
  <!-- Symfony -->
142
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-gray-700 to-gray-800 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-gray-500/30" style="transform: rotateY(300deg) translateZ(300px) rotateX(0deg)">
143
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
144
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
145
  <div class="bg-white/20 p-4 rounded-lg">
146
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/symfony/symfony-original.svg" class="w-12 h-12" alt="Symfony"/>
@@ -148,9 +123,10 @@
148
  <h3 class="text-xl font-bold">Symfony</h3>
149
  </div>
150
  </div>
 
151
  <!-- Node.js -->
152
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-green-600 to-green-700 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-green-500/30" style="transform: rotateY(330deg) translateZ(300px) rotateX(0deg)">
153
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
154
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
155
  <div class="bg-white/20 p-4 rounded-lg">
156
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" class="w-12 h-12" alt="Node.js"/>
@@ -158,9 +134,10 @@
158
  <h3 class="text-xl font-bold">Node.js</h3>
159
  </div>
160
  </div>
 
161
  <!-- MySQL -->
162
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-orange-500/30" style="transform: rotateY(0deg) rotateX(30deg) translateZ(300px) rotateX(0deg)">
163
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
164
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
165
  <div class="bg-white/20 p-4 rounded-lg">
166
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" class="w-12 h-12" alt="MySQL"/>
@@ -168,9 +145,10 @@
168
  <h3 class="text-xl font-bold">MySQL</h3>
169
  </div>
170
  </div>
 
171
  <!-- Docker -->
172
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-blue-700 to-blue-800 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/30" style="transform: rotateY(30deg) rotateX(30deg) translateZ(300px) rotateX(0deg)">
173
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
174
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
175
  <div class="bg-white/20 p-4 rounded-lg">
176
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" class="w-12 h-12" alt="Docker"/>
@@ -179,8 +157,8 @@
179
  </div>
180
  </div>
181
  <!-- Git CI/CD -->
182
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-gray-600 to-gray-700 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-gray-500/30" style="transform: rotateY(60deg) rotateX(30deg) translateZ(300px) rotateX(0deg)">
183
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
184
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
185
  <div class="bg-white/20 p-4 rounded-lg">
186
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" class="w-12 h-12" alt="Git CI/CD"/>
@@ -189,33 +167,23 @@
189
  </div>
190
  </div>
191
  <!-- React Native -->
192
- <div class="skill-card absolute group overflow-hidden rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 p-6 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/30" style="transform: rotateY(90deg) rotateX(30deg) translateZ(300px) rotateX(0deg)">
193
- <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
194
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
195
  <div class="bg-white/20 p-4 rounded-lg">
196
- <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" class="w-12 h-12" alt="React Native" style="filter: drop-shadow(0 0 4px rgba(0,0,0,0.3))"/>
197
- </div>
198
  <h3 class="text-xl font-bold">React Native</h3>
199
  </div>
200
  </div>
201
  </div>
202
  </div>
203
- <!-- Add feather icons script and pause animation on hover -->
204
- <script>
 
205
  document.addEventListener('DOMContentLoaded', function() {
206
  feather.replace();
207
-
208
- const dome = document.querySelector('.skills-dome');
209
- const container = document.querySelector('.skills-dome-container');
210
-
211
- container.addEventListener('mouseenter', () => {
212
- dome.style.animationPlayState = 'paused';
213
- });
214
-
215
- container.addEventListener('mouseleave', () => {
216
- dome.style.animationPlayState = 'running';
217
- });
218
  });
219
- </script>
220
  </body>
221
  </html>
 
9
  </head>
10
  <body class="text-white">
11
  <div class="container mx-auto px-6 py-16">
12
+ <h1 class="text-5xl font-bold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-600">
13
+ My Skills
14
  </h1>
15
+ <div class="skills-grid grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
16
+ <!-- HTML/CSS -->
17
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-orange-500 to-red-600 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-orange-500/30">
18
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
19
+ <div class="relative z-10 flex flex-col items-center justify-center gap-2">
20
+ <div class="bg-white/20 p-4 rounded-lg">
21
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" class="w-12 h-12" alt="HTML/CSS"/>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  </div>
23
  <h3 class="text-xl font-bold">HTML/CSS</h3>
24
  </div>
25
  </div>
26
  <!-- Tailwind CSS -->
27
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/30">
28
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
29
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
30
  <div class="bg-white/20 p-4 rounded-lg">
31
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-plain.svg" class="w-12 h-12" alt="Tailwind CSS"/>
 
34
  </div>
35
  </div>
36
  <!-- React -->
37
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30">
38
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
39
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
40
  <div class="bg-white/20 p-4 rounded-lg">
41
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" class="w-12 h-12" alt="React"/>
 
44
  </div>
45
  </div>
46
  <!-- Next.js -->
47
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-800 to-gray-900 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-gray-500/30">
48
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
49
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
50
  <div class="bg-white/20 p-4 rounded-lg">
51
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" class="w-12 h-12" alt="Next.js"/>
 
54
  </div>
55
  </div>
56
  <!-- TypeScript -->
57
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-600 to-blue-800 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30">
58
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
59
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
60
  <div class="bg-white/20 p-4 rounded-lg">
61
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" class="w-12 h-12" alt="TypeScript"/>
 
64
  </div>
65
  </div>
66
  <!-- JavaScript -->
67
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-yellow-500 to-yellow-600 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-yellow-500/30">
68
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
69
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
70
  <div class="bg-white/20 p-4 rounded-lg">
71
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" class="w-12 h-12" alt="JavaScript"/>
 
74
  </div>
75
  </div>
76
  <!-- Angular -->
77
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-red-500 to-red-600 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-red-500/30">
78
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
79
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
80
  <div class="bg-white/20 p-4 rounded-lg">
81
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg" class="w-12 h-12" alt="Angular"/>
 
84
  </div>
85
  </div>
86
  <!-- Flutter -->
87
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-teal-500 to-teal-600 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-teal-500/30">
88
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
89
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
90
  <div class="bg-white/20 p-4 rounded-lg">
91
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg" class="w-12 h-12" alt="Flutter"/>
 
94
  </div>
95
  </div>
96
  <!-- Dart -->
97
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-400 to-blue-500 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30">
98
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
99
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
100
  <div class="bg-white/20 p-4 rounded-lg">
101
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg" class="w-12 h-12" alt="Dart"/>
 
104
  </div>
105
  </div>
106
  <!-- PHP -->
107
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-purple-700 to-indigo-800 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-purple-500/30">
108
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
109
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
110
  <div class="bg-white/20 p-4 rounded-lg">
111
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" class="w-12 h-12" alt="PHP"/>
 
114
  </div>
115
  </div>
116
  <!-- Symfony -->
117
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-700 to-gray-800 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-gray-500/30">
118
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
119
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
120
  <div class="bg-white/20 p-4 rounded-lg">
121
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/symfony/symfony-original.svg" class="w-12 h-12" alt="Symfony"/>
 
123
  <h3 class="text-xl font-bold">Symfony</h3>
124
  </div>
125
  </div>
126
+
127
  <!-- Node.js -->
128
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-green-600 to-green-700 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-green-500/30">
129
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
130
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
131
  <div class="bg-white/20 p-4 rounded-lg">
132
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" class="w-12 h-12" alt="Node.js"/>
 
134
  <h3 class="text-xl font-bold">Node.js</h3>
135
  </div>
136
  </div>
137
+
138
  <!-- MySQL -->
139
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-orange-500/30">
140
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
141
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
142
  <div class="bg-white/20 p-4 rounded-lg">
143
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" class="w-12 h-12" alt="MySQL"/>
 
145
  <h3 class="text-xl font-bold">MySQL</h3>
146
  </div>
147
  </div>
148
+
149
  <!-- Docker -->
150
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-700 to-blue-800 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30">
151
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
152
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
153
  <div class="bg-white/20 p-4 rounded-lg">
154
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" class="w-12 h-12" alt="Docker"/>
 
157
  </div>
158
  </div>
159
  <!-- Git CI/CD -->
160
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-600 to-gray-700 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-gray-500/30">
161
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
162
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
163
  <div class="bg-white/20 p-4 rounded-lg">
164
  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" class="w-12 h-12" alt="Git CI/CD"/>
 
167
  </div>
168
  </div>
169
  <!-- React Native -->
170
+ <div class="skill-card group relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 p-6 text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30">
171
+ <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
172
  <div class="relative z-10 flex flex-col items-center justify-center gap-2">
173
  <div class="bg-white/20 p-4 rounded-lg">
174
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" class="w-12 h-12" alt="React Native"/>
175
+ </div>
176
  <h3 class="text-xl font-bold">React Native</h3>
177
  </div>
178
  </div>
179
  </div>
180
  </div>
181
+
182
+ <!-- Add feather icons script -->
183
+ <script>
184
  document.addEventListener('DOMContentLoaded', function() {
185
  feather.replace();
 
 
 
 
 
 
 
 
 
 
 
186
  });
187
+ </script>
188
  </body>
189
  </html>