Hugging Face's logo

Spaces:
hitty28
/
portfolio
Running

App Files Community
hitty28 commited on
Commit
b44c6c5
·
verified ·
1 Parent(s): 4aefa62

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1194 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio
3
- emoji: 🔥
4
  colorFrom: blue
5
- colorTo: pink
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: blue
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,1194 @@
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>SAI ROHITH VULAPU | Data Science Engineer</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
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanta.net.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
13
+
14
+ :root {
15
+ --primary: #3b82f6;
16
+ --secondary: #10b981;
17
+ --dark: #1e293b;
18
+ --light: #f8fafc;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Poppins', sans-serif;
23
+ background-color: #f1f5f9;
24
+ color: var(--dark);
25
+ overflow-x: hidden;
26
+ transition: background-color 0.3s, color 0.3s;
27
+ }
28
+
29
+ .dark {
30
+ background-color: #0f172a;
31
+ color: #f8fafc;
32
+ }
33
+
34
+ .dark .card {
35
+ background-color: #1e293b;
36
+ color: #f8fafc;
37
+ }
38
+
39
+ .dark .bg-white {
40
+ background-color: #1e293b !important;
41
+ color: #f8fafc;
42
+ }
43
+
44
+ .dark .bg-slate-50 {
45
+ background-color: #0f172a !important;
46
+ }
47
+
48
+ .dark .text-slate-600, .dark .text-slate-700 {
49
+ color: #e2e8f0 !important;
50
+ }
51
+
52
+ .dark .bg-gradient-to-br {
53
+ background-image: linear-gradient(to bottom right, #1e293b, #1e293b) !important;
54
+ }
55
+
56
+ .dark .border-slate-300 {
57
+ border-color: #334155 !important;
58
+ }
59
+
60
+ .dark .shadow-md {
61
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12) !important;
62
+ }
63
+
64
+ .gradient-text {
65
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
66
+ -webkit-background-clip: text;
67
+ background-clip: text;
68
+ color: transparent;
69
+ }
70
+
71
+ .card {
72
+ transition: all 0.3s ease;
73
+ transform: translateY(0);
74
+ }
75
+
76
+ .card:hover {
77
+ transform: translateY(-10px);
78
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
79
+ }
80
+
81
+ .timeline-item::before {
82
+ content: '';
83
+ position: absolute;
84
+ left: -40px;
85
+ top: 0;
86
+ width: 20px;
87
+ height: 20px;
88
+ border-radius: 50%;
89
+ background: var(--primary);
90
+ border: 4px solid white;
91
+ }
92
+
93
+ .dark .timeline-item::before {
94
+ border-color: #1e293b;
95
+ }
96
+
97
+ .timeline::before {
98
+ content: '';
99
+ position: absolute;
100
+ left: 30px;
101
+ top: 0;
102
+ height: 100%;
103
+ width: 2px;
104
+ background: #e2e8f0;
105
+ }
106
+
107
+ .dark .timeline::before {
108
+ background: #334155;
109
+ }
110
+
111
+ .skill-bar {
112
+ height: 8px;
113
+ border-radius: 4px;
114
+ background: #e2e8f0;
115
+ overflow: hidden;
116
+ }
117
+
118
+ .dark .skill-bar {
119
+ background: #334155;
120
+ }
121
+
122
+ .skill-progress {
123
+ height: 100%;
124
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
125
+ transition: width 1s ease-in-out;
126
+ }
127
+
128
+ .floating {
129
+ animation: floating 3s ease-in-out infinite;
130
+ }
131
+
132
+ @keyframes floating {
133
+ 0% { transform: translateY(0px); }
134
+ 50% { transform: translateY(-15px); }
135
+ 100% { transform: translateY(0px); }
136
+ }
137
+
138
+ .fade-in {
139
+ opacity: 0;
140
+ animation: fadeIn 1s ease-in forwards;
141
+ }
142
+
143
+ @keyframes fadeIn {
144
+ to { opacity: 1; }
145
+ }
146
+
147
+ .delay-1 { animation-delay: 0.2s; }
148
+ .delay-2 { animation-delay: 0.4s; }
149
+ .delay-3 { animation-delay: 0.6s; }
150
+ .delay-4 { animation-delay: 0.8s; }
151
+
152
+ .glow {
153
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
154
+ }
155
+
156
+ .typewriter {
157
+ overflow: hidden;
158
+ border-right: 3px solid var(--primary);
159
+ white-space: nowrap;
160
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
161
+ }
162
+
163
+ @keyframes typing {
164
+ from { width: 0 }
165
+ to { width: 100% }
166
+ }
167
+
168
+ @keyframes blink-caret {
169
+ from, to { border-color: transparent }
170
+ 50% { border-color: var(--primary) }
171
+ }
172
+
173
+ .parallax {
174
+ background-attachment: fixed;
175
+ background-position: center;
176
+ background-repeat: no-repeat;
177
+ background-size: cover;
178
+ }
179
+
180
+ .hover-underline-animation {
181
+ display: inline-block;
182
+ position: relative;
183
+ }
184
+
185
+ .hover-underline-animation::after {
186
+ content: '';
187
+ position: absolute;
188
+ width: 100%;
189
+ transform: scaleX(0);
190
+ height: 2px;
191
+ bottom: 0;
192
+ left: 0;
193
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
194
+ transform-origin: bottom right;
195
+ transition: transform 0.25s ease-out;
196
+ }
197
+
198
+ .hover-underline-animation:hover::after {
199
+ transform: scaleX(1);
200
+ transform-origin: bottom left;
201
+ }
202
+
203
+ /* Dark mode toggle */
204
+ .toggle-checkbox:checked {
205
+ right: 0;
206
+ background-color: #10b981;
207
+ }
208
+
209
+ .toggle-checkbox:checked + .toggle-label {
210
+ background-color: #1e293b;
211
+ }
212
+
213
+ /* 3D Character Container */
214
+ .character-container {
215
+ width: 300px;
216
+ height: 300px;
217
+ position: relative;
218
+ margin: 0 auto;
219
+ }
220
+
221
+ @media (max-width: 768px) {
222
+ .character-container {
223
+ width: 250px;
224
+ height: 250px;
225
+ }
226
+ }
227
+
228
+ /* Floating animations */
229
+ @keyframes float1 {
230
+ 0% { transform: translateY(0px); }
231
+ 50% { transform: translateY(-20px); }
232
+ 100% { transform: translateY(0px); }
233
+ }
234
+
235
+ @keyframes float2 {
236
+ 0% { transform: translateY(0px) rotate(0deg); }
237
+ 50% { transform: translateY(-10px) rotate(5deg); }
238
+ 100% { transform: translateY(0px) rotate(0deg); }
239
+ }
240
+
241
+ .float-animation1 {
242
+ animation: float1 4s ease-in-out infinite;
243
+ }
244
+
245
+ .float-animation2 {
246
+ animation: float2 5s ease-in-out infinite;
247
+ }
248
+
249
+ /* Cursor interaction styles */
250
+ .character-hover-effect {
251
+ transition: transform 0.3s ease;
252
+ }
253
+
254
+ /* Responsive adjustments */
255
+ @media (max-width: 1024px) {
256
+ .hero-content {
257
+ flex-direction: column;
258
+ text-align: center;
259
+ }
260
+
261
+ .hero-buttons {
262
+ justify-content: center;
263
+ }
264
+
265
+ #about .grid-cols-3 {
266
+ grid-template-columns: 1fr;
267
+ }
268
+
269
+ .timeline::before {
270
+ left: 20px;
271
+ }
272
+
273
+ .timeline-item::before {
274
+ left: -30px;
275
+ }
276
+ }
277
+
278
+ @media (max-width: 768px) {
279
+ .project-grid {
280
+ grid-template-columns: 1fr;
281
+ }
282
+
283
+ .skill-grid {
284
+ grid-template-columns: 1fr;
285
+ }
286
+
287
+ .contact-box {
288
+ flex-direction: column;
289
+ }
290
+
291
+ .contact-info {
292
+ width: 100%;
293
+ }
294
+
295
+ .contact-form {
296
+ width: 100%;
297
+ }
298
+
299
+ .footer-content {
300
+ flex-direction: column;
301
+ text-align: center;
302
+ }
303
+
304
+ .footer-social {
305
+ justify-content: center;
306
+ margin-top: 1rem;
307
+ }
308
+ }
309
+
310
+ /* No select for particles */
311
+ .particles, .particles * {
312
+ user-select: none;
313
+ -webkit-user-select: none;
314
+ }
315
+
316
+ /* Preloader */
317
+ .preloader {
318
+ position: fixed;
319
+ top: 0;
320
+ left: 0;
321
+ width: 100%;
322
+ height: 100%;
323
+ background: #0f172a;
324
+ display: flex;
325
+ justify-content: center;
326
+ align-items: center;
327
+ z-index: 9999;
328
+ transition: opacity 0.5s ease;
329
+ }
330
+
331
+ .preloader-content {
332
+ text-align: center;
333
+ }
334
+
335
+ .spinner {
336
+ width: 70px;
337
+ height: 70px;
338
+ border: 5px solid rgba(255, 255, 255, 0.3);
339
+ border-radius: 50%;
340
+ border-top-color: #3b82f6;
341
+ animation: spin 1s ease-in-out infinite;
342
+ margin: 0 auto 1rem;
343
+ }
344
+
345
+ @keyframes spin {
346
+ to { transform: rotate(360deg); }
347
+ }
348
+ </style>
349
+ </head>
350
+ <body class="min-h-screen">
351
+ <!-- Preloader -->
352
+ <div class="preloader" id="preloader">
353
+ <div class="preloader-content">
354
+ <div class="spinner"></div>
355
+ <div class="text-white text-xl font-medium">Loading Portfolio...</div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Interactive Background -->
360
+ <div id="vanta-background" class="fixed inset-0 -z-10 overflow-hidden"></div>
361
+
362
+ <!-- Floating Particles -->
363
+ <div class="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
364
+ <div class="particles">
365
+ <!-- These will be added via JS -->
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Header/Navbar -->
370
+ <header class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50 dark:bg-slate-900/80">
371
+ <div class="container mx-auto px-6 py-4">
372
+ <div class="flex justify-between items-center">
373
+ <a href="#" class="text-2xl font-bold gradient-text hover-underline-animation">SAI ROHITH VULAPU</a>
374
+ <nav class="hidden md:flex space-x-8 items-center">
375
+ <a href="#about" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">About</a>
376
+ <a href="#experience" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Experience</a>
377
+ <a href="#projects" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Projects</a>
378
+ <a href="#skills" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Skills</a>
379
+ <a href="#contact" class="text-slate-700 hover:text-blue-500 transition hover-underline-animation dark:text-slate-300">Contact</a>
380
+ <!-- Dark mode toggle -->
381
+ <div class="relative inline-block w-12 h-6 mx-2 align-middle select-none transition duration-200 ease-in">
382
+ <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
383
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
384
+ </div>
385
+ <label for="toggle" class="text-gray-600 dark:text-gray-300 ml-1">
386
+ <i class="fas fa-moon dark:hidden"></i>
387
+ <i class="fas fa-sun hidden dark:inline"></i>
388
+ </label>
389
+ </nav>
390
+ <button class="md:hidden text-slate-700 dark:text-slate-300" id="mobile-menu-button">
391
+ <i class="fas fa-bars text-2xl"></i>
392
+ </button>
393
+ </div>
394
+ </div>
395
+ </header>
396
+
397
+ <!-- Mobile menu -->
398
+ <div id="mobile-menu" class="fixed inset-0 z-40 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm hidden flex-col items-center justify-center space-y-6">
399
+ <button id="close-menu" class="absolute top-4 right-4 text-3xl text-slate-700 dark:text-slate-300">
400
+ <i class="fas fa-times"></i>
401
+ </button>
402
+ <a href="#about" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">About</a>
403
+ <a href="#experience" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Experience</a>
404
+ <a href="#projects" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Projects</a>
405
+ <a href="#skills" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Skills</a>
406
+ <a href="#contact" class="text-2xl text-slate-700 hover:text-blue-500 dark:text-slate-300">Contact</a>
407
+ <div class="flex items-center mt-6">
408
+ <div class="relative inline-block w-12 h-6 mx-2 align-middle select-none transition duration-200 ease-in">
409
+ <input type="checkbox" id="toggle-mobile" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
410
+ <label for="toggle-mobile" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
411
+ </div>
412
+ <label for="toggle-mobile" class="text-gray-600 dark:text-gray-300 ml-1">
413
+ <i class="fas fa-moon dark:hidden"></i>
414
+ <i class="fas fa-sun hidden dark:inline"></i>
415
+ </label>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Hero Section -->
420
+ <section class="min-h-screen flex items-center pt-20">
421
+ <div class="container mx-auto px-6 py-20">
422
+ <div class="flex flex-col md:flex-row items-center hero-content">
423
+ <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
424
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 dark:text-white">
425
+ <span class="gradient-text">Innovative</span> Data Science Engineer
426
+ </h1>
427
+ <p class="text-xl text-slate-600 mb-8 typewriter dark:text-slate-300">
428
+ Specializing in AI product development and machine learning.
429
+ </p>
430
+ <div class="flex space-x-4 hero-buttons">
431
+ <a href="#contact" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-emerald-500 text-white rounded-full font-medium hover:shadow-lg transition-all transform hover:scale-105">
432
+ Contact Me
433
+ </a>
434
+ <a href="#projects" class="px-6 py-3 border border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition-all transform hover:scale-105 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-slate-800">
435
+ View Projects
436
+ </a>
437
+ </div>
438
+ </div>
439
+ <div class="md:w-1/2 flex justify-center fade-in delay-1">
440
+ <div class="character-container" id="character-container">
441
+ <!-- 3D Model will be rendered here -->
442
+ <canvas id="character-canvas"></canvas>
443
+ <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-white px-4 py-2 rounded-full shadow-md dark:bg-slate-800">
444
+ <!-- <span class="font-bold gradient-text">SAI ROHITH VULAPU</span> -->
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </section>
451
+
452
+ <!-- About Section -->
453
+ <section id="about" class="py-20 bg-white dark:bg-slate-800">
454
+ <div class="container mx-auto px-6">
455
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Professional Summary</h2>
456
+
457
+ <div class="max-w-4xl mx-auto bg-gradient-to-r from-blue-50 to-emerald-50 rounded-2xl p-8 shadow-lg card fade-in delay-1 dark:from-blue-900/20 dark:to-emerald-900/20">
458
+ <div class="flex items-start">
459
+ <div class="mr-6 text-blue-500 text-3xl dark:text-blue-400">
460
+ <i class="fas fa-user-tie"></i>
461
+ </div>
462
+ <div>
463
+ <p class="text-lg text-slate-700 leading-relaxed dark:text-slate-300">
464
+ Innovative Data Science Engineer at APEX CURA HEALTHCARE IT, specializing in AI product development and machine learning.
465
+ Successfully built an AI-powered SaaS product, fine-tuned LLMs for medical applications, and implemented a chatbot RAG pipeline.
466
+ Proficient in Python and decision-making, driving impactful solutions in healthcare technology.
467
+ </p>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
473
+ <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-2 dark:bg-slate-700">
474
+ <div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
475
+ <i class="fas fa-graduation-cap"></i>
476
+ </div>
477
+ <h3 class="text-xl font-bold mb-3 dark:text-white">Education</h3>
478
+ <ul class="space-y-3">
479
+ <li class="flex items-start">
480
+ <span class="text-emerald-500 mr-2">•</span>
481
+ <span class="dark:text-slate-300">JNTUA College of Engineering, B.Tech CSE (8.3 CGPA)</span>
482
+ </li>
483
+ <li class="flex items-start">
484
+ <span class="text-emerald-500 mr-2">•</span>
485
+ <span class="dark:text-slate-300">Narayana IIT Academy, Intermediate (9.8 CGPA)</span>
486
+ </li>
487
+ <li class="flex items-start">
488
+ <span class="text-emerald-500 mr-2">•</span>
489
+ <span class="dark:text-slate-300">Sri Chaitanya Techno School, SSC (10 CGPA)</span>
490
+ </li>
491
+ </ul>
492
+ </div>
493
+
494
+ <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-3 dark:bg-slate-700">
495
+ <div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
496
+ <i class="fas fa-trophy"></i>
497
+ </div>
498
+ <h3 class="text-xl font-bold mb-3 dark:text-white">Achievements</h3>
499
+ <ul class="space-y-3">
500
+ <li class="flex items-start">
501
+ <span class="text-emerald-500 mr-2">•</span>
502
+ <span class="dark:text-slate-300">Built AI-powered SaaS product for hospitals</span>
503
+ </li>
504
+ <li class="flex items-start">
505
+ <span class="text-emerald-500 mr-2">•</span>
506
+ <span class="dark:text-slate-300">Fine-tuned LLMs for medical applications</span>
507
+ </li>
508
+ <li class="flex items-start">
509
+ <span class="text-emerald-500 mr-2">•</span>
510
+ <span class="dark:text-slate-300">Implemented RAG pipeline for hospital chatbot</span>
511
+ </li>
512
+ </ul>
513
+ </div>
514
+
515
+ <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-4 dark:bg-slate-700">
516
+ <div class="text-blue-500 text-3xl mb-4 dark:text-blue-400">
517
+ <i class="fas fa-heartbeat"></i>
518
+ </div>
519
+ <h3 class="text-xl font-bold mb-3 dark:text-white">Passion</h3>
520
+ <p class="text-slate-600 dark:text-slate-300">
521
+ Creating AI solutions that transform healthcare, making it more accessible and efficient through cutting-edge technology.
522
+ </p>
523
+ <div class="mt-4">
524
+ <span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-blue-900/30 dark:text-blue-300">#AI</span>
525
+ <span class="inline-block bg-emerald-100 text-emerald-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-emerald-900/30 dark:text-emerald-300">#Healthcare</span>
526
+ <span class="inline-block bg-purple-100 text-purple-800 text-sm px-3 py-1 rounded-full mr-2 mb-2 dark:bg-purple-900/30 dark:text-purple-300">#Innovation</span>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </section>
532
+
533
+ <!-- Experience Section -->
534
+ <section id="experience" class="py-20 bg-slate-50 dark:bg-slate-900">
535
+ <div class="container mx-auto px-6">
536
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Professional Experience</h2>
537
+
538
+ <div class="max-w-4xl mx-auto relative pl-16 timeline">
539
+ <!-- APEX CURA -->
540
+ <div class="mb-12 relative timeline-item fade-in delay-1">
541
+ <div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
542
+ <div class="flex justify-between items-start mb-2">
543
+ <h3 class="text-xl font-bold dark:text-white">Apex Cura Helathcare It</h3>
544
+ <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">April 2024 - Present</span>
545
+ </div>
546
+ <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300">
547
+ <li>Building a AI powered SaaS product for hospitals</li>
548
+ <li>Fine-tuning LLM's to achieve the medical knowledge</li>
549
+ <li>Implemented a RAG pipeline for a hospital specific chatbot</li>
550
+ <li>Created a AI based Suggestion system to help doctors write the prescription effortlessly</li>
551
+ <li>Built a Copilot for our product</li>
552
+ </ul>
553
+ </div>
554
+ </div>
555
+
556
+ <!-- AURORA E-LABS -->
557
+ <div class="mb-12 relative timeline-item fade-in delay-2">
558
+ <div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
559
+ <div class="flex justify-between items-start mb-2">
560
+ <h3 class="text-xl font-bold dark:text-white">A U R O R A E - L A B S</h3>
561
+ <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Aug 2023 - Mar 2024</span>
562
+ </div>
563
+ <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-300">
564
+ <li>Built POC for converting natural language to SQL/Cypher query</li>
565
+ <li>Another POC includes audio transcription using LLM's</li>
566
+ </ul>
567
+ </div>
568
+ </div>
569
+
570
+ <!-- ANUBRAIN -->
571
+ <div class="mb-12 relative timeline-item fade-in delay-3">
572
+ <div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
573
+ <div class="flex justify-between items-start mb-2">
574
+ <h3 class="text-xl font-bold dark:text-white">ANUBRAIN TECHNOLOGY</h3>
575
+ <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Mar 2023 - July 2023</span>
576
+ </div>
577
+ <p class="text-slate-600 dark:text-slate-300">
578
+ Executed numerous data science projects as a freelancer, delivering solutions tailored to client needs and requirements.
579
+ </p>
580
+ </div>
581
+ </div>
582
+
583
+ <!-- SHUNYAOS -->
584
+ <div class="relative timeline-item fade-in delay-4">
585
+ <div class="bg-white p-6 rounded-xl shadow-md card dark:bg-slate-800">
586
+ <div class="flex justify-between items-start mb-2">
587
+ <h3 class="text-xl font-bold dark:text-white">S H U N Y A O S</h3>
588
+ <span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">Jan 2023 - March 2023</span>
589
+ </div>
590
+ <p class="text-slate-600 dark:text-slate-300">
591
+ Spearheaded pedestrian detection projects, undertaking data labeling tasks independently to ensure high-quality training data.
592
+ </p>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </section>
598
+
599
+ <!-- Projects Section -->
600
+ <section id="projects" class="py-20 bg-white dark:bg-slate-800">
601
+ <div class="container mx-auto px-6">
602
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Featured Projects</h2>
603
+
604
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 project-grid">
605
+ <!-- Brain Tumor Segmentation -->
606
+ <div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-1 dark:from-blue-900/20 dark:to-emerald-900/20">
607
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-emerald-400 flex items-center justify-center">
608
+ <i class="fas fa-brain text-white text-6xl"></i>
609
+ </div>
610
+ <div class="p-6">
611
+ <div class="flex justify-between items-start mb-3">
612
+ <h3 class="text-xl font-bold dark:text-white">Brain Tumor Segmentation</h3>
613
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2024</span>
614
+ </div>
615
+ <p class="text-slate-600 mb-4 dark:text-slate-300">
616
+ Developed a Brain Tumor Segmentation project utilizing UNet architecture for accurate segmentation results.
617
+ </p>
618
+ <div class="flex flex-wrap gap-2">
619
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">Python</span>
620
+ <span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">TensorFlow</span>
621
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">UNet</span>
622
+ </div>
623
+ </div>
624
+ </div>
625
+
626
+ <!-- NLP Search -->
627
+ <div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-2 dark:from-blue-900/20 dark:to-emerald-900/20">
628
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-blue-400 flex items-center justify-center">
629
+ <i class="fas fa-search text-white text-6xl"></i>
630
+ </div>
631
+ <div class="p-6">
632
+ <div class="flex justify-between items-start mb-3">
633
+ <h3 class="text-xl font-bold dark:text-white">NLP Search</h3>
634
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2023</span>
635
+ </div>
636
+ <p class="text-slate-600 mb-4 dark:text-slate-300">
637
+ Revolutionizing database interaction by developing intuitive solutions for crafting SQL queries using natural language.
638
+ </p>
639
+ <div class="flex flex-wrap gap-2">
640
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">NLP</span>
641
+ <span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">LLMs</span>
642
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">SQL</span>
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+ <!-- Pedestrian Detection -->
648
+ <div class="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-xl overflow-hidden shadow-lg card fade-in delay-3 dark:from-blue-900/20 dark:to-emerald-900/20">
649
+ <div class="h-48 bg-gradient-to-r from-orange-400 to-pink-400 flex items-center justify-center">
650
+ <i class="fas fa-walking text-white text-6xl"></i>
651
+ </div>
652
+ <div class="p-6">
653
+ <div class="flex justify-between items-start mb-3">
654
+ <h3 class="text-xl font-bold dark:text-white">Pedestrian Detection</h3>
655
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">2023</span>
656
+ </div>
657
+ <p class="text-slate-600 mb-4 dark:text-slate-300">
658
+ Implementing TensorFlow Object Detection models to accurately identify pedestrians in images or videos.
659
+ </p>
660
+ <div class="flex flex-wrap gap-2">
661
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded dark:bg-blue-900/30 dark:text-blue-300">TFOD</span>
662
+ <span class="text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded dark:bg-emerald-900/30 dark:text-emerald-300">Computer Vision</span>
663
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded dark:bg-purple-900/30 dark:text-purple-300">Object Detection</span>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </section>
670
+
671
+ <!-- Skills Section -->
672
+ <section id="skills" class="py-20 bg-slate-50 dark:bg-slate-900">
673
+ <div class="container mx-auto px-6">
674
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 gradient-text fade-in">Technical Skills</h2>
675
+
676
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto skill-grid">
677
+ <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-1 dark:bg-slate-800">
678
+ <h3 class="text-xl font-bold mb-6 text-center dark:text-white">Core Competencies</h3>
679
+ <div class="space-y-5">
680
+ <div>
681
+ <div class="flex justify-between mb-1">
682
+ <span class="font-medium dark:text-slate-300">Python</span>
683
+ <span class="text-blue-500 dark:text-blue-400">95%</span>
684
+ </div>
685
+ <div class="skill-bar">
686
+ <div class="skill-progress" style="width: 95%"></div>
687
+ </div>
688
+ </div>
689
+ <div>
690
+ <div class="flex justify-between mb-1">
691
+ <span class="font-medium dark:text-slate-300">Machine Learning</span>
692
+ <span class="text-blue-500 dark:text-blue-400">90%</span>
693
+ </div>
694
+ <div class="skill-bar">
695
+ <div class="skill-progress" style="width: 90%"></div>
696
+ </div>
697
+ </div>
698
+ <div>
699
+ <div class="flex justify-between mb-1">
700
+ <span class="font-medium dark:text-slate-300">AI Product Development</span>
701
+ <span class="text-blue-500 dark:text-blue-400">88%</span>
702
+ </div>
703
+ <div class="skill-bar">
704
+ <div class="skill-progress" style="width: 88%"></div>
705
+ </div>
706
+ </div>
707
+ <div>
708
+ <div class="flex justify-between mb-1">
709
+ <span class="font-medium dark:text-slate-300">Neural Networks</span>
710
+ <span class="text-blue-500 dark:text-blue-400">85%</span>
711
+ </div>
712
+ <div class="skill-bar">
713
+ <div class="skill-progress" style="width: 85%"></div>
714
+ </div>
715
+ </div>
716
+ </div>
717
+ </div>
718
+
719
+ <div class="bg-white rounded-xl shadow-md p-6 card fade-in delay-2 dark:bg-slate-800">
720
+ <h3 class="text-xl font-bold mb-6 text-center dark:text-white">Technologies & Tools</h3>
721
+ <div class="grid grid-cols-2 gap-4">
722
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
723
+ <i class="fab fa-python text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
724
+ <span class="dark:text-slate-300">Python</span>
725
+ </div>
726
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
727
+ <i class="fas fa-brain text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
728
+ <span class="dark:text-slate-300">TensorFlow</span>
729
+ </div>
730
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
731
+ <i class="fas fa-database text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
732
+ <span class="dark:text-slate-300">MySQL</span>
733
+ </div>
734
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
735
+ <i class="fab fa-aws text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
736
+ <span class="dark:text-slate-300">AWS</span>
737
+ </div>
738
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
739
+ <i class="fas fa-project-diagram text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
740
+ <span class="dark:text-slate-300">Cypher QL</span>
741
+ </div>
742
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
743
+ <i class="fas fa-robot text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
744
+ <span class="dark:text-slate-300">LLMs</span>
745
+ </div>
746
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
747
+ <i class="fas fa-eye text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
748
+ <span class="dark:text-slate-300">Computer Vision</span>
749
+ </div>
750
+ <div class="flex items-center p-3 bg-blue-50 rounded-lg dark:bg-blue-900/20">
751
+ <i class="fas fa-comments text-blue-500 text-2xl mr-3 dark:text-blue-400"></i>
752
+ <span class="dark:text-slate-300">NLP</span>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </section>
759
+
760
+ <!-- Contact Section -->
761
+ <section id="contact" class="py-20 bg-gradient-to-r from-blue-500 to-emerald-500 text-white">
762
+ <div class="container mx-auto px-6">
763
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 fade-in">Get In Touch</h2>
764
+
765
+ <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden card fade-in delay-1 contact-box">
766
+ <div class="md:flex">
767
+ <div class="md:w-1/2 bg-gradient-to-br from-blue-400 to-emerald-400 p-10 flex flex-col justify-center contact-info">
768
+ <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
769
+ <div class="space-y-4">
770
+ <div class="flex items-start">
771
+ <i class="fas fa-envelope mt-1 mr-4"></i>
772
+ <div>
773
+ <h4 class="font-medium">Email</h4>
774
+ <p class="text-blue-100">[email protected]</p>
775
+ </div>
776
+ </div>
777
+ <div class="flex items-start">
778
+ <i class="fas fa-phone-alt mt=1 mr-4"></i>
779
+ <div>
780
+ <h4 class="font-medium">Phone</h4>
781
+ <p class="text-blue-100">+91 6302052294</p>
782
+ </div>
783
+ </div>
784
+ <div class="flex items-start">
785
+ <i class="fab fa-github mt-1 mr-4"></i>
786
+ <div>
787
+ <h4 class="font-medium">GitHub</h4>
788
+ <p class="text-blue-100">github.com/yourusername</p>
789
+ </div>
790
+ </div>
791
+ <div class="flex items-start">
792
+ <i class="fab fa-linkedin-in mt-1 mr-4"></i>
793
+ <div>
794
+ <h4 class="font-medium">LinkedIn</h4>
795
+ <p class="text-blue-100">linkedin.com/in/yourprofile</p>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ <div class="mt-8 flex space-x-4">
800
+ <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
801
+ <i class="fab fa-github"></i>
802
+ </a>
803
+ <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
804
+ <i class="fab fa-linkedin-in"></i>
805
+ </a>
806
+ <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
807
+ <i class="fab fa-twitter"></i>
808
+ </a>
809
+ <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition">
810
+ <i class="fab fa-instagram"></i>
811
+ </a>
812
+ </div>
813
+ </div>
814
+ <div class="md:w-1/2 p-10 contact-form">
815
+ <h3 class="text-2xl font-bold mb-6 text-slate-800 dark:text-slate-200">Send Me a Message</h3>
816
+ <form class="space-y-4">
817
+ <div>
818
+ <label for="name" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Name</label>
819
+ <input type="text" id="name" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
820
+ </div>
821
+ <div>
822
+ <label for="email" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Email</label>
823
+ <input type="email" id="email" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">
824
+ </div>
825
+ <div>
826
+ <label for="message" class="block text-sm font-medium text-slate-600 mb-1 dark:text-slate-300">Message</label>
827
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"></textarea>
828
+ </div>
829
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-emerald-500 text-white py-3 rounded-lg font-medium hover:shadow-lg transition-all transform hover:scale-105">
830
+ Send Message
831
+ </button>
832
+ </form>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ </div>
837
+ </section>
838
+
839
+ <!-- Footer -->
840
+ <footer class="bg-slate-900 text-white py-12">
841
+ <div class="container mx-auto px-6">
842
+ <div class="flex flex-col md:flex-row justify-between items-center footer-content">
843
+ <div class="mb-6 md:mb-0">
844
+ <a href="#" class="text-2xl font-bold gradient-text">SAI ROHITH VULAPU</a>
845
+ <p class="mt-2 text-slate-400">Innovative Data Science Engineer</p>
846
+ </div>
847
+ <div class="flex space-x-6 footer-social">
848
+ <a href="#" class="text-slate-400 hover:text-white transition">
849
+ <i class="fab fa-github text-xl"></i>
850
+ </a>
851
+ <a href="#" class="text-slate-400 hover:text-white transition">
852
+ <i class="fab fa-linkedin-in text-xl"></i>
853
+ </a>
854
+ <a href="#" class="text-slate-400 hover:text-white transition">
855
+ <i class="fab fa-twitter text-xl"></i>
856
+ </a>
857
+ <a href="#" class="text-slate-400 hover:text-white transition">
858
+ <i class="fab fa-instagram text-xl"></i>
859
+ </a>
860
+ </div>
861
+ </div>
862
+ <div class="border-t border-slate-800 mt-8 pt-8 text-center text-slate-400">
863
+ <p>&copy; 2024 Sai Rohith Vulapu. All rights reserved.</p>
864
+ </div>
865
+ </div>
866
+ </footer>
867
+
868
+ <!-- Floating AI Elements -->
869
+ <div class="fixed top-20 right-20 z-0 opacity-30 float-animation1">
870
+ <div class="w-20 h-20 bg-blue-400 rounded-full blur-xl dark:bg-blue-800/30"></div>
871
+ </div>
872
+ <div class="fixed bottom-32 left-40 z-0 opacity-30 float-animation2">
873
+ <div class="w-24 h-24 bg-emerald-400 rounded-full blur-xl dark:bg-emerald-800/30"></div>
874
+ </div>
875
+ <div class="fixed top-1/3 left-1/4 z-0 opacity-20 float-animation1">
876
+ <div class="w-32 h-32 bg-purple-400 rounded-full blur-xl dark:bg-purple-800/30"></div>
877
+ </div>
878
+
879
+ <script>
880
+ // Preloader
881
+ window.addEventListener('load', function() {
882
+ setTimeout(function() {
883
+ const preloader = document.getElementById('preloader');
884
+ preloader.style.opacity = '0';
885
+ setTimeout(() => preloader.style.display = 'none', 500);
886
+ }, 1000);
887
+ });
888
+
889
+ // Interactive Background
890
+ VANTA.NET({
891
+ el: "#vanta-background",
892
+ color: 0x3b82f6,
893
+ backgroundColor: 0xf1f5f9,
894
+ points: 10,
895
+ maxDistance: 22,
896
+ spacing: 16,
897
+ showDots: false
898
+ });
899
+
900
+ // Dark mode toggle functionality
901
+ const toggle = document.getElementById('toggle');
902
+ const toggleMobile = document.getElementById('toggle-mobile');
903
+ const body = document.body;
904
+
905
+ // Check for saved user preference, if any
906
+ if (localStorage.getItem('dark-mode') === 'enabled') {
907
+ body.classList.add('dark');
908
+ toggle.checked = true;
909
+ if (toggleMobile) toggleMobile.checked = true;
910
+ // Change Vanta.js background for dark mode
911
+ VANTA.NET({
912
+ el: "#vanta-background",
913
+ color: 0x3b82f6,
914
+ backgroundColor: 0x0f172a,
915
+ points: 10,
916
+ maxDistance: 22,
917
+ spacing: 16,
918
+ showDots: false
919
+ });
920
+ }
921
+
922
+ // Desktop toggle
923
+ toggle.addEventListener('change', function() {
924
+ if (this.checked) {
925
+ body.classList.add('dark');
926
+ localStorage.setItem('dark-mode', 'enabled');
927
+ if (toggleMobile) toggleMobile.checked = true;
928
+ // Change Vanta.js background for dark mode
929
+ VANTA.NET({
930
+ el: "#vanta-background",
931
+ color: 0x3b82f6,
932
+ backgroundColor: 0x0f172a,
933
+ points: 10,
934
+ maxDistance: 22,
935
+ spacing: 16,
936
+ showDots: false
937
+ });
938
+ } else {
939
+ body.classList.remove('dark');
940
+ localStorage.setItem('dark-mode', 'disabled');
941
+ if (toggleMobile) toggleMobile.checked = false;
942
+ // Change Vanta.js background for light mode
943
+ VANTA.NET({
944
+ el: "#vanta-background",
945
+ color: 0x3b82f6,
946
+ backgroundColor: 0xf1f5f9,
947
+ points: 10,
948
+ maxDistance: 22,
949
+ spacing: 16,
950
+ showDots: false
951
+ });
952
+ }
953
+ });
954
+
955
+ // Mobile toggle
956
+ if (toggleMobile) {
957
+ toggleMobile.addEventListener('change', function() {
958
+ if (this.checked) {
959
+ body.classList.add('dark');
960
+ localStorage.setItem('dark-mode', 'enabled');
961
+ toggle.checked = true;
962
+ // Change Vanta.js background for dark mode
963
+ VANTA.NET({
964
+ el: "#vanta-background",
965
+ color: 0x3b82f6,
966
+ backgroundColor: 0x0f172a,
967
+ points: 10,
968
+ maxDistance: 22,
969
+ spacing: 16,
970
+ showDots: false
971
+ });
972
+ } else {
973
+ body.classList.remove('dark');
974
+ localStorage.setItem('dark-mode', 'disabled');
975
+ toggle.checked = false;
976
+ // Change Vanta.js background for light mode
977
+ VANTA.NET({
978
+ el: "#vanta-background",
979
+ color: 0x3b82f6,
980
+ backgroundColor: 0xf1f5f9,
981
+ points: 10,
982
+ maxDistance: 22,
983
+ spacing: 16,
984
+ showDots: false
985
+ });
986
+ }
987
+ });
988
+ }
989
+
990
+ // Mobile menu functionality
991
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
992
+ const mobileMenu = document.getElementById('mobile-menu');
993
+ const closeMenu = document.getElementById('close-menu');
994
+
995
+ mobileMenuButton.addEventListener('click', function() {
996
+ mobileMenu.classList.remove('hidden');
997
+ mobileMenu.classList.add('flex');
998
+ });
999
+
1000
+ closeMenu.addEventListener('click', function() {
1001
+ mobileMenu.classList.add('hidden');
1002
+ mobileMenu.classList.remove('flex');
1003
+ });
1004
+
1005
+ // Close menu when clicking on links
1006
+ const mobileLinks = mobileMenu.querySelectorAll('a');
1007
+ mobileLinks.forEach(link => {
1008
+ link.addEventListener('click', function() {
1009
+ mobileMenu.classList.add('hidden');
1010
+ mobileMenu.classList.remove('flex');
1011
+ });
1012
+ });
1013
+
1014
+ // Create floating particles
1015
+ document.addEventListener('DOMContentLoaded', function() {
1016
+ const particlesContainer = document.querySelector('.particles');
1017
+ const particleCount = window.innerWidth < 768 ? 15 : 30;
1018
+
1019
+ for (let i = 0; i < particleCount; i++) {
1020
+ const particle = document.createElement('div');
1021
+ particle.classList.add('absolute', 'rounded-full', 'bg-blue-300', 'dark:bg-blue-600/30');
1022
+
1023
+ // Random size
1024
+ const size = Math.random() * 6 + 2;
1025
+ particle.style.width = `${size}px`;
1026
+ particle.style.height = `${size}px`;
1027
+
1028
+ // Random position
1029
+ particle.style.left = `${Math.random() * 100}%`;
1030
+ particle.style.top = `${Math.random() * 100}%`;
1031
+
1032
+ // Random animation
1033
+ const duration = Math.random() * 20 + 10;
1034
+ particle.style.animation = `float ${duration}s ease-in-out infinite`;
1035
+ particle.style.animationDelay = `${Math.random() * 5}s`;
1036
+
1037
+ particlesContainer.appendChild(particle);
1038
+ }
1039
+ });
1040
+
1041
+ // Animate skill bars on scroll
1042
+ window.addEventListener('scroll', function() {
1043
+ const skillBars = document.querySelectorAll('.skill-progress');
1044
+ const skillsSection = document.getElementById('skills');
1045
+ const sectionPosition = skillsSection.getBoundingClientRect().top;
1046
+ const screenPosition = window.innerHeight / 1.3;
1047
+
1048
+ if (sectionPosition < screenPosition) {
1049
+ skillBars.forEach(bar => {
1050
+ const width = bar.style.width;
1051
+ bar.style.width = '0';
1052
+ setTimeout(() => {
1053
+ bar.style.width = width;
1054
+ }, 100);
1055
+ });
1056
+ }
1057
+ });
1058
+
1059
+ // Smooth scrolling for anchor links
1060
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1061
+ anchor.addEventListener('click', function (e) {
1062
+ e.preventDefault();
1063
+
1064
+ const targetId = this.getAttribute('href');
1065
+ const targetElement = document.querySelector(targetId);
1066
+
1067
+ if (targetElement) {
1068
+ window.scrollTo({
1069
+ top: targetElement.offsetTop - 80,
1070
+ behavior: 'smooth'
1071
+ });
1072
+ }
1073
+ });
1074
+ });
1075
+
1076
+ // 3D Character Animation
1077
+ document.addEventListener('DOMContentLoaded', function() {
1078
+ const container = document.getElementById('character-container');
1079
+ const canvas = document.getElementById('character-canvas');
1080
+
1081
+ // Create a simple 3D character (simplified for this example)
1082
+ // In a real implementation, you would use a 3D model loader like GLTFLoader
1083
+ // and a pre-made 3D model of a data scientist
1084
+
1085
+ if (canvas && typeof THREE !== 'undefined') {
1086
+ // Set canvas size
1087
+ canvas.width = container.clientWidth;
1088
+ canvas.height = container.clientHeight;
1089
+
1090
+ // Scene setup
1091
+ const scene = new THREE.Scene();
1092
+ const camera = new THREE.PerspectiveCamera(
1093
+ 75,
1094
+ canvas.width / canvas.height,
1095
+ 0.1,
1096
+ 1000
1097
+ );
1098
+ camera.position.z = 5;
1099
+
1100
+ // Renderer
1101
+ const renderer = new THREE.WebGLRenderer({
1102
+ canvas: canvas,
1103
+ alpha: true,
1104
+ antialias: true
1105
+ });
1106
+ renderer.setClearColor(0x000000, 0);
1107
+ renderer.setSize(canvas.width, canvas.height);
1108
+
1109
+ // Simple character geometry (could be replaced with a proper 3D model)
1110
+ const geometry = new THREE.BoxGeometry(1, 1, 1);
1111
+ const material = new THREE.MeshBasicMaterial({
1112
+ color: 0x3b82f6,
1113
+ wireframe: true
1114
+ });
1115
+ const cube = new THREE.Mesh(geometry, material);
1116
+ scene.add(cube);
1117
+
1118
+ // Add some floating AI elements around the character
1119
+ const aiElements = [];
1120
+ const aiGeometry = new THREE.SphereGeometry(0.1, 16, 16);
1121
+ const aiMaterial = new THREE.MeshBasicMaterial({
1122
+ color: 0x10b981
1123
+ });
1124
+
1125
+ for (let i = 0; i < 5; i++) {
1126
+ const aiElement = new THREE.Mesh(aiGeometry, aiMaterial);
1127
+ aiElement.position.x = (Math.random() - 0.5) * 2;
1128
+ aiElement.position.y = (Math.random() - 0.5) * 2;
1129
+ aiElement.position.z = (Math.random() - 0.5) * 2;
1130
+ scene.add(aiElement);
1131
+ aiElements.push(aiElement);
1132
+ }
1133
+
1134
+ // Animation loop
1135
+ function animate() {
1136
+ requestAnimationFrame(animate);
1137
+
1138
+ // Rotate character
1139
+ cube.rotation.x += 0.01;
1140
+ cube.rotation.y += 0.01;
1141
+
1142
+ // Animate AI elements
1143
+ aiElements.forEach((element, index) => {
1144
+ element.position.x = Math.sin(Date.now() * 0.001 + index) * 1.5;
1145
+ element.position.y = Math.cos(Date.now() * 0.001 + index * 2) * 1.5;
1146
+ element.position.z = Math.sin(Date.now() * 0.001 + index * 0.5) * 1.5;
1147
+ });
1148
+
1149
+ renderer.render(scene, camera);
1150
+ }
1151
+
1152
+ animate();
1153
+
1154
+ // Cursor interaction
1155
+ container.addEventListener('mousemove', (event) => {
1156
+ const rect = container.getBoundingClientRect();
1157
+ const x = ((event.clientX - rect.left) / container.clientWidth) * 2 - 1;
1158
+ const y = -((event.clientY - rect.top) / container.clientHeight) * 2 + 1;
1159
+
1160
+ // Rotate character based on cursor position
1161
+ cube.rotation.y = x * 0.5;
1162
+ cube.rotation.x = y * 0.5;
1163
+
1164
+ // Make AI elements follow cursor
1165
+ aiElements[0].position.x = x * 2;
1166
+ aiElements[0].position.y = y * 2;
1167
+ });
1168
+
1169
+ // Hover effect
1170
+ container.addEventListener('mouseenter', () => {
1171
+ cube.material.color.setHex(0x10b981);
1172
+ cube.scale.set(1.1, 1.1, 1.1);
1173
+ });
1174
+
1175
+ container.addEventListener('mouseleave', () => {
1176
+ cube.material.color.setHex(0x3b82f6);
1177
+ cube.scale.set(1, 1, 1);
1178
+ });
1179
+ }
1180
+ });
1181
+
1182
+ // Responsive adjustments on resize
1183
+ window.addEventListener('resize', function() {
1184
+ // Update character canvas size
1185
+ const container = document.getElementById('character-container');
1186
+ const canvas = document.getElementById('character-canvas');
1187
+ if (canvas && container) {
1188
+ canvas.width = container.clientWidth;
1189
+ canvas.height = container.clientHeight;
1190
+ }
1191
+ });
1192
+ </script>
1193
+ <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=hitty28/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
1194
+ </html>