Hugging Face's logo

Spaces:
amalsp
/
my_profile
Running

App Files Community
amalsp commited on
Commit
9188e33
·
verified ·
1 Parent(s): 5aa710f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +602 -19
index.html CHANGED
@@ -1,19 +1,602 @@
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>Amal SP | AI Engineer & Data 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, #5f0685 0%, #7c3aed 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .skill-pill {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .skill-pill:hover {
21
+ transform: scale(1.05);
22
+ }
23
+ .section-divider {
24
+ position: relative;
25
+ height: 80px;
26
+ overflow: hidden;
27
+ }
28
+ .section-divider::before {
29
+ content: "";
30
+ position: absolute;
31
+ left: 0;
32
+ right: 0;
33
+ top: 0;
34
+ height: 100%;
35
+ background: linear-gradient(135deg, #5f0685 0%, #7c3aed 100%);
36
+ clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="font-sans antialiased text-gray-800 bg-gray-50">
41
+ <!-- Header/Navigation -->
42
+ <header class="gradient-bg text-white shadow-lg sticky top-0 z-50">
43
+ <div class="container mx-auto px-6 py-4">
44
+ <div class="flex items-center justify-between">
45
+ <div class="flex items-center space-x-4">
46
+ <div class="w-12 h-12 rounded-full overflow-hidden border-4 border-indigo-500 shadow-lg bg-white flex items-center justify-center">
47
+ <span><img src="https://media.licdn.com/dms/image/v2/D5603AQGZHT4-xINn8w/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1672069896276?e=1758758400&v=beta&t=YNhOVmbz-e7WMq4wV7hSWSWks2jhA78uLolyGMLUTu4" alt="Profile Photo of Amal SP"AS></span>
48
+ </div>
49
+ <h1 class="text-2xl font-bold">Amal SP</h1>
50
+ </div>
51
+ <nav class="hidden md:flex space-x-8">
52
+ <a href="#about" class="hover:text-indigo-200 transition">About</a>
53
+ <a href="#experience" class="hover:text-indigo-200 transition">Experience</a>
54
+ <a href="#projects" class="hover:text-indigo-200 transition">Projects</a>
55
+ <a href="#skills" class="hover:text-indigo-200 transition">Skills</a>
56
+ <a href="#contact" class="hover:text-indigo-200 transition">Contact</a>
57
+ </nav>
58
+ <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
59
+ <i class="fas fa-bars text-2xl"></i>
60
+ </button>
61
+ </div>
62
+ <!-- Mobile Menu -->
63
+ <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
64
+ <a href="#about" class="block py-2 hover:text-indigo-200 transition">About</a>
65
+ <a href="#experience" class="block py-2 hover:text-indigo-200 transition">Experience</a>
66
+ <a href="#projects" class="block py-2 hover:text-indigo-200 transition">Projects</a>
67
+ <a href="#skills" class="block py-2 hover:text-indigo-200 transition">Skills</a>
68
+ <a href="#contact" class="block py-2 hover:text-indigo-200 transition">Contact</a>
69
+ </div>
70
+ </div>
71
+ </header>
72
+
73
+ <!-- Hero Section -->
74
+ <section class="gradient-bg text-white py-20">
75
+ <div class="container mx-auto px-6 text-center">
76
+ <div class="max-w-3xl mx-auto">
77
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">AI Engineer & Data Scientist</h1>
78
+ <p class="text-xl md:text-2xl mb-8">Building intelligent systems that solve real-world problems with Generative AI and Machine Learning</p>
79
+ <div class="flex justify-center space-x-4">
80
+ <a href="#contact" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">Get In Touch</a>
81
+ <a href="#projects" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition">View Projects</a>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </section>
86
+
87
+ <!-- About Section -->
88
+ <section id="about" class="py-16 bg-white">
89
+ <div class="container mx-auto px-6">
90
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">About Me</h2>
91
+ <div class="flex flex-col md:flex-row items-center">
92
+ <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
93
+ <div class="w-64 h-64 rounded-full overflow-hidden border-4 border-indigo-500 shadow-lg">
94
+ <img src="https://media.licdn.com/dms/image/v2/D5603AQGZHT4-xINn8w/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1672069896276?e=1758758400&v=beta&t=YNhOVmbz-e7WMq4wV7hSWSWks2jhA78uLolyGMLUTu4" alt="Profile Photo of Amal SP" class="w-full h-full object-cover">
95
+ </div>
96
+ </div>
97
+ <div class="md:w-2/3 md:pl-12">
98
+ <h3 class="text-2xl font-semibold mb-4 text-gray-800">Hello, I'm Amal SP</h3>
99
+ <p class="text-lg mb-6 text-gray-600">
100
+ AI Engineer and Data Scientist with a strong foundation in Generative AI (GenAI), Retrieval-Augmented Generation (RAG), and Large Language Models (LLMs). I specialize in creating scalable, intelligent applications that deliver measurable impact.
101
+ </p>
102
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
103
+ <div class="flex items-center">
104
+ <i class="fas fa-map-marker-alt text-indigo-500 mr-3 text-xl"></i>
105
+ <span class="text-gray-700">Thiruvananthapuram, India</span>
106
+ </div>
107
+ <div class="flex items-center">
108
+ <i class="fas fa-envelope text-indigo-500 mr-3 text-xl"></i>
109
+ <span class="text-gray-700">[email protected]</span>
110
+ </div>
111
+ <div class="flex items-center">
112
+ <i class="fas fa-phone text-indigo-500 mr-3 text-xl"></i>
113
+ <span class="text-gray-700">+91 702569917</span>
114
+ </div>
115
+ <div class="flex items-center">
116
+ <i class="fas fa-graduation-cap text-indigo-500 mr-3 text-xl"></i>
117
+ <span class="text-gray-700">MSc in Data Science</span>
118
+ </div>
119
+ </div>
120
+ <div class="mt-8 flex space-x-4">
121
+ <a href="https://linkedin.com/in/amalsp" target="_blank" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition">
122
+ <i class="fab fa-linkedin-in"></i>
123
+ </a>
124
+ <a href="https://github.com/amalsp" target="_blank" class="bg-gray-800 text-white p-3 rounded-full hover:bg-gray-900 transition">
125
+ <i class="fab fa-github"></i>
126
+ </a>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- Education Section -->
134
+ <section class="py-16 bg-gray-100">
135
+ <div class="container mx-auto px-6">
136
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Education</h2>
137
+ <div class="max-w-3xl mx-auto">
138
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 card-hover transition">
139
+ <div class="p-6">
140
+ <div class="flex justify-between items-start">
141
+ <div>
142
+ <h3 class="text-xl font-semibold text-gray-800">Master of Science in Data Science</h3>
143
+ <p class="text-gray-600">University of Kerala</p>
144
+ </div>
145
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">2022–2024</span>
146
+ </div>
147
+ <div class="mt-4">
148
+ <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">CGPA: 8.0</span>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition">
153
+ <div class="p-6">
154
+ <div class="flex justify-between items-start">
155
+ <div>
156
+ <h3 class="text-xl font-semibold text-gray-800">Bachelor of Mathematics</h3>
157
+ <p class="text-gray-600">University of Kerala</p>
158
+ </div>
159
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">2017–2020</span>
160
+ </div>
161
+ <div class="mt-4">
162
+ <span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">CGPA: 7.0</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <!-- Experience Section -->
171
+ <section id="experience" class="py-16 bg-white">
172
+ <div class="container mx-auto px-6">
173
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Work Experience</h2>
174
+ <div class="max-w-4xl mx-auto space-y-8">
175
+ <!-- Experience 1 -->
176
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-4 border-indigo-500 card-hover transition">
177
+ <div class="p-6">
178
+ <div class="flex flex-col md:flex-row md:justify-between md:items-start">
179
+ <div>
180
+ <h3 class="text-xl font-semibold text-gray-800">AI Engineer Intern</h3>
181
+ <p class="text-gray-600">Forcefriction</p>
182
+ </div>
183
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium mt-2 md:mt-0">Apr 2025 – Present</span>
184
+ </div>
185
+ <div class="mt-4">
186
+ <ul class="space-y-2">
187
+ <li class="flex items-start">
188
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
189
+ <span>Built an AI article generation engine using Mistral 7B, RAG, Streamlit, and FastAPI</span>
190
+ </li>
191
+ <li class="flex items-start">
192
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
193
+ <span>Reduced inference latency by 30% with quantization and batching techniques</span>
194
+ </li>
195
+ <li class="flex items-start">
196
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
197
+ <span>Designed chunk-based prompt engineering for structured article outputs</span>
198
+ </li>
199
+ </ul>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Experience 2 -->
205
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-4 border-indigo-500 card-hover transition">
206
+ <div class="p-6">
207
+ <div class="flex flex-col md:flex-row md:justify-between md:items-start">
208
+ <div>
209
+ <h3 class="text-xl font-semibold text-gray-800">Data Scientist</h3>
210
+ <p class="text-gray-600">Upwork (Freelance)</p>
211
+ </div>
212
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium mt-2 md:mt-0">Nov 2024 – Mar 2025</span>
213
+ </div>
214
+ <div class="mt-4">
215
+ <ul class="space-y-2">
216
+ <li class="flex items-start">
217
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
218
+ <span>Developed ETL pipelines and web scraping solutions for 6+ clients across industries</span>
219
+ </li>
220
+ <li class="flex items-start">
221
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
222
+ <span>Automated data cleaning workflows in Python, Excel, and Google Sheets</span>
223
+ </li>
224
+ <li class="flex items-start">
225
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
226
+ <span>Delivered customized data solutions with 100% client satisfaction rate</span>
227
+ </li>
228
+ </ul>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Experience 3 -->
234
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-l-4 border-indigo-500 card-hover transition">
235
+ <div class="p-6">
236
+ <div class="flex flex-col md:flex-row md:justify-between md:items-start">
237
+ <div>
238
+ <h3 class="text-xl font-semibold text-gray-800">Data Science Intern</h3>
239
+ <p class="text-gray-600">Pramana AyurTech</p>
240
+ </div>
241
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium mt-2 md:mt-0">May 2024 – Dec 2024</span>
242
+ </div>
243
+ <div class="mt-4">
244
+ <ul class="space-y-2">
245
+ <li class="flex items-start">
246
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
247
+ <span>Built an Ayurvedic chatbot using LLMs, LangChain, and LangGraph</span>
248
+ </li>
249
+ <li class="flex items-start">
250
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
251
+ <span>Enhanced reasoning capabilities with prompt chaining and knowledge graph integration</span>
252
+ </li>
253
+ <li class="flex items-start">
254
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
255
+ <span>Contributed to the development of AI-powered traditional medicine solutions</span>
256
+ </li>
257
+ </ul>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- Projects Section -->
266
+ <section id="projects" class="py-16 bg-gray-100">
267
+ <div class="container mx-auto px-6">
268
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Featured Projects</h2>
269
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
270
+ <!-- Project 1 -->
271
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition">
272
+ <div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
273
+ <i class="fas fa-robot text-white text-6xl"></i>
274
+ </div>
275
+ <div class="p-6">
276
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">AI Article Generator</h3>
277
+ <p class="text-gray-600 mb-4">GenAI engine with Mistral 7B, RAG, LangChain, and FAISS for structured article generation</p>
278
+ <div class="flex flex-wrap gap-2 mb-4">
279
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium">Mistral 7B</span>
280
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium">RAG</span>
281
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium">LangChain</span>
282
+ <span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-xs font-medium">FAISS</span>
283
+ </div>
284
+ <div class="flex justify-between items-center">
285
+ <span class="text-sm text-gray-500">Achieved 30% latency reduction</span>
286
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View Details →</a>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Project 2 -->
292
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition">
293
+ <div class="h-48 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center">
294
+ <i class="fas fa-comment-medical text-white text-6xl"></i>
295
+ </div>
296
+ <div class="p-6">
297
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Medical Chatbot</h3>
298
+ <p class="text-gray-600 mb-4">Doctor recommendation chatbot with Gemini-1.5-Flash and semantic search (FAISS)</p>
299
+ <div class="flex flex-wrap gap-2 mb-4">
300
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">Gemini-1.5</span>
301
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">FAISS</span>
302
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">FastAPI</span>
303
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">Streamlit</span>
304
+ </div>
305
+ <div class="flex justify-between items-center">
306
+ <span class="text-sm text-gray-500">Integrated knowledge graphs</span>
307
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View Details →</a>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Project 3: Customer Segmentation -->
313
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition">
314
+ <div class="h-48 bg-gradient-to-r from-blue-500 to-cyan-600 flex items-center justify-center">
315
+ <i class="fas fa-chart-pie text-white text-6xl"></i>
316
+ </div>
317
+ <div class="p-6">
318
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Customer Segmentation</h3>
319
+ <p class="text-gray-600 mb-4">Implemented customer segmentation using K-means clustering with data visualization for targeted marketing</p>
320
+ <div class="flex flex-wrap gap-2 mb-4">
321
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">K-means</span>
322
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">Scikit-learn</span>
323
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">Matplotlib</span>
324
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">Seaborn</span>
325
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">Pandas</span>
326
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">NumPy</span>
327
+ </div>
328
+ <div class="flex justify-between items-center">
329
+ <span class="text-sm text-gray-500">Identified 5 distinct segments for improved strategies</span>
330
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View Details →</a>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Skills Section -->
339
+ <section id="skills" class="py-16 bg-white">
340
+ <div class="container mx-auto px-6">
341
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Technical Skills</h2>
342
+
343
+ <!-- Programming Languages & Data Manipulation -->
344
+ <div class="max-w-4xl mx-auto mb-10">
345
+ <h3 class="text-xl font-semibold mb-4 text-gray-700 flex items-center">
346
+ <i class="fas fa-code mr-2 text-indigo-500"></i> Programming Languages & Data Manipulation
347
+ </h3>
348
+ <div class="flex flex-wrap gap-3">
349
+ <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Python</span>
350
+ <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">SQL</span>
351
+ <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Pandas</span>
352
+ <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">NumPy</span>
353
+ <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">HTML</span>
354
+ <span class="skill-pill bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">CSS</span>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Machine Learning & Deep Learning Frameworks -->
359
+ <div class="max-w-4xl mx-auto mb-10">
360
+ <h3 class="text-xl font-semibold mb-4 text-gray-700 flex items-center">
361
+ <i class="fas fa-cubes mr-2 text-indigo-500"></i> Machine Learning & Deep Learning Frameworks
362
+ </h3>
363
+ <div class="flex flex-wrap gap-3">
364
+ <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">TensorFlow</span>
365
+ <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">PyTorch</span>
366
+ <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">Scikit-learn</span>
367
+ <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">Keras</span>
368
+ <span class="skill-pill bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-medium">Hugging Face Transformers</span>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- AI/ML Tools & Vector Databases -->
373
+ <div class="max-w-4xl mx-auto mb-10">
374
+ <h3 class="text-xl font-semibold mb-4 text-gray-700 flex items-center">
375
+ <i class="fas fa-robot mr-2 text-indigo-500"></i> AI/ML Tools & Vector Databases
376
+ </h3>
377
+ <div class="flex flex-wrap gap-3">
378
+ <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">LangChain</span>
379
+ <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">LangGraph</span>
380
+ <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">FAISS</span>
381
+ <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">Gemini</span>
382
+ <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">Pinecone</span>
383
+ <span class="skill-pill bg-green-100 text-green-800 px-4 py-2 rounded-full text-sm font-medium">OpenAI API</span>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Data Visualization & Specializations -->
388
+ <div class="max-w-4xl mx-auto">
389
+ <h3 class="text-xl font-semibold mb-4 text-gray-700 flex items-center">
390
+ <i class="fas fa-star mr-2 text-indigo-500"></i> Data Visualization & Specializations
391
+ </h3>
392
+ <div class="flex flex-wrap gap-3">
393
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Matplotlib</span>
394
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Seaborn</span>
395
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Tableau</span>
396
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Machine Learning</span>
397
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">NLP</span>
398
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Deep Learning</span>
399
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">LLMs</span>
400
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Prompt Engineering</span>
401
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Web Scraping</span>
402
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">ETL</span>
403
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Predictive Analytics</span>
404
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-4 py-2 rounded-full text-sm font-medium">Clustering Algorithms</span>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </section>
409
+
410
+ <!-- Certifications Section -->
411
+ <section class="py-16 bg-gray-100">
412
+ <div class="container mx-auto px-6">
413
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Certifications</h2>
414
+ <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
415
+ <!-- Certification 1 -->
416
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition">
417
+ <div class="flex items-start">
418
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
419
+ <i class="fas fa-certificate text-indigo-600 text-2xl"></i>
420
+ </div>
421
+ <div>
422
+ <h3 class="text-lg font-semibold text-gray-800">Google Cloud Career Readiness</h3>
423
+ <p class="text-gray-600 text-sm">Google Cloud</p>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Certification 2 -->
429
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition">
430
+ <div class="flex items-start">
431
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
432
+ <i class="fab fa-python text-blue-600 text-2xl"></i>
433
+ </div>
434
+ <div>
435
+ <h3 class="text-lg font-semibold text-gray-800">Python for Everybody Specialization</h3>
436
+ <p class="text-gray-600 text-sm">University of Michigan</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- Certification 3 -->
442
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition">
443
+ <div class="flex items-start">
444
+ <div class="bg-green-100 p-3 rounded-lg mr-4">
445
+ <i class="fas fa-laptop-code text-green-600 text-2xl"></i>
446
+ </div>
447
+ <div>
448
+ <h3 class="text-lg font-semibold text-gray-800">HackerRank Problem Solving (Basic)</h3>
449
+ <p class="text-gray-600 text-sm">HackerRank</p>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Certification 4 -->
455
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 card-hover transition">
456
+ <div class="flex items-start">
457
+ <div class="bg-red-100 p-3 rounded-lg mr-4">
458
+ <i class="fas fa-database text-red-600 text-2xl"></i>
459
+ </div>
460
+ <div>
461
+ <h3 class="text-lg font-semibold text-gray-800">Foundations of Data Science</h3>
462
+ <p class="text-gray-600 text-sm">Google</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </section>
469
+
470
+ <!-- Soft Skills Section -->
471
+ <section class="py-16 bg-white">
472
+ <div class="container mx-auto px-6">
473
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Soft Skills</h2>
474
+ <div class="max-w-2xl mx-auto">
475
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
476
+ <div class="bg-indigo-50 rounded-lg p-4 text-center">
477
+ <i class="fas fa-lightbulb text-indigo-600 text-3xl mb-2"></i>
478
+ <h3 class="font-medium text-gray-800">Adaptive Learning</h3>
479
+ </div>
480
+ <div class="bg-indigo-50 rounded-lg p-4 text-center">
481
+ <i class="fas fa-clock text-indigo-600 text-3xl mb-2"></i>
482
+ <h3 class="font-medium text-gray-800">Time Management</h3>
483
+ </div>
484
+ <div class="bg-indigo-50 rounded-lg p-4 text-center">
485
+ <i class="fas fa-users text-indigo-600 text-3xl mb-2"></i>
486
+ <h3 class="font-medium text-gray-800">Team Collaboration</h3>
487
+ </div>
488
+ <div class="bg-indigo-50 rounded-lg p-4 text-center">
489
+ <i class="fas fa-comments text-indigo-600 text-3xl mb-2"></i>
490
+ <h3 class="font-medium text-gray-800">Communication</h3>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </section>
496
+
497
+ <!-- Contact Section -->
498
+ <section id="contact" class="py-16 gradient-bg text-white">
499
+ <div class="container mx-auto px-6">
500
+ <h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2>
501
+ <div class="max-w-4xl mx-auto">
502
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
503
+ <div>
504
+ <h3 class="text-xl font-semibold mb-4">Contact Information</h3>
505
+ <div class="space-y-4">
506
+ <div class="flex items-start">
507
+ <i class="fas fa-envelope mt-1 mr-4"></i>
508
+ <div>
509
+ <p class="font-medium">Email</p>
510
+ <p>[email protected]</p>
511
+ </div>
512
+ </div>
513
+ <div class="flex items-start">
514
+ <i class="fas fa-phone mt-1 mr-4"></i>
515
+ <div>
516
+ <p class="font-medium">Phone</p>
517
+ <p>+91 702569917</p>
518
+ </div>
519
+ </div>
520
+ <div class="flex items-start">
521
+ <i class="fas fa-map-marker-alt mt-1 mr-4"></i>
522
+ <div>
523
+ <p class="font-medium">Location</p>
524
+ <p>Thiruvananthapuram, India</p>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ <div class="mt-8">
529
+ <h3 class="text-xl font-semibold mb-4">Connect With Me</h3>
530
+ <div class="flex space-x-4">
531
+ <a href="https://linkedin.com/in/amalsp" target="_blank" class="bg-white text-blue-600 p-3 rounded-full hover:bg-blue-50 transition">
532
+ <i class="fab fa-linkedin-in"></i>
533
+ </a>
534
+ <a href="https://github.com/amalsp" target="_blank" class="bg-white text-gray-800 p-3 rounded-full hover:bg-gray-100 transition">
535
+ <i class="fab fa-github"></i>
536
+ </a>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ <div>
541
+ <h3 class="text-xl font-semibold mb-4">Send Me a Message</h3>
542
+ <form class="space-y-4">
543
+ <div>
544
+ <label for="name" class="block mb-1">Name</label>
545
+ <input type="text" id="name" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
546
+ </div>
547
+ <div>
548
+ <label for="email" class="block mb-1">Email</label>
549
+ <input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
550
+ </div>
551
+ <div>
552
+ <label for="message" class="block mb-1">Message</label>
553
+ <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"></textarea>
554
+ </div>
555
+ <button type="submit" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition w-full">Send Message</button>
556
+ </form>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </section>
562
+
563
+ <!-- Footer -->
564
+ <footer class="bg-gray-900 text-white py-8">
565
+ <div class="container mx-auto px-6 text-center">
566
+ <p>© 2024 Amal SP. All rights reserved.</p>
567
+ <p class="mt-2 text-gray-400">AI Engineer & Data Scientist</p>
568
+ </div>
569
+ </footer>
570
+
571
+ <script>
572
+ // Mobile menu toggle
573
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
574
+ const menu = document.getElementById('mobile-menu');
575
+ menu.classList.toggle('hidden');
576
+ });
577
+
578
+ // Smooth scrolling for anchor links
579
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
580
+ anchor.addEventListener('click', function (e) {
581
+ e.preventDefault();
582
+
583
+ const targetId = this.getAttribute('href');
584
+ const targetElement = document.querySelector(targetId);
585
+
586
+ if (targetElement) {
587
+ window.scrollTo({
588
+ top: targetElement.offsetTop - 80,
589
+ behavior: 'smooth'
590
+ });
591
+
592
+ // Close mobile menu if open
593
+ const mobileMenu = document.getElementById('mobile-menu');
594
+ if (!mobileMenu.classList.contains('hidden')) {
595
+ mobileMenu.classList.add('hidden');
596
+ }
597
+ }
598
+ });
599
+ });
600
+ </script>
601
+ </body>
602
+ </html>