Hugging Face's logo

Spaces:
x3v
/
snake-game
Running

App Files Community
x3v commited on
Commit
3bb6bde
·
verified ·
1 Parent(s): 1d9042b

Manual changes saved

Browse files
Files changed (4) hide show
  1. components/navbar.js +530 -0
  2. index.html +508 -331
  3. script.js +48 -0
  4. style.css +72 -18
components/navbar.js ADDED
@@ -0,0 +1,530 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Rajeev Mishra | AI/ML Engineer</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#8b5cf6',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-gray-50 text-gray-800 font-sans antialiased">
25
+ <nav-bar></nav-bar>
26
+
27
+ <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
28
+ <!-- Hero Section -->
29
+ <section class="mb-20">
30
+ <div class="flex flex-col md:flex-row items-center gap-8">
31
+ <div class="md:w-1/2">
32
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Rajeev Mishra</h1>
33
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-primary">Machine Learning Engineer</h2>
34
+ <p class="text-lg mb-6 text-gray-600 leading-relaxed">
35
+ Transforming complex problems into elegant AI solutions with over 3 years of experience in machine learning, NLP, and generative AI.
36
+ </p>
37
+ <div class="flex flex-wrap gap-4">
38
+ <a href="#contact" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">
39
+ Contact Me
40
+ </a>
41
+ <a href="#projects" class="border-2 border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-medium transition-all">
42
+ My Projects
43
+ </a>
44
+ </div>
45
+ </div>
46
+ <div class="md:w-1/2 mt-8 md:mt-0">
47
+ <div class="bg-gradient-to-br from-primary to-secondary p-1 rounded-2xl shadow-xl">
48
+ <img src="http://static.photos/technology/640x360/42" alt="AI Technology" class="w-full h-auto rounded-2xl">
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </section>
53
+
54
+ <!-- About Section -->
55
+ <section id="about" class="mb-20">
56
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">About Me</h2>
57
+ <div class="grid md:grid-cols-3 gap-8">
58
+ <div class="md:col-span-2">
59
+ <p class="text-lg mb-6 text-gray-600 leading-relaxed">
60
+ Seasoned Machine Learning Engineer with robust experience at eProcurement Technologies Ltd, where I orchestrated transformative initiatives with AI search and MLOps practices. Achieved a remarkable 78% enhancement in multi-label classification efficacy and 20% uplift in data quality accuracy.
61
+ </p>
62
+ <p class="text-lg mb-6 text-gray-600 leading-relaxed">
63
+ Spearheaded the development of a sophisticated Gen. AI chatbot solution within just 8 months, boosting customer retention rates and refining our customer service dialogue system to exemplify excellence in service delivery.
64
+ </p>
65
+ <div class="flex flex-wrap gap-4 mt-8">
66
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all flex-1 min-w-[200px]">
67
+ <div class="text-primary mb-3">
68
+ <i data-feather="cpu" class="w-8 h-8"></i>
69
+ </div>
70
+ <h3 class="font-bold text-lg mb-2">AI/ML Expertise</h3>
71
+ <p class="text-gray-600">3+ years transforming business with machine learning</p>
72
+ </div>
73
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all flex-1 min-w-[200px]">
74
+ <div class="text-primary mb-3">
75
+ <i data-feather="message-square" class="w-8 h-8"></i>
76
+ </div>
77
+ <h3 class="font-bold text-lg mb-2">NLP Specialist</h3>
78
+ <p class="text-gray-600">Advanced techniques in text processing and understanding</p>
79
+ </div>
80
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all flex-1 min-w-[200px]">
81
+ <div class="text-primary mb-3">
82
+ <i data-feather="box" class="w-8 h-8"></i>
83
+ </div>
84
+ <h3 class="font-bold text-lg mb-2">MLOps</h3>
85
+ <p class="text-gray-600">End-to-end model deployment and monitoring</p>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ <div class="bg-white p-8 rounded-xl shadow-md h-fit sticky top-8">
90
+ <h3 class="text-xl font-bold mb-6 text-gray-900">Personal Info</h3>
91
+ <ul class="space-y-4">
92
+ <li class="flex items-start">
93
+ <i data-feather="map-pin" class="mr-3 text-primary"></i>
94
+ <span>Ahmedabad, Gujarat</span>
95
+ </li>
96
+ <li class="flex items-start">
97
+ <i data-feather="phone" class="mr-3 text-primary"></i>
98
+ <span>+91 6209303738</span>
99
+ </li>
100
+ <li class="flex items-start">
101
+ <i data-feather="mail" class="mr-3 text-primary"></i>
102
+ <span>imeandrj@gmail.com</span>
103
+ </li>
104
+ <li class="flex items-start">
105
+ <i data-feather="linkedin" class="mr-3 text-primary"></i>
106
+ <a href="https://linkedin.com/in/bitsnbucks" target="_blank" class="hover:text-primary transition-colors">linkedin.com/in/bitsnbucks</a>
107
+ </li>
108
+ <li class="flex items-start">
109
+ <i data-feather="github" class="mr-3 text-primary"></i>
110
+ <a href="https://github.com/raaj1v" target="_blank" class="hover:text-primary transition-colors">github.com/raaj1v</a>
111
+ </li>
112
+ <li class="flex items-start">
113
+ <i data-feather="user" class="mr-3 text-primary"></i>
114
+ <a href="https://hf.co/c0d3r69" target="_blank" class="hover:text-primary transition-colors">hf.co/c0d3r69</a>
115
+ </li>
116
+ </ul>
117
+ </div>
118
+ </div>
119
+ </section>
120
+
121
+ <!-- Skills Section -->
122
+ <section id="skills" class="mb-20">
123
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">Technical Skills</h2>
124
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
125
+ <!-- Programming Languages -->
126
+ <div class="bg-white p-6 rounded-xl shadow-md">
127
+ <h3 class="font-bold text-xl mb-4 flex items-center">
128
+ <i data-feather="code" class="mr-2 text-primary"></i>
129
+ Programming Languages
130
+ </h3>
131
+ <ul class="space-y-2">
132
+ <li class="flex items-center">
133
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
134
+ Python
135
+ </li>
136
+ <li class="flex items-center">
137
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
138
+ PyTorch
139
+ </li>
140
+ <li class="flex items-center">
141
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
142
+ Scikit-Learn
143
+ </li>
144
+ <li class="flex items-center">
145
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
146
+ Flask/FastAPI
147
+ </li>
148
+ </ul>
149
+ </div>
150
+
151
+ <!-- Databases -->
152
+ <div class="bg-white p-6 rounded-xl shadow-md">
153
+ <h3 class="font-bold text-xl mb-4 flex items-center">
154
+ <i data-feather="database" class="mr-2 text-primary"></i>
155
+ Database Management
156
+ </h3>
157
+ <ul class="space-y-2">
158
+ <li class="flex items-center">
159
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
160
+ SQL
161
+ </li>
162
+ <li class="flex items-center">
163
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
164
+ ChromaDB/FAISS
165
+ </li>
166
+ <li class="flex items-center">
167
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
168
+ Elasticsearch
169
+ </li>
170
+ <li class="flex items-center">
171
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
172
+ Milvus/Qdrant/Redis
173
+ </li>
174
+ </ul>
175
+ </div>
176
+
177
+ <!-- Web Tech -->
178
+ <div class="bg-white p-6 rounded-xl shadow-md">
179
+ <h3 class="font-bold text-xl mb-4 flex items-center">
180
+ <i data-feather="globe" class="mr-2 text-primary"></i>
181
+ Web Technologies
182
+ </h3>
183
+ <ul class="space-y-2">
184
+ <li class="flex items-center">
185
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
186
+ HTML/JS/CSS
187
+ </li>
188
+ <li class="flex items-center">
189
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
190
+ React
191
+ </li>
192
+ <li class="flex items-center">
193
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
194
+ Flask/FastAPI
195
+ </li>
196
+ <li class="flex items-center">
197
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
198
+ Docker/Kubernetes
199
+ </li>
200
+ </ul>
201
+ </div>
202
+
203
+ <!-- ML/DL -->
204
+ <div class="bg-white p-6 rounded-xl shadow-md">
205
+ <h3 class="font-bold text-xl mb-4 flex items-center">
206
+ <i data-feather="activity" class="mr-2 text-primary"></i>
207
+ Machine Learning
208
+ </h3>
209
+ <ul class="space-y-2">
210
+ <li class="flex items-center">
211
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
212
+ TextCNN/Transformers
213
+ </li>
214
+ <li class="flex items-center">
215
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
216
+ OCR/YOLO
217
+ </li>
218
+ <li class="flex items-center">
219
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
220
+ Vector Search
221
+ </li>
222
+ <li class="flex items-center">
223
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
224
+ Transfer Learning
225
+ </li>
226
+ </ul>
227
+ </div>
228
+
229
+ <!-- Generative AI -->
230
+ <div class="bg-white p-6 rounded-xl shadow-md">
231
+ <h3 class="font-bold text-xl mb-4 flex items-center">
232
+ <i data-feather="zap" class="mr-2 text-primary"></i>
233
+ Generative AI
234
+ </h3>
235
+ <ul class="space-y-2">
236
+ <li class="flex items-center">
237
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
238
+ HuggingFace/LangChain
239
+ </li>
240
+ <li class="flex items-center">
241
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
242
+ LLAMA/Mistral
243
+ </li>
244
+ <li class="flex items-center">
245
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
246
+ RAG/LoRA/QLoRA
247
+ </li>
248
+ <li class="flex items-center">
249
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
250
+ TTS/Data Augmentation
251
+ </li>
252
+ </ul>
253
+ </div>
254
+
255
+ <!-- MLOps -->
256
+ <div class="bg-white p-6 rounded-xl shadow-md">
257
+ <h3 class="font-bold text-xl mb-4 flex items-center">
258
+ <i data-feather="settings" class="mr-2 text-primary"></i>
259
+ MLOps Tools
260
+ </h3>
261
+ <ul class="space-y-2">
262
+ <li class="flex items-center">
263
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
264
+ MLflow/DVC
265
+ </li>
266
+ <li class="flex items-center">
267
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
268
+ CI/CD Pipelines
269
+ </li>
270
+ <li class="flex items-center">
271
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
272
+ Model Versioning
273
+ </li>
274
+ <li class="flex items-center">
275
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
276
+ VLLM/TGI/ExLlamaV2
277
+ </li>
278
+ </ul>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Experience Section -->
284
+ <section id="experience" class="mb-20">
285
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">Work Experience</h2>
286
+
287
+ <div class="space-y-8">
288
+ <!-- AGS Health -->
289
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
290
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
291
+ <h3 class="text-xl font-bold">Senior AI Engineer</h3>
292
+ <div class="text-primary font-medium">05/2025 - Present</div>
293
+ </div>
294
+ <div class="flex items-center mb-4">
295
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
296
+ <div class="bg-white p-1 rounded-full">
297
+ <i data-feather="briefcase" class="w-5 h-5 text-primary"></i>
298
+ </div>
299
+ </div>
300
+ <h4 class="font-semibold">AGS Health • Ahmedabad, Gujarat, India</h4>
301
+ </div>
302
+ <ul class="space-y-3 pl-6 list-disc text-gray-600">
303
+ <li>Pretrained BERT from scratch with EHR Dataset and optimized it with ONNX Serving</li>
304
+ <li>Currently working on creating web-agents for RCM businesses</li>
305
+ </ul>
306
+ </div>
307
+
308
+ <!-- e-Procurement -->
309
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
310
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
311
+ <h3 class="text-xl font-bold">Senior Machine Learning Engineer</h3>
312
+ <div class="text-primary font-medium">02/2023 - 04/2025</div>
313
+ </div>
314
+ <div class="flex items-center mb-4">
315
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
316
+ <div class="bg-white p-1 rounded-full">
317
+ <i data-feather="briefcase" class="w-5 h-5 text-primary"></i>
318
+ </div>
319
+ </div>
320
+ <h4 class="font-semibold">e-Procurement Technologies Ltd • Ahmedabad, Gujarat, India</h4>
321
+ </div>
322
+
323
+ <div class="mb-6">
324
+ <h5 class="font-bold mb-2 flex items-center">
325
+ <i data-feather="search" class="mr-2 text-primary"></i>
326
+ NLP-Enhanced Semantic Search
327
+ </h5>
328
+ <ul class="space-y-2 pl-6 list-disc text-gray-600">
329
+ <li>Fine-Tuned GLiNER with in-house custom dataset for efficient named entity recognition</li>
330
+ <li>Integrated Embedding based search improving search accuracy by 65%</li>
331
+ <li>Implemented Hybrid ANN search with Elasticsearch and Redis caching</li>
332
+ </ul>
333
+ </div>
334
+
335
+ <div class="mb-6">
336
+ <h5 class="font-bold mb-2 flex items-center">
337
+ <i data-feather="message-square" class="mr-2 text-primary"></i>
338
+ Gen. AI Chatbot
339
+ </h5>
340
+ <ul class="space-y-2 pl-6 list-disc text-gray-600">
341
+ <li>Leveraged Langchain with Local LLM for advanced RAG based Chatbot</li>
342
+ <li>Implemented VLLM for faster inference, fine-tuned Llama3.1 for precise responses</li>
343
+ <li>Increased customer base by 15% YoY and revenue by 35% YoY</li>
344
+ <li>Led End-to-End UI/UX implementation in React</li>
345
+ </ul>
346
+ </div>
347
+
348
+ <div>
349
+ <h5 class="font-bold mb-2 flex items-center">
350
+ <i data-feather="layers" class="mr-2 text-primary"></i>
351
+ Multi-Label Text Classification
352
+ </h5>
353
+ <ul class="space-y-2 pl-6 list-disc text-gray-600">
354
+ <li>Engineered robust text classification model using TextCNN algorithm</li>
355
+ <li>Integrated Unicorn API for seamless model deployment</li>
356
+ <li>Significantly reduced workload for Data Entry and Content teams</li>
357
+ </ul>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- INFIRAISE -->
362
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
363
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
364
+ <h3 class="text-xl font-bold">Data Specialist</h3>
365
+ <div class="text-primary font-medium">04/2022 - 12/2022</div>
366
+ </div>
367
+ <div class="flex items-center mb-4">
368
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
369
+ <div class="bg-white p-1 rounded-full">
370
+ <i data-feather="briefcase" class="w-5 h-5 text-primary"></i>
371
+ </div>
372
+ </div>
373
+ <h4 class="font-semibold">INFIRAISE • Ahmedabad, Gujarat, India</h4>
374
+ </div>
375
+ <ul class="space-y-3 pl-6 list-disc text-gray-600">
376
+ <li>Implemented advanced data scraping techniques to enhance quality of 1M+ records</li>
377
+ <li>Improved data accuracy by 20% through stringent quality measures</li>
378
+ <li>Reduced errors contributing to better organizational decision-making</li>
379
+ </ul>
380
+ </div>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Education Section -->
385
+ <section id="education" class="mb-20">
386
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">Education</h2>
387
+ <div class="grid md:grid-cols-2 gap-6">
388
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
389
+ <div class="flex items-center mb-4">
390
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
391
+ <div class="bg-white p-1 rounded-full">
392
+ <i data-feather="book" class="w-5 h-5 text-primary"></i>
393
+ </div>
394
+ </div>
395
+ <h3 class="text-xl font-bold">Master of Computer Applications</h3>
396
+ </div>
397
+ <div class="flex justify-between items-center mb-2">
398
+ <h4 class="font-semibold">Amity University</h4>
399
+ <span class="text-primary">11/2022 - 12/2024</span>
400
+ </div>
401
+ <p class="text-gray-600">Specialization in Machine Learning</p>
402
+ </div>
403
+
404
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
405
+ <div class="flex items-center mb-4">
406
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
407
+ <div class="bg-white p-1 rounded-full">
408
+ <i data-feather="book" class="w-5 h-5 text-primary"></i>
409
+ </div>
410
+ </div>
411
+ <h3 class="text-xl font-bold">Bachelor's Degree in Mathematics</h3>
412
+ </div>
413
+ <div class="flex justify-between items-center mb-2">
414
+ <h4 class="font-semibold">Vinoba Bhave University</h4>
415
+ <span class="text-primary">01/2017 - 12/2020</span>
416
+ </div>
417
+ <p class="text-gray-600">GPA: A</p>
418
+ </div>
419
+ </div>
420
+ </section>
421
+
422
+ <!-- Contact Section -->
423
+ <section id="contact" class="mb-20">
424
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">Get In Touch</h2>
425
+ <div class="grid md:grid-cols-2 gap-8">
426
+ <div class="bg-white p-8 rounded-xl shadow-md">
427
+ <h3 class="text-xl font-bold mb-6">Contact Information</h3>
428
+ <ul class="space-y-4">
429
+ <li class="flex items-start">
430
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-4">
431
+ <i data-feather="mail" class="w-5 h-5 text-primary"></i>
432
+ </div>
433
+ <div>
434
+ <h4 class="font-semibold">Email</h4>
435
+ <a href="mailto:imeandrj@gmail.com" class="text-gray-600 hover:text-primary transition-colors">imeandrj@gmail.com</a>
436
+ </div>
437
+ </li>
438
+ <li class="flex items-start">
439
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-4">
440
+ <i data-feather="phone" class="w-5 h-5 text-primary"></i>
441
+ </div>
442
+ <div>
443
+ <h4 class="font-semibold">Phone</h4>
444
+ <a href="tel:+916209303738" class="text-gray-600 hover:text-primary transition-colors">+91 6209303738</a>
445
+ </div>
446
+ </li>
447
+ <li class="flex items-start">
448
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-4">
449
+ <i data-feather="map-pin" class="w-5 h-5 text-primary"></i>
450
+ </div>
451
+ <div>
452
+ <h4 class="font-semibold">Location</h4>
453
+ <p class="text-gray-600">Ahmedabad, Gujarat, India</p>
454
+ </div>
455
+ </li>
456
+ </ul>
457
+ <div class="mt-8">
458
+ <h4 class="font-semibold mb-4">Connect with me</h4>
459
+ <div class="flex space-x-4">
460
+ <a href="https://linkedin.com/in/bitsnbucks" target="_blank" class="bg-gray-100 hover:bg-primary hover:text-white p-3 rounded-full transition-colors">
461
+ <i data-feather="linkedin" class="w-5 h-5"></i>
462
+ </a>
463
+ <a href="https://github.com/raaj1v" target="_blank" class="bg-gray-100 hover:bg-primary hover:text-white p-3 rounded-full transition-colors">
464
+ <i data-feather="github" class="w-5 h-5"></i>
465
+ </a>
466
+ <a href="https://hf.co/c0d3r69" target="_blank" class="bg-gray-100 hover:bg-primary hover:text-white p-3 rounded-full transition-colors">
467
+ <i data-feather="user" class="w-5 h-5"></i>
468
+ </a>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ <div class="bg-white p-8 rounded-xl shadow-md">
473
+ <h3 class="text-xl font-bold mb-6">Send Me a Message</h3>
474
+ <form class="space-y-4">
475
+ <div>
476
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
477
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
478
+ </div>
479
+ <div>
480
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
481
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
482
+ </div>
483
+ <div>
484
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
485
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
486
+ </div>
487
+ <button type="submit" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all w-full shadow-md hover:shadow-lg">
488
+ Send Message
489
+ </button>
490
+ </form>
491
+ </div>
492
+ </div>
493
+ </section>
494
+ </main>
495
+
496
+ <footer class="bg-gray-900 text-white py-12">
497
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
498
+ <div class="flex flex-col md:flex-row justify-between items-center">
499
+ <div class="mb-6 md:mb-0">
500
+ <h3 class="text-2xl font-bold">Rajeev Mishra</h3>
501
+ <p class="text-gray-400 mt-2">Machine Learning Engineer</p>
502
+ </div>
503
+ <div class="flex space-x-6">
504
+ <a href="https://linkedin.com/in/bitsnbucks" target="_blank" class="text-gray-400 hover:text-white transition-colors">
505
+ <i data-feather="linkedin" class="w-5 h-5"></i>
506
+ </a>
507
+ <a href="https://github.com/raaj1v" target="_blank" class="text-gray-400 hover:text-white transition-colors">
508
+ <i data-feather="github" class="w-5 h-5"></i>
509
+ </a>
510
+ <a href="https://hf.co/c0d3r69" target="_blank" class="text-gray-400 hover:text-white transition-colors">
511
+ <i data-feather="user" class="w-5 h-5"></i>
512
+ </a>
513
+ <a href="mailto:imeandrj@gmail.com" class="text-gray-400 hover:text-white transition-colors">
514
+ <i data-feather="mail" class="w-5 h-5"></i>
515
+ </a>
516
+ </div>
517
+ </div>
518
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
519
+ <p>© 2023 Rajeev Mishra. All rights reserved.</p>
520
+ </div>
521
+ </div>
522
+ </footer>
523
+
524
+ <script src="components/navbar.js"></script>
525
+ <script src="script.js"></script>
526
+ <script>
527
+ feather.replace();
528
+ </script>
529
+ </body>
530
+ </html>
index.html CHANGED
@@ -1,353 +1,530 @@
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>Snake Game</title>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <style>
9
- @keyframes pulse {
10
- 0%, 100% { transform: scale(1); }
11
- 50% { transform: scale(1.05); }
12
- }
13
-
14
- .pulse-animation {
15
- animation: pulse 1.5s infinite;
16
- }
17
-
18
- .game-over {
19
- background-color: rgba(239, 68, 68, 0.9);
20
- }
21
-
22
- .snake-head {
23
- background-color: #10b981;
24
- border-radius: 30%;
25
- z-index: 10;
26
- }
27
-
28
- .snake-body {
29
- background-color: #34d399;
30
- border-radius: 40%;
31
- }
32
-
33
- .food {
34
- background-color: #ef4444;
35
- border-radius: 50%;
36
- box-shadow: 0 0 10px #ef4444;
37
- }
38
-
39
- .grid-cell {
40
- transition: background-color 0.1s ease;
41
- }
42
-
43
- @media (max-width: 640px) {
44
- .controls {
45
- display: grid !important;
46
  }
47
  }
