Aabbhishekk commited on
Commit
367388b
·
verified ·
1 Parent(s): f037cfc

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +589 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio
3
- emoji: 📚
4
- colorFrom: red
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: pink
5
+ colorTo: gray
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,589 @@
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>Abhishek Srivastava - AI Research Scientist</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-bg {
11
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
12
+ }
13
+ .skill-pill {
14
+ transition: all 0.2s ease;
15
+ }
16
+ .skill-pill:hover {
17
+ transform: translateY(-2px);
18
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .timeline-item:before {
21
+ content: '';
22
+ position: absolute;
23
+ left: 0;
24
+ top: 0;
25
+ width: 2px;
26
+ height: 100%;
27
+ background: #e5e7eb;
28
+ }
29
+ .hover-grow {
30
+ transition: transform 0.2s ease;
31
+ }
32
+ .hover-grow:hover {
33
+ transform: scale(1.02);
34
+ }
35
+ @keyframes fadeIn {
36
+ from { opacity: 0; transform: translateY(10px); }
37
+ to { opacity: 1; transform: translateY(0); }
38
+ }
39
+ .animate-fade-in {
40
+ animation: fadeIn 0.5s ease-out forwards;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 font-sans antialiased">
45
+ <!-- Header/Navigation -->
46
+ <header class="gradient-bg text-white shadow-lg">
47
+ <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
48
+ <div class="flex items-center space-x-3">
49
+ <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-md">
50
+ <i class="fas fa-brain text-indigo-600 text-xl"></i>
51
+ </div>
52
+ <h1 class="text-xl font-bold">Abhishek Srivastava</h1>
53
+ </div>
54
+ <nav class="hidden md:flex space-x-6">
55
+ <a href="#about" class="hover:underline hover:text-indigo-200 transition">About</a>
56
+ <a href="#experience" class="hover:underline hover:text-indigo-200 transition">Experience</a>
57
+ <a href="#skills" class="hover:underline hover:text-indigo-200 transition">Skills</a>
58
+ <a href="#education" class="hover:underline hover:text-indigo-200 transition">Education</a>
59
+ <a href="#contact" class="hover:underline hover:text-indigo-200 transition">Contact</a>
60
+ </nav>
61
+ <div class="md:hidden">
62
+ <button id="menu-toggle" class="text-white focus:outline-none">
63
+ <i class="fas fa-bars text-xl"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ <!-- Mobile menu -->
68
+ <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 px-4 py-2">
69
+ <div class="flex flex-col space-y-3">
70
+ <a href="#about" class="text-white hover:text-indigo-200">About</a>
71
+ <a href="#experience" class="text-white hover:text-indigo-200">Experience</a>
72
+ <a href="#skills" class="text-white hover:text-indigo-200">Skills</a>
73
+ <a href="#education" class="text-white hover:text-indigo-200">Education</a>
74
+ <a href="#contact" class="text-white hover:text-indigo-200">Contact</a>
75
+ </div>
76
+ </div>
77
+ </header>
78
+
79
+ <!-- Hero Section -->
80
+ <section id="about" class="py-12 bg-white">
81
+ <div class="max-w-6xl mx-auto px-4">
82
+ <div class="flex flex-col md:flex-row items-center">
83
+ <div class="md:w-1/2 mb-8 md:mb-0 animate-fade-in">
84
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">AI Research Scientist</h1>
85
+ <h2 class="text-2xl md:text-3xl text-indigo-600 mb-4">GenAI & NLP Expert | ML Engineer</h2>
86
+ <p class="text-gray-600 text-lg mb-6">
87
+ AI/ML Engineer with 8+ years of experience in developing & deploying scalable AI/ML solutions,
88
+ specializing in Generative AI, NLP, Large Language Models (LLMs), and Retrieval-Augmented Generation (RAG).
89
+ </p>
90
+ <div class="flex space-x-4">
91
+ <a href="https://www.linkedin.com/in/aabbhishekk" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full flex items-center space-x-2 transition">
92
+ <i class="fab fa-linkedin-in"></i>
93
+ <span>LinkedIn</span>
94
+ </a>
95
+ <a href="#contact" class="border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-2 rounded-full transition">
96
+ Contact Me
97
+ </a>
98
+ </div>
99
+ </div>
100
+ <div class="md:w-1/2 flex justify-center animate-fade-in" style="animation-delay: 0.2s;">
101
+ <div class="relative">
102
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-indigo-100 flex items-center justify-center overflow-hidden shadow-xl">
103
+ <i class="fas fa-user-tie text-indigo-400 text-8xl"></i>
104
+ </div>
105
+ <div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-lg shadow-lg border border-gray-200">
106
+ <div class="flex items-center space-x-2">
107
+ <div class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center">
108
+ <i class="fas fa-map-marker-alt"></i>
109
+ </div>
110
+ <span class="text-sm font-medium">Hyderabad, India</span>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Experience Section -->
120
+ <section id="experience" class="py-12 bg-gray-50">
121
+ <div class="max-w-6xl mx-auto px-4">
122
+ <h2 class="text-3xl font-bold text-gray-800 mb-2 text-center">Professional Experience</h2>
123
+ <p class="text-gray-600 text-center mb-12">8+ years of impactful AI/ML contributions</p>
124
+
125
+ <div class="relative">
126
+ <!-- Timeline -->
127
+ <div class="space-y-8">
128
+ <!-- ServiceNow -->
129
+ <div class="timeline-item relative pl-8 hover-grow">
130
+ <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-indigo-600 border-4 border-white -ml-3 z-10"></div>
131
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
132
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
133
+ <h3 class="text-xl font-bold text-gray-800">Senior Applied Research Scientist/Engineer</h3>
134
+ <span class="text-indigo-600 font-medium">March 2024 - Present</span>
135
+ </div>
136
+ <div class="flex items-center text-gray-600 mb-4">
137
+ <i class="fas fa-building mr-2"></i>
138
+ <span>ServiceNow, Hyderabad, India</span>
139
+ </div>
140
+ <ul class="space-y-3">
141
+ <li class="flex items-start">
142
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
143
+ <i class="fas fa-circle text-xs"></i>
144
+ </div>
145
+ <span>Fine-tuned embedding models using open-source datasets and evaluated performance on internal data.</span>
146
+ </li>
147
+ <li class="flex items-start">
148
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
149
+ <i class="fas fa-circle text-xs"></i>
150
+ </div>
151
+ <span>Developed a session-based Doc2QnA system leveraging ColPali, Vision-Language Models (GPT-4o Mini, LLaMA 3.2 Vision).</span>
152
+ </li>
153
+ <li class="flex items-start">
154
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
155
+ <i class="fas fa-circle text-xs"></i>
156
+ </div>
157
+ <span>Built a Multi-Modal Document Parser capable of handling infographic-rich PDFs, DOCs, PPTs.</span>
158
+ </li>
159
+ </ul>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Zenon.ai -->
164
+ <div class="timeline-item relative pl-8 hover-grow">
165
+ <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-indigo-600 border-4 border-white -ml-3 z-10"></div>
166
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
167
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
168
+ <h3 class="text-xl font-bold text-gray-800">Tech Lead</h3>
169
+ <span class="text-indigo-600 font-medium">Sep 2021 - Mar 2024</span>
170
+ </div>
171
+ <div class="flex items-center text-gray-600 mb-4">
172
+ <i class="fas fa-building mr-2"></i>
173
+ <span>Zenon.ai, Noida, India</span>
174
+ </div>
175
+ <ul class="space-y-3">
176
+ <li class="flex items-start">
177
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
178
+ <i class="fas fa-circle text-xs"></i>
179
+ </div>
180
+ <span>Developed a smart training material generation platform using Generative AI models.</span>
181
+ </li>
182
+ <li class="flex items-start">
183
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
184
+ <i class="fas fa-circle text-xs"></i>
185
+ </div>
186
+ <span>Produced potential savings of over $1.00 MM per year with AI-powered Contract Analytics solutions.</span>
187
+ </li>
188
+ <li class="flex items-start">
189
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
190
+ <i class="fas fa-circle text-xs"></i>
191
+ </div>
192
+ <span>Optimized model inference pipeline, reducing inference time by 90%.</span>
193
+ </li>
194
+ </ul>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Telus International -->
199
+ <div class="timeline-item relative pl-8 hover-grow">
200
+ <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-indigo-600 border-4 border-white -ml-3 z-10"></div>
201
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
202
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
203
+ <h3 class="text-xl font-bold text-gray-800">ML Engineer</h3>
204
+ <span class="text-indigo-600 font-medium">Aug 2019 - Aug 2021</span>
205
+ </div>
206
+ <div class="flex items-center text-gray-600 mb-4">
207
+ <i class="fas fa-building mr-2"></i>
208
+ <span>Telus International (Innovation Labs), Noida, India</span>
209
+ </div>
210
+ <ul class="space-y-3">
211
+ <li class="flex items-start">
212
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
213
+ <i class="fas fa-circle text-xs"></i>
214
+ </div>
215
+ <span>Increased CSAT by 92% with auto-ticket classification and issue-specific responses.</span>
216
+ </li>
217
+ <li class="flex items-start">
218
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
219
+ <i class="fas fa-circle text-xs"></i>
220
+ </div>
221
+ <span>Decreased response time for user issues by 60% with topic modeling on inbound emails.</span>
222
+ </li>
223
+ <li class="flex items-start">
224
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
225
+ <i class="fas fa-circle text-xs"></i>
226
+ </div>
227
+ <span>Implemented a contextual search engine using BERT and Elasticsearch supporting over 5 languages.</span>
228
+ </li>
229
+ </ul>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- TCS -->
234
+ <div class="timeline-item relative pl-8 hover-grow">
235
+ <div class="absolute left-0 top-0 w-6 h-6 rounded-full bg-indigo-600 border-4 border-white -ml-3 z-10"></div>
236
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
237
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
238
+ <h3 class="text-xl font-bold text-gray-800">Data Scientist</h3>
239
+ <span class="text-indigo-600 font-medium">Jan 2017 - Aug 2019</span>
240
+ </div>
241
+ <div class="flex items-center text-gray-600 mb-4">
242
+ <i class="fas fa-building mr-2"></i>
243
+ <span>Tata Consultancy Services, Pune, India</span>
244
+ </div>
245
+ <ul class="space-y-3">
246
+ <li class="flex items-start">
247
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
248
+ <i class="fas fa-circle text-xs"></i>
249
+ </div>
250
+ <span>Enhanced datacenter deployment delay predictions using logistic regression.</span>
251
+ </li>
252
+ <li class="flex items-start">
253
+ <div class="flex-shrink-0 mt-1 mr-2 text-indigo-600">
254
+ <i class="fas fa-circle text-xs"></i>
255
+ </div>
256
+ <span>Developed clustering-based models on RFM analysis to group customers using K-means clustering.</span>
257
+ </li>
258
+ </ul>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </section>
265
+
266
+ <!-- Skills Section -->
267
+ <section id="skills" class="py-12 bg-white">
268
+ <div class="max-w-6xl mx-auto px-4">
269
+ <h2 class="text-3xl font-bold text-gray-800 mb-2 text-center">Technical Skills</h2>
270
+ <p class="text-gray-600 text-center mb-8">Comprehensive expertise across AI/ML domains</p>
271
+
272
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
273
+ <!-- AI/ML Skills -->
274
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover-grow">
275
+ <div class="flex items-center mb-4">
276
+ <div class="w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4">
277
+ <i class="fas fa-robot text-xl"></i>
278
+ </div>
279
+ <h3 class="text-xl font-bold text-gray-800">AI/ML Expertise</h3>
280
+ </div>
281
+ <div class="flex flex-wrap gap-2">
282
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Generative AI</span>
283
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">LLMs</span>
284
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Transformers</span>
285
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">BERT</span>
286
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">GPT</span>
287
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">RAG</span>
288
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Fine-tuning</span>
289
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Embeddings</span>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- NLP Skills -->
294
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover-grow">
295
+ <div class="flex items-center mb-4">
296
+ <div class="w-12 h-12 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-4">
297
+ <i class="fas fa-language text-xl"></i>
298
+ </div>
299
+ <h3 class="text-xl font-bold text-gray-800">NLP & Libraries</h3>
300
+ </div>
301
+ <div class="flex flex-wrap gap-2">
302
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">NLP</span>
303
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Langchain</span>
304
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Llama-Index</span>
305
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">HuggingFace</span>
306
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Sentence Transformers</span>
307
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">NER</span>
308
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Topic Modeling</span>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Tech Stack -->
313
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover-grow">
314
+ <div class="flex items-center mb-4">
315
+ <div class="w-12 h-12 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-4">
316
+ <i class="fas fa-code text-xl"></i>
317
+ </div>
318
+ <h3 class="text-xl font-bold text-gray-800">Tech Stack</h3>
319
+ </div>
320
+ <div class="flex flex-wrap gap-2">
321
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">PyTorch</span>
322
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">TensorFlow</span>
323
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">FastAPI</span>
324
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Flask</span>
325
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Docker</span>
326
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Kubernetes</span>
327
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Airflow</span>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Databases -->
332
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover-grow">
333
+ <div class="flex items-center mb-4">
334
+ <div class="w-12 h-12 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-4">
335
+ <i class="fas fa-database text-xl"></i>
336
+ </div>
337
+ <h3 class="text-xl font-bold text-gray-800">Databases & Search</h3>
338
+ </div>
339
+ <div class="flex flex-wrap gap-2">
340
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">SQL</span>
341
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Elasticsearch</span>
342
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Vector DBs</span>
343
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Knowledge Graphs</span>
344
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">Triton Inference</span>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Cloud -->
349
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover-grow">
350
+ <div class="flex items-center mb-4">
351
+ <div class="w-12 h-12 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-4">
352
+ <i class="fas fa-cloud text-xl"></i>
353
+ </div>
354
+ <h3 class="text-xl font-bold text-gray-800">Cloud & MLOps</h3>
355
+ </div>
356
+ <div class="flex flex-wrap gap-2">
357
+ <span class="skill-pill bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">AWS</span>
358
+ <span class="skill-pill bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">GCP</span>
359
+ <span class="skill-pill bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Azure</span>
360
+ <span class="skill-pill bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">MLflow</span>
361
+ <span class="skill-pill bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">CI/CD</span>
362
+ <span class="skill-pill bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">MLOps</span>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Other -->
367
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200 hover-grow">
368
+ <div class="flex items-center mb-4">
369
+ <div class="w-12 h-12 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mr-4">
370
+ <i class="fas fa-cogs text-xl"></i>
371
+ </div>
372
+ <h3 class="text-xl font-bold text-gray-800">Other Skills</h3>
373
+ </div>
374
+ <div class="flex flex-wrap gap-2">
375
+ <span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">Computer Vision</span>
376
+ <span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">OCR</span>
377
+ <span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">Tesseract</span>
378
+ <span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">Feature Engineering</span>
379
+ <span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">Reranking</span>
380
+ <span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full text-sm">Search</span>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <!-- Education Section -->
388
+ <section id="education" class="py-12 bg-gray-50">
389
+ <div class="max-w-6xl mx-auto px-4">
390
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Education</h2>
391
+
392
+ <div class="grid md:grid-cols-2 gap-8">
393
+ <!-- M.Tech -->
394
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100 hover-grow">
395
+ <div class="flex items-center mb-4">
396
+ <div class="w-16 h-16 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4">
397
+ <i class="fas fa-graduation-cap text-2xl"></i>
398
+ </div>
399
+ <div>
400
+ <h3 class="text-xl font-bold text-gray-800">M.Tech (CFD and Heat Transfer)</h3>
401
+ <p class="text-gray-600">NIT Hamirpur</p>
402
+ </div>
403
+ </div>
404
+ <div class="flex items-center text-gray-600">
405
+ <i class="far fa-calendar-alt mr-2"></i>
406
+ <span>June 2014 - June 2016</span>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- B.Tech -->
411
+ <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100 hover-grow">
412
+ <div class="flex items-center mb-4">
413
+ <div class="w-16 h-16 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4">
414
+ <i class="fas fa-graduation-cap text-2xl"></i>
415
+ </div>
416
+ <div>
417
+ <h3 class="text-xl font-bold text-gray-800">B.Tech (Mechanical Engineering)</h3>
418
+ <p class="text-gray-600">JSSATE Noida</p>
419
+ </div>
420
+ </div>
421
+ <div class="flex items-center text-gray-600">
422
+ <i class="far fa-calendar-alt mr-2"></i>
423
+ <span>June 2009 - June 2013</span>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </section>
429
+
430
+ <!-- Contact Section -->
431
+ <section id="contact" class="py-12 bg-white">
432
+ <div class="max-w-6xl mx-auto px-4">
433
+ <h2 class="text-3xl font-bold text-gray-800 mb-2 text-center">Get In Touch</h2>
434
+ <p class="text-gray-600 text-center mb-8">Let's collaborate on AI/ML projects</p>
435
+
436
+ <div class="grid md:grid-cols-2 gap-8">
437
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
438
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Contact Information</h3>
439
+
440
+ <div class="space-y-4">
441
+ <div class="flex items-start">
442
+ <div class="flex-shrink-0 mt-1 mr-4 text-indigo-600">
443
+ <i class="fas fa-map-marker-alt"></i>
444
+ </div>
445
+ <div>
446
+ <h4 class="font-medium text-gray-800">Location</h4>
447
+ <p class="text-gray-600">Hyderabad, Telangana, India</p>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="flex items-start">
452
+ <div class="flex-shrink-0 mt-1 mr-4 text-indigo-600">
453
+ <i class="fas fa-envelope"></i>
454
+ </div>
455
+ <div>
456
+ <h4 class="font-medium text-gray-800">Email</h4>
457
+ <p class="text-gray-600">Available upon request</p>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="flex items-start">
462
+ <div class="flex-shrink-0 mt-1 mr-4 text-indigo-600">
463
+ <i class="fas fa-phone"></i>
464
+ </div>
465
+ <div>
466
+ <h4 class="font-medium text-gray-800">Phone</h4>
467
+ <p class="text-gray-600">+91-8826638628</p>
468
+ </div>
469
+ </div>
470
+
471
+ <div class="flex items-start">
472
+ <div class="flex-shrink-0 mt-1 mr-4 text-indigo-600">
473
+ <i class="fab fa-linkedin"></i>
474
+ </div>
475
+ <div>
476
+ <h4 class="font-medium text-gray-800">LinkedIn</h4>
477
+ <a href="https://www.linkedin.com/in/aabbhishekk" target="_blank" class="text-indigo-600 hover:underline">linkedin.com/in/aabbhishekk</a>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <div class="mt-6 flex space-x-4">
483
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-indigo-100 hover:text-indigo-600 transition">
484
+ <i class="fab fa-twitter"></i>
485
+ </a>
486
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-indigo-100 hover:text-indigo-600 transition">
487
+ <i class="fab fa-github"></i>
488
+ </a>
489
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-indigo-100 hover:text-indigo-600 transition">
490
+ <i class="fab fa-medium"></i>
491
+ </a>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
496
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Send a Message</h3>
497
+ <form>
498
+ <div class="mb-4">
499
+ <label for="name" class="block text-gray-700 mb-2">Name</label>
500
+ <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">
501
+ </div>
502
+ <div class="mb-4">
503
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
504
+ <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">
505
+ </div>
506
+ <div class="mb-4">
507
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
508
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
509
+ </div>
510
+ <button type="submit" class="w-full gradient-bg text-white py-3 px-6 rounded-lg hover:opacity-90 transition">
511
+ Send Message
512
+ </button>
513
+ </form>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </section>
518
+
519
+ <!-- Footer -->
520
+ <footer class="bg-gray-800 text-white py-8">
521
+ <div class="max-w-6xl mx-auto px-4">
522
+ <div class="flex flex-col md:flex-row justify-between items-center">
523
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
524
+ <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
525
+ <i class="fas fa-brain text-indigo-600"></i>
526
+ </div>
527
+ <span class="font-bold">Abhishek Srivastava</span>
528
+ </div>
529
+ <div class="flex space-x-6 mb-4 md:mb-0">
530
+ <a href="#about" class="hover:text-indigo-300 transition">About</a>
531
+ <a href="#experience" class="hover:text-indigo-300 transition">Experience</a>
532
+ <a href="#skills" class="hover:text-indigo-300 transition">Skills</a>
533
+ <a href="#contact" class="hover:text-indigo-300 transition">Contact</a>
534
+ </div>
535
+ <div class="text-gray-400 text-sm">
536
+ © 2024 Abhishek Srivastava. All rights reserved.
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </footer>
541
+
542
+ <script>
543
+ // Mobile menu toggle
544
+ const menuToggle = document.getElementById('menu-toggle');
545
+ const mobileMenu = document.getElementById('mobile-menu');
546
+
547
+ menuToggle.addEventListener('click', function() {
548
+ mobileMenu.classList.toggle('hidden');
549
+ });
550
+
551
+ // Smooth scrolling for anchor links
552
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
553
+ anchor.addEventListener('click', function (e) {
554
+ e.preventDefault();
555
+
556
+ const targetId = this.getAttribute('href');
557
+ const targetElement = document.querySelector(targetId);
558
+
559
+ if (targetElement) {
560
+ window.scrollTo({
561
+ top: targetElement.offsetTop - 80,
562
+ behavior: 'smooth'
563
+ });
564
+
565
+ // Close mobile menu if open
566
+ if (!mobileMenu.classList.contains('hidden')) {
567
+ mobileMenu.classList.add('hidden');
568
+ }
569
+ }
570
+ });
571
+ });
572
+
573
+ // Add animation class to elements when they come into view
574
+ const observer = new IntersectionObserver((entries) => {
575
+ entries.forEach(entry => {
576
+ if (entry.isIntersecting) {
577
+ entry.target.classList.add('animate-fade-in');
578
+ }
579
+ });
580
+ }, {
581
+ threshold: 0.1
582
+ });
583
+
584
+ document.querySelectorAll('.timeline-item, .hover-grow').forEach(el => {
585
+ observer.observe(el);
586
+ });
587
+ </script>
588
+ <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=Aabbhishekk/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
589
+ </html>