-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
735 lines (578 loc) · 36 KB
/
Copy pathindex.html
File metadata and controls
735 lines (578 loc) · 36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Karine Tan's Portfolio</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<!-- <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/workExperience.css" />
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div id="mobile-menu-open" class="shadow-large">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<!-- End #mobile-menu-toggle -->
<header id="sticky-header">
<div id="mobile-menu-close">
<span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
</div>
<ul id="menu">
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#education">Education</a>
</li>
<li>
<a href="#experience">Experience</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</header>
<!-- End header -->
<!-- Start Lead -->
<div id="lead">
<div id="lead-content">
<h1>Hi, I’m Karine 👋</h1>
<h2>data science leader building valuable AI/ML products</h2>
<p>
With 10+ years of coding experience and 5+ years of industry experience at L’Oréal and J&J,
I’ve worked across the full lifecycle: from supply chain optimization to consumer-facing intelligence.
</p>
</div>
<div id="lead-overlay"></div>
<div id="lead-down">
<span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</span>
</div>
</div>
<!-- End #lead -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2 class="heading">About Me</h2>
</div>
<div class="col-md-8">
<p>
<!-- <b> Data Science | MSc Computer Science | 7+ Years Coding Experience | ML, LLMs, and Data Products </b><br><br> -->
<!--
Hi, I’m Karine! I'm a data scientist who enjoys turning messy data into practical, real-world solutions.
<br><br>
I’ve been coding since 2017 across business functions - from customer analytics to supply chain operations.
All the while, focusing on bridging the gap between data, machine learning, and business impact.
<br><br>
I build data science and ML systems end to end, from experimentation and modeling to production-ready analytics tools.
My work includes predictive modeling, experimentation frameworks, and LLM-powered applications designed for real use, not just demos.
<br><br>
Always learning, always building. Let's connect:
-->
I enjoy bringing structure to ambiguity, partnering across functions, and turning data into products, decisions, and measurable outcomes that matter.
My work includes predictive forecasting, LLM-powered applications, recommendation platforms that delivered real value, not just demos.<br><br>
If you’re building at the intersection of data, product, and business, let’s connect!
<br><br>
<div class="social-icons">
<a href="https://www.linkedin.com/in/karine-tan-kang-ting/" target="_blank" rel="noopener noreferrer">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</a>
<a href="mailto:karinetan95@gmail.com" target="_blank" rel="noopener noreferrer">
<i class="fa fa-envelope" aria-hidden="true"></i>
</a>
</div>
<!-- What I Do: <br>
I’m eager to grow through new challenges
I'm a lifelong learner, hence did Master’s of Science in Computer Science and I’m eager to grow through building more data solutions. Let's connect:
• Build Scalable Data Solutions: From prototyping ML models to deploying them in production (MLOps)
<br>
• Solve Business Problems: Optimize processes, uncover patterns, and drive decisions with data
<br>
• Lifelong Learner: Pursuing a Master’s in Computer Science to deepen my expertise in AI/ML systems
-->
</p>
</div>
</div>
</div>
</div>
<!-- End #about -->
<!-- Modal container -->
<div id="projectModal" class="modal" style="display:none;">
<div class="modal-content">
<span class="close-btn">×</span>
<h2 id="modal-title"></h2>
<p id="modal-description"></p>
<ul id="modal-highlights"></ul>
<p id="modal-tools"></p>
</div>
</div>
<div id="projects" class="background-alt">
<h2 class="heading">Recent Projects</h2>
<!-- <br> Here are some of my recent projects — feel free to explore under ‘Click for More’: <br><br> -->
<div class="container">
<div class="row">
<div class="project shadow-large" style="box-shadow: 0 8px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);">
<div class="project-image">
<img src="images/gpt_cover.png" />
</div>
<!-- End .project-image -->
<div class="project-info">
<h3><b>LLM Enterprise Chatbot</b></h3>
<p>
<!-- LLM-powered chatbot enabled L'Oreal teams to query documents (incl. catalogs, SOPs)
via natural language. Enabled scalable self-service, time savings, and reduced knowledge gaps. -->
AI knowledge chatbot built with an agentic MCP & RAG architecture.
Designed to efficiently surface accurate, context-aware answers from L'Oreal's enterprise knowledge base
<!-- <br> <br> Achieved high utilisation with 100+ monthly active users -->
<div class="tech-icons"> <i> Tools:
<span title="MCP"><i class="fa fa-cogs" aria-hidden="true"></i> MCP</span>
<span title="MCP"><i class="fa fa-cogs" aria-hidden="true"></i> RAG</span>
<span title="Claude, Gemini, GPT"><i class="fa fa-code" aria-hidden="true"></i> Claude, Gemini, OpenAI models</span>
<span title="Cloudrun"><i class="fa fa-cloud" aria-hidden="true"></i> GCP</span> </i>
</div>
</p>
<a href="#gpt" onclick="openModal('gpt')" style="text-decoration: none;"><button style="padding: 12px 28px; border-radius: 50px; background: linear-gradient(135deg, #1a1a2e, #2e4a7a); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 4px 14px rgba(0,0,0,0.25)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.2)';">Click for More</button></a>
<!-- darker shadow <a href="#gpt" onclick="openModal('gpt')" style="text-decoration: none;"><button style="padding: 12px 28px; border-radius: 50px; background: linear-gradient(135deg, #1a1a2e, #2e4a7a); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 6px 28px rgba(0,0,0,0.4)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.3)';">Click for More</button></a> -->
<!-- <a href="#gpt" onclick="openModal('gpt')" style="font-size: 1.22em;">Click for More</a></b> -->
</div>
<!-- End .project-info -->
</div>
<!-- End .project -->
<!-- <div class="project shadow-large"> -->
<div class="project shadow-large" style="box-shadow: 0 8px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);">
<div class="project-image">
<img src="images/forecast_cover.png" />
</div>
<!-- End .project-image -->
<div class="project-info" >
<h3><b>AI/ML Demand Forecasting</b></h3>
<p>
Built AI/ML demand forecasting platform to optimise inventory production -
using key demand drivers including historical data, future pricing & promotion plans, market trends & more
<br><br> Won L'Oreal's Global Tech Blazer Award
<div class="tech-icons"> <i> Tools:
<span title="Python"><i class="fab fa-python" aria-hidden="true"></i> Python</span>
<span title="Python"><i class="fab fa-python" aria-hidden="true"></i> PyTorch</span>
<!-- <span title="Vertex AI"><i class="fa fa-code" aria-hidden="true"></i> LGBM, TFT models</span> -->
<span title="GCP"><i class="fa fa-cloud" aria-hidden="true"></i> Google Cloud Platform</span> </i>
<span title="React"><i class="fa fa-cogs" aria-hidden="true"></i> MLflow </span>
</div>
</p>
<a href="#forecast" onclick="openModal('forecast')" style="text-decoration: none;"><button style="padding: 12px 28px; border-radius: 50px; background: linear-gradient(135deg, #1a1a2e, #2e4a7a); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 4px 14px rgba(0,0,0,0.25)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.2)';">Click for More</button></a>
</div>
<!-- End .project-info -->
</div>
<!-- End .project -->
<div class="project shadow-large" style="box-shadow: 0 8px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);">
<div class="project-image">
<img src="images/rec_cover.png" />
</div>
<!-- End .project-image -->
<div class="project-info">
<h3><b>Recommendation Engine</b></h3>
<p>
Developed personalised recommendation engine for next-best-action commercial insights,
increasing sales force efficiency & generating sales uplift
<div class="tech-icons"> <i> Tools:
<span title="GCP"><i class="fa fa-cloud" aria-hidden="true"></i> AWS Cloud</span> </i>
<span title="LangChain"><i class="fa fa-cogs" aria-hidden="true"></i> Kubernetes </span>
<span title="OpenAI"><i class="fa fa-cogs" aria-hidden="true"></i> Docker</span>
</div>
</p>
<a href="#reco" onclick="openModal('reco')" style="text-decoration: none;"><button style="padding: 12px 28px; border-radius: 50px; background: linear-gradient(135deg, #1a1a2e, #2e4a7a); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 4px 14px rgba(0,0,0,0.25)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.2)';">Click for More</button></a>
</div>
<!-- End .project-info -->
</div>
<!-- End .project -->
</div>
</div>
</div>
<!-- End #projects -->
<!-- Start #education -->
<div id="education">
<h2 class="heading">Education</h2>
<div class="education-block">
<h3>Georgia Institute of Technology</h3>
<!-- <span class="education-date">Sept 2016 - Sept 2017</span> -->
<h4>Master of Science in Computer Science</h4>
<ul>
<li>
Specialization in Machine Learning – GPA: 3.5/4
</ul>
</p>
</div>
<div class="education-block">
<h3>University of Singapore</h3>
<!-- <span class="education-date">Sept 2016 - Sept 2017</span> -->
<h4>BBA, specialization in Business Analytics</h4>
<ul>
<li>
First Class Honours - GPA: 4.6/5
</li>
<li>
Achieved 3 Dean’s List awards (2018, 2019, 2020), awarded to top 5% of cohort
</li>
</ul>
</div>
</div>
<!-- End #education -->
<!-- Start #Experience -->
<div id="experience" class="background-alt">
<h2 class="heading">Experience</h2>
<div style="text-align: center;">
<img src="images/work_greybg_2026.png" alt="Work Icon" style="max-width: 100%; height: auto;" />
<br>
</div>
<!-- <div class="experience-container" id="workExperience">
<div class="experience-cards-div">
<div class="experience-card">
<img src="assets/images/facebookLogo.png" alt="Facebook Logo" />
<h3>Software Engineer</h3>
<p class="company">Facebook</p>
<p class="date">June 2018 – Present</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
</div>
</div>
-->
<!--
<div id="experience-timeline">
<div data-date="September 2015 – September 2016">
<h3>Employer Name</h3>
<h4>Job Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex. Etiam volutpat laoreet urna. Morbi ut tortor nec nulla commodo malesuada sit amet vel lacus. Fusce eget efficitur libero. Morbi dapibus porta quam laoreet placerat.
</p>
</div>
<div data-date="September 2015 – September 2016">
<h3>Employer Name</h3>
<h4>Job Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex. Etiam volutpat laoreet urna. Morbi ut tortor nec nulla commodo malesuada sit amet vel lacus. Fusce eget efficitur libero. Morbi dapibus porta quam laoreet placerat.
</p>
</div>
<div data-date="September 2015 – September 2016">
<h3>Employer Name</h3>
<h4>Job Title</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex. Etiam volutpat laoreet urna. Morbi ut tortor nec nulla commodo malesuada sit amet vel lacus. Fusce eget efficitur libero. Morbi dapibus porta quam laoreet placerat.
</p>
</div>
</div>
-->
</div>
<!-- End #experience -->
<!-- Start #skills -->
<div id="skills">
<h2 class="heading">Skills</h2>
<br> Here are some tools that I've used most frequently in live, production pipelines:
<br><br>
<ul>
<li>LangChain</li>
<li>TensorFlow</li>
<li>PyTorch</li>
<li>Scikit-learn</li>
<li>Python</li>
<li>A/B testing</li>
<!-- <li>Pyspark</li> -->
<li>RAG</li>
<li>Fine-tuning</li>
<li>MCP</li>
<li>SQL</li>
<li>GCP - Vertex Ai, BigQuery</li>
<li>AWS - Elasticsearch, S3, RedShift</li>
<li>Airflow</li>
<li>Kubernetes</li>
<li>Docker</li>
<li>MLflow</li>
<!-- <li>PowerBI</li> -->
</ul>
</div>
<!-- End #skills -->
<div id="contact">
<h2>Get in Touch</h2>
<div id="contact-form">
<form method="POST" action="https://formspree.io/f/xanjlgyn">
<input type="hidden" name="_subject" value="Contact request from personal website" />
<input type="email" name="_replyto" placeholder="Your email" required>
<textarea name="message" placeholder="Your message" required></textarea>
<button type="submit">Send</button>
</form>
</div>
<!-- End #contact-form -->
</div>
<!-- End #contact -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-5 copyright">
<p>
built by © <span id="current-year"></span> Karine Tan
</p>
</div>
<div class="col-sm-2 top">
<span id="to-top">
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</span>
</div>
<div class="col-sm-5 social">
<ul>
<li>
<a href="https://www.linkedin.com/in/karine-tan-kang-ting/" target="_blank"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
</li>
<li>
<a href="mailto:karinetan95@gmail.com" target="_blank" rel="noopener noreferrer"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- End footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scripts.min.js"></script>
<script>
const modal = document.getElementById('projectModal');
const closeBtn = modal.querySelector('.close-btn');
const projectsData = {
// Teams struggle to quickly find accurate information across numerous, complex documents sets, slowing decision-making and operations.
// Teams struggled to quickly find accurate information across numerous, complex document sets (including SOPs, internal wikis, catalogs) slowing decision-making and daily operations.
//<br><br>Employees needed a more intuitive and reliable way to access company knowledge. This tool empowers them to query internal documents naturally, with responses citing official sources to ensure accuracy and compliance.
//<br><br>For example, queries about operations processes are backed with references from SOP documents.
// Built an LLM-powered chatbot using LangChain and OpenAI to enable natural language queries over SOPs, catalogs, and internal documentation. Indexed thousands of records, deployed on Google Cloud Platform (GCP), and integrated with a Python + SQL backend for scalable data retrieval
// Tool received high utilisation with 100+ monthly active users with consistent positive feedback.
// <br> <b>Problem: </b>
// <p>Large enterprises like L'Oréal operate across <strong>30+ markets with thousands of employees</strong>, making it difficult to:</p>
// <ul>
// <li>Access institutional knowledge quickly <em>(buried in documents, wikis, reports)</em></li>
// <li>Scale expertise consistently across regions <em>(APAC, MENA, ANZ, etc.)</em></li>
// <li>Get fast, accurate answers without relying on specific people</li>
// </ul>
// <img src="images/gpt.png" alt="Chatbot Screenshot" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
// <img src="images/gpt_info4.png" alt="Chatbot Screenshot" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
// <img src="images/gpt_info5.png" alt="Chatbot Screenshot" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
ml: null,
gpt: {
title: 'LLM Chatbot for Enterprise Knowledge',
description: `
<img src="images/gpt_demo.gif" alt="Chatbot Screenshot" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
<ul>
<li><b>Agentic architecture with Sub-agents</em></li> </b>
<p>Initially built an enterprise RAG chatbot indexing <strong>~3,000 documents</strong> across all departments. Faced 3 issues:</p>
<ul>
<li><strong>Poor retrieval quality:</strong> Retrieved irrelevant chunks from unrelated departments</li>
<li><strong>Knowledge synchronization:</strong> Documentation lived across multiple platforms <em>(SharePoint, Kwik)</em></li>
<li><strong>Limited capabilities:</strong> Traditional RAG could only search documents and couldn't access live enterprise systems or structured data.</li>
</ul> <br>
Hence, shifted to an agentic architecture:
<img src="images/gpt_soln2.png" alt="Chatbot Screenshot" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
<br><br>
Using MCP for tool integration was a turning point. Compared to ad-hoc API wiring, MCP gave each agent a structured, standardised way to call external tools like the Elium API - making the system far easier to extend and maintain.
<br><br>
<li><b>Fine-Tuning was used to ensure responses are Fully Cited:</em></li></b>
<img src="images/gpt_cited.png" alt="Chatbot Screenshot" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
</ul>
<b>What I Learnt: </b> <br>
<ul>
Designing multi-agent systems forced me to think beyond model selection, the hard part is defining clean boundaries between agents. Each agent needs a well-scoped retrieval strategy, predictable failure modes, and a clear handoff protocol, otherwise errors cascade silently and are difficult to debug in production
<br><br>
On the infrastructure side, optimising inference pipelines taught me that latency isn't just a technical metric, it directly affects whether users trust and adopt the tool. A response that takes too long feels unreliable, regardless of accuracy.
<br><br>
I tackled this through three key strategies: <br>
<ul>
<li><strong>Semantic caching</strong>: frequently asked queries are matched against a pre-built Q&A database in BigQuery. Similar queries bypass the LLM entirely, delivering near-instant, accurate responses</li>
<li><strong>Cross-encoder re-ranking</strong>: instead of passing 30 retrieved chunks (~15K tokens) directly to the LLM, a re-ranker filters it down to the top 10 chunks - achieving 67% reduction in context size</li>
<li><strong>Response streaming</strong>: tokens are streamed to the user in real time, making the experience feel significantly faster and more interactive</li>
</ul>
<br>
Overall, the difference in user experience was immediately noticeable - receiving great user feedback & adoption!
</ul>
<hr>
`,
tools: '<div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;"><a href="#projects" onclick="document.getElementById(\'projectModal\').style.display=\'none\'" style="text-decoration: none;"><button style="padding: 16px 36px; border-radius: 50px; background: linear-gradient(135deg, #1a1a2e, #2e4a7a); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; gap: 10px;" onmouseover="this.style.transform=\'scale(1.05)\'; this.style.boxShadow=\'0 6px 28px rgba(0,0,0,0.4)\';" onmouseout="this.style.transform=\'scale(1)\'; this.style.boxShadow=\'0 4px 20px rgba(0,0,0,0.3)\';">EXPLORE MORE PROJECTS</button></a></div>'
},
// <img src="images/image006.png" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
// <b>Approach: </b> <br>
// <ul><li>
// Designed and productionized a multi-agent LLM webapp orchestrated via MCP - including RAG retrieval agent over Google Cloud Storage for document-based queries, and a live Elium API search agent that surfaces and cites real-time knowledge base results
// <br><br>
// Integrated Claude, Gemini, and GPT models
// <br><br>
// </li></ul>
// <b>Result: </b> <br>
// <ul><li> Optimised inference pipelines to reduce latency by 15%, achieving >90% answer relevance across 120+ monthly active users
// </li></ul>
forecast: {
title: 'AI/ML Demand Forecasting',
description: `
<br> <b>The Problem: </b> <br> <ul><li>
Production planning teams were relying on <b>manual Excel-based forecasting...</b> this process that was not only time-consuming but also prone to <b>human error</b>. The result? <b>Excess inventory</b> tying up capital, and <b>missed sales opportunities</b> when demand was underestimated. In a fast-moving beauty market with
<b>hundreds of SKUs</b>, this wasn't sustainable
</li></ul>
<br>
<b>The Solution: </b> <br><br>
The goal was to build the <b>right model for each type of product</b>, because not all SKUs behave the same way
<br><br>
<ul>
<li>⚡ <b>LightGBM (stable SKUs)</b>
<br>
For high-volume, stable products, speed and reliability were everything. A LightGBM model retrained every week kept forecasts fresh without heavy compute costs.
<br><br>The real differentiator was <b>SHAP explainability</b>. With this, when a stakeholder asks <i>"why is the model predicting a spike next month?"</i> , there's a clear, visual answer:
</li>
<br> <img src="images/image009.png" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
<br><i> Included clear breakdown of Demand drivers </i>
<br><br><br>
<li>🔮 <b>Temporal Fusion Transformer (new launch, long-tail SKUs) </b>
<br>
New product launches and long-tail SKUs were the toughest challenge for demand planners. These products have <i>no history, no signal, no safety net</i>. For these cold-start SKUs and complex seasonal products such as holiday gift sets, I utilised <b>Temporal Fusion Transformer (TFT)</b>, a state-of-the-art deep learning architecture designed specifically for time series.
<br><br>
It could <b>automatically detect seasonality, include future inputs </b> (e.g marketing promo spend) & <b> output confidence intervals</b>, giving planners a range of likely futures to make smarter decisions
</li>
<br>
<img src="images/image007.png" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
</ul>
<br>
<b><i>Data quality tab to flag missing data in advance: </b></i> <br>
<br> <img src="images/image013.png" style="max-width: 95%; border-radius: 17px; height: auto; margin-bottom: 16px;">
</li></ul>
<br><br>
<b>The Impact: </b> <br>
What was once a <i>slow, spreadsheet-driven guessing game</i> became an <b>automated, intelligent forecasting engine</b> - producing best-in-class forecasting and eventually winning <b>L'Oreal's Global Tech Blazer Award</b>
<br>
<ul>
<li>✅ <b>Faster</b> planning cycles</li>
<li>✅ <b>Leaner</b> inventory</li>
<li>✅ <b>Fewer</b> missed sales windows</li>
<li>✅ Forecasts that stakeholders actually <b>understood and trusted</b></li>
</ul>
<br>
<i>Behind the models was just as much people work as technical work. Aligning supply chain planners, commercial teams, and leadership around a new way of forecasting required constant communication, iteration and trust!</i>
<hr>
`,
tools: '<div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;"><a href="#projects" onclick="document.getElementById(\'projectModal\').style.display=\'none\'" style="text-decoration: none;"><button style="padding: 16px 36px; border-radius: 50px; background: linear-gradient(135deg, #1a1a2e, #2e4a7a); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; gap: 10px;" onmouseover="this.style.transform=\'scale(1.05)\'; this.style.boxShadow=\'0 6px 28px rgba(0,0,0,0.4)\';" onmouseout="this.style.transform=\'scale(1)\'; this.style.boxShadow=\'0 4px 20px rgba(0,0,0,0.3)\';">EXPLORE MORE PROJECTS</button></a></div>'
},
reco: {
title: 'Personalized Recommendation Engine',
description: `
<br> <b>The Problem: </b> <br>
<ul><li>
With <b>300+ sales reps</b> and <b>10,000+ healthcare professionals (HCPs)</b> across different markets, J&J's commercial teams faced an impossible question every day:
<br><br>
<i>"Who do I call? What do I say? How often? Through which channel?"</i>
<br><br>
Left to intuition, reps would naturally gravitate toward the same familiar doctors, the same content, the same habits... leaving significant sales uplift on the table.
</li></ul>
<b>The Solution: </b>
<br>
<ul><li>
For every Sales Rep and Doctor pair, the goal is to predict the expected sales uplift for each possible (channel, content, frequency) combination, and surface the highest-scoring one.
<br><br>
🧠 <b>The Model: Deep Neural Network</b>
<br>
With thousands of reps and HCPs, traditional one-hot encoding would create an explosively large, sparse feature space. Instead, I designed a neural network with:
<br>
<ul>
<li><b>Embedding layers</b> representing each rep and doctor as a dense vector, where <i>similar doctors get similar representations</i>, learned directly from the data</li>
<li><b>MLP layers</b> to capture complex interactions between rep, doctor, and action features</li>
<li><b>Regression output</b> predicting continuous sales uplift for each combination</li>
</ul>
<br>
</li></ul>
<b>The Impact: </b>
<br>
<ul>
<li>✅ Integrated directly into <b>business workflows</b> for real-time personalization at scale</li>
<li>🏆 <b> Achieved highest YoY growth</b></li>
<li>🧑 <b>10,000+ HCPs</b> across multiple markets</li>
</ul>
<br>
The initial model was quick to build. The real challenge was building something robust enough to work across 300+ sales reps and markets that behaved differently. Every assumption got stress-tested. Every edge case had to be handled... That's exactly the kind of problem worth solving though. <br>
<hr> <br>
`,
tools: '<div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;"><a href="#projects" onclick="document.getElementById(\'projectModal\').style.display=\'none\'" style="text-decoration: none;"><button style="padding: 16px 36px; border-radius: 50px; background: linear-gradient(135deg, #1a1a2e, #2e4a7a); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; gap: 10px;" onmouseover="this.style.transform=\'scale(1.05)\'; this.style.boxShadow=\'0 6px 28px rgba(0,0,0,0.4)\';" onmouseout="this.style.transform=\'scale(1)\'; this.style.boxShadow=\'0 4px 20px rgba(0,0,0,0.3)\';">EXPLORE MORE PROJECTS</button></a></div>'
}
// reco: {
// title: 'Personalized Recommendation Engine',
// tools: 'Python, Scikit-learn, Collaborative Filtering, Content-Based Filtering',
// description: 'Built a recommendation engine leveraging collaborative and content-based filtering to deliver personalized product suggestions, improving user engagement and conversion rates.',
// highlights: [
// 'Integrated user behavior, product metadata, and market trends for tailored recommendations.',
// 'Achieved a 20% uplift in click-through rates and 15% increase in sales conversions.',
// 'Implemented scalable pipeline using Python and optimized algorithms for real-time suggestions.',
// 'Enhanced user experience with relevant, timely product discovery.'
// ]
// }
};
projectsData.ml = projectsData.forecast;
function openModal(projectKey) {
const data = projectsData[projectKey];
if (!data) return;
modal.style.display = 'flex';
modal.querySelector('#modal-title').textContent = data.title;
modal.querySelector('#modal-tools').innerHTML = `${data.tools}`;
modal.querySelector('#modal-description').innerHTML = data.description;
const highlightsUl = modal.querySelector('#modal-highlights');
highlightsUl.innerHTML = '';
if (data.highlights) {
data.highlights.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
highlightsUl.appendChild(li);
});
}
}
closeBtn.onclick = () => {
modal.style.display = 'none';
history.pushState("", document.title, window.location.pathname + window.location.search);
};
window.onclick = event => {
if (event.target == modal) {
modal.style.display = 'none';
}
};
window.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash.replace('#', '');
if (hash && projectsData[hash]) {
openModal(hash);
}
});
</script>
<script>
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('#about, #projects, #education, #experience, #skills, #contact');
const navLinks = document.querySelectorAll('#menu a');
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop - 100;
if (window.scrollY >= sectionTop) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
</script>
</body>
</html>