Hugging Face's logo

Spaces:
codepanov
/
panov
Running

App Files Community
codepanov commited on
Commit
68dabf2
·
verified ·
1 Parent(s): dc51ddf

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +692 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Panov
3
- emoji: 👀
4
- colorFrom: gray
5
- colorTo: yellow
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: panov
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,692 @@
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>Aleksandar Panov | Front-End Developer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ overflow-x: hidden;
16
+ }
17
+
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ animation: gradient 8s ease infinite;
24
+ background-size: 200% 200%;
25
+ }
26
+
27
+ @keyframes gradient {
28
+ 0% { background-position: 0% 50%; }
29
+ 50% { background-position: 100% 50%; }
30
+ 100% { background-position: 0% 50%; }
31
+ }
32
+
33
+ .floating {
34
+ animation: floating 6s ease-in-out infinite;
35
+ }
36
+
37
+ @keyframes floating {
38
+ 0% { transform: translateY(0px); }
39
+ 50% { transform: translateY(-20px); }
40
+ 100% { transform: translateY(0px); }
41
+ }
42
+
43
+ .fade-in {
44
+ animation: fadeIn 1.5s ease-in-out forwards;
45
+ }
46
+
47
+ @keyframes fadeIn {
48
+ from { opacity: 0; transform: translateY(20px); }
49
+ to { opacity: 1; transform: translateY(0); }
50
+ }
51
+
52
+ .skill-bar {
53
+ animation: fillBar 1.5s ease-out forwards;
54
+ }
55
+
56
+ @keyframes fillBar {
57
+ from { width: 0; }
58
+ to { width: var(--target-width); }
59
+ }
60
+
61
+ .card-hover {
62
+ transition: all 0.3s ease;
63
+ }
64
+
65
+ .card-hover:hover {
66
+ transform: translateY(-10px);
67
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
68
+ }
69
+
70
+ .section {
71
+ opacity: 0;
72
+ transition: opacity 0.8s ease, transform 0.8s ease;
73
+ }
74
+
75
+ .section.visible {
76
+ opacity: 1;
77
+ }
78
+
79
+ .nav-link {
80
+ position: relative;
81
+ }
82
+
83
+ .nav-link::after {
84
+ content: '';
85
+ position: absolute;
86
+ width: 0;
87
+ height: 2px;
88
+ bottom: -2px;
89
+ left: 0;
90
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
91
+ transition: width 0.3s ease;
92
+ }
93
+
94
+ .nav-link:hover::after {
95
+ width: 100%;
96
+ }
97
+
98
+ .bg-particle {
99
+ position: absolute;
100
+ border-radius: 50%;
101
+ pointer-events: none;
102
+ z-index: -1;
103
+ }
104
+ </style>
105
+ </head>
106
+ <body class="bg-gray-50 text-gray-800">
107
+ <!-- Particles Background -->
108
+ <div id="particles"></div>
109
+
110
+ <!-- Navigation -->
111
+ <nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md shadow-sm">
112
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
113
+ <div class="flex justify-between h-16 items-center">
114
+ <div class="flex-shrink-0 flex items-center">
115
+ <span class="text-xl font-bold gradient-text">Aleksandar Panov</span>
116
+ </div>
117
+ <div class="hidden md:block">
118
+ <div class="ml-10 flex items-center space-x-8">
119
+ <a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Home</a>
120
+ <a href="#about" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
121
+ <a href="#skills" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Skills</a>
122
+ <a href="#projects" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Projects</a>
123
+ <a href="#contact" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Contact</a>
124
+ </div>
125
+ </div>
126
+ <div class="md:hidden">
127
+ <button id="menu-toggle" class="text-gray-700 hover:text-indigo-600 focus:outline-none">
128
+ <i class="fas fa-bars text-xl"></i>
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ <!-- Mobile menu -->
134
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
135
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
136
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Home</a>
137
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">About</a>
138
+ <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Skills</a>
139
+ <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Projects</a>
140
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Contact</a>
141
+ </div>
142
+ </div>
143
+ </nav>
144
+
145
+ <!-- Hero Section -->
146
+ <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16">
147
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
148
+ <div class="flex flex-col md:flex-row items-center">
149
+ <div class="md:w-1/2 mb-10 md:mb-0 fade-in" style="animation-delay: 0.2s;">
150
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">
151
+ Hi, I'm <span class="gradient-text">Aleksandar Panov</span>
152
+ </h1>
153
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-gray-600">
154
+ Front-End <span class="gradient-text">Developer</span>
155
+ </h2>
156
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">
157
+ I craft beautiful, responsive, and user-friendly web experiences with modern technologies.
158
+ </p>
159
+ <div class="flex space-x-4">
160
+ <a href="#contact" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
161
+ Contact Me
162
+ </a>
163
+ <a href="#projects" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-100 transition-all duration-300 transform hover:-translate-y-1">
164
+ View Work
165
+ </a>
166
+ </div>
167
+ </div>
168
+ <div class="md:w-1/2 flex justify-center fade-in" style="animation-delay: 0.4s;">
169
+ <div class="relative w-64 h-64 md:w-80 md:h-80">
170
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 opacity-20 blur-xl"></div>
171
+ <div class="relative w-full h-full rounded-full overflow-hidden border-4 border-white shadow-xl floating">
172
+ <div class="w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
173
+ <div class="text-9xl text-blue-500">
174
+ <i class="fas fa-user-circle"></i>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
183
+ <a href="#about" class="text-gray-400 hover:text-indigo-600">
184
+ <i class="fas fa-chevron-down text-2xl"></i>
185
+ </a>
186
+ </div>
187
+ </section>
188
+
189
+ <!-- About Section -->
190
+ <section id="about" class="py-20 bg-white section">
191
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
192
+ <div class="text-center mb-16">
193
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">About <span class="gradient-text">Me</span></h2>
194
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
195
+ </div>
196
+ <div class="flex flex-col md:flex-row items-center">
197
+ <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center">
198
+ <div class="relative w-64 h-64">
199
+ <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 opacity-20 blur-xl"></div>
200
+ <div class="relative w-full h-full rounded-full overflow-hidden border-4 border-white shadow-xl">
201
+ <div class="w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
202
+ <div class="text-9xl text-blue-500">
203
+ <i class="fas fa-user-circle"></i>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <div class="md:w-2/3 md:pl-16">
210
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Who am I?</h3>
211
+ <p class="text-gray-600 mb-6 leading-relaxed">
212
+ I'm Aleksandar Panov, a passionate front-end developer with a keen eye for design and user experience.
213
+ I specialize in creating modern, responsive websites and web applications that not only look great
214
+ but also provide seamless user interactions.
215
+ </p>
216
+ <p class="text-gray-600 mb-6 leading-relaxed">
217
+ With a strong foundation in HTML, CSS, and JavaScript, I love bringing ideas to life in the browser.
218
+ I'm constantly learning and adapting to new technologies to stay at the forefront of web development.
219
+ </p>
220
+ <div class="grid grid-cols-2 gap-4 mt-8">
221
+ <div class="flex items-center">
222
+ <div class="mr-4 text-blue-500">
223
+ <i class="fas fa-user-tie text-xl"></i>
224
+ </div>
225
+ <div>
226
+ <h4 class="font-medium text-gray-800">Name</h4>
227
+ <p class="text-gray-600">Aleksandar Panov</p>
228
+ </div>
229
+ </div>
230
+ <div class="flex items-center">
231
+ <div class="mr-4 text-purple-500">
232
+ <i class="fas fa-envelope text-xl"></i>
233
+ </div>
234
+ <div>
235
+ <h4 class="font-medium text-gray-800">Email</h4>
236
+ <p class="text-gray-600">hello@aleksandarpanov.com</p>
237
+ </div>
238
+ </div>
239
+ <div class="flex items-center">
240
+ <div class="mr-4 text-indigo-500">
241
+ <i class="fas fa-map-marker-alt text-xl"></i>
242
+ </div>
243
+ <div>
244
+ <h4 class="font-medium text-gray-800">Location</h4>
245
+ <p class="text-gray-600">Based Worldwide</p>
246
+ </div>
247
+ </div>
248
+ <div class="flex items-center">
249
+ <div class="mr-4 text-pink-500">
250
+ <i class="fas fa-code text-xl"></i>
251
+ </div>
252
+ <div>
253
+ <h4 class="font-medium text-gray-800">Speciality</h4>
254
+ <p class="text-gray-600">Front-End Development</p>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Skills Section -->
264
+ <section id="skills" class="py-20 bg-gray-50 section">
265
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
266
+ <div class="text-center mb-16">
267
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">My <span class="gradient-text">Skills</span></h2>
268
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
269
+ </div>
270
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
271
+ <div>
272
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Coding Skills</h3>
273
+ <div class="space-y-6">
274
+ <div>
275
+ <div class="flex justify-between mb-2">
276
+ <span class="font-medium text-gray-700">HTML/CSS</span>
277
+ <span class="text-gray-500">95%</span>
278
+ </div>
279
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
280
+ <div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-blue-500 to-blue-600" style="--target-width: 95%;"></div>
281
+ </div>
282
+ </div>
283
+ <div>
284
+ <div class="flex justify-between mb-2">
285
+ <span class="font-medium text-gray-700">JavaScript</span>
286
+ <span class="text-gray-500">90%</span>
287
+ </div>
288
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
289
+ <div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-purple-500 to-purple-600" style="--target-width: 90%;"></div>
290
+ </div>
291
+ </div>
292
+ <div>
293
+ <div class="flex justify-between mb-2">
294
+ <span class="font-medium text-gray-700">React</span>
295
+ <span class="text-gray-500">85%</span>
296
+ </div>
297
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
298
+ <div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-indigo-500 to-indigo-600" style="--target-width: 85%;"></div>
299
+ </div>
300
+ </div>
301
+ <div>
302
+ <div class="flex justify-between mb-2">
303
+ <span class="font-medium text-gray-700">Vue.js</span>
304
+ <span class="text-gray-500">80%</span>
305
+ </div>
306
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
307
+ <div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-green-500 to-green-600" style="--target-width: 80%;"></div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ <div>
313
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Design & Tools</h3>
314
+ <div class="space-y-6">
315
+ <div>
316
+ <div class="flex justify-between mb-2">
317
+ <span class="font-medium text-gray-700">UI/UX Design</span>
318
+ <span class="text-gray-500">85%</span>
319
+ </div>
320
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
321
+ <div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-pink-500 to-pink-600" style="--target-width: 85%;"></div>
322
+ </div>
323
+ </div>
324
+ <div>
325
+ <div class="flex justify-between mb-2">
326
+ <span class="font-medium text-gray-700">Tailwind CSS</span>
327
+ <span class="text-gray-500">90%</span>
328
+ </div>
329
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
330
+ <div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-blue-400 to-blue-500" style="--target-width: 90%;"></div>
331
+ </div>
332
+ </div>
333
+ <div>
334
+ <div class="flex justify-between mb-2">
335
+ <span class="font-medium text-gray-700">Git</span>
336
+ <span class="text-gray-500">80%</span>
337
+ </div>
338
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
339
+ <div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-red-500 to-red-600" style="--target-width: 80%;"></div>
340
+ </div>
341
+ </div>
342
+ <div>
343
+ <div class="flex justify-between mb-2">
344
+ <span class="font-medium text-gray-700">Figma</span>
345
+ <span class="text-gray-500">75%</span>
346
+ </div>
347
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
348
+ <div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-purple-400 to-purple-500" style="--target-width: 75%;"></div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <div class="mt-16">
355
+ <h3 class="text-xl font-semibold text-gray-800 mb-8 text-center">Technologies I Work With</h3>
356
+ <div class="flex flex-wrap justify-center gap-8">
357
+ <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24">
358
+ <i class="fab fa-html5 text-4xl text-orange-500 mb-2"></i>
359
+ <span class="text-sm text-gray-600">HTML5</span>
360
+ </div>
361
+ <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24">
362
+ <i class="fab fa-css3-alt text-4xl text-blue-500 mb-2"></i>
363
+ <span class="text-sm text-gray-600">CSS3</span>
364
+ </div>
365
+ <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24">
366
+ <i class="fab fa-js text-4xl text-yellow-500 mb-2"></i>
367
+ <span class="text-sm text-gray-600">JavaScript</span>
368
+ </div>
369
+ <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24">
370
+ <i class="fab fa-react text-4xl text-blue-400 mb-2"></i>
371
+ <span class="text-sm text-gray-600">React</span>
372
+ </div>
373
+ <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24">
374
+ <i class="fab fa-vuejs text-4xl text-green-500 mb-2"></i>
375
+ <span class="text-sm text-gray-600">Vue.js</span>
376
+ </div>
377
+ <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24">
378
+ <i class="fab fa-sass text-4xl text-pink-500 mb-2"></i>
379
+ <span class="text-sm text-gray-600">Sass</span>
380
+ </div>
381
+ <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24">
382
+ <i class="fab fa-git-alt text-4xl text-red-500 mb-2"></i>
383
+ <span class="text-sm text-gray-600">Git</span>
384
+ </div>
385
+ <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24">
386
+ <i class="fab fa-figma text-4xl text-purple-500 mb-2"></i>
387
+ <span class="text-sm text-gray-600">Figma</span>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </section>
393
+
394
+ <!-- Projects Section -->
395
+ <section id="projects" class="py-20 bg-white section">
396
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
397
+ <div class="text-center mb-16">
398
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">My <span class="gradient-text">Projects</span></h2>
399
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
400
+ </div>
401
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
402
+ <!-- Project 1 -->
403
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover">
404
+ <div class="h-48 bg-gradient-to-r from-blue-100 to-indigo-100 flex items-center justify-center">
405
+ <i class="fas fa-laptop-code text-6xl text-blue-500"></i>
406
+ </div>
407
+ <div class="p-6">
408
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Modern Dashboard UI</h3>
409
+ <p class="text-gray-600 mb-4">A responsive admin dashboard built with React and Tailwind CSS, featuring interactive charts and data visualization.</p>
410
+ <div class="flex flex-wrap gap-2 mb-4">
411
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">React</span>
412
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">Tailwind</span>
413
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Chart.js</span>
414
+ </div>
415
+ <div class="flex space-x-3">
416
+ <a href="#" class="text-blue-500 hover:text-blue-700">
417
+ <i class="fas fa-external-link-alt"></i> Live Demo
418
+ </a>
419
+ <a href="#" class="text-gray-500 hover:text-gray-700">
420
+ <i class="fab fa-github"></i> Code
421
+ </a>
422
+ </div>
423
+ </div>
424
+ </div>
425
+
426
+ <!-- Project 2 -->
427
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover">
428
+ <div class="h-48 bg-gradient-to-r from-purple-100 to-pink-100 flex items-center justify-center">
429
+ <i class="fas fa-shopping-cart text-6xl text-purple-500"></i>
430
+ </div>
431
+ <div class="p-6">
432
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">E-commerce Platform</h3>
433
+ <p class="text-gray-600 mb-4">A full-featured online store with product catalog, cart functionality, and checkout process built with Vue.js.</p>
434
+ <div class="flex flex-wrap gap-2 mb-4">
435
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Vue.js</span>
436
+ <span class="px-3 py-1 bg-red-100 text-red-800 text-xs font-medium rounded-full">Firebase</span>
437
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full">Vuex</span>
438
+ </div>
439
+ <div class="flex space-x-3">
440
+ <a href="#" class="text-blue-500 hover:text-blue-700">
441
+ <i class="fas fa-external-link-alt"></i> Live Demo
442
+ </a>
443
+ <a href="#" class="text-gray-500 hover:text-gray-700">
444
+ <i class="fab fa-github"></i> Code
445
+ </a>
446
+ </div>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- Project 3 -->
451
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover">
452
+ <div class="h-48 bg-gradient-to-r from-indigo-100 to-blue-100 flex items-center justify-center">
453
+ <i class="fas fa-mobile-alt text-6xl text-indigo-500"></i>
454
+ </div>
455
+ <div class="p-6">
456
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Weather App</h3>
457
+ <p class="text-gray-600 mb-4">A weather application that displays current and forecasted weather data based on user location or search.</p>
458
+ <div class="flex flex-wrap gap-2 mb-4">
459
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">JavaScript</span>
460
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">API</span>
461
+ <span class="px-3 py-1 bg-pink-100 text-pink-800 text-xs font-medium rounded-full">CSS3</span>
462
+ </div>
463
+ <div class="flex space-x-3">
464
+ <a href="#" class="text-blue-500 hover:text-blue-700">
465
+ <i class="fas fa-external-link-alt"></i> Live Demo
466
+ </a>
467
+ <a href="#" class="text-gray-500 hover:text-gray-700">
468
+ <i class="fab fa-github"></i> Code
469
+ </a>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ <div class="text-center mt-12">
475
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
476
+ View All Projects
477
+ <i class="fas fa-arrow-right ml-2"></i>
478
+ </a>
479
+ </div>
480
+ </div>
481
+ </section>
482
+
483
+ <!-- Contact Section -->
484
+ <section id="contact" class="py-20 bg-gray-50 section">
485
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
486
+ <div class="text-center mb-16">
487
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Get In <span class="gradient-text">Touch</span></h2>
488
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
489
+ </div>
490
+ <div class="flex flex-col md:flex-row">
491
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
492
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">Contact Information</h3>
493
+ <p class="text-gray-600 mb-8">
494
+ 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 visions.
495
+ </p>
496
+ <div class="space-y-6">
497
+ <div class="flex items-start">
498
+ <div class="flex-shrink-0 bg-blue-100 rounded-lg p-3">
499
+ <i class="fas fa-envelope text-blue-600"></i>
500
+ </div>
501
+ <div class="ml-4">
502
+ <h4 class="text-lg font-medium text-gray-900">Email</h4>
503
+ <p class="text-gray-600">hello@aleksandarpanov.com</p>
504
+ </div>
505
+ </div>
506
+ <div class="flex items-start">
507
+ <div class="flex-shrink-0 bg-purple-100 rounded-lg p-3">
508
+ <i class="fas fa-phone-alt text-purple-600"></i>
509
+ </div>
510
+ <div class="ml-4">
511
+ <h4 class="text-lg font-medium text-gray-900">Phone</h4>
512
+ <p class="text-gray-600">+1 (555) 123-4567</p>
513
+ </div>
514
+ </div>
515
+ <div class="flex items-start">
516
+ <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
517
+ <i class="fas fa-map-marker-alt text-indigo-600"></i>
518
+ </div>
519
+ <div class="ml-4">
520
+ <h4 class="text-lg font-medium text-gray-900">Location</h4>
521
+ <p class="text-gray-600">Based Worldwide</p>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ <div class="mt-10">
526
+ <h4 class="text-lg font-medium text-gray-900 mb-4">Follow Me</h4>
527
+ <div class="flex space-x-4">
528
+ <a href="#" class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-colors">
529
+ <i class="fab fa-twitter"></i>
530
+ </a>
531
+ <a href="#" class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white hover:bg-blue-700 transition-colors">
532
+ <i class="fab fa-linkedin-in"></i>
533
+ </a>
534
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-gray-900 transition-colors">
535
+ <i class="fab fa-github"></i>
536
+ </a>
537
+ <a href="#" class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center text-white hover:bg-pink-600 transition-colors">
538
+ <i class="fab fa-dribbble"></i>
539
+ </a>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ <div class="md:w-1/2">
544
+ <form class="space-y-6">
545
+ <div>
546
+ <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label>
547
+ <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
548
+ </div>
549
+ <div>
550
+ <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
551
+ <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
552
+ </div>
553
+ <div>
554
+ <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
555
+ <input type="text" id="subject" name="subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
556
+ </div>
557
+ <div>
558
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
559
+ <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
560
+ </div>
561
+ <div>
562
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
563
+ Send Message
564
+ </button>
565
+ </div>
566
+ </form>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </section>
571
+
572
+ <!-- Footer -->
573
+ <footer class="bg-gray-900 text-white py-12">
574
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
575
+ <div class="flex flex-col md:flex-row justify-between items-center">
576
+ <div class="mb-6 md:mb-0">
577
+ <span class="text-xl font-bold gradient-text">Aleksandar Panov</span>
578
+ <p class="mt-2 text-gray-400">Front-End Developer</p>
579
+ </div>
580
+ <div class="flex flex-col items-center md:items-end">
581
+ <div class="flex space-x-6 mb-4">
582
+ <a href="#" class="text-gray-400 hover:text-white">
583
+ <i class="fab fa-twitter"></i>
584
+ </a>
585
+ <a href="#" class="text-gray-400 hover:text-white">
586
+ <i class="fab fa-linkedin-in"></i>
587
+ </a>
588
+ <a href="#" class="text-gray-400 hover:text-white">
589
+ <i class="fab fa-github"></i>
590
+ </a>
591
+ <a href="#" class="text-gray-400 hover:text-white">
592
+ <i class="fab fa-dribbble"></i>
593
+ </a>
594
+ </div>
595
+ <p class="text-gray-400 text-sm">
596
+ &copy; 2023 Aleksandar Panov. All rights reserved.
597
+ </p>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </footer>
602
+
603
+ <script>
604
+ // Mobile menu toggle
605
+ document.getElementById('menu-toggle').addEventListener('click', function() {
606
+ document.getElementById('mobile-menu').classList.toggle('hidden');
607
+ });
608
+
609
+ // Smooth scrolling for navigation links
610
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
611
+ anchor.addEventListener('click', function (e) {
612
+ e.preventDefault();
613
+
614
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
615
+ behavior: 'smooth'
616
+ });
617
+
618
+ // Close mobile menu if open
619
+ document.getElementById('mobile-menu').classList.add('hidden');
620
+ });
621
+ });
622
+
623
+ // Intersection Observer for section animations
624
+ const sections = document.querySelectorAll('.section');
625
+
626
+ const observerOptions = {
627
+ threshold: 0.1,
628
+ rootMargin: '0px 0px -50px 0px'
629
+ };
630
+
631
+ const observer = new IntersectionObserver((entries, observer) => {
632
+ entries.forEach(entry => {
633
+ if (entry.isIntersecting) {
634
+ entry.target.classList.add('visible');
635
+ observer.unobserve(entry.target);
636
+ }
637
+ });
638
+ }, observerOptions);
639
+
640
+ sections.forEach(section => {
641
+ observer.observe(section);
642
+ });
643
+
644
+ // Create particles background
645
+ function createParticles() {
646
+ const particlesContainer = document.getElementById('particles');
647
+ const particleCount = 30;
648
+
649
+ for (let i = 0; i < particleCount; i++) {
650
+ const particle = document.createElement('div');
651
+ particle.classList.add('bg-particle');
652
+
653
+ // Random properties
654
+ const size = Math.random() * 10 + 5;
655
+ const posX = Math.random() * 100;
656
+ const posY = Math.random() * 100;
657
+ const delay = Math.random() * 5;
658
+ const duration = Math.random() * 10 + 10;
659
+ const opacity = Math.random() * 0.2 + 0.1;
660
+ const color = `rgba(${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, ${opacity})`;
661
+
662
+ // Apply properties
663
+ particle.style.width = `${size}px`;
664
+ particle.style.height = `${size}px`;
665
+ particle.style.left = `${posX}%`;
666
+ particle.style.top = `${posY}%`;
667
+ particle.style.backgroundColor = color;
668
+ particle.style.animation = `floating ${duration}s ease-in-out ${delay}s infinite`;
669
+
670
+ particlesContainer.appendChild(particle);
671
+ }
672
+ }
673
+
674
+ // Initialize particles when DOM is loaded
675
+ document.addEventListener('DOMContentLoaded', createParticles);
676
+
677
+ // Skill bars animation
678
+ document.addEventListener('DOMContentLoaded', function() {
679
+ const skillBars = document.querySelectorAll('.skill-bar');
680
+
681
+ skillBars.forEach(bar => {
682
+ const targetWidth = bar.style.getPropertyValue('--target-width');
683
+ bar.style.width = '0';
684
+
685
+ setTimeout(() => {
686
+ bar.style.width = targetWidth;
687
+ }, 500);
688
+ });
689
+ });
690
+ </script>
691
+ <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=codepanov/panov" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
692
+ </html>