Hugging Face's logo

Spaces:
vishnumg
/
vishnu-profile
Running

App Files Community
vishnumg commited on
Commit
247b010
·
verified ·
1 Parent(s): 723a7df

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +714 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vishnu Profile
3
- emoji: 📊
4
  colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: vishnu-profile
3
+ emoji: 🐳
4
  colorFrom: red
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,714 @@
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>Vishnu Mohan G | Creative Technologist</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+
24
+ .project-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+
29
+ .timeline-item:not(:last-child)::after {
30
+ content: '';
31
+ position: absolute;
32
+ left: 1.5rem;
33
+ top: 2rem;
34
+ height: calc(100% - 2rem);
35
+ width: 2px;
36
+ background: #e5e7eb;
37
+ }
38
+
39
+ .skill-pill:hover {
40
+ transform: scale(1.05);
41
+ }
42
+
43
+ .nav-link {
44
+ position: relative;
45
+ }
46
+
47
+ .nav-link::after {
48
+ content: '';
49
+ position: absolute;
50
+ bottom: -2px;
51
+ left: 0;
52
+ width: 0;
53
+ height: 2px;
54
+ background: #3b82f6;
55
+ transition: width 0.3s ease;
56
+ }
57
+
58
+ .nav-link:hover::after {
59
+ width: 100%;
60
+ }
61
+
62
+ .active-nav::after {
63
+ width: 100%;
64
+ }
65
+
66
+ @keyframes float {
67
+ 0%, 100% {
68
+ transform: translateY(0);
69
+ }
70
+ 50% {
71
+ transform: translateY(-10px);
72
+ }
73
+ }
74
+
75
+ .floating {
76
+ animation: float 6s ease-in-out infinite;
77
+ }
78
+ </style>
79
+ </head>
80
+ <body class="bg-gray-50 text-gray-800">
81
+ <!-- Navigation -->
82
+ <nav class="fixed w-full bg-white shadow-sm z-50">
83
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
84
+ <div class="flex justify-between h-16">
85
+ <div class="flex items-center">
86
+ <a href="#" class="text-xl font-bold gradient-text">Vishnu Mohan G</a>
87
+ </div>
88
+ <div class="hidden md:flex items-center space-x-8">
89
+ <a href="#about" class="nav-link">About</a>
90
+ <a href="#skills" class="nav-link">Skills</a>
91
+ <a href="#experience" class="nav-link">Experience</a>
92
+ <a href="#projects" class="nav-link">Projects</a>
93
+ <a href="#contact" class="nav-link">Contact</a>
94
+ </div>
95
+ <div class="md:hidden flex items-center">
96
+ <button id="menu-toggle" class="text-gray-600 hover:text-gray-900">
97
+ <i class="fas fa-bars text-2xl"></i>
98
+ </button>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Mobile menu -->
104
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
105
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
106
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>
107
+ <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Skills</a>
108
+ <a href="#experience" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Experience</a>
109
+ <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Projects</a>
110
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Contact</a>
111
+ </div>
112
+ </div>
113
+ </nav>
114
+
115
+ <!-- Hero Section -->
116
+ <header class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
117
+ <div class="flex flex-col md:flex-row items-center">
118
+ <div class="md:w-1/2 mb-10 md:mb-0">
119
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Vishnu Mohan G</h1>
120
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6 gradient-text">Creative Technologist, Jack of all trades and Master of a few</h2>
121
+ <p class="text-lg text-gray-600 mb-8">Self-taught engineer with expertise across multiple domains including AI, software development, hardware engineering, and creative technology.</p>
122
+ <div class="flex space-x-4">
123
+ <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Contact Me</a>
124
+ <a href="#projects" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300">View Projects</a>
125
+ </div>
126
+ </div>
127
+ <div class="md:w-1/2 flex justify-center">
128
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 p-1 floating">
129
+ <div class="w-full h-full bg-white rounded-full flex items-center justify-center overflow-hidden">
130
+ <div class="text-center p-4">
131
+ <i class="fas fa-laptop-code text-6xl md:text-7xl text-blue-600"></i>
132
+ <p class="mt-4 text-lg font-medium">Creative Technologist</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </header>
139
+
140
+ <!-- About Section -->
141
+ <section id="about" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-white rounded-xl shadow-sm">
142
+ <div class="text-center mb-12">
143
+ <h2 class="text-3xl font-bold mb-4">About Me</h2>
144
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
145
+ </div>
146
+ <div class="flex flex-col md:flex-row">
147
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
148
+ <div class="bg-gray-50 p-6 rounded-lg">
149
+ <h3 class="text-xl font-semibold mb-4">Personal Info</h3>
150
+ <div class="space-y-3">
151
+ <div class="flex items-center">
152
+ <i class="fas fa-map-marker-alt text-blue-600 mr-3"></i>
153
+ <span>Thiruvananthapuram, Kerala</span>
154
+ </div>
155
+ <div class="flex items-center">
156
+ <i class="fas fa-phone-alt text-blue-600 mr-3"></i>
157
+ <span>+91 8848252058</span>
158
+ </div>
159
+ <div class="flex items-center">
160
+ <i class="fas fa-envelope text-blue-600 mr-3"></i>
161
+ <span>[email protected]</span>
162
+ </div>
163
+ </div>
164
+
165
+ <h3 class="text-xl font-semibold mt-8 mb-4">Languages</h3>
166
+ <div class="space-y-2">
167
+ <div>
168
+ <div class="flex justify-between mb-1">
169
+ <span class="font-medium">English</span>
170
+ <span class="text-gray-600">Fluent</span>
171
+ </div>
172
+ <div class="w-full bg-gray-200 rounded-full h-2">
173
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 95%"></div>
174
+ </div>
175
+ </div>
176
+ <div>
177
+ <div class="flex justify-between mb-1">
178
+ <span class="font-medium">Malayalam</span>
179
+ <span class="text-gray-600">Native</span>
180
+ </div>
181
+ <div class="w-full bg-gray-200 rounded-full h-2">
182
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 100%"></div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <h3 class="text-xl font-semibold mt-8 mb-4">Certifications</h3>
188
+ <ul class="space-y-2">
189
+ <li class="flex items-start">
190
+ <i class="fas fa-certificate text-blue-600 mt-1 mr-2"></i>
191
+ <span>Advanced Python - LinkedIn (November 2021)</span>
192
+ </li>
193
+ <li class="flex items-start">
194
+ <i class="fas fa-certificate text-blue-600 mt-1 mr-2"></i>
195
+ <span>React.js Essential Training - LinkedIn (December 2021)</span>
196
+ </li>
197
+ <li class="flex items-start">
198
+ <i class="fas fa-certificate text-blue-600 mt-1 mr-2"></i>
199
+ <span>IoT Foundations: Standards and Ecosystems - LinkedIn (November 2021)</span>
200
+ </li>
201
+ </ul>
202
+ </div>
203
+ </div>
204
+ <div class="md:w-1/2">
205
+ <h3 class="text-xl font-semibold mb-4">Professional Summary</h3>
206
+ <p class="text-gray-700 mb-6">I am a self-taught, creative engineer with expertise in multiple domains including software, electronics, embedded systems, and mechanical engineering. I thrive on cross-domain projects, leveraging my skills and knowledge to solve complex problems from unique angles.</p>
207
+ <p class="text-gray-700 mb-6">I enjoy tinkering with technology, experimenting with DIY projects, and collaborating with others to bring ideas to life. I am ambitious and driven, always seeking to push the boundaries of what is possible through the creative application of engineering principles.</p>
208
+
209
+ <h3 class="text-xl font-semibold mt-8 mb-4">Profiles</h3>
210
+ <div class="flex space-x-4">
211
+ <a href="https://www.linkedin.com/in/vishnu-mohan-g-906b4232" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-lg flex items-center transition duration-300">
212
+ <i class="fab fa-linkedin mr-2"></i> LinkedIn
213
+ </a>
214
+ <a href="https://github.com/vishnu_ace" target="_blank" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg flex items-center transition duration-300">
215
+ <i class="fab fa-github mr-2"></i> GitHub
216
+ </a>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </section>
221
+
222
+ <!-- Skills Section -->
223
+ <section id="skills" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
224
+ <div class="text-center mb-12">
225
+ <h2 class="text-3xl font-bold mb-4">Skills & Expertise</h2>
226
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
227
+ </div>
228
+
229
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
230
+ <!-- AI & ML -->
231
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
232
+ <div class="flex items-center mb-4">
233
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
234
+ <i class="fas fa-brain text-blue-600 text-xl"></i>
235
+ </div>
236
+ <h3 class="text-xl font-semibold">AI & Machine Learning</h3>
237
+ </div>
238
+ <div class="flex flex-wrap gap-2">
239
+ <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Python</span>
240
+ <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">OpenAI</span>
241
+ <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Langchain</span>
242
+ <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Vector DBs</span>
243
+ <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Sagemaker</span>
244
+ <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">OCR</span>
245
+ <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">LLMGuard</span>
246
+ <span class="skill-pill bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm transition duration-300">Autogen</span>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Software Development -->
251
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
252
+ <div class="flex items-center mb-4">
253
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
254
+ <i class="fas fa-code text-purple-600 text-xl"></i>
255
+ </div>
256
+ <h3 class="text-xl font-semibold">Software Development</h3>
257
+ </div>
258
+ <div class="flex flex-wrap gap-2">
259
+ <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">Qt/PySide</span>
260
+ <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">Django</span>
261
+ <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">Flask</span>
262
+ <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">FastAPI</span>
263
+ <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">AWS</span>
264
+ <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">JavaScript</span>
265
+ <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">React.js</span>
266
+ <span class="skill-pill bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm transition duration-300">Node.js</span>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Hardware & Engineering -->
271
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
272
+ <div class="flex items-center mb-4">
273
+ <div class="bg-green-100 p-3 rounded-full mr-4">
274
+ <i class="fas fa-microchip text-green-600 text-xl"></i>
275
+ </div>
276
+ <h3 class="text-xl font-semibold">Hardware & Engineering</h3>
277
+ </div>
278
+ <div class="flex flex-wrap gap-2">
279
+ <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">Embedded Systems</span>
280
+ <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">IoT</span>
281
+ <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">OnShape (CAD)</span>
282
+ <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">TouchDesigner</span>
283
+ <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">Grasshopper</span>
284
+ <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">micropython</span>
285
+ <span class="skill-pill bg-green-50 text-green-700 px-3 py-1 rounded-full text-sm transition duration-300">C++</span>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </section>
290
+
291
+ <!-- Experience Section -->
292
+ <section id="experience" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-white rounded-xl shadow-sm">
293
+ <div class="text-center mb-12">
294
+ <h2 class="text-3xl font-bold mb-4">Professional Experience</h2>
295
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
296
+ </div>
297
+
298
+ <div class="relative">
299
+ <!-- Publicis Sapient -->
300
+ <div class="timeline-item mb-8 pl-10 relative">
301
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
302
+ <i class="fas fa-briefcase"></i>
303
+ </div>
304
+ <div class="bg-gray-50 p-6 rounded-lg">
305
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
306
+ <h3 class="text-xl font-semibold">Senior Associate Data Engineering L2</h3>
307
+ <span class="text-blue-600 font-medium">February 2024 - November 2024</span>
308
+ </div>
309
+ <div class="flex items-center mb-4">
310
+ <span class="font-medium">Publicis Sapient</span>
311
+ <span class="mx-2">•</span>
312
+ <span class="text-gray-600">Bangalore - WFH</span>
313
+ </div>
314
+ <p class="text-gray-700 mb-4">Focused on building Generative AI applications, leveraging:</p>
315
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
316
+ <li><span class="font-medium">RAG (Retrieval-Augmented Generation):</span> Implemented both graph-based RAG and document-based retrieval for enhanced knowledge extraction</li>
317
+ <li><span class="font-medium">Graph RAG:</span> Designed and deployed knowledge graphs for semantic search and retrieval augmentation</li>
318
+ <li><span class="font-medium">NER and NLP:</span> Extracted critical insights using Named Entity Recognition and natural language processing models</li>
319
+ <li><span class="font-medium">Azure OpenAI & Azure AI Search:</span> Utilized Azure's AI services for large language models and enterprise search solutions</li>
320
+ </ul>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Welexit -->
325
+ <div class="timeline-item mb-8 pl-10 relative">
326
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-white">
327
+ <i class="fas fa-briefcase"></i>
328
+ </div>
329
+ <div class="bg-gray-50 p-6 rounded-lg">
330
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-2">
331
+ <h3 class="text-xl font-semibold">Principal Conversational AI Engineer</h3>
332
+ <span class="text-purple-600 font-medium">April 2023 - October 2023</span>
333
+ </div>
334
+ <div class="flex items-center mb-4">
335
+ <span class="font-medium">Welexit</span>
336
+ <a href="https://www.linkedin.com/company/welexit/" target="_blank" class="ml-2 text-blue-600 hover:underline">
337
+ <i class="fas fa-external-link-alt text-sm"></i>
338
+ </a>
339
+ </div>
340
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
341
+ <li>Led the design, development, and deployment of MyLittleLawyer, a legal assistance chatbot</li>
342
+ <li>Integrated GPT-4, Langchain, AWS Lambda, AWS API Gateway and Pinecone for real-time legal query resolution</li>
343
+ <li>Built Document processing pipeline using GCP functions, Google Vision AI, Textract and Google Cloud Storage</li>
344
+ <li>Engineered prompt flows, memory, and fallback systems for robust multi-turn interactions</li>
345
+ <li>Built scalable backend with logging and monitoring for production readiness</li>
346
+ </ul>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Previous Experiences -->
351
+ <div class="timeline-item mb-8 pl-10 relative">
352
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white">
353
+ <i class="fas fa-briefcase"></i>
354
+ </div>
355
+ <div class="bg-gray-50 p-6 rounded-lg">
356
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
357
+ <div>
358
+ <h3 class="text-lg font-semibold mb-2">Senior Product Development Engineer</h3>
359
+ <div class="flex items-center mb-2">
360
+ <span class="font-medium">Tagglabs Technologies Pvt. Ltd.</span>
361
+ <a href="https://tagglabs.in/" target="_blank" class="ml-2 text-blue-600 hover:underline">
362
+ <i class="fas fa-external-link-alt text-sm"></i>
363
+ </a>
364
+ </div>
365
+ <span class="text-gray-600">July 2020 - February 2023</span>
366
+ </div>
367
+ <div>
368
+ <h3 class="text-lg font-semibold mb-2">Creative Technologist, Engineer</h3>
369
+ <div class="flex items-center mb-2">
370
+ <span class="font-medium">Otherlogic Experiential Pvt. Ltd.</span>
371
+ <a href="https://www.otherlogic.in/" target="_blank" class="ml-2 text-blue-600 hover:underline">
372
+ <i class="fas fa-external-link-alt text-sm"></i>
373
+ </a>
374
+ </div>
375
+ <span class="text-gray-600">June 2015 - July 2020</span>
376
+ </div>
377
+ <div>
378
+ <h3 class="text-lg font-semibold mb-2">Software Engineer</h3>
379
+ <div class="flex items-center mb-2">
380
+ <span class="font-medium">Webzler Solutions</span>
381
+ <a href="https://webzler.com/" target="_blank" class="ml-2 text-blue-600 hover:underline">
382
+ <i class="fas fa-external-link-alt text-sm"></i>
383
+ </a>
384
+ </div>
385
+ <span class="text-gray-600">January 2014 - September 2014</span>
386
+ </div>
387
+ <div>
388
+ <h3 class="text-lg font-semibold mb-2">Software Engineer</h3>
389
+ <div class="flex items-center mb-2">
390
+ <span class="font-medium">BridgeCandy Softwares Inc.</span>
391
+ <a href="https://itquality.ca/" target="_blank" class="ml-2 text-blue-600 hover:underline">
392
+ <i class="fas fa-external-link-alt text-sm"></i>
393
+ </a>
394
+ </div>
395
+ <span class="text-gray-600">January 2013 - August 2013</span>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </section>
402
+
403
+ <!-- Projects Section -->
404
+ <section id="projects" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
405
+ <div class="text-center mb-12">
406
+ <h2 class="text-3xl font-bold mb-4">Featured Projects</h2>
407
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
408
+ </div>
409
+
410
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
411
+ <!-- Generative AI Integration to ROC -->
412
+ <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
413
+ <div class="h-48 bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
414
+ <i class="fas fa-robot text-white text-6xl"></i>
415
+ </div>
416
+ <div class="p-6">
417
+ <h3 class="text-xl font-semibold mb-2">Generative AI Integration to ROC</h3>
418
+ <p class="text-gray-600 mb-4">Integration of generative AI features into SBR ROC</p>
419
+ <div class="flex justify-between items-center">
420
+ <span class="text-sm text-gray-500">February 2024 - November 2024</span>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- MyLittleLawyer -->
426
+ <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
427
+ <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center">
428
+ <i class="fas fa-gavel text-white text-6xl"></i>
429
+ </div>
430
+ <div class="p-6">
431
+ <h3 class="text-xl font-semibold mb-2">MyLittleLawyer</h3>
432
+ <p class="text-gray-600 mb-4">A legal chatbot utilizing AWS Lambda, GPT-4 via Langchain, and Pinecone Vector DB</p>
433
+ <div class="flex justify-between items-center">
434
+ <span class="text-sm text-gray-500">April 2023 - October 2023</span>
435
+ <a href="https://mylittlelawyer.ai/?lang=en_us" target="_blank" class="text-blue-600 hover:underline flex items-center">
436
+ View <i class="fas fa-external-link-alt ml-1 text-xs"></i>
437
+ </a>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- MaskupNow -->
443
+ <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
444
+ <div class="h-48 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center">
445
+ <i class="fas fa-head-side-mask text-white text-6xl"></i>
446
+ </div>
447
+ <div class="p-6">
448
+ <h3 class="text-xl font-semibold mb-2">MaskupNow</h3>
449
+ <p class="text-gray-600 mb-4">Contactless mask dispenser developed during COVID-19 pandemic</p>
450
+ <div class="flex justify-between items-center">
451
+ <span class="text-sm text-gray-500">February 2020 - May 2020</span>
452
+ <a href="https://swachhindia.ndtv.com/coronavirus-outbreak-mask-up-now-says-delhi-based-firm-with-their-innovative-contactless-delivery-of-face-masks-45239/" target="_blank" class="text-blue-600 hover:underline flex items-center">
453
+ News <i class="fas fa-external-link-alt ml-1 text-xs"></i>
454
+ </a>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <!-- Baldur -->
460
+ <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
461
+ <div class="h-48 bg-gradient-to-r from-yellow-500 to-orange-600 flex items-center justify-center">
462
+ <i class="fas fa-lightbulb text-white text-6xl"></i>
463
+ </div>
464
+ <div class="p-6">
465
+ <h3 class="text-xl font-semibold mb-2">Baldur at SBIM, Kolkata</h3>
466
+ <p class="text-gray-600 mb-4">India's Largest Animated Chandelier</p>
467
+ <div class="flex justify-between items-center">
468
+ <span class="text-sm text-gray-500">June 2017 - October 2017</span>
469
+ <a href="https://www.youtube.com/watch?v=30XHQcNA1tc" target="_blank" class="text-blue-600 hover:underline flex items-center">
470
+ Video <i class="fas fa-external-link-alt ml-1 text-xs"></i>
471
+ </a>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Rototimeline -->
477
+ <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
478
+ <div class="h-48 bg-gradient-to-r from-red-500 to-pink-600 flex items-center justify-center">
479
+ <i class="fas fa-robot text-white text-6xl"></i>
480
+ </div>
481
+ <div class="p-6">
482
+ <h3 class="text-xl font-semibold mb-2">Rototimeline</h3>
483
+ <p class="text-gray-600 mb-4">Kinetic Interactive Information Display</p>
484
+ <div class="flex justify-between items-center">
485
+ <span class="text-sm text-gray-500">January 2017 - February 2017</span>
486
+ <a href="https://www.youtube.com/watch?v=cfw_q3sM_6w" target="_blank" class="text-blue-600 hover:underline flex items-center">
487
+ Demo <i class="fas fa-external-link-alt ml-1 text-xs"></i>
488
+ </a>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Pledge @ Skill India -->
494
+ <div class="project-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
495
+ <div class="h-48 bg-gradient-to-r from-indigo-500 to-blue-600 flex items-center justify-center">
496
+ <i class="fas fa-handshake text-white text-6xl"></i>
497
+ </div>
498
+ <div class="p-6">
499
+ <h3 class="text-xl font-semibold mb-2">Pledge @ Skill India</h3>
500
+ <p class="text-gray-600 mb-4">Touch screen application integrated with SMS and eMail gateways</p>
501
+ <div class="flex justify-between items-center">
502
+ <span class="text-sm text-gray-500">April 2017 - October 2017</span>
503
+ <a href="https://www.youtube.com/watch?v=DPtz_H9S5E8" target="_blank" class="text-blue-600 hover:underline flex items-center">
504
+ Video <i class="fas fa-external-link-alt ml-1 text-xs"></i>
505
+ </a>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </section>
511
+
512
+ <!-- Education Section -->
513
+ <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-white rounded-xl shadow-sm">
514
+ <div class="text-center mb-12">
515
+ <h2 class="text-3xl font-bold mb-4">Education</h2>
516
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
517
+ </div>
518
+
519
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
520
+ <div class="bg-gray-50 p-6 rounded-lg">
521
+ <h3 class="text-xl font-semibold mb-2">PRS College Of Engineering and Technology</h3>
522
+ <p class="text-gray-600 mb-2">Electronics and Communication - B.Tech</p>
523
+ <p class="text-gray-500">2008 - 2010 (Dropout)</p>
524
+ </div>
525
+
526
+ <div class="bg-gray-50 p-6 rounded-lg">
527
+ <h3 class="text-xl font-semibold mb-2">Technical Higher Secondary School, Muttada</h3>
528
+ <p class="text-gray-600 mb-2">Plus Two</p>
529
+ <p class="text-gray-500">2008 - 2010</p>
530
+ </div>
531
+ </div>
532
+ </section>
533
+
534
+ <!-- Contact Section -->
535
+ <section id="contact" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
536
+ <div class="text-center mb-12">
537
+ <h2 class="text-3xl font-bold mb-4">Get In Touch</h2>
538
+ <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div>
539
+ </div>
540
+
541
+ <div class="flex flex-col md:flex-row gap-8">
542
+ <div class="md:w-1/2">
543
+ <div class="bg-white p-8 rounded-xl shadow-sm">
544
+ <h3 class="text-xl font-semibold mb-6">Contact Information</h3>
545
+ <div class="space-y-4">
546
+ <div class="flex items-start">
547
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
548
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
549
+ </div>
550
+ <div>
551
+ <h4 class="font-medium">Location</h4>
552
+ <p class="text-gray-600">Thiruvananthapuram, Kerala</p>
553
+ </div>
554
+ </div>
555
+ <div class="flex items-start">
556
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
557
+ <i class="fas fa-phone-alt text-blue-600"></i>
558
+ </div>
559
+ <div>
560
+ <h4 class="font-medium">Phone</h4>
561
+ <p class="text-gray-600">+91 8848252058</p>
562
+ </div>
563
+ </div>
564
+ <div class="flex items-start">
565
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
566
+ <i class="fas fa-envelope text-blue-600"></i>
567
+ </div>
568
+ <div>
569
+ <h4 class="font-medium">Email</h4>
570
+ <p class="text-gray-600">[email protected]</p>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="mt-8">
576
+ <h3 class="text-xl font-semibold mb-4">Connect With Me</h3>
577
+ <div class="flex space-x-4">
578
+ <a href="https://www.linkedin.com/in/vishnu-mohan-g-906b4232" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
579
+ <i class="fab fa-linkedin-in"></i>
580
+ </a>
581
+ <a href="https://github.com/vishnu_ace" target="_blank" class="bg-gray-100 hover:bg-gray-200 text-gray-800 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
582
+ <i class="fab fa-github"></i>
583
+ </a>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="md:w-1/2">
590
+ <div class="bg-white p-8 rounded-xl shadow-sm">
591
+ <h3 class="text-xl font-semibold mb-6">Send Me a Message</h3>
592
+ <form class="space-y-4">
593
+ <div>
594
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
595
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
596
+ </div>
597
+ <div>
598
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Your Email</label>
599
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
600
+ </div>
601
+ <div>
602
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
603
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
604
+ </div>
605
+ <div>
606
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
607
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"></textarea>
608
+ </div>
609
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition duration-300">Send Message</button>
610
+ </form>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </section>
615
+
616
+ <!-- Footer -->
617
+ <footer class="bg-gray-900 text-white py-8 px-4 sm:px-6 lg:px-8">
618
+ <div class="max-w-7xl mx-auto">
619
+ <div class="flex flex-col md:flex-row justify-between items-center">
620
+ <div class="mb-4 md:mb-0">
621
+ <p class="text-xl font-bold gradient-text">Vishnu Mohan G</p>
622
+ <p class="text-gray-400">Creative Technologist, Jack of all trades and Master of a few</p>
623
+ </div>
624
+ <div class="flex space-x-6">
625
+ <a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a>
626
+ <a href="#skills" class="text-gray-400 hover:text-white transition duration-300">Skills</a>
627
+ <a href="#experience" class="text-gray-400 hover:text-white transition duration-300">Experience</a>
628
+ <a href="#projects" class="text-gray-400 hover:text-white transition duration-300">Projects</a>
629
+ <a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a>
630
+ </div>
631
+ </div>
632
+ <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-400">
633
+ <p>&copy; 2024 Vishnu Mohan G. All rights reserved.</p>
634
+ </div>
635
+ </div>
636
+ </footer>
637
+
638
+ <!-- Back to Top Button -->
639
+ <button id="back-to-top" class="fixed bottom-6 right-6 bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300">
640
+ <i class="fas fa-arrow-up"></i>
641
+ </button>
642
+
643
+ <script>
644
+ // Mobile menu toggle
645
+ document.getElementById('menu-toggle').addEventListener('click', function() {
646
+ document.getElementById('mobile-menu').classList.toggle('hidden');
647
+ });
648
+
649
+ // Smooth scrolling for navigation links
650
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
651
+ anchor.addEventListener('click', function(e) {
652
+ e.preventDefault();
653
+
654
+ const targetId = this.getAttribute('href');
655
+ const targetElement = document.querySelector(targetId);
656
+
657
+ if (targetElement) {
658
+ window.scrollTo({
659
+ top: targetElement.offsetTop - 80,
660
+ behavior: 'smooth'
661
+ });
662
+
663
+ // Close mobile menu if open
664
+ document.getElementById('mobile-menu').classList.add('hidden');
665
+ }
666
+ });
667
+ });
668
+
669
+ // Highlight active navigation link
670
+ window.addEventListener('scroll', function() {
671
+ const sections = document.querySelectorAll('section');
672
+ const navLinks = document.querySelectorAll('.nav-link');
673
+
674
+ let currentSection = '';
675
+
676
+ sections.forEach(section => {
677
+ const sectionTop = section.offsetTop;
678
+ const sectionHeight = section.clientHeight;
679
+
680
+ if (window.scrollY >= sectionTop - 100) {
681
+ currentSection = section.getAttribute('id');
682
+ }
683
+ });
684
+
685
+ navLinks.forEach(link => {
686
+ link.classList.remove('active-nav');
687
+ if (link.getAttribute('href') === `#${currentSection}`) {
688
+ link.classList.add('active-nav');
689
+ }
690
+ });
691
+ });
692
+
693
+ // Back to top button
694
+ const backToTopButton = document.getElementById('back-to-top');
695
+
696
+ window.addEventListener('scroll', function() {
697
+ if (window.scrollY > 300) {
698
+ backToTopButton.classList.remove('opacity-0', 'invisible');
699
+ backToTopButton.classList.add('opacity-100', 'visible');
700
+ } else {
701
+ backToTopButton.classList.remove('opacity-100', 'visible');
702
+ backToTopButton.classList.add('opacity-0', 'invisible');
703
+ }
704
+ });
705
+
706
+ backToTopButton.addEventListener('click', function() {
707
+ window.scrollTo({
708
+ top: 0,
709
+ behavior: 'smooth'
710
+ });
711
+ });
712
+ </script>
713
+ <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=vishnumg/vishnu-profile" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
714
+ </html>