Hugging Face's logo

Spaces:
Nithish310
/
my-portfolio
Running

App Files Community
Nithish310 commited on
Commit
031b515
·
verified ·
1 Parent(s): 6aed932

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +607 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Portfolio
3
- emoji: 📉
4
- colorFrom: gray
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: my-portfolio
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: green
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,607 @@
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>Nithishkumar | 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
+ @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
+ background-color: #f8fafc;
15
+ scroll-behavior: smooth;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
20
+ }
21
+
22
+ .card-hover {
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .card-hover:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
29
+ }
30
+
31
+ .skill-bar {
32
+ height: 8px;
33
+ border-radius: 4px;
34
+ background-color: #e2e8f0;
35
+ overflow: hidden;
36
+ }
37
+
38
+ .skill-progress {
39
+ height: 100%;
40
+ border-radius: 4px;
41
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
42
+ transition: width 1s ease-in-out;
43
+ }
44
+
45
+ .floating {
46
+ animation: floating 3s ease-in-out infinite;
47
+ }
48
+
49
+ @keyframes floating {
50
+ 0% { transform: translateY(0px); }
51
+ 50% { transform: translateY(-15px); }
52
+ 100% { transform: translateY(0px); }
53
+ }
54
+
55
+ .typewriter {
56
+ overflow: hidden;
57
+ border-right: .15em solid #6366f1;
58
+ white-space: nowrap;
59
+ margin: 0 auto;
60
+ letter-spacing: .15em;
61
+ animation:
62
+ typing 3.5s steps(40, end),
63
+ blink-caret .75s step-end infinite;
64
+ }
65
+
66
+ @keyframes typing {
67
+ from { width: 0 }
68
+ to { width: 100% }
69
+ }
70
+
71
+ @keyframes blink-caret {
72
+ from, to { border-color: transparent }
73
+ 50% { border-color: #6366f1; }
74
+ }
75
+ </style>
76
+ </head>
77
+ <body class="antialiased">
78
+ <!-- Navigation -->
79
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
80
+ <div class="max-w-6xl mx-auto px-4">
81
+ <div class="flex justify-between items-center py-4">
82
+ <div class="flex items-center space-x-4">
83
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-xl">N</div>
84
+ <span class="text-xl font-semibold text-gray-800">Nithishkumar</span>
85
+ </div>
86
+ <div class="hidden md:flex items-center space-x-8">
87
+ <a href="#home" class="text-indigo-600 font-medium">Home</a>
88
+ <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">About</a>
89
+ <a href="#projects" class="text-gray-600 hover:text-indigo-600 transition">Projects</a>
90
+ <a href="#skills" class="text-gray-600 hover:text-indigo-600 transition">Skills</a>
91
+ <a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Contact</a>
92
+ </div>
93
+ <div class="md:hidden">
94
+ <button id="menu-btn" class="text-gray-600 focus:outline-none">
95
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
96
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
97
+ </svg>
98
+ </button>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ <!-- Mobile menu -->
103
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg">
104
+ <a href="#home" class="block py-2 text-indigo-600 font-medium">Home</a>
105
+ <a href="#about" class="block py-2 text-gray-600 hover:text-indigo-600 transition">About</a>
106
+ <a href="#projects" class="block py-2 text-gray-600 hover:text-indigo-600 transition">Projects</a>
107
+ <a href="#skills" class="block py-2 text-gray-600 hover:text-indigo-600 transition">Skills</a>
108
+ <a href="#contact" class="block py-2 text-gray-600 hover:text-indigo-600 transition">Contact</a>
109
+ </div>
110
+ </nav>
111
+
112
+ <!-- Hero Section -->
113
+ <section id="home" class="gradient-bg text-white py-20">
114
+ <div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center">
115
+ <div class="md:w-1/2 mb-10 md:mb-0">
116
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="typewriter">Nithishkumar</span></h1>
117
+ <p class="text-xl md:text-2xl mb-6">Software Engineer at Infosys | Android Developer | AI Enthusiast</p>
118
+ <div class="flex space-x-4">
119
+ <a href="#projects" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">View My Work</a>
120
+ <a href="#contact" class="border-2 border-white text-white px-6 py-2 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition">Contact Me</a>
121
+ </div>
122
+ </div>
123
+ <div class="md:w-1/2 flex justify-center">
124
+ <div class="relative w-64 h-64 md:w-80 md:h-80">
125
+ <div class="absolute inset-0 bg-white bg-opacity-20 rounded-full blur-xl"></div>
126
+ <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
127
+ alt="Profile"
128
+ class="relative w-full h-full rounded-full object-cover border-4 border-white floating">
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- About Section -->
135
+ <section id="about" class="py-20 bg-white">
136
+ <div class="max-w-6xl mx-auto px-4">
137
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">About Me</h2>
138
+ <div class="flex flex-col md:flex-row items-center">
139
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
140
+ <div class="w-64 h-64 rounded-full overflow-hidden border-4 border-indigo-100">
141
+ <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
142
+ alt="Profile"
143
+ class="w-full h-full object-cover">
144
+ </div>
145
+ </div>
146
+ <div class="md:w-2/3 md:pl-12">
147
+ <h3 class="text-2xl font-semibold text-gray-800 mb-4">Who am I?</h3>
148
+ <p class="text-gray-600 mb-6">
149
+ I'm Nithishkumar, a passionate Software Engineer currently working at Infosys with expertise in Android application development and AI technologies.
150
+ I've successfully developed and published multiple Android applications on the Play Store and have hands-on experience in training AI models,
151
+ including a text-to-audio conversion model.
152
+ </p>
153
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
154
+ <div class="bg-gray-50 p-6 rounded-lg card-hover">
155
+ <div class="flex items-center mb-4">
156
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white mr-4">
157
+ <i class="fas fa-briefcase"></i>
158
+ </div>
159
+ <h4 class="text-lg font-semibold text-gray-800">Professional</h4>
160
+ </div>
161
+ <p class="text-gray-600">
162
+ Currently working as a Software Engineer at Infosys, contributing to innovative projects and solutions.
163
+ </p>
164
+ </div>
165
+ <div class="bg-gray-50 p-6 rounded-lg card-hover">
166
+ <div class="flex items-center mb-4">
167
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white mr-4">
168
+ <i class="fas fa-mobile-alt"></i>
169
+ </div>
170
+ <h4 class="text-lg font-semibold text-gray-800">Android Developer</h4>
171
+ </div>
172
+ <p class="text-gray-600">
173
+ Developed and published multiple Android applications available on the Google Play Store.
174
+ </p>
175
+ </div>
176
+ <div class="bg-gray-50 p-6 rounded-lg card-hover">
177
+ <div class="flex items-center mb-4">
178
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white mr-4">
179
+ <i class="fas fa-brain"></i>
180
+ </div>
181
+ <h4 class="text-lg font-semibold text-gray-800">AI Enthusiast</h4>
182
+ </div>
183
+ <p class="text-gray-600">
184
+ Trained a text-to-audio AI model, exploring the fascinating world of machine learning and neural networks.
185
+ </p>
186
+ </div>
187
+ <div class="bg-gray-50 p-6 rounded-lg card-hover">
188
+ <div class="flex items-center mb-4">
189
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white mr-4">
190
+ <i class="fas fa-graduation-cap"></i>
191
+ </div>
192
+ <h4 class="text-lg font-semibold text-gray-800">Education</h4>
193
+ </div>
194
+ <p class="text-gray-600">
195
+ Strong academic background in Computer Science with a focus on software development and AI technologies.
196
+ </p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Projects Section -->
205
+ <section id="projects" class="py-20 bg-gray-50">
206
+ <div class="max-w-6xl mx-auto px-4">
207
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">My Projects</h2>
208
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
209
+ <!-- Android Project 1 -->
210
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">
211
+ <div class="h-48 bg-indigo-100 flex items-center justify-center">
212
+ <i class="fas fa-mobile-alt text-6xl text-indigo-500"></i>
213
+ </div>
214
+ <div class="p-6">
215
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Android App 1</h3>
216
+ <p class="text-gray-600 mb-4">A feature-rich Android application available on the Play Store with thousands of downloads.</p>
217
+ <div class="flex justify-between items-center">
218
+ <span class="text-sm text-indigo-600 font-medium">Play Store</span>
219
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 transition">
220
+ <i class="fas fa-external-link-alt"></i>
221
+ </a>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Android Project 2 -->
227
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">
228
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
229
+ <i class="fas fa-mobile-alt text-6xl text-purple-500"></i>
230
+ </div>
231
+ <div class="p-6">
232
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Android App 2</h3>
233
+ <p class="text-gray-600 mb-4">Another successful Android application solving real-world problems with innovative features.</p>
234
+ <div class="flex justify-between items-center">
235
+ <span class="text-sm text-purple-600 font-medium">Play Store</span>
236
+ <a href="#" class="text-purple-600 hover:text-purple-800 transition">
237
+ <i class="fas fa-external-link-alt"></i>
238
+ </a>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- AI Project -->
244
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">
245
+ <div class="h-48 bg-pink-100 flex items-center justify-center">
246
+ <i class="fas fa-robot text-6xl text-pink-500"></i>
247
+ </div>
248
+ <div class="p-6">
249
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Text-to-Audio AI</h3>
250
+ <p class="text-gray-600 mb-4">A trained AI model that converts text to natural sounding audio with multiple voice options.</p>
251
+ <div class="flex justify-between items-center">
252
+ <span class="text-sm text-pink-600 font-medium">AI Model</span>
253
+ <a href="#" class="text-pink-600 hover:text-pink-800 transition">
254
+ <i class="fas fa-external-link-alt"></i>
255
+ </a>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="text-center mt-12">
262
+ <a href="#" class="inline-flex items-center px-6 py-3 gradient-bg text-white rounded-full font-medium hover:opacity-90 transition">
263
+ <span>View All Projects</span>
264
+ <i class="fas fa-arrow-right ml-2"></i>
265
+ </a>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- Skills Section -->
271
+ <section id="skills" class="py-20 bg-white">
272
+ <div class="max-w-6xl mx-auto px-4">
273
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">My Skills</h2>
274
+
275
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
276
+ <div>
277
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Technical Skills</h3>
278
+ <div class="space-y-6">
279
+ <div>
280
+ <div class="flex justify-between mb-2">
281
+ <span class="text-gray-700 font-medium">Android Development</span>
282
+ <span class="text-gray-500">90%</span>
283
+ </div>
284
+ <div class="skill-bar">
285
+ <div class="skill-progress" style="width: 90%"></div>
286
+ </div>
287
+ </div>
288
+ <div>
289
+ <div class="flex justify-between mb-2">
290
+ <span class="text-gray-700 font-medium">Java/Kotlin</span>
291
+ <span class="text-gray-500">85%</span>
292
+ </div>
293
+ <div class="skill-bar">
294
+ <div class="skill-progress" style="width: 85%"></div>
295
+ </div>
296
+ </div>
297
+ <div>
298
+ <div class="flex justify-between mb-2">
299
+ <span class="text-gray-700 font-medium">Machine Learning</span>
300
+ <span class="text-gray-500">75%</span>
301
+ </div>
302
+ <div class="skill-bar">
303
+ <div class="skill-progress" style="width: 75%"></div>
304
+ </div>
305
+ </div>
306
+ <div>
307
+ <div class="flex justify-between mb-2">
308
+ <span class="text-gray-700 font-medium">Python</span>
309
+ <span class="text-gray-500">80%</span>
310
+ </div>
311
+ <div class="skill-bar">
312
+ <div class="skill-progress" style="width: 80%"></div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <div>
319
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Professional Skills</h3>
320
+ <div class="space-y-6">
321
+ <div>
322
+ <div class="flex justify-between mb-2">
323
+ <span class="text-gray-700 font-medium">Problem Solving</span>
324
+ <span class="text-gray-500">95%</span>
325
+ </div>
326
+ <div class="skill-bar">
327
+ <div class="skill-progress" style="width: 95%"></div>
328
+ </div>
329
+ </div>
330
+ <div>
331
+ <div class="flex justify-between mb-2">
332
+ <span class="text-gray-700 font-medium">Team Collaboration</span>
333
+ <span class="text-gray-500">90%</span>
334
+ </div>
335
+ <div class="skill-bar">
336
+ <div class="skill-progress" style="width: 90%"></div>
337
+ </div>
338
+ </div>
339
+ <div>
340
+ <div class="flex justify-between mb-2">
341
+ <span class="text-gray-700 font-medium">Communication</span>
342
+ <span class="text-gray-500">85%</span>
343
+ </div>
344
+ <div class="skill-bar">
345
+ <div class="skill-progress" style="width: 85%"></div>
346
+ </div>
347
+ </div>
348
+ <div>
349
+ <div class="flex justify-between mb-2">
350
+ <span class="text-gray-700 font-medium">Project Management</span>
351
+ <span class="text-gray-500">80%</span>
352
+ </div>
353
+ <div class="skill-bar">
354
+ <div class="skill-progress" style="width: 80%"></div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="mt-16">
362
+ <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Tools & Technologies</h3>
363
+ <div class="flex flex-wrap justify-center gap-4">
364
+ <div class="bg-gray-100 px-4 py-2 rounded-full flex items-center">
365
+ <i class="fab fa-android text-green-500 mr-2"></i>
366
+ <span class="text-gray-700">Android Studio</span>
367
+ </div>
368
+ <div class="bg-gray-100 px-4 py-2 rounded-full flex items-center">
369
+ <i class="fab fa-java text-red-500 mr-2"></i>
370
+ <span class="text-gray-700">Java</span>
371
+ </div>
372
+ <div class="bg-gray-100 px-4 py-2 rounded-full flex items-center">
373
+ <i class="fas fa-code text-purple-500 mr-2"></i>
374
+ <span class="text-gray-700">Kotlin</span>
375
+ </div>
376
+ <div class="bg-gray-100 px-4 py-2 rounded-full flex items-center">
377
+ <i class="fab fa-python text-blue-500 mr-2"></i>
378
+ <span class="text-gray-700">Python</span>
379
+ </div>
380
+ <div class="bg-gray-100 px-4 py-2 rounded-full flex items-center">
381
+ <i class="fas fa-brain text-indigo-500 mr-2"></i>
382
+ <span class="text-gray-700">TensorFlow</span>
383
+ </div>
384
+ <div class="bg-gray-100 px-4 py-2 rounded-full flex items-center">
385
+ <i class="fab fa-git-alt text-orange-500 mr-2"></i>
386
+ <span class="text-gray-700">Git</span>
387
+ </div>
388
+ <div class="bg-gray-100 px-4 py-2 rounded-full flex items-center">
389
+ <i class="fas fa-database text-yellow-500 mr-2"></i>
390
+ <span class="text-gray-700">SQL</span>
391
+ </div>
392
+ <div class="bg-gray-100 px-4 py-2 rounded-full flex items-center">
393
+ <i class="fab fa-google-play text-blue-400 mr-2"></i>
394
+ <span class="text-gray-700">Play Console</span>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </section>
400
+
401
+ <!-- Contact Section -->
402
+ <section id="contact" class="py-20 bg-gray-50">
403
+ <div class="max-w-6xl mx-auto px-4">
404
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Get In Touch</h2>
405
+
406
+ <div class="flex flex-col md:flex-row gap-12">
407
+ <div class="md:w-1/2">
408
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Contact Information</h3>
409
+ <div class="space-y-6">
410
+ <div class="flex items-start">
411
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white mr-4">
412
+ <i class="fas fa-envelope"></i>
413
+ </div>
414
+ <div>
415
+ <h4 class="text-lg font-medium text-gray-800">Email</h4>
416
+ <p class="text-gray-600">nithishkumar@example.com</p>
417
+ </div>
418
+ </div>
419
+ <div class="flex items-start">
420
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white mr-4">
421
+ <i class="fas fa-phone-alt"></i>
422
+ </div>
423
+ <div>
424
+ <h4 class="text-lg font-medium text-gray-800">Phone</h4>
425
+ <p class="text-gray-600">+91 9876543210</p>
426
+ </div>
427
+ </div>
428
+ <div class="flex items-start">
429
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white mr-4">
430
+ <i class="fas fa-map-marker-alt"></i>
431
+ </div>
432
+ <div>
433
+ <h4 class="text-lg font-medium text-gray-800">Location</h4>
434
+ <p class="text-gray-600">Bangalore, India</p>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="mt-10">
440
+ <h3 class="text-xl font-semibold text-gray-800 mb-6">Connect With Me</h3>
441
+ <div class="flex space-x-4">
442
+ <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-indigo-600 hover:bg-indigo-100 transition">
443
+ <i class="fab fa-linkedin-in text-xl"></i>
444
+ </a>
445
+ <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-blue-500 hover:bg-blue-100 transition">
446
+ <i class="fab fa-twitter text-xl"></i>
447
+ </a>
448
+ <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-800 hover:bg-gray-200 transition">
449
+ <i class="fab fa-github text-xl"></i>
450
+ </a>
451
+ <a href="#" class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-red-500 hover:bg-red-100 transition">
452
+ <i class="fab fa-youtube text-xl"></i>
453
+ </a>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="md:w-1/2">
459
+ <form class="bg-white p-8 rounded-xl shadow-lg">
460
+ <div class="mb-6">
461
+ <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
462
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
463
+ </div>
464
+ <div class="mb-6">
465
+ <label for="email" class="block text-gray-700 font-medium mb-2">Your Email</label>
466
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
467
+ </div>
468
+ <div class="mb-6">
469
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
470
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
471
+ </div>
472
+ <div class="mb-6">
473
+ <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
474
+ <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea>
475
+ </div>
476
+ <button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
477
+ Send Message
478
+ </button>
479
+ </form>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- Footer -->
486
+ <footer class="bg-gray-800 text-white py-12">
487
+ <div class="max-w-6xl mx-auto px-4">
488
+ <div class="flex flex-col md:flex-row justify-between items-center">
489
+ <div class="mb-6 md:mb-0">
490
+ <div class="flex items-center space-x-4">
491
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-xl">N</div>
492
+ <span class="text-xl font-semibold">Nithishkumar</span>
493
+ </div>
494
+ <p class="mt-2 text-gray-400">Software Engineer | Android Developer | AI Enthusiast</p>
495
+ </div>
496
+ <div class="flex space-x-6">
497
+ <a href="#" class="text-gray-400 hover:text-white transition">
498
+ <i class="fab fa-linkedin-in text-xl"></i>
499
+ </a>
500
+ <a href="#" class="text-gray-400 hover:text-white transition">
501
+ <i class="fab fa-twitter text-xl"></i>
502
+ </a>
503
+ <a href="#" class="text-gray-400 hover:text-white transition">
504
+ <i class="fab fa-github text-xl"></i>
505
+ </a>
506
+ <a href="#" class="text-gray-400 hover:text-white transition">
507
+ <i class="fab fa-youtube text-xl"></i>
508
+ </a>
509
+ </div>
510
+ </div>
511
+ <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
512
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Nithishkumar. All rights reserved.</p>
513
+ <div class="flex space-x-6">
514
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a>
515
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a>
516
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Contact</a>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </footer>
521
+
522
+ <!-- Back to Top Button -->
523
+ <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 gradient-bg text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
524
+ <i class="fas fa-arrow-up"></i>
525
+ </button>
526
+
527
+ <script>
528
+ // Mobile menu toggle
529
+ const menuBtn = document.getElementById('menu-btn');
530
+ const mobileMenu = document.getElementById('mobile-menu');
531
+
532
+ menuBtn.addEventListener('click', () => {
533
+ mobileMenu.classList.toggle('hidden');
534
+ });
535
+
536
+ // Back to top button
537
+ const backToTopBtn = document.getElementById('back-to-top');
538
+
539
+ window.addEventListener('scroll', () => {
540
+ if (window.pageYOffset > 300) {
541
+ backToTopBtn.classList.remove('opacity-0', 'invisible');
542
+ backToTopBtn.classList.add('opacity-100', 'visible');
543
+ } else {
544
+ backToTopBtn.classList.remove('opacity-100', 'visible');
545
+ backToTopBtn.classList.add('opacity-0', 'invisible');
546
+ }
547
+ });
548
+
549
+ backToTopBtn.addEventListener('click', () => {
550
+ window.scrollTo({
551
+ top: 0,
552
+ behavior: 'smooth'
553
+ });
554
+ });
555
+
556
+ // Smooth scrolling for navigation links
557
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
558
+ anchor.addEventListener('click', function(e) {
559
+ e.preventDefault();
560
+
561
+ const targetId = this.getAttribute('href');
562
+ const targetElement = document.querySelector(targetId);
563
+
564
+ if (targetElement) {
565
+ window.scrollTo({
566
+ top: targetElement.offsetTop - 80,
567
+ behavior: 'smooth'
568
+ });
569
+
570
+ // Close mobile menu if open
571
+ if (!mobileMenu.classList.contains('hidden')) {
572
+ mobileMenu.classList.add('hidden');
573
+ }
574
+ }
575
+ });
576
+ });
577
+
578
+ // Animate skill bars on scroll
579
+ const skillBars = document.querySelectorAll('.skill-progress');
580
+
581
+ function animateSkillBars() {
582
+ skillBars.forEach(bar => {
583
+ const width = bar.style.width;
584
+ bar.style.width = '0';
585
+
586
+ setTimeout(() => {
587
+ bar.style.width = width;
588
+ }, 100);
589
+ });
590
+ }
591
+
592
+ const skillsObserver = new IntersectionObserver((entries) => {
593
+ entries.forEach(entry => {
594
+ if (entry.isIntersecting) {
595
+ animateSkillBars();
596
+ skillsObserver.unobserve(entry.target);
597
+ }
598
+ });
599
+ }, { threshold: 0.2 });
600
+
601
+ const skillsSection = document.getElementById('skills');
602
+ if (skillsSection) {
603
+ skillsObserver.observe(skillsSection);
604
+ }
605
+ </script>
606
+ <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=Nithish310/my-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
607
+ </html>
prompts.txt ADDED
File without changes