48
- </style>
49
  </head>
50
- <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
51
- <div class="max-w-4xl w-full">
52
- <div class="flex justify-between items-center mb-4">
53
- <h1 class="text-3xl md:text-4xl font-bold text-green-400">🐍 Snake Game</h1>
54
- <div class="flex items-center space-x-4">
55
- <div class="bg-gray-800 px-4 py-2 rounded-lg">
56
- <span class="text-gray-300">Score:</span>
57
- <span id="score" class="text-white font-bold ml-2">0</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  </div>
59
- <div class="bg-gray-800 px-4 py-2 rounded-lg">
60
- <span class="text-gray-300">High:</span>
61
- <span id="high-score" class="text-white font-bold ml-2">0</span>
 
62
  </div>
63
  </div>
64
- </div>
65
-
66
- <div class="relative">
67
- <div id="game-board" class="bg-gray-800 rounded-lg overflow-hidden border-2 border-gray-700 shadow-lg mx-auto"
68
- style="width: 400px; height: 400px; display: grid; grid-template-rows: repeat(20, 1fr); grid-template-columns: repeat(20, 1fr);">
69
- <!-- Game grid will be generated by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  </div>
71
-
72
- <div id="game-over" class="absolute inset-0 flex flex-col items-center justify-center bg-opacity-90 rounded-lg hidden game-over">
73
- <h2 class="text-4xl font-bold mb-4">Game Over!</h2>
74
- <p class="text-xl mb-6">Your score: <span id="final-score" class="font-bold">0</span></p>
75
- <button id="restart-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full transition duration-200 pulse-animation">
76
- Play Again
77
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  </div>
 
 
 
 
 
