Hugging Face's logo

Spaces:
Bimarz
/
porto
Running

App Files Community
Bimarz commited on
Commit
e13ffb6
·
verified ·
1 Parent(s): 33ded2c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1093 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Porto
3
- emoji: 📈
4
- colorFrom: red
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: porto
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1093 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>3D Animated Portfolio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
14
+
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ font-family: 'Poppins', sans-serif;
20
+ }
21
+
22
+ body {
23
+ overflow-x: hidden;
24
+ background-color: #0f172a;
25
+ color: #f8fafc;
26
+ }
27
+
28
+ .perspective {
29
+ perspective: 1000px;
30
+ }
31
+
32
+ .card-3d {
33
+ transform-style: preserve-3d;
34
+ transition: transform 0.5s ease;
35
+ }
36
+
37
+ .gradient-text {
38
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
39
+ -webkit-background-clip: text;
40
+ background-clip: text;
41
+ color: transparent;
42
+ }
43
+
44
+ .glow {
45
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
46
+ }
47
+
48
+ .skill-bar {
49
+ height: 8px;
50
+ background: #1e293b;
51
+ border-radius: 4px;
52
+ overflow: hidden;
53
+ }
54
+
55
+ .skill-progress {
56
+ height: 100%;
57
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
58
+ border-radius: 4px;
59
+ transition: width 1.5s ease;
60
+ }
61
+
62
+ .project-card {
63
+ transform-style: preserve-3d;
64
+ transition: all 0.5s ease;
65
+ }
66
+
67
+ .project-card:hover {
68
+ transform: translateY(-10px) rotateX(5deg);
69
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
70
+ }
71
+
72
+ .floating {
73
+ animation: floating 6s ease-in-out infinite;
74
+ }
75
+
76
+ @keyframes floating {
77
+ 0% { transform: translateY(0px); }
78
+ 50% { transform: translateY(-20px); }
79
+ 100% { transform: translateY(0px); }
80
+ }
81
+
82
+ .blob {
83
+ position: absolute;
84
+ width: 500px;
85
+ height: 500px;
86
+ background: linear-gradient(45deg, #3b82f6, #8b5cf6);
87
+ border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
88
+ opacity: 0.2;
89
+ filter: blur(50px);
90
+ z-index: -1;
91
+ animation: blob-animate 20s linear infinite;
92
+ }
93
+
94
+ @keyframes blob-animate {
95
+ 0%, 100% {
96
+ border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
97
+ transform: translate(0, 0) rotate(0deg);
98
+ }
99
+ 25% {
100
+ border-radius: 72% 28% 48% 48% / 42% 28% 72% 58%;
101
+ transform: translate(50px, 50px) rotate(5deg);
102
+ }
103
+ 50% {
104
+ border-radius: 28% 72% 48% 48% / 28% 48% 72% 72%;
105
+ transform: translate(0, 50px) rotate(0deg);
106
+ }
107
+ 75% {
108
+ border-radius: 48% 48% 28% 72% / 48% 72% 28% 72%;
109
+ transform: translate(-50px, 0) rotate(-5deg);
110
+ }
111
+ }
112
+
113
+ #particles-js {
114
+ position: absolute;
115
+ width: 100%;
116
+ height: 100%;
117
+ top: 0;
118
+ left: 0;
119
+ z-index: -1;
120
+ }
121
+
122
+ .nav-link {
123
+ position: relative;
124
+ }
125
+
126
+ .nav-link::after {
127
+ content: '';
128
+ position: absolute;
129
+ width: 0;
130
+ height: 2px;
131
+ bottom: -2px;
132
+ left: 0;
133
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
134
+ transition: width 0.3s ease;
135
+ }
136
+
137
+ .nav-link:hover::after {
138
+ width: 100%;
139
+ }
140
+
141
+ .active-nav::after {
142
+ width: 100%;
143
+ }
144
+
145
+ .timeline-item::before {
146
+ content: '';
147
+ position: absolute;
148
+ width: 20px;
149
+ height: 20px;
150
+ border-radius: 50%;
151
+ left: -10px;
152
+ top: 0;
153
+ background: linear-gradient(45deg, #3b82f6, #8b5cf6);
154
+ border: 3px solid #0f172a;
155
+ }
156
+
157
+ .timeline::before {
158
+ content: '';
159
+ position: absolute;
160
+ width: 2px;
161
+ height: 100%;
162
+ left: 0;
163
+ top: 0;
164
+ background: #334155;
165
+ }
166
+
167
+ .contact-input {
168
+ background: rgba(15, 23, 42, 0.5);
169
+ border: 1px solid #334155;
170
+ transition: all 0.3s ease;
171
+ }
172
+
173
+ .contact-input:focus {
174
+ border-color: #3b82f6;
175
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
176
+ }
177
+
178
+ .btn-gradient {
179
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
180
+ transition: all 0.3s ease;
181
+ }
182
+
183
+ .btn-gradient:hover {
184
+ transform: translateY(-2px);
185
+ box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
186
+ }
187
+ </style>
188
+ </head>
189
+ <body class="min-h-screen">
190
+ <!-- Particles Background -->
191
+ <div id="particles-js"></div>
192
+
193
+ <!-- Floating Blobs -->
194
+ <div class="blob top-[-250px] left-[-250px]"></div>
195
+ <div class="blob bottom-[-250px] right-[-250px]"></div>
196
+
197
+ <!-- Navigation -->
198
+ <nav class="fixed w-full z-50 bg-opacity-80 backdrop-blur-md bg-[#0f172a] border-b border-slate-800">
199
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
200
+ <div class="flex items-center justify-between h-16">
201
+ <div class="flex items-center">
202
+ <div class="flex-shrink-0">
203
+ <span class="text-2xl font-bold gradient-text">Portfolio</span>
204
+ </div>
205
+ </div>
206
+ <div class="hidden md:block">
207
+ <div class="ml-10 flex items-baseline space-x-8">
208
+ <a href="#home" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
209
+ <a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
210
+ <a href="#skills" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Skills</a>
211
+ <a href="#projects" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
212
+ <a href="#experience" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Experience</a>
213
+ <a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
214
+ </div>
215
+ </div>
216
+ <div class="md:hidden">
217
+ <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
218
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
219
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
220
+ </svg>
221
+ </button>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Mobile menu -->
227
+ <div id="mobile-menu" class="hidden md:hidden bg-[#0f172a] border-t border-slate-800">
228
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
229
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800">Home</a>
230
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800">About</a>
231
+ <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800">Skills</a>
232
+ <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800">Projects</a>
233
+ <a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800">Experience</a>
234
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-slate-800">Contact</a>
235
+ </div>
236
+ </div>
237
+ </nav>
238
+
239
+ <!-- Hero Section -->
240
+ <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden">
241
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
242
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
243
+ <div class="text-center md:text-left">
244
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="gradient-text">John Doe</span></h1>
245
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6">Full Stack Developer</h2>
246
+ <p class="text-lg text-gray-300 mb-8 max-w-lg">I build exceptional digital experiences with modern technologies and creative solutions.</p>
247
+ <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
248
+ <a href="#contact" class="px-8 py-3 rounded-lg btn-gradient text-white font-medium">Contact Me</a>
249
+ <a href="#projects" class="px-8 py-3 rounded-lg border border-slate-600 text-white font-medium hover:bg-slate-800 transition">View Projects</a>
250
+ </div>
251
+ <div class="flex gap-4 mt-8 justify-center md:justify-start">
252
+ <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-github text-2xl"></i></a>
253
+ <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-linkedin text-2xl"></i></a>
254
+ <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-twitter text-2xl"></i></a>
255
+ <a href="#" class="text-gray-300 hover:text-white transition"><i class="fab fa-instagram text-2xl"></i></a>
256
+ </div>
257
+ </div>
258
+ <div class="perspective flex justify-center">
259
+ <div class="card-3d floating glow w-64 h-64 md:w-80 md:h-80 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
260
+ <div class="text-center text-white">
261
+ <i class="fas fa-code text-6xl mb-4"></i>
262
+ <h3 class="text-xl font-bold">Web Developer</h3>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- About Section -->
271
+ <section id="about" class="py-20 bg-slate-900 bg-opacity-50 backdrop-blur-sm">
272
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
273
+ <div class="text-center mb-16">
274
+ <h2 class="text-3xl font-bold mb-4">About <span class="gradient-text">Me</span></h2>
275
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
276
+ </div>
277
+
278
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
279
+ <div class="flex justify-center">
280
+ <div class="relative">
281
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-slate-700">
282
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Profile" class="w-full h-full object-cover">
283
+ </div>
284
+ <div class="absolute -bottom-5 -right-5 bg-slate-800 rounded-lg px-4 py-2 shadow-lg">
285
+ <div class="flex items-center">
286
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
287
+ <span class="text-sm">Available for work</span>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div>
294
+ <h3 class="text-2xl font-semibold mb-4">Who am I?</h3>
295
+ <p class="text-gray-300 mb-6">I'm a passionate Full Stack Developer with 5+ years of experience creating modern web applications. I specialize in JavaScript technologies across the whole stack (React, Node.js, Express, MongoDB).</p>
296
+
297
+ <div class="grid grid-cols-2 gap-4 mb-8">
298
+ <div>
299
+ <p class="text-gray-400">Name:</p>
300
+ <p class="font-medium">John Doe</p>
301
+ </div>
302
+ <div>
303
+ <p class="text-gray-400">Email:</p>
304
+ <p class="font-medium">john@example.com</p>
305
+ </div>
306
+ <div>
307
+ <p class="text-gray-400">From:</p>
308
+ <p class="font-medium">San Francisco, CA</p>
309
+ </div>
310
+ <div>
311
+ <p class="text-gray-400">Experience:</p>
312
+ <p class="font-medium">5+ Years</p>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="flex flex-wrap gap-4">
317
+ <a href="#" class="px-6 py-2 rounded-lg bg-slate-800 text-white font-medium hover:bg-slate-700 transition flex items-center">
318
+ <i class="fas fa-download mr-2"></i> Download CV
319
+ </a>
320
+ <a href="#contact" class="px-6 py-2 rounded-lg border border-slate-600 text-white font-medium hover:bg-slate-800 transition flex items-center">
321
+ <i class="fas fa-paper-plane mr-2"></i> Hire Me
322
+ </a>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </section>
328
+
329
+ <!-- Skills Section -->
330
+ <section id="skills" class="py-20">
331
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
332
+ <div class="text-center mb-16">
333
+ <h2 class="text-3xl font-bold mb-4">My <span class="gradient-text">Skills</span></h2>
334
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
335
+ </div>
336
+
337
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
338
+ <div>
339
+ <h3 class="text-xl font-semibold mb-6">Technical Skills</h3>
340
+
341
+ <div class="space-y-6">
342
+ <div>
343
+ <div class="flex justify-between mb-2">
344
+ <span class="font-medium">JavaScript</span>
345
+ <span class="text-gray-400">95%</span>
346
+ </div>
347
+ <div class="skill-bar">
348
+ <div class="skill-progress" style="width: 95%"></div>
349
+ </div>
350
+ </div>
351
+
352
+ <div>
353
+ <div class="flex justify-between mb-2">
354
+ <span class="font-medium">React</span>
355
+ <span class="text-gray-400">90%</span>
356
+ </div>
357
+ <div class="skill-bar">
358
+ <div class="skill-progress" style="width: 90%"></div>
359
+ </div>
360
+ </div>
361
+
362
+ <div>
363
+ <div class="flex justify-between mb-2">
364
+ <span class="font-medium">Node.js</span>
365
+ <span class="text-gray-400">85%</span>
366
+ </div>
367
+ <div class="skill-bar">
368
+ <div class="skill-progress" style="width: 85%"></div>
369
+ </div>
370
+ </div>
371
+
372
+ <div>
373
+ <div class="flex justify-between mb-2">
374
+ <span class="font-medium">HTML/CSS</span>
375
+ <span class="text-gray-400">95%</span>
376
+ </div>
377
+ <div class="skill-bar">
378
+ <div class="skill-progress" style="width: 95%"></div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <div>
385
+ <h3 class="text-xl font-semibold mb-6">Professional Skills</h3>
386
+
387
+ <div class="space-y-6">
388
+ <div>
389
+ <div class="flex justify-between mb-2">
390
+ <span class="font-medium">Communication</span>
391
+ <span class="text-gray-400">90%</span>
392
+ </div>
393
+ <div class="skill-bar">
394
+ <div class="skill-progress" style="width: 90%"></div>
395
+ </div>
396
+ </div>
397
+
398
+ <div>
399
+ <div class="flex justify-between mb-2">
400
+ <span class="font-medium">Team Work</span>
401
+ <span class="text-gray-400">85%</span>
402
+ </div>
403
+ <div class="skill-bar">
404
+ <div class="skill-progress" style="width: 85%"></div>
405
+ </div>
406
+ </div>
407
+
408
+ <div>
409
+ <div class="flex justify-between mb-2">
410
+ <span class="font-medium">Project Management</span>
411
+ <span class="text-gray-400">80%</span>
412
+ </div>
413
+ <div class="skill-bar">
414
+ <div class="skill-progress" style="width: 80%"></div>
415
+ </div>
416
+ </div>
417
+
418
+ <div>
419
+ <div class="flex justify-between mb-2">
420
+ <span class="font-medium">Creativity</span>
421
+ <span class="text-gray-400">95%</span>
422
+ </div>
423
+ <div class="skill-bar">
424
+ <div class="skill-progress" style="width: 95%"></div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="mt-16">
432
+ <h3 class="text-xl font-semibold mb-8 text-center">Technologies I Work With</h3>
433
+
434
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-8">
435
+ <div class="bg-slate-800 rounded-lg p-6 flex flex-col items-center hover:bg-slate-700 transition cursor-pointer">
436
+ <i class="fab fa-js text-4xl text-yellow-400 mb-2"></i>
437
+ <span class="font-medium">JavaScript</span>
438
+ </div>
439
+ <div class="bg-slate-800 rounded-lg p-6 flex flex-col items-center hover:bg-slate-700 transition cursor-pointer">
440
+ <i class="fab fa-react text-4xl text-blue-400 mb-2"></i>
441
+ <span class="font-medium">React</span>
442
+ </div>
443
+ <div class="bg-slate-800 rounded-lg p-6 flex flex-col items-center hover:bg-slate-700 transition cursor-pointer">
444
+ <i class="fab fa-node-js text-4xl text-green-500 mb-2"></i>
445
+ <span class="font-medium">Node.js</span>
446
+ </div>
447
+ <div class="bg-slate-800 rounded-lg p-6 flex flex-col items-center hover:bg-slate-700 transition cursor-pointer">
448
+ <i class="fas fa-database text-4xl text-blue-600 mb-2"></i>
449
+ <span class="font-medium">MongoDB</span>
450
+ </div>
451
+ <div class="bg-slate-800 rounded-lg p-6 flex flex-col items-center hover:bg-slate-700 transition cursor-pointer">
452
+ <i class="fab fa-html5 text-4xl text-orange-500 mb-2"></i>
453
+ <span class="font-medium">HTML5</span>
454
+ </div>
455
+ <div class="bg-slate-800 rounded-lg p-6 flex flex-col items-center hover:bg-slate-700 transition cursor-pointer">
456
+ <i class="fab fa-css3-alt text-4xl text-blue-500 mb-2"></i>
457
+ <span class="font-medium">CSS3</span>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </section>
463
+
464
+ <!-- Projects Section -->
465
+ <section id="projects" class="py-20 bg-slate-900 bg-opacity-50 backdrop-blur-sm">
466
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
467
+ <div class="text-center mb-16">
468
+ <h2 class="text-3xl font-bold mb-4">My <span class="gradient-text">Projects</span></h2>
469
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
470
+ </div>
471
+
472
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
473
+ <!-- Project 1 -->
474
+ <div class="project-card bg-slate-800 rounded-xl overflow-hidden hover:glow transition">
475
+ <div class="h-48 overflow-hidden">
476
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 1" class="w-full h-full object-cover transition duration-500 hover:scale-105">
477
+ </div>
478
+ <div class="p-6">
479
+ <h3 class="text-xl font-semibold mb-2">E-commerce Platform</h3>
480
+ <p class="text-gray-300 mb-4">A full-featured e-commerce platform with payment integration, user authentication, and admin dashboard.</p>
481
+ <div class="flex flex-wrap gap-2 mb-4">
482
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">React</span>
483
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">Node.js</span>
484
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">MongoDB</span>
485
+ </div>
486
+ <div class="flex gap-4">
487
+ <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
488
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
489
+ </a>
490
+ <a href="#" class="text-gray-400 hover:text-white transition flex items-center">
491
+ <i class="fab fa-github mr-2"></i> Code
492
+ </a>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- Project 2 -->
498
+ <div class="project-card bg-slate-800 rounded-xl overflow-hidden hover:glow transition">
499
+ <div class="h-48 overflow-hidden">
500
+ <img src="https://images.unsplash.com/photo-1555774698-0f77a0b7b8a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 2" class="w-full h-full object-cover transition duration-500 hover:scale-105">
501
+ </div>
502
+ <div class="p-6">
503
+ <h3 class="text-xl font-semibold mb-2">Task Management App</h3>
504
+ <p class="text-gray-300 mb-4">A productivity application for managing tasks with drag-and-drop functionality and real-time updates.</p>
505
+ <div class="flex flex-wrap gap-2 mb-4">
506
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">React</span>
507
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">Firebase</span>
508
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">Tailwind CSS</span>
509
+ </div>
510
+ <div class="flex gap-4">
511
+ <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
512
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
513
+ </a>
514
+ <a href="#" class="text-gray-400 hover:text-white transition flex items-center">
515
+ <i class="fab fa-github mr-2"></i> Code
516
+ </a>
517
+ </div>
518
+ </div>
519
+ </div>
520
+
521
+ <!-- Project 3 -->
522
+ <div class="project-card bg-slate-800 rounded-xl overflow-hidden hover:glow transition">
523
+ <div class="h-48 overflow-hidden">
524
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Project 3" class="w-full h-full object-cover transition duration-500 hover:scale-105">
525
+ </div>
526
+ <div class="p-6">
527
+ <h3 class="text-xl font-semibold mb-2">Social Media Dashboard</h3>
528
+ <p class="text-gray-300 mb-4">A comprehensive dashboard for managing social media accounts with analytics and scheduling features.</p>
529
+ <div class="flex flex-wrap gap-2 mb-4">
530
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">Vue.js</span>
531
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">Express</span>
532
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">PostgreSQL</span>
533
+ </div>
534
+ <div class="flex gap-4">
535
+ <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
536
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
537
+ </a>
538
+ <a href="#" class="text-gray-400 hover:text-white transition flex items-center">
539
+ <i class="fab fa-github mr-2"></i> Code
540
+ </a>
541
+ </div>
542
+ </div>
543
+ </div>
544
+
545
+ <!-- Project 4 -->
546
+ <div class="project-card bg-slate-800 rounded-xl overflow-hidden hover:glow transition">
547
+ <div class="h-48 overflow-hidden">
548
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 4" class="w-full h-full object-cover transition duration-500 hover:scale-105">
549
+ </div>
550
+ <div class="p-6">
551
+ <h3 class="text-xl font-semibold mb-2">CRM System</h3>
552
+ <p class="text-gray-300 mb-4">A customer relationship management system with lead tracking, customer profiles, and reporting.</p>
553
+ <div class="flex flex-wrap gap-2 mb-4">
554
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">Angular</span>
555
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">NestJS</span>
556
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">MySQL</span>
557
+ </div>
558
+ <div class="flex gap-4">
559
+ <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
560
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
561
+ </a>
562
+ <a href="#" class="text-gray-400 hover:text-white transition flex items-center">
563
+ <i class="fab fa-github mr-2"></i> Code
564
+ </a>
565
+ </div>
566
+ </div>
567
+ </div>
568
+
569
+ <!-- Project 5 -->
570
+ <div class="project-card bg-slate-800 rounded-xl overflow-hidden hover:glow transition">
571
+ <div class="h-48 overflow-hidden">
572
+ <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 5" class="w-full h-full object-cover transition duration-500 hover:scale-105">
573
+ </div>
574
+ <div class="p-6">
575
+ <h3 class="text-xl font-semibold mb-2">Portfolio Website</h3>
576
+ <p class="text-gray-300 mb-4">A responsive portfolio website with animations and 3D effects to showcase creative work.</p>
577
+ <div class="flex flex-wrap gap-2 mb-4">
578
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">HTML/CSS</span>
579
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">JavaScript</span>
580
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">GSAP</span>
581
+ </div>
582
+ <div class="flex gap-4">
583
+ <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
584
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
585
+ </a>
586
+ <a href="#" class="text-gray-400 hover:text-white transition flex items-center">
587
+ <i class="fab fa-github mr-2"></i> Code
588
+ </a>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <!-- Project 6 -->
594
+ <div class="project-card bg-slate-800 rounded-xl overflow-hidden hover:glow transition">
595
+ <div class="h-48 overflow-hidden">
596
+ <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Project 6" class="w-full h-full object-cover transition duration-500 hover:scale-105">
597
+ </div>
598
+ <div class="p-6">
599
+ <h3 class="text-xl font-semibold mb-2">Blog Platform</h3>
600
+ <p class="text-gray-300 mb-4">A modern blogging platform with rich text editing, user profiles, and comment system.</p>
601
+ <div class="flex flex-wrap gap-2 mb-4">
602
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">Next.js</span>
603
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">GraphQL</span>
604
+ <span class="px-3 py-1 bg-slate-700 rounded-full text-sm">Prisma</span>
605
+ </div>
606
+ <div class="flex gap-4">
607
+ <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
608
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
609
+ </a>
610
+ <a href="#" class="text-gray-400 hover:text-white transition flex items-center">
611
+ <i class="fab fa-github mr-2"></i> Code
612
+ </a>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="text-center mt-12">
619
+ <a href="#" class="px-8 py-3 rounded-lg border border-slate-600 text-white font-medium hover:bg-slate-800 transition inline-flex items-center">
620
+ <i class="fas fa-eye mr-2"></i> View All Projects
621
+ </a>
622
+ </div>
623
+ </div>
624
+ </section>
625
+
626
+ <!-- Experience Section -->
627
+ <section id="experience" class="py-20">
628
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
629
+ <div class="text-center mb-16">
630
+ <h2 class="text-3xl font-bold mb-4">My <span class="gradient-text">Experience</span></h2>
631
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
632
+ </div>
633
+
634
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
635
+ <div>
636
+ <h3 class="text-xl font-semibold mb-8">Education</h3>
637
+
638
+ <div class="relative pl-8 timeline">
639
+ <!-- Education 1 -->
640
+ <div class="relative mb-8 timeline-item">
641
+ <div class="bg-slate-800 rounded-lg p-6">
642
+ <span class="text-sm text-gray-400">2015 - 2019</span>
643
+ <h4 class="text-lg font-semibold mt-1 mb-2">Master in Computer Science</h4>
644
+ <p class="text-gray-300">Stanford University</p>
645
+ <p class="text-gray-400 mt-2">Specialized in Artificial Intelligence and Machine Learning with a focus on neural networks.</p>
646
+ </div>
647
+ </div>
648
+
649
+ <!-- Education 2 -->
650
+ <div class="relative mb-8 timeline-item">
651
+ <div class="bg-slate-800 rounded-lg p-6">
652
+ <span class="text-sm text-gray-400">2011 - 2015</span>
653
+ <h4 class="text-lg font-semibold mt-1 mb-2">Bachelor in Software Engineering</h4>
654
+ <p class="text-gray-300">University of California</p>
655
+ <p class="text-gray-400 mt-2">Graduated with honors. Focused on web development and database systems.</p>
656
+ </div>
657
+ </div>
658
+
659
+ <!-- Education 3 -->
660
+ <div class="relative timeline-item">
661
+ <div class="bg-slate-800 rounded-lg p-6">
662
+ <span class="text-sm text-gray-400">2009 - 2011</span>
663
+ <h4 class="text-lg font-semibold mt-1 mb-2">High School Diploma</h4>
664
+ <p class="text-gray-300">San Francisco High School</p>
665
+ <p class="text-gray-400 mt-2">Specialized in mathematics and computer science.</p>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+
671
+ <div>
672
+ <h3 class="text-xl font-semibold mb-8">Work Experience</h3>
673
+
674
+ <div class="relative pl-8 timeline">
675
+ <!-- Experience 1 -->
676
+ <div class="relative mb-8 timeline-item">
677
+ <div class="bg-slate-800 rounded-lg p-6">
678
+ <span class="text-sm text-gray-400">2021 - Present</span>
679
+ <h4 class="text-lg font-semibold mt-1 mb-2">Senior Full Stack Developer</h4>
680
+ <p class="text-gray-300">Tech Solutions Inc.</p>
681
+ <p class="text-gray-400 mt-2">Leading a team of developers to build scalable web applications for enterprise clients.</p>
682
+ </div>
683
+ </div>
684
+
685
+ <!-- Experience 2 -->
686
+ <div class="relative mb-8 timeline-item">
687
+ <div class="bg-slate-800 rounded-lg p-6">
688
+ <span class="text-sm text-gray-400">2019 - 2021</span>
689
+ <h4 class="text-lg font-semibold mt-1 mb-2">Full Stack Developer</h4>
690
+ <p class="text-gray-300">Digital Innovations LLC</p>
691
+ <p class="text-gray-400 mt-2">Developed and maintained multiple web applications using modern JavaScript frameworks.</p>
692
+ </div>
693
+ </div>
694
+
695
+ <!-- Experience 3 -->
696
+ <div class="relative timeline-item">
697
+ <div class="bg-slate-800 rounded-lg p-6">
698
+ <span class="text-sm text-gray-400">2017 - 2019</span>
699
+ <h4 class="text-lg font-semibold mt-1 mb-2">Frontend Developer</h4>
700
+ <p class="text-gray-300">Web Creators Agency</p>
701
+ <p class="text-gray-400 mt-2">Built responsive user interfaces and implemented interactive features for client websites.</p>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </section>
709
+
710
+ <!-- Contact Section -->
711
+ <section id="contact" class="py-20 bg-slate-900 bg-opacity-50 backdrop-blur-sm">
712
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
713
+ <div class="text-center mb-16">
714
+ <h2 class="text-3xl font-bold mb-4">Get In <span class="gradient-text">Touch</span></h2>
715
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
716
+ </div>
717
+
718
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
719
+ <div>
720
+ <h3 class="text-2xl font-semibold mb-6">Contact Information</h3>
721
+ <p class="text-gray-300 mb-8">Feel free to reach out to me for any questions or opportunities. I'm always open to discussing new projects, creative ideas or opportunities to be part of your vision.</p>
722
+
723
+ <div class="space-y-6">
724
+ <div class="flex items-start">
725
+ <div class="bg-slate-800 p-3 rounded-lg mr-4">
726
+ <i class="fas fa-map-marker-alt text-blue-400 text-xl"></i>
727
+ </div>
728
+ <div>
729
+ <h4 class="font-semibold mb-1">Location</h4>
730
+ <p class="text-gray-300">San Francisco, California</p>
731
+ </div>
732
+ </div>
733
+
734
+ <div class="flex items-start">
735
+ <div class="bg-slate-800 p-3 rounded-lg mr-4">
736
+ <i class="fas fa-envelope text-blue-400 text-xl"></i>
737
+ </div>
738
+ <div>
739
+ <h4 class="font-semibold mb-1">Email</h4>
740
+ <p class="text-gray-300">john@example.com</p>
741
+ </div>
742
+ </div>
743
+
744
+ <div class="flex items-start">
745
+ <div class="bg-slate-800 p-3 rounded-lg mr-4">
746
+ <i class="fas fa-phone-alt text-blue-400 text-xl"></i>
747
+ </div>
748
+ <div>
749
+ <h4 class="font-semibold mb-1">Phone</h4>
750
+ <p class="text-gray-300">+1 (555) 123-4567</p>
751
+ </div>
752
+ </div>
753
+ </div>
754
+
755
+ <div class="mt-8">
756
+ <h4 class="font-semibold mb-4">Follow Me</h4>
757
+ <div class="flex gap-4">
758
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-500 transition">
759
+ <i class="fab fa-github"></i>
760
+ </a>
761
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-700 transition">
762
+ <i class="fab fa-linkedin-in"></i>
763
+ </a>
764
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-400 transition">
765
+ <i class="fab fa-twitter"></i>
766
+ </a>
767
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-pink-600 transition">
768
+ <i class="fab fa-instagram"></i>
769
+ </a>
770
+ </div>
771
+ </div>
772
+ </div>
773
+
774
+ <div>
775
+ <form class="space-y-6">
776
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
777
+ <div>
778
+ <label for="name" class="block mb-2 font-medium">Your Name</label>
779
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg contact-input focus:outline-none" placeholder="John Doe">
780
+ </div>
781
+ <div>
782
+ <label for="email" class="block mb-2 font-medium">Your Email</label>
783
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg contact-input focus:outline-none" placeholder="john@example.com">
784
+ </div>
785
+ </div>
786
+ <div>
787
+ <label for="subject" class="block mb-2 font-medium">Subject</label>
788
+ <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg contact-input focus:outline-none" placeholder="Let me know how I can help you">
789
+ </div>
790
+ <div>
791
+ <label for="message" class="block mb-2 font-medium">Message</label>
792
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg contact-input focus:outline-none" placeholder="Hi John, I would like to..."></textarea>
793
+ </div>
794
+ <button type="submit" class="px-8 py-3 rounded-lg btn-gradient text-white font-medium w-full">
795
+ Send Message <i class="fas fa-paper-plane ml-2"></i>
796
+ </button>
797
+ </form>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </section>
802
+
803
+ <!-- Footer -->
804
+ <footer class="py-8 border-t border-slate-800">
805
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
806
+ <div class="flex flex-col md:flex-row justify-between items-center">
807
+ <div class="mb-4 md:mb-0">
808
+ <span class="text-xl font-bold gradient-text">John Doe</span>
809
+ <p class="text-gray-400 mt-1">Full Stack Developer</p>
810
+ </div>
811
+ <div class="text-gray-400 text-sm">
812
+ &copy; 2023 John Doe. All rights reserved.
813
+ </div>
814
+ </div>
815
+ </div>
816
+ </footer>
817
+
818
+ <!-- Back to Top Button -->
819
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-slate-800 text-white flex items-center justify-center shadow-lg hover:bg-slate-700 transition hidden">
820
+ <i class="fas fa-arrow-up"></i>
821
+ </button>
822
+
823
+ <script>
824
+ // Mobile menu toggle
825
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
826
+ document.getElementById('mobile-menu').classList.toggle('hidden');
827
+ });
828
+
829
+ // Smooth scrolling for navigation links
830
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
831
+ anchor.addEventListener('click', function (e) {
832
+ e.preventDefault();
833
+
834
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
835
+ behavior: 'smooth'
836
+ });
837
+
838
+ // Close mobile menu if open
839
+ document.getElementById('mobile-menu').classList.add('hidden');
840
+ });
841
+ });
842
+
843
+ // Back to top button
844
+ const backToTopButton = document.getElementById('back-to-top');
845
+
846
+ window.addEventListener('scroll', function() {
847
+ if (window.pageYOffset > 300) {
848
+ backToTopButton.classList.remove('hidden');
849
+ } else {
850
+ backToTopButton.classList.add('hidden');
851
+ }
852
+ });
853
+
854
+ backToTopButton.addEventListener('click', function() {
855
+ window.scrollTo({
856
+ top: 0,
857
+ behavior: 'smooth'
858
+ });
859
+ });
860
+
861
+ // 3D card effect
862
+ const card3d = document.querySelector('.card-3d');
863
+
864
+ if (card3d) {
865
+ document.addEventListener('mousemove', (e) => {
866
+ const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
867
+ const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
868
+ card3d.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
869
+ });
870
+
871
+ // Reset when mouse leaves
872
+ card3d.addEventListener('mouseleave', () => {
873
+ card3d.style.transform = 'rotateY(0deg) rotateX(0deg)';
874
+ });
875
+ }
876
+
877
+ // Animate skill bars on scroll
878
+ const skillBars = document.querySelectorAll('.skill-progress');
879
+
880
+ function animateSkillBars() {
881
+ skillBars.forEach(bar => {
882
+ const width = bar.style.width;
883
+ bar.style.width = '0';
884
+ setTimeout(() => {
885
+ bar.style.width = width;
886
+ }, 100);
887
+ });
888
+ }
889
+
890
+ // GSAP animations
891
+ gsap.registerPlugin(ScrollTrigger);
892
+
893
+ // Animate sections on scroll
894
+ gsap.utils.toArray('section').forEach(section => {
895
+ gsap.from(section, {
896
+ scrollTrigger: {
897
+ trigger: section,
898
+ start: 'top 80%',
899
+ toggleActions: 'play none none none'
900
+ },
901
+ opacity: 0,
902
+ y: 50,
903
+ duration: 1,
904
+ ease: 'power3.out'
905
+ });
906
+ });
907
+
908
+ // Animate timeline items
909
+ gsap.utils.toArray('.timeline-item').forEach((item, i) => {
910
+ gsap.from(item, {
911
+ scrollTrigger: {
912
+ trigger: item,
913
+ start: 'top 80%',
914
+ toggleActions: 'play none none none'
915
+ },
916
+ opacity: 0,
917
+ x: i % 2 === 0 ? -50 : 50,
918
+ duration: 0.8,
919
+ delay: i * 0.1,
920
+ ease: 'power3.out'
921
+ });
922
+ });
923
+
924
+ // Animate project cards
925
+ gsap.utils.toArray('.project-card').forEach((card, i) => {
926
+ gsap.from(card, {
927
+ scrollTrigger: {
928
+ trigger: card,
929
+ start: 'top 80%',
930
+ toggleActions: 'play none none none'
931
+ },
932
+ opacity: 0,
933
+ y: 50,
934
+ duration: 0.8,
935
+ delay: i * 0.1,
936
+ ease: 'power3.out'
937
+ });
938
+ });
939
+
940
+ // Set active nav link on scroll
941
+ const sections = document.querySelectorAll('section');
942
+ const navLinks = document.querySelectorAll('.nav-link');
943
+
944
+ window.addEventListener('scroll', () => {
945
+ let current = '';
946
+
947
+ sections.forEach(section => {
948
+ const sectionTop = section.offsetTop;
949
+ const sectionHeight = section.clientHeight;
950
+
951
+ if (pageYOffset >= sectionTop - 300) {
952
+ current = section.getAttribute('id');
953
+ }
954
+ });
955
+
956
+ navLinks.forEach(link => {
957
+ link.classList.remove('active-nav');
958
+ if (link.getAttribute('href') === `#${current}`) {
959
+ link.classList.add('active-nav');
960
+ }
961
+ });
962
+ });
963
+
964
+ // Particles.js configuration
965
+ document.addEventListener('DOMContentLoaded', function() {
966
+ // Check if particles.js is loaded
967
+ if (typeof particlesJS !== 'undefined') {
968
+ particlesJS('particles-js', {
969
+ "particles": {
970
+ "number": {
971
+ "value": 80,
972
+ "density": {
973
+ "enable": true,
974
+ "value_area": 800
975
+ }
976
+ },
977
+ "color": {
978
+ "value": "#3b82f6"
979
+ },
980
+ "shape": {
981
+ "type": "circle",
982
+ "stroke": {
983
+ "width": 0,
984
+ "color": "#000000"
985
+ },
986
+ "polygon": {
987
+ "nb_sides": 5
988
+ }
989
+ },
990
+ "opacity": {
991
+ "value": 0.5,
992
+ "random": false,
993
+ "anim": {
994
+ "enable": false,
995
+ "speed": 1,
996
+ "opacity_min": 0.1,
997
+ "sync": false
998
+ }
999
+ },
1000
+ "size": {
1001
+ "value": 3,
1002
+ "random": true,
1003
+ "anim": {
1004
+ "enable": false,
1005
+ "speed": 40,
1006
+ "size_min": 0.1,
1007
+ "sync": false
1008
+ }
1009
+ },
1010
+ "line_linked": {
1011
+ "enable": true,
1012
+ "distance": 150,
1013
+ "color": "#3b82f6",
1014
+ "opacity": 0.4,
1015
+ "width": 1
1016
+ },
1017
+ "move": {
1018
+ "enable": true,
1019
+ "speed": 2,
1020
+ "direction": "none",
1021
+ "random": false,
1022
+ "straight": false,
1023
+ "out_mode": "out",
1024
+ "bounce": false,
1025
+ "attract": {
1026
+ "enable": false,
1027
+ "rotateX": 600,
1028
+ "rotateY": 1200
1029
+ }
1030
+ }
1031
+ },
1032
+ "interactivity": {
1033
+ "detect_on": "canvas",
1034
+ "events": {
1035
+ "onhover": {
1036
+ "enable": true,
1037
+ "mode": "grab"
1038
+ },
1039
+ "onclick": {
1040
+ "enable": true,
1041
+ "mode": "push"
1042
+ },
1043
+ "resize": true
1044
+ },
1045
+ "modes": {
1046
+ "grab": {
1047
+ "distance": 140,
1048
+ "line_linked": {
1049
+ "opacity": 1
1050
+ }
1051
+ },
1052
+ "bubble": {
1053
+ "distance": 400,
1054
+ "size": 40,
1055
+ "duration": 2,
1056
+ "opacity": 8,
1057
+ "speed": 3
1058
+ },
1059
+ "repulse": {
1060
+ "distance": 200,
1061
+ "duration": 0.4
1062
+ },
1063
+ "push": {
1064
+ "particles_nb": 4
1065
+ },
1066
+ "remove": {
1067
+ "particles_nb": 2
1068
+ }
1069
+ }
1070
+ },
1071
+ "retina_detect": true
1072
+ });
1073
+ }
1074
+
1075
+ // Animate skill bars when skills section is in view
1076
+ const skillsSection = document.getElementById('skills');
1077
+ const observer = new IntersectionObserver((entries) => {
1078
+ entries.forEach(entry => {
1079
+ if (entry.isIntersecting) {
1080
+ animateSkillBars();
1081
+ observer.unobserve(entry.target);
1082
+ }
1083
+ });
1084
+ }, { threshold: 0.1 });
1085
+
1086
+ if (skillsSection) {
1087
+ observer.observe(skillsSection);
1088
+ }
1089
+ });
1090
+ </script>
1091
+ <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
1092
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Bimarz/porto" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
1093
+ </html>