Hugging Face's logo

Spaces:
Azhagan2
/
portfolio
Running

App Files Community
Azhagan2 commited on
Commit
367e363
·
verified ·
1 Parent(s): 4ea910e

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +529 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio
3
- emoji: 📉
4
- colorFrom: blue
5
- colorTo: indigo
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: portfolio
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,529 @@
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>Azha's GitHub Portfolio</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
+ .gradient-text {
11
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+ .project-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .skill-badge:hover {
21
+ transform: scale(1.05);
22
+ }
23
+ #particles-js {
24
+ position: absolute;
25
+ width: 100%;
26
+ height: 100%;
27
+ top: 0;
28
+ left: 0;
29
+ z-index: 0;
30
+ }
31
+ .content {
32
+ position: relative;
33
+ z-index: 1;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50 font-sans antialiased">
38
+ <!-- Particles.js Background -->
39
+ <div id="particles-js"></div>
40
+
41
+ <div class="content">
42
+ <!-- Navigation -->
43
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
44
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
45
+ <div class="flex justify-between h-16">
46
+ <div class="flex items-center">
47
+ <a href="#" class="text-xl font-bold gradient-text">Azha's Portfolio</a>
48
+ </div>
49
+ <div class="hidden md:flex items-center space-x-8">
50
+ <a href="#about" class="text-gray-700 hover:text-blue-600 transition">About</a>
51
+ <a href="#projects" class="text-gray-700 hover:text-blue-600 transition">Projects</a>
52
+ <a href="#skills" class="text-gray-700 hover:text-blue-600 transition">Skills</a>
53
+ <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a>
54
+ <a href="https://github.com/azhagan2" target="_blank" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition flex items-center">
55
+ <i class="fab fa-github mr-2"></i> GitHub
56
+ </a>
57
+ </div>
58
+ <div class="md:hidden flex items-center">
59
+ <button id="menu-btn" class="text-gray-700">
60
+ <i class="fas fa-bars text-2xl"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ <!-- Mobile menu -->
66
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
67
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
68
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">About</a>
69
+ <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Projects</a>
70
+ <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Skills</a>
71
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a>
72
+ <a href="https://github.com/azhagan2" target="_blank" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-600 hover:bg-blue-700 text-center">
73
+ <i class="fab fa-github mr-2"></i> GitHub
74
+ </a>
75
+ </div>
76
+ </div>
77
+ </nav>
78
+
79
+ <!-- Hero Section -->
80
+ <section class="py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
81
+ <div class="max-w-4xl mx-auto text-center">
82
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
83
+ Hi, I'm <span class="gradient-text">Azha</span>
84
+ </h1>
85
+ <h2 class="text-xl md:text-2xl text-gray-600 mb-8">
86
+ A passionate developer building amazing projects on GitHub
87
+ </h2>
88
+ <div class="flex justify-center space-x-4">
89
+ <a href="#projects" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md transition flex items-center">
90
+ <i class="fas fa-code mr-2"></i> View Projects
91
+ </a>
92
+ <a href="#contact" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-md transition flex items-center">
93
+ <i class="fas fa-envelope mr-2"></i> Contact Me
94
+ </a>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- About Section -->
100
+ <section id="about" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
101
+ <div class="max-w-4xl mx-auto">
102
+ <h2 class="text-3xl font-bold text-center mb-12">
103
+ <span class="gradient-text">About Me</span>
104
+ </h2>
105
+ <div class="flex flex-col md:flex-row items-center">
106
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
107
+ <div class="w-48 h-48 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 p-1">
108
+ <img src="https://avatars.githubusercontent.com/u/yourprofile" alt="Profile" class="w-full h-full rounded-full object-cover border-4 border-white">
109
+ </div>
110
+ </div>
111
+ <div class="md:w-2/3 md:pl-12">
112
+ <p class="text-gray-700 mb-4">
113
+ Welcome to my GitHub portfolio! I'm a software developer passionate about creating open-source projects and contributing to the developer community.
114
+ </p>
115
+ <p class="text-gray-700 mb-4">
116
+ With a strong foundation in web development and programming, I enjoy building projects that solve real-world problems and help others learn.
117
+ </p>
118
+ <p class="text-gray-700 mb-6">
119
+ When I'm not coding, you can find me exploring new technologies, contributing to open-source projects, or sharing knowledge with fellow developers.
120
+ </p>
121
+ <div class="flex space-x-4">
122
+ <a href="https://github.com/azhagan2" target="_blank" class="text-gray-700 hover:text-blue-600 transition">
123
+ <i class="fab fa-github text-2xl"></i>
124
+ </a>
125
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition">
126
+ <i class="fab fa-twitter text-2xl"></i>
127
+ </a>
128
+ <a href="#" class="text-gray-700 hover:text-blue-600 transition">
129
+ <i class="fab fa-linkedin text-2xl"></i>
130
+ </a>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- Projects Section -->
138
+ <section id="projects" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
139
+ <div class="max-w-6xl mx-auto">
140
+ <h2 class="text-3xl font-bold text-center mb-12">
141
+ <span class="gradient-text">My Projects</span>
142
+ </h2>
143
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
144
+ <!-- Project 1 -->
145
+ <div class="project-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
146
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
147
+ <i class="fas fa-project-diagram text-white text-6xl"></i>
148
+ </div>
149
+ <div class="p-6">
150
+ <h3 class="text-xl font-bold mb-2">Project One</h3>
151
+ <p class="text-gray-600 mb-4">A brief description of what this project is about and what technologies were used.</p>
152
+ <div class="flex flex-wrap gap-2 mb-4">
153
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">React</span>
154
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Node.js</span>
155
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">MongoDB</span>
156
+ </div>
157
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
158
+ View Project <i class="fas fa-arrow-right ml-2"></i>
159
+ </a>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Project 2 -->
164
+ <div class="project-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
165
+ <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center">
166
+ <i class="fas fa-mobile-alt text-white text-6xl"></i>
167
+ </div>
168
+ <div class="p-6">
169
+ <h3 class="text-xl font-bold mb-2">Mobile App</h3>
170
+ <p class="text-gray-600 mb-4">A cross-platform mobile application built with React Native and Firebase backend.</p>
171
+ <div class="flex flex-wrap gap-2 mb-4">
172
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">React Native</span>
173
+ <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">Firebase</span>
174
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">JavaScript</span>
175
+ </div>
176
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
177
+ View Project <i class="fas fa-arrow-right ml-2"></i>
178
+ </a>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Project 3 -->
183
+ <div class="project-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
184
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
185
+ <i class="fas fa-robot text-white text-6xl"></i>
186
+ </div>
187
+ <div class="p-6">
188
+ <h3 class="text-xl font-bold mb-2">AI Project</h3>
189
+ <p class="text-gray-600 mb-4">An artificial intelligence project using machine learning to solve complex problems.</p>
190
+ <div class="flex flex-wrap gap-2 mb-4">
191
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Python</span>
192
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">TensorFlow</span>
193
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">NLP</span>
194
+ </div>
195
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
196
+ View Project <i class="fas fa-arrow-right ml-2"></i>
197
+ </a>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ <div class="text-center mt-12">
202
+ <a href="https://github.com/azhagan2?tab=repositories" target="_blank" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition">
203
+ <i class="fab fa-github mr-2"></i> View All Projects on GitHub
204
+ </a>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Skills Section -->
210
+ <section id="skills" class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
211
+ <div class="max-w-4xl mx-auto">
212
+ <h2 class="text-3xl font-bold text-center mb-12">
213
+ <span class="gradient-text">My Skills</span>
214
+ </h2>
215
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
216
+ <!-- Skill 1 -->
217
+ <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300">
218
+ <i class="fab fa-js-square text-4xl text-yellow-500 mb-3"></i>
219
+ <h3 class="font-bold">JavaScript</h3>
220
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
221
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 90%"></div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Skill 2 -->
226
+ <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300">
227
+ <i class="fab fa-react text-4xl text-blue-500 mb-3"></i>
228
+ <h3 class="font-bold">React</h3>
229
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
230
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Skill 3 -->
235
+ <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300">
236
+ <i class="fab fa-node-js text-4xl text-green-500 mb-3"></i>
237
+ <h3 class="font-bold">Node.js</h3>
238
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
239
+ <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Skill 4 -->
244
+ <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300">
245
+ <i class="fab fa-python text-4xl text-blue-700 mb-3"></i>
246
+ <h3 class="font-bold">Python</h3>
247
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
248
+ <div class="bg-blue-700 h-2 rounded-full" style="width: 75%"></div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Skill 5 -->
253
+ <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300">
254
+ <i class="fas fa-database text-4xl text-blue-400 mb-3"></i>
255
+ <h3 class="font-bold">SQL</h3>
256
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
257
+ <div class="bg-blue-400 h-2 rounded-full" style="width: 85%"></div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Skill 6 -->
262
+ <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300">
263
+ <i class="fab fa-git-alt text-4xl text-orange-500 mb-3"></i>
264
+ <h3 class="font-bold">Git</h3>
265
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
266
+ <div class="bg-orange-500 h-2 rounded-full" style="width: 90%"></div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Skill 7 -->
271
+ <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300">
272
+ <i class="fab fa-html5 text-4xl text-orange-600 mb-3"></i>
273
+ <h3 class="font-bold">HTML5</h3>
274
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
275
+ <div class="bg-orange-600 h-2 rounded-full" style="width: 95%"></div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Skill 8 -->
280
+ <div class="skill-badge bg-gray-100 rounded-lg p-6 text-center transition duration-300">
281
+ <i class="fab fa-css3-alt text-4xl text-blue-500 mb-3"></i>
282
+ <h3 class="font-bold">CSS3</h3>
283
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
284
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </section>
290
+
291
+ <!-- Contact Section -->
292
+ <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
293
+ <div class="max-w-4xl mx-auto">
294
+ <h2 class="text-3xl font-bold text-center mb-12">
295
+ <span class="gradient-text">Get In Touch</span>
296
+ </h2>
297
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
298
+ <div class="md:flex">
299
+ <div class="md:w-1/2 bg-gradient-to-r from-blue-500 to-purple-600 p-8 text-white">
300
+ <h3 class="text-2xl font-bold mb-4">Contact Information</h3>
301
+ <p class="mb-6">Feel free to reach out if you're looking for a developer, have a question, or just want to connect.</p>
302
+ <div class="space-y-4">
303
+ <div class="flex items-center">
304
+ <i class="fas fa-envelope mr-4 text-xl"></i>
305
+ <span>contact@example.com</span>
306
+ </div>
307
+ <div class="flex items-center">
308
+ <i class="fab fa-github mr-4 text-xl"></i>
309
+ <span>github.com/azhagan2</span>
310
+ </div>
311
+ <div class="flex items-center">
312
+ <i class="fab fa-linkedin mr-4 text-xl"></i>
313
+ <span>linkedin.com/in/yourprofile</span>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ <div class="md:w-1/2 p-8">
318
+ <form id="contact-form" class="space-y-4">
319
+ <div>
320
+ <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
321
+ <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-blue-500 focus:border-blue-500">
322
+ </div>
323
+ <div>
324
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
325
+ <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-blue-500 focus:border-blue-500">
326
+ </div>
327
+ <div>
328
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
329
+ <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-blue-500 focus:border-blue-500"></textarea>
330
+ </div>
331
+ <div>
332
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition">
333
+ Send Message
334
+ </button>
335
+ </div>
336
+ </form>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </section>
342
+
343
+ <!-- Footer -->
344
+ <footer class="bg-gray-800 text-white py-8 px-4 sm:px-6 lg:px-8">
345
+ <div class="max-w-6xl mx-auto">
346
+ <div class="flex flex-col md:flex-row justify-between items-center">
347
+ <div class="mb-4 md:mb-0">
348
+ <a href="#" class="text-xl font-bold gradient-text">Azha's Portfolio</a>
349
+ <p class="text-gray-400 mt-2">Building the future, one commit at a time.</p>
350
+ </div>
351
+ <div class="flex space-x-6">
352
+ <a href="https://github.com/azhagan2" target="_blank" class="text-gray-400 hover:text-white transition">
353
+ <i class="fab fa-github text-2xl"></i>
354
+ </a>
355
+ <a href="#" class="text-gray-400 hover:text-white transition">
356
+ <i class="fab fa-twitter text-2xl"></i>
357
+ </a>
358
+ <a href="#" class="text-gray-400 hover:text-white transition">
359
+ <i class="fab fa-linkedin text-2xl"></i>
360
+ </a>
361
+ </div>
362
+ </div>
363
+ <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
364
+ <p>&copy; 2023 Azha's GitHub Portfolio. All rights reserved.</p>
365
+ </div>
366
+ </div>
367
+ </footer>
368
+ </div>
369
+
370
+ <!-- Back to Top Button -->
371
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
372
+ <i class="fas fa-arrow-up"></i>
373
+ </button>
374
+
375
+ <!-- Scripts -->
376
+ <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
377
+ <script>
378
+ // Mobile menu toggle
379
+ document.getElementById('menu-btn').addEventListener('click', function() {
380
+ document.getElementById('mobile-menu').classList.toggle('hidden');
381
+ });
382
+
383
+ // Back to top button
384
+ const backToTopButton = document.getElementById('back-to-top');
385
+ window.addEventListener('scroll', function() {
386
+ if (window.pageYOffset > 300) {
387
+ backToTopButton.classList.remove('opacity-0', 'invisible');
388
+ backToTopButton.classList.add('opacity-100', 'visible');
389
+ } else {
390
+ backToTopButton.classList.remove('opacity-100', 'visible');
391
+ backToTopButton.classList.add('opacity-0', 'invisible');
392
+ }
393
+ });
394
+
395
+ backToTopButton.addEventListener('click', function() {
396
+ window.scrollTo({ top: 0, behavior: 'smooth' });
397
+ });
398
+
399
+ // Form submission
400
+ document.getElementById('contact-form').addEventListener('submit', function(e) {
401
+ e.preventDefault();
402
+ alert('Thank you for your message! I will get back to you soon.');
403
+ this.reset();
404
+ });
405
+
406
+ // Smooth scrolling for anchor links
407
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
408
+ anchor.addEventListener('click', function(e) {
409
+ e.preventDefault();
410
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
411
+ behavior: 'smooth'
412
+ });
413
+
414
+ // Close mobile menu if open
415
+ if (!document.getElementById('mobile-menu').classList.contains('hidden')) {
416
+ document.getElementById('mobile-menu').classList.add('hidden');
417
+ }
418
+ });
419
+ });
420
+
421
+ // Particles.js initialization
422
+ particlesJS("particles-js", {
423
+ "particles": {
424
+ "number": {
425
+ "value": 80,
426
+ "density": {
427
+ "enable": true,
428
+ "value_area": 800
429
+ }
430
+ },
431
+ "color": {
432
+ "value": "#3b82f6"
433
+ },
434
+ "shape": {
435
+ "type": "circle",
436
+ "stroke": {
437
+ "width": 0,
438
+ "color": "#000000"
439
+ },
440
+ "polygon": {
441
+ "nb_sides": 5
442
+ }
443
+ },
444
+ "opacity": {
445
+ "value": 0.5,
446
+ "random": false,
447
+ "anim": {
448
+ "enable": false,
449
+ "speed": 1,
450
+ "opacity_min": 0.1,
451
+ "sync": false
452
+ }
453
+ },
454
+ "size": {
455
+ "value": 3,
456
+ "random": true,
457
+ "anim": {
458
+ "enable": false,
459
+ "speed": 40,
460
+ "size_min": 0.1,
461
+ "sync": false
462
+ }
463
+ },
464
+ "line_linked": {
465
+ "enable": true,
466
+ "distance": 150,
467
+ "color": "#3b82f6",
468
+ "opacity": 0.4,
469
+ "width": 1
470
+ },
471
+ "move": {
472
+ "enable": true,
473
+ "speed": 2,
474
+ "direction": "none",
475
+ "random": false,
476
+ "straight": false,
477
+ "out_mode": "out",
478
+ "bounce": false,
479
+ "attract": {
480
+ "enable": false,
481
+ "rotateX": 600,
482
+ "rotateY": 1200
483
+ }
484
+ }
485
+ },
486
+ "interactivity": {
487
+ "detect_on": "canvas",
488
+ "events": {
489
+ "onhover": {
490
+ "enable": true,
491
+ "mode": "grab"
492
+ },
493
+ "onclick": {
494
+ "enable": true,
495
+ "mode": "push"
496
+ },
497
+ "resize": true
498
+ },
499
+ "modes": {
500
+ "grab": {
501
+ "distance": 140,
502
+ "line_linked": {
503
+ "opacity": 1
504
+ }
505
+ },
506
+ "bubble": {
507
+ "distance": 400,
508
+ "size": 40,
509
+ "duration": 2,
510
+ "opacity": 8,
511
+ "speed": 3
512
+ },
513
+ "repulse": {
514
+ "distance": 200,
515
+ "duration": 0.4
516
+ },
517
+ "push": {
518
+ "particles_nb": 4
519
+ },
520
+ "remove": {
521
+ "particles_nb": 2
522
+ }
523
+ }
524
+ },
525
+ "retina_detect": true
526
+ });
527
+ </script>
528
+ <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=Azhagan2/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
529
+ </html>