79
 
80
- <div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-gray-800 bg-opacity-90 rounded-lg">
81
- <h2 class="text-4xl font-bold mb-6 text-green-400">Snake Game</h2>
82
- <p class="text-gray-300 mb-8 text-center px-4">Use arrow keys or buttons to control the snake. Eat the red food to grow!</p>
83
- <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full transition duration-200 pulse-animation">
84
- Start Game
85
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  </div>
87
- </div>
88
-
89
- <div class="mt-6 flex justify-center">
90
- <div class="controls hidden md:flex space-x-4">
91
- <button id="up-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg transition duration-200">
92
- ↑
93
- </button>
94
- <div class="flex flex-col space-y-4">
95
- <button id="left-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg transition duration-200">
96
- ←
97
- </button>
98
- <button id="right-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg transition duration-200">
99
- →
100
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
101
  </div>
102
- <button id="down-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg transition duration-200">
103
- ↓
104
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  </div>
106
  </div>
107
-
108
- <div class="mt-8 text-center text-gray-400">
109
- <p>Press spacebar to pause/resume the game</p>
110
- </div>
111
- </div>
112
 
 
 
113
  <script>
114
- document.addEventListener('DOMContentLoaded', () => {
115
- // Game variables
116
- const GRID_SIZE = 20;
117
- const gameBoard = document.getElementById('game-board');
118
- const scoreDisplay = document.getElementById('score');
119
- const highScoreDisplay = document.getElementById('high-score');
120
- const finalScoreDisplay = document.getElementById('final-score');
121
- const gameOverScreen = document.getElementById('game-over');
122
- const startScreen = document.getElementById('start-screen');
123
- const startBtn = document.getElementById('start-btn');
124
- const restartBtn = document.getElementById('restart-btn');
125
- const upBtn = document.getElementById('up-btn');
126
- const downBtn = document.getElementById('down-btn');
127
- const leftBtn = document.getElementById('left-btn');
128
- const rightBtn = document.getElementById('right-btn');
129
-
130
- let snake = [{x: 10, y: 10}];
131
- let food = generateFood();
132
- let direction = 'right';
133
- let nextDirection = 'right';
134
- let gameSpeed = 150;
135
- let score = 0;
136
- let highScore = localStorage.getItem('snakeHighScore') || 0;
137
- let gameInterval;
138
- let isPaused = false;
139
- let isGameOver = false;
140
-
141
- highScoreDisplay.textContent = highScore;
142
-
143
- // Create game grid
144
- function createGrid() {
145
- gameBoard.innerHTML = '';
146
- for (let i = 0; i < GRID_SIZE; i++) {
147
- for (let j = 0; j < GRID_SIZE; j++) {
148
- const cell = document.createElement('div');
149
- cell.classList.add('grid-cell', 'border', 'border-gray-700');
150
- cell.style.gridRow = i + 1;
151
- cell.style.gridColumn = j + 1;
152
- gameBoard.appendChild(cell);
153
- }
154
- }
155
- }
156
-
157
- // Generate food at random position
158
- function generateFood() {
159
- let newFood;
160
- while (!newFood || isOnSnake(newFood)) {
161
- newFood = {
162
- x: Math.floor(Math.random() * GRID_SIZE),
163
- y: Math.floor(Math.random() * GRID_SIZE)
164
- };
165
- }
166
- return newFood;
167
- }
168
-
169
- // Check if position is occupied by snake
170
- function isOnSnake(position) {
171
- return snake.some(segment => segment.x === position.x && segment.y === position.y);
172
- }
173
-
174
- // Draw game state
175
- function draw() {
176
- // Clear board
177
- const cells = document.querySelectorAll('.grid-cell');
178
- cells.forEach(cell => {
179
- cell.className = 'grid-cell border border-gray-700';
180
- });
181
-
182
- // Draw snake
183
- snake.forEach((segment, index) => {
184
- const cellIndex = segment.y * GRID_SIZE + segment.x;
185
- if (cells[cellIndex]) {
186
- if (index === 0) {
187
- cells[cellIndex].classList.add('snake-head');
188
- } else {
189
- cells[cellIndex].classList.add('snake-body');
190
- }
191
- }
192
- });
193
-
194
- // Draw food
195
- const foodIndex = food.y * GRID_SIZE + food.x;
196
- if (cells[foodIndex]) {
197
- cells[foodIndex].classList.add('food');
198
- }
199
- }
200
-
201
- // Update game state
202
- function update() {
203
- if (isPaused || isGameOver) return;
204
-
205
- direction = nextDirection;
206
-
207
- // Move snake
208
- const head = {...snake[0]};
209
-
210
- switch (direction) {
211
- case 'up':
212
- head.y--;
213
- break;
214
- case 'down':
215
- head.y++;
216
- break;
217
- case 'left':
218
- head.x--;
219
- break;
220
- case 'right':
221
- head.x++;
222
- break;
223
- }
224
-
225
- // Check collision with walls
226
- if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
227
- gameOver();
228
- return;
229
- }
230
-
231
- // Check collision with self
232
- if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
233
- gameOver();
234
- return;
235
- }
236
-
237
- snake.unshift(head);
238
-
239
- // Check if snake ate food
240
- if (head.x === food.x && head.y === food.y) {
241
- score += 10;
242
- scoreDisplay.textContent = score;
243
- food = generateFood();
244
-
245
- // Increase speed slightly as score increases
246
- if (score % 50 === 0 && gameSpeed > 70) {
247
- gameSpeed -= 5;
248
- clearInterval(gameInterval);
249
- gameInterval = setInterval(update, gameSpeed);
250
- }
251
- } else {
252
- snake.pop();
253
- }
254
-
255
- draw();
256
- }
257
-
258
- // Game over
259
- function gameOver() {
260
- isGameOver = true;
261
- clearInterval(gameInterval);
262
-
263
- // Update high score
264
- if (score > highScore) {
265
- highScore = score;
266
- localStorage.setItem('snakeHighScore', highScore);
267
- highScoreDisplay.textContent = highScore;
268
- }
269
-
270
- finalScoreDisplay.textContent = score;
271
- gameOverScreen.classList.remove('hidden');
272
- }
273
-
274
- // Start game
275
- function startGame() {
276
- snake = [{x: 10, y: 10}];
277
- food = generateFood();
278
- direction = 'right';
279
- nextDirection = 'right';
280
- score = 0;
281
- scoreDisplay.textContent = score;
282
- gameSpeed = 150;
283
- isPaused = false;
284
- isGameOver = false;
285
-
286
- startScreen.classList.add('hidden');
287
- gameOverScreen.classList.add('hidden');
288
-
289
- createGrid();
290
- draw();
291
-
292
- clearInterval(gameInterval);
293
- gameInterval = setInterval(update, gameSpeed);
294
- }
295
-
296
- // Event listeners
297
- document.addEventListener('keydown', (e) => {
298
- switch (e.key) {
299
- case 'ArrowUp':
300
- if (direction !== 'down') nextDirection = 'up';
301
- e.preventDefault();
302
- break;
303
- case 'ArrowDown':
304
- if (direction !== 'up') nextDirection = 'down';
305
- e.preventDefault();
306
- break;
307
- case 'ArrowLeft':
308
- if (direction !== 'right') nextDirection = 'left';
309
- e.preventDefault();
310
- break;
311
- case 'ArrowRight':
312
- if (direction !== 'left') nextDirection = 'right';
313
- e.preventDefault();
314
- break;
315
- case ' ':
316
- if (!isGameOver) {
317
- isPaused = !isPaused;
318
- if (isPaused) {
319
- clearInterval(gameInterval);
320
- } else {
321
- gameInterval = setInterval(update, gameSpeed);
322
- }
323
- }
324
- break;
325
- }
326
- });
327
-
328
- startBtn.addEventListener('click', startGame);
329
- restartBtn.addEventListener('click', startGame);
330
-
331
- upBtn.addEventListener('click', () => {
332
- if (direction !== 'down') nextDirection = 'up';
333
- });
334
-
335
- downBtn.addEventListener('click', () => {
336
- if (direction !== 'up') nextDirection = 'down';
337
- });
338
-
339
- leftBtn.addEventListener('click', () => {
340
- if (direction !== 'right') nextDirection = 'left';
341
- });
342
-
343
- rightBtn.addEventListener('click', () => {
344
- if (direction !== 'left') nextDirection = 'right';
345
- });
346
-
347
- // Initialize
348
- createGrid();
349
- draw();
350
- });
351
  </script>
352
- <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=x3v/snake-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
353
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Rajeev Mishra | AI/ML Engineer</title>
7
+ <link rel="stylesheet" href="style.css">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#8b5cf6',
18
+ }
19
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  }
21
  }
22
+ </script>
23
  </head>
24
+ <body class="bg-gray-50 text-gray-800 font-sans antialiased">
25
+ <nav-bar></nav-bar>
26
+
27
+ <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
28
+ <!-- Hero Section -->
29
+ <section class="mb-20">
30
+ <div class="flex flex-col md:flex-row items-center gap-8">
31
+ <div class="md:w-1/2">
32
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900">Rajeev Mishra</h1>
33
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-primary">Machine Learning Engineer</h2>
34
+ <p class="text-lg mb-6 text-gray-600 leading-relaxed">
35
+ Transforming complex problems into elegant AI solutions with over 3 years of experience in machine learning, NLP, and generative AI.
36
+ </p>
37
+ <div class="flex flex-wrap gap-4">
38
+ <a href="#contact" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all shadow-md hover:shadow-lg">
39
+ Contact Me
40
+ </a>
41
+ <a href="#projects" class="border-2 border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-medium transition-all">
42
+ My Projects
43
+ </a>
44
+ </div>
45
  </div>
46
+ <div class="md:w-1/2 mt-8 md:mt-0">
47
+ <div class="bg-gradient-to-br from-primary to-secondary p-1 rounded-2xl shadow-xl">
48
+ <img src="http://static.photos/technology/640x360/42" alt="AI Technology" class="w-full h-auto rounded-2xl">
49
+ </div>
50
  </div>
51
  </div>
52
+ </section>
53
+
54
+ <!-- About Section -->
55
+ <section id="about" class="mb-20">
56
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">About Me</h2>
57
+ <div class="grid md:grid-cols-3 gap-8">
58
+ <div class="md:col-span-2">
59
+ <p class="text-lg mb-6 text-gray-600 leading-relaxed">
60
+ Seasoned Machine Learning Engineer with robust experience at eProcurement Technologies Ltd, where I orchestrated transformative initiatives with AI search and MLOps practices. Achieved a remarkable 78% enhancement in multi-label classification efficacy and 20% uplift in data quality accuracy.
61
+ </p>
62
+ <p class="text-lg mb-6 text-gray-600 leading-relaxed">
63
+ Spearheaded the development of a sophisticated Gen. AI chatbot solution within just 8 months, boosting customer retention rates and refining our customer service dialogue system to exemplify excellence in service delivery.
64
+ </p>
65
+ <div class="flex flex-wrap gap-4 mt-8">
66
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all flex-1 min-w-[200px]">
67
+ <div class="text-primary mb-3">
68
+ <i data-feather="cpu" class="w-8 h-8"></i>
69
+ </div>
70
+ <h3 class="font-bold text-lg mb-2">AI/ML Expertise</h3>
71
+ <p class="text-gray-600">3+ years transforming business with machine learning</p>
72
+ </div>
73
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all flex-1 min-w-[200px]">
74
+ <div class="text-primary mb-3">
75
+ <i data-feather="message-square" class="w-8 h-8"></i>
76
+ </div>
77
+ <h3 class="font-bold text-lg mb-2">NLP Specialist</h3>
78
+ <p class="text-gray-600">Advanced techniques in text processing and understanding</p>
79
+ </div>
80
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all flex-1 min-w-[200px]">
81
+ <div class="text-primary mb-3">
82
+ <i data-feather="box" class="w-8 h-8"></i>
83
+ </div>
84
+ <h3 class="font-bold text-lg mb-2">MLOps</h3>
85
+ <p class="text-gray-600">End-to-end model deployment and monitoring</p>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ <div class="bg-white p-8 rounded-xl shadow-md h-fit sticky top-8">
90
+ <h3 class="text-xl font-bold mb-6 text-gray-900">Personal Info</h3>
91
+ <ul class="space-y-4">
92
+ <li class="flex items-start">
93
+ <i data-feather="map-pin" class="mr-3 text-primary"></i>
94
+ <span>Ahmedabad, Gujarat</span>
95
+ </li>
96
+ <li class="flex items-start">
97
+ <i data-feather="phone" class="mr-3 text-primary"></i>
98
+ <span>+91 6209303738</span>
99
+ </li>
100
+ <li class="flex items-start">
101
+ <i data-feather="mail" class="mr-3 text-primary"></i>
102
+ <span>imeandrj@gmail.com</span>
103
+ </li>
104
+ <li class="flex items-start">
105
+ <i data-feather="linkedin" class="mr-3 text-primary"></i>
106
+ <a href="https://linkedin.com/in/bitsnbucks" target="_blank" class="hover:text-primary transition-colors">linkedin.com/in/bitsnbucks</a>
107
+ </li>
108
+ <li class="flex items-start">
109
+ <i data-feather="github" class="mr-3 text-primary"></i>
110
+ <a href="https://github.com/raaj1v" target="_blank" class="hover:text-primary transition-colors">github.com/raaj1v</a>
111
+ </li>
112
+ <li class="flex items-start">
113
+ <i data-feather="user" class="mr-3 text-primary"></i>
114
+ <a href="https://hf.co/c0d3r69" target="_blank" class="hover:text-primary transition-colors">hf.co/c0d3r69</a>
115
+ </li>
116
+ </ul>
117
+ </div>
118
  </div>
119
+ </section>
120
+
121
+ <!-- Skills Section -->
122
+ <section id="skills" class="mb-20">
123
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">Technical Skills</h2>
124
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
125
+ <!-- Programming Languages -->
126
+ <div class="bg-white p-6 rounded-xl shadow-md">
127
+ <h3 class="font-bold text-xl mb-4 flex items-center">
128
+ <i data-feather="code" class="mr-2 text-primary"></i>
129
+ Programming Languages
130
+ </h3>
131
+ <ul class="space-y-2">
132
+ <li class="flex items-center">
133
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
134
+ Python
135
+ </li>
136
+ <li class="flex items-center">
137
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
138
+ PyTorch
139
+ </li>
140
+ <li class="flex items-center">
141
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
142
+ Scikit-Learn
143
+ </li>
144
+ <li class="flex items-center">
145
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
146
+ Flask/FastAPI
147
+ </li>
148
+ </ul>
149
+ </div>
150
+
151
+ <!-- Databases -->
152
+ <div class="bg-white p-6 rounded-xl shadow-md">
153
+ <h3 class="font-bold text-xl mb-4 flex items-center">
154
+ <i data-feather="database" class="mr-2 text-primary"></i>
155
+ Database Management
156
+ </h3>
157
+ <ul class="space-y-2">
158
+ <li class="flex items-center">
159
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
160
+ SQL
161
+ </li>
162
+ <li class="flex items-center">
163
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
164
+ ChromaDB/FAISS
165
+ </li>
166
+ <li class="flex items-center">
167
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
168
+ Elasticsearch
169
+ </li>
170
+ <li class="flex items-center">
171
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
172
+ Milvus/Qdrant/Redis
173
+ </li>
174
+ </ul>
175
+ </div>
176
+
177
+ <!-- Web Tech -->
178
+ <div class="bg-white p-6 rounded-xl shadow-md">
179
+ <h3 class="font-bold text-xl mb-4 flex items-center">
180
+ <i data-feather="globe" class="mr-2 text-primary"></i>
181
+ Web Technologies
182
+ </h3>
183
+ <ul class="space-y-2">
184
+ <li class="flex items-center">
185
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
186
+ HTML/JS/CSS
187
+ </li>
188
+ <li class="flex items-center">
189
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
190
+ React
191
+ </li>
192
+ <li class="flex items-center">
193
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
194
+ Flask/FastAPI
195
+ </li>
196
+ <li class="flex items-center">
197
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
198
+ Docker/Kubernetes
199
+ </li>
200
+ </ul>
201
+ </div>
202
+
203
+ <!-- ML/DL -->
204
+ <div class="bg-white p-6 rounded-xl shadow-md">
205
+ <h3 class="font-bold text-xl mb-4 flex items-center">
206
+ <i data-feather="activity" class="mr-2 text-primary"></i>
207
+ Machine Learning
208
+ </h3>
209
+ <ul class="space-y-2">
210
+ <li class="flex items-center">
211
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
212
+ TextCNN/Transformers
213
+ </li>
214
+ <li class="flex items-center">
215
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
216
+ OCR/YOLO
217
+ </li>
218
+ <li class="flex items-center">
219
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
220
+ Vector Search
221
+ </li>
222
+ <li class="flex items-center">
223
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
224
+ Transfer Learning
225
+ </li>
226
+ </ul>
227
+ </div>
228
+
229
+ <!-- Generative AI -->
230
+ <div class="bg-white p-6 rounded-xl shadow-md">
231
+ <h3 class="font-bold text-xl mb-4 flex items-center">
232
+ <i data-feather="zap" class="mr-2 text-primary"></i>
233
+ Generative AI
234
+ </h3>
235
+ <ul class="space-y-2">
236
+ <li class="flex items-center">
237
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
238
+ HuggingFace/LangChain
239
+ </li>
240
+ <li class="flex items-center">
241
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
242
+ LLAMA/Mistral
243
+ </li>
244
+ <li class="flex items-center">
245
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
246
+ RAG/LoRA/QLoRA
247
+ </li>
248
+ <li class="flex items-center">
249
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
250
+ TTS/Data Augmentation
251
+ </li>
252
+ </ul>
253
+ </div>
254
+
255
+ <!-- MLOps -->
256
+ <div class="bg-white p-6 rounded-xl shadow-md">
257
+ <h3 class="font-bold text-xl mb-4 flex items-center">
258
+ <i data-feather="settings" class="mr-2 text-primary"></i>
259
+ MLOps Tools
260
+ </h3>
261
+ <ul class="space-y-2">
262
+ <li class="flex items-center">
263
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
264
+ MLflow/DVC
265
+ </li>
266
+ <li class="flex items-center">
267
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
268
+ CI/CD Pipelines
269
+ </li>
270
+ <li class="flex items-center">
271
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
272
+ Model Versioning
273
+ </li>
274
+ <li class="flex items-center">
275
+ <div class="w-2 h-2 rounded-full bg-primary mr-2"></div>
276
+ VLLM/TGI/ExLlamaV2
277
+ </li>
278
+ </ul>
279
+ </div>
280
  </div>
281
+ </section>
282
+
283
+ <!-- Experience Section -->
284
+ <section id="experience" class="mb-20">
285
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">Work Experience</h2>
286
 
287
+ <div class="space-y-8">
288
+ <!-- AGS Health -->
289
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
290
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
291
+ <h3 class="text-xl font-bold">Senior AI Engineer</h3>
292
+ <div class="text-primary font-medium">05/2025 - Present</div>
293
+ </div>
294
+ <div class="flex items-center mb-4">
295
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
296
+ <div class="bg-white p-1 rounded-full">
297
+ <i data-feather="briefcase" class="w-5 h-5 text-primary"></i>
298
+ </div>
299
+ </div>
300
+ <h4 class="font-semibold">AGS Health • Ahmedabad, Gujarat, India</h4>
301
+ </div>
302
+ <ul class="space-y-3 pl-6 list-disc text-gray-600">
303
+ <li>Pretrained BERT from scratch with EHR Dataset and optimized it with ONNX Serving</li>
304
+ <li>Currently working on creating web-agents for RCM businesses</li>
305
+ </ul>
306
+ </div>
307
+
308
+ <!-- e-Procurement -->
309
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
310
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
311
+ <h3 class="text-xl font-bold">Senior Machine Learning Engineer</h3>
312
+ <div class="text-primary font-medium">02/2023 - 04/2025</div>
313
+ </div>
314
+ <div class="flex items-center mb-4">
315
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
316
+ <div class="bg-white p-1 rounded-full">
317
+ <i data-feather="briefcase" class="w-5 h-5 text-primary"></i>
318
+ </div>
319
+ </div>
320
+ <h4 class="font-semibold">e-Procurement Technologies Ltd • Ahmedabad, Gujarat, India</h4>
321
+ </div>
322
+
323
+ <div class="mb-6">
324
+ <h5 class="font-bold mb-2 flex items-center">
325
+ <i data-feather="search" class="mr-2 text-primary"></i>
326
+ NLP-Enhanced Semantic Search
327
+ </h5>
328
+ <ul class="space-y-2 pl-6 list-disc text-gray-600">
329
+ <li>Fine-Tuned GLiNER with in-house custom dataset for efficient named entity recognition</li>
330
+ <li>Integrated Embedding based search improving search accuracy by 65%</li>
331
+ <li>Implemented Hybrid ANN search with Elasticsearch and Redis caching</li>
332
+ </ul>
333
+ </div>
334
+
335
+ <div class="mb-6">
336
+ <h5 class="font-bold mb-2 flex items-center">
337
+ <i data-feather="message-square" class="mr-2 text-primary"></i>
338
+ Gen. AI Chatbot
339
+ </h5>
340
+ <ul class="space-y-2 pl-6 list-disc text-gray-600">
341
+ <li>Leveraged Langchain with Local LLM for advanced RAG based Chatbot</li>
342
+ <li>Implemented VLLM for faster inference, fine-tuned Llama3.1 for precise responses</li>
343
+ <li>Increased customer base by 15% YoY and revenue by 35% YoY</li>
344
+ <li>Led End-to-End UI/UX implementation in React</li>
345
+ </ul>
346
+ </div>
347
+
348
+ <div>
349
+ <h5 class="font-bold mb-2 flex items-center">
350
+ <i data-feather="layers" class="mr-2 text-primary"></i>
351
+ Multi-Label Text Classification
352
+ </h5>
353
+ <ul class="space-y-2 pl-6 list-disc text-gray-600">
354
+ <li>Engineered robust text classification model using TextCNN algorithm</li>
355
+ <li>Integrated Unicorn API for seamless model deployment</li>
356
+ <li>Significantly reduced workload for Data Entry and Content teams</li>
357
+ </ul>
358
+ </div>
359
+ </div>
360
+
361
+ <!-- INFIRAISE -->
362
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
363
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
364
+ <h3 class="text-xl font-bold">Data Specialist</h3>
365
+ <div class="text-primary font-medium">04/2022 - 12/2022</div>
366
+ </div>
367
+ <div class="flex items-center mb-4">
368
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
369
+ <div class="bg-white p-1 rounded-full">
370
+ <i data-feather="briefcase" class="w-5 h-5 text-primary"></i>
371
+ </div>
372
+ </div>
373
+ <h4 class="font-semibold">INFIRAISE • Ahmedabad, Gujarat, India</h4>
374
+ </div>
375
+ <ul class="space-y-3 pl-6 list-disc text-gray-600">
376
+ <li>Implemented advanced data scraping techniques to enhance quality of 1M+ records</li>
377
+ <li>Improved data accuracy by 20% through stringent quality measures</li>
378
+ <li>Reduced errors contributing to better organizational decision-making</li>
379
+ </ul>
380
+ </div>
381
  </div>
382
+ </section>
383
+
384
+ <!-- Education Section -->
385
+ <section id="education" class="mb-20">
386
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">Education</h2>
387
+ <div class="grid md:grid-cols-2 gap-6">
388
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
389
+ <div class="flex items-center mb-4">
390
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
391
+ <div class="bg-white p-1 rounded-full">
392
+ <i data-feather="book" class="w-5 h-5 text-primary"></i>
393
+ </div>
394
+ </div>
395
+ <h3 class="text-xl font-bold">Master of Computer Applications</h3>
396
+ </div>
397
+ <div class="flex justify-between items-center mb-2">
398
+ <h4 class="font-semibold">Amity University</h4>
399
+ <span class="text-primary">11/2022 - 12/2024</span>
400
+ </div>
401
+ <p class="text-gray-600">Specialization in Machine Learning</p>
402
+ </div>
403
+
404
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
405
+ <div class="flex items-center mb-4">
406
+ <div class="bg-gradient-to-r from-primary to-secondary p-1 rounded-full mr-3">
407
+ <div class="bg-white p-1 rounded-full">
408
+ <i data-feather="book" class="w-5 h-5 text-primary"></i>
409
+ </div>
410
+ </div>
411
+ <h3 class="text-xl font-bold">Bachelor's Degree in Mathematics</h3>
412
+ </div>
413
+ <div class="flex justify-between items-center mb-2">
414
+ <h4 class="font-semibold">Vinoba Bhave University</h4>
415
+ <span class="text-primary">01/2017 - 12/2020</span>
416
+ </div>
417
+ <p class="text-gray-600">GPA: A</p>
418
  </div>
419
+ </div>
420
+ </section>
421
+
422
+ <!-- Contact Section -->
423
+ <section id="contact" class="mb-20">
424
+ <h2 class="text-3xl font-bold mb-8 text-gray-900 border-b-2 border-primary pb-2 inline-block">Get In Touch</h2>
425
+ <div class="grid md:grid-cols-2 gap-8">
426
+ <div class="bg-white p-8 rounded-xl shadow-md">
427
+ <h3 class="text-xl font-bold mb-6">Contact Information</h3>
428
+ <ul class="space-y-4">
429
+ <li class="flex items-start">
430
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-4">
431
+ <i data-feather="mail" class="w-5 h-5 text-primary"></i>
432
+ </div>
433
+ <div>
434
+ <h4 class="font-semibold">Email</h4>
435
+ <a href="mailto:imeandrj@gmail.com" class="text-gray-600 hover:text-primary transition-colors">imeandrj@gmail.com</a>
436
+ </div>
437
+ </li>
438
+ <li class="flex items-start">
439
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-4">
440
+ <i data-feather="phone" class="w-5 h-5 text-primary"></i>
441
+ </div>
442
+ <div>
443
+ <h4 class="font-semibold">Phone</h4>
444
+ <a href="tel:+916209303738" class="text-gray-600 hover:text-primary transition-colors">+91 6209303738</a>
445
+ </div>
446
+ </li>
447
+ <li class="flex items-start">
448
+ <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-4">
449
+ <i data-feather="map-pin" class="w-5 h-5 text-primary"></i>
450
+ </div>
451
+ <div>
452
+ <h4 class="font-semibold">Location</h4>
453
+ <p class="text-gray-600">Ahmedabad, Gujarat, India</p>
454
+ </div>
455
+ </li>
456
+ </ul>
457
+ <div class="mt-8">
458
+ <h4 class="font-semibold mb-4">Connect with me</h4>
459
+ <div class="flex space-x-4">
460
+ <a href="https://linkedin.com/in/bitsnbucks" target="_blank" class="bg-gray-100 hover:bg-primary hover:text-white p-3 rounded-full transition-colors">
461
+ <i data-feather="linkedin" class="w-5 h-5"></i>
462
+ </a>
463
+ <a href="https://github.com/raaj1v" target="_blank" class="bg-gray-100 hover:bg-primary hover:text-white p-3 rounded-full transition-colors">
464
+ <i data-feather="github" class="w-5 h-5"></i>
465
+ </a>
466
+ <a href="https://hf.co/c0d3r69" target="_blank" class="bg-gray-100 hover:bg-primary hover:text-white p-3 rounded-full transition-colors">
467
+ <i data-feather="user" class="w-5 h-5"></i>
468
+ </a>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ <div class="bg-white p-8 rounded-xl shadow-md">
473
+ <h3 class="text-xl font-bold mb-6">Send Me a Message</h3>
474
+ <form class="space-y-4">
475
+ <div>
476
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
477
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
478
+ </div>
479
+ <div>
480
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
481
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
482
+ </div>
483
+ <div>
484
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
485
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
486
+ </div>
487
+ <button type="submit" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all w-full shadow-md hover:shadow-lg">
488
+ Send Message
489
+ </button>
490
+ </form>
491
+ </div>
492
+ </div>
493
+ </section>
494
+ </main>
495
+
496
+ <footer class="bg-gray-900 text-white py-12">
497
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
498
+ <div class="flex flex-col md:flex-row justify-between items-center">
499
+ <div class="mb-6 md:mb-0">
500
+ <h3 class="text-2xl font-bold">Rajeev Mishra</h3>
501
+ <p class="text-gray-400 mt-2">Machine Learning Engineer</p>
502
+ </div>
503
+ <div class="flex space-x-6">
504
+ <a href="https://linkedin.com/in/bitsnbucks" target="_blank" class="text-gray-400 hover:text-white transition-colors">
505
+ <i data-feather="linkedin" class="w-5 h-5"></i>
506
+ </a>
507
+ <a href="https://github.com/raaj1v" target="_blank" class="text-gray-400 hover:text-white transition-colors">
508
+ <i data-feather="github" class="w-5 h-5"></i>
509
+ </a>
510
+ <a href="https://hf.co/c0d3r69" target="_blank" class="text-gray-400 hover:text-white transition-colors">
511
+ <i data-feather="user" class="w-5 h-5"></i>
512
+ </a>
513
+ <a href="mailto:imeandrj@gmail.com" class="text-gray-400 hover:text-white transition-colors">
514
+ <i data-feather="mail" class="w-5 h-5"></i>
515
+ </a>
516
+ </div>
517
+ </div>
518
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
519
+ <p>© 2023 Rajeev Mishra. All rights reserved.</p>
520
  </div>
521
  </div>
522
+ </footer>
 
 
 
 
523
 
524
+ <script src="components/navbar.js"></script>
525
+ <script src="script.js"></script>
526
  <script>
527
+ feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
528
  </script>
529
+ </body>
530
  </html>
script.js ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Intersection Observer for scroll animations
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ const observerOptions = {
4
+ threshold: 0.1
5
+ };
6
+
7
+ const observer = new IntersectionObserver((entries) => {
8
+ entries.forEach(entry => {
9
+ if (entry.isIntersecting) {
10
+ entry.target.classList.add('animate-fade-in-up');
11
+ observer.unobserve(entry.target);
12
+ }
13
+ });
14
+ }, observerOptions);
15
+
16
+ // Observe all sections
17
+ document.querySelectorAll('section').forEach(section => {
18
+ observer.observe(section);
19
+ });
20
+
21
+ // Smooth scrolling for anchor links
22
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
23
+ anchor.addEventListener('click', function(e) {
24
+ e.preventDefault();
25
+ const targetId = this.getAttribute('href');
26
+ if (targetId === '#') return;
27
+
28
+ const targetElement = document.querySelector(targetId);
29
+ if (targetElement) {
30
+ targetElement.scrollIntoView({
31
+ behavior: 'smooth'
32
+ });
33
+ }
34
+ });
35
+ });
36
+
37
+ // Form submission handling
38
+ const contactForm = document.querySelector('form');
39
+ if (contactForm) {
40
+ contactForm.addEventListener('submit', function(e) {
41
+ e.preventDefault();
42
+
43
+ // In a real implementation, you would send the form data to a server
44
+ alert('Thank you for your message! I will get back to you soon.');
45
+ this.reset();
46
+ });
47
+ }
48
+ });
style.css CHANGED
@@ -1,28 +1,82 @@
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles that complement Tailwind */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
+
4
  body {
5
+ font-family: 'Inter', sans-serif;
6
+ }
7
+
8
+ /* Smooth scroll behavior */
9
+ html {
10
+ scroll-behavior: smooth;
11
+ }
12
+
13
+ /* Custom gradient text */
14
+ .text-gradient {
15
+ background: linear-gradient(to right, #6366f1, #8b5cf6);
16
+ -webkit-background-clip: text;
17
+ background-clip: text;
18
+ -webkit-text-fill-color: transparent;
19
+ }
20
+
21
+ /* Animation for section entries */
22
+ @keyframes fadeInUp {
23
+ from {
24
+ opacity: 0;
25
+ transform: translateY(20px);
26
+ }
27
+ to {
28
+ opacity: 1;
29
+ transform: translateY(0);
30
+ }
31
  }
32
 
33
+ .animate-fade-in-up {
34
+ animation: fadeInUp 0.6s ease-out forwards;
 
35
  }
36
 
37
+ /* Custom scrollbar */
38
+ ::-webkit-scrollbar {
39
+ width: 8px;
40
+ height: 8px;
 
41
  }
42
 
43
+ ::-webkit-scrollbar-track {
44
+ background: #f1f1f1;
 
 
 
 
45
  }
46
 
47
+ ::-webkit-scrollbar-thumb {
48
+ background: #6366f1;
49
+ border-radius: 10px;
50
  }
51
+
52
+ ::-webkit-scrollbar-thumb:hover {
53
+ background: #4f46e5;
54
+ }
55
+
56
+ /* Custom tooltip */
57
+ .tooltip {
58
+ position: relative;
59
+ display: inline-block;
60
+ }
61
+
62
+ .tooltip .tooltiptext {
63
+ visibility: hidden;
64
+ width: 120px;
65
+ background-color: #333;
66
+ color: #fff;
67
+ text-align: center;
68
+ border-radius: 6px;
69
+ padding: 5px;
70
+ position: absolute;
71
+ z-index: 1;
72
+ bottom: 125%;
73
+ left: 50%;
74
+ margin-left: -60px;
75
+ opacity: 0;
76
+ transition: opacity 0.3s;
77
+ }
78
+
79
+ .tooltip:hover .tooltiptext {
80
+ visibility: visible;
81
+ opacity: 1;
82
+ }