-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
491 lines (439 loc) · 27.9 KB
/
index.html
File metadata and controls
491 lines (439 loc) · 27.9 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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abhijeet Mishra - Interactive CV</title>
<!-- Chosen Palette: Neutral Professional -->
<!-- Application Structure Plan: A single-page dashboard design with a sticky navigation and four main sections: Summary, Skills, Experience, and Projects. The core interaction is a skill-filtering system where clicking a skill in the 'Skills' section highlights its application in the 'Experience' and 'Projects' sections. A bar chart visualizes skill frequency. This structure was chosen to transform the static CV into an interactive portfolio, allowing recruiters to quickly see the practical application of specific, desired skills, which is more engaging and efficient than reading through the entire document linearly. -->
<!-- Visualization & Content Choices: 1. Skills: Presented as interactive tags/buttons. Goal: Organize/Interact. Justification: More engaging than a static list, serves as the primary control for the SPA's interactivity. Method: HTML buttons + JS event listeners. 2. Skill Frequency: A horizontal bar chart showing keyword counts in the CV. Goal: Compare/Inform. Justification: Provides a quick, data-driven overview of the most prominent technologies in the candidate's experience. Library: Chart.js. 3. Experience: A vertical timeline. Goal: Inform/Change. Justification: Classic, scannable format for chronological data. Text content is dynamically highlighted by the skill filter. Method: HTML/CSS + JS for dynamic highlighting. 4. Projects: Card grid. Goal: Organize/Inform. Justification: A clean way to present portfolio items. Also uses dynamic highlighting. Method: HTML/CSS + JS. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f4f4f5; /* Zinc 100 */
}
.highlight {
background-color: #a7f3d0; /* Emerald 200 */
padding: 2px 4px;
border-radius: 4px;
transition: background-color 0.3s ease-in-out;
}
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
height: 400px;
max-height: 500px;
}
@media (max-width: 768px) {
.chart-container {
height: 350px;
}
}
.timeline-item::before {
content: '';
position: absolute;
left: -2.75rem;
top: 0.5rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: #3b82f6; /* Blue 500 */
border: 3px solid #bfdbfe; /* Blue 200 */
}
</style>
</head>
<body class="text-stone-800">
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold text-stone-900">
<a href="#">Abhijeet Mishra</a>
</div>
<div class="hidden md:flex items-center space-x-6">
<a href="#summary" class="text-stone-600 hover:text-blue-600 transition-colors">Summary</a>
<a href="#skills" class="text-stone-600 hover:text-blue-600 transition-colors">Skills</a>
<a href="#experience" class="text-stone-600 hover:text-blue-600 transition-colors">Experience</a>
<a href="#projects" class="text-stone-600 hover:text-blue-600 transition-colors">Projects</a>
<a href="#education" class="text-stone-600 hover:text-blue-600 transition-colors">Education</a>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="text-stone-600 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
</nav>
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4">
<a href="#summary" class="block py-2 text-stone-600 hover:text-blue-600">Summary</a>
<a href="#skills" class="block py-2 text-stone-600 hover:text-blue-600">Skills</a>
<a href="#experience" class="block py-2 text-stone-600 hover:text-blue-600">Experience</a>
<a href="#projects" class="block py-2 text-stone-600 hover:text-blue-600">Projects</a>
<a href="#education" class="block py-2 text-stone-600 hover:text-blue-600">Education</a>
</div>
</header>
<main class="container mx-auto p-6 md:p-8">
<section id="summary" class="my-12">
<div class="text-center max-w-4xl mx-auto">
<h1 class="text-4xl md:text-5xl font-bold text-stone-900 mb-2">Abhijeet Mishra</h1>
<h2 class="text-xl md:text-2xl text-blue-600 font-semibold mb-6">Backend Engineer | Java, Go, Elixir | Kafka, Spring Boot, Microservices, AWS</h2>
<!-- START: Updated Contact and Social Links Section -->
<div class="flex flex-wrap justify-center items-center space-x-4 md:space-x-6 text-stone-600 mb-8">
<span>+91 8825139498</span>
<span class="hidden sm:inline">•</span>
<span>abhijeetmishra498@gmail.com</span>
<span class="hidden sm:inline">•</span>
<!-- GitHub Link with Icon -->
<a href="https://github.com/Abhijeetmishr" target="_blank" class="text-stone-700 hover:text-blue-600 transition-colors flex items-center space-x-1" title="GitHub Profile">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3-1 6-4 6-8.5.08-2.5-1-5-3-6 .3-1.5-.7-3-2-3-1.5.7-2.7 2-3.5 3-.7-.5-1.5-.7-2.5-.7-.5 0-1 .1-1.5.3-.8-1.5-2.2-2.7-3.7-3.2-1.3-.5-2.8-.2-4 .4-1 .6-1.6 1.8-1.6 3.1 0 1.2.6 2.4 1.6 3.1-1.5.5-2.5 1.7-2.7 3.2C2 12 5 15 8 16.5c-.7.5-1.5.7-2.5.7-.5 0-1-.1-1.5-.3C2.8 17.5 2 18 2 19v3"/><path d="M12 2v-2"/></svg>
<span class="hidden md:inline">GitHub</span>
</a>
<span class="hidden sm:inline">•</span>
<!-- LinkedIn Link with Icon -->
<a href="https://www.linkedin.com/in/abhijeet-mishra98/" target="_blank" class="text-stone-700 hover:text-blue-600 transition-colors flex items-center space-x-1" title="LinkedIn Profile">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
<span class="hidden md:inline">LinkedIn</span>
</a>
</div>
<!-- END: Updated Contact and Social Links Section -->
<p class="text-lg text-stone-700 leading-relaxed">
Highly motivated Backend Software Developer with 4+ years of experience specializing in building and scaling distributed, high-throughput systems using Go, Java (Spring Boot/Kafka), and Elixir (Phoenix). Proven ability to reduce latency, improve accuracy, and streamline operations by architecting real-time event streaming pipelines (Kafka, CDC) and resilient microservices. Adept at leveraging AWS, Docker, and Redis for performance optimization and reliability.
</p>
</div>
</section>
<section id="skills" class="my-16">
<h2 class="text-3xl font-bold text-center mb-4 text-stone-900">Core Technical Skills</h2>
<p class="text-center text-stone-600 max-w-2xl mx-auto mb-10">
This section provides an overview of my technical capabilities. Click on any skill to highlight its application throughout my professional experience and projects. A chart below also visualizes the prominence of these technologies in my work.
</p>
<div id="skills-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
</div>
<div class="text-center mb-12">
<button id="clear-filter-btn" class="bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg shadow-md hover:bg-blue-700 transition-all duration-300 transform hover:scale-105">Clear Highlight</button>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg">
<h3 class="text-2xl font-bold text-center mb-4 text-stone-900">Technology Usage Frequency</h3>
<p class="text-center text-stone-600 max-w-2xl mx-auto mb-6">
This chart illustrates the frequency of key technologies mentioned across my CV, offering a quick glimpse into my most utilized tools and platforms.
</p>
<div class="chart-container">
<canvas id="skillsChart"></canvas>
</div>
</div>
</section>
<section id="experience" class="my-16">
<h2 class="text-3xl font-bold text-center mb-10 text-stone-900">Professional Experience</h2>
<p class="text-center text-stone-600 max-w-3xl mx-auto mb-12">
Here is a timeline of my professional journey. Each entry details my responsibilities and, more importantly, the impact I delivered. If you have selected a skill, you will see it highlighted in the descriptions below.
</p>
<div id="experience-container" class="relative pl-12 border-l-2 border-blue-200">
</div>
</section>
<section id="projects" class="my-16">
<h2 class="text-3xl font-bold text-center mb-4 text-stone-900">Projects & Contributions</h2>
<p class="text-center text-stone-600 max-w-3xl mx-auto mb-12">
Beyond my professional roles, I enjoy building projects and contributing to the open-source community. This section showcases some of that work, which is also filterable by the skills selected above.
</p>
<div id="projects-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
</div>
</section>
<section id="education" class="my-16">
<h2 class="text-3xl font-bold text-center mb-4 text-stone-900">Education & Certifications</h2>
<p class="text-center text-stone-600 max-w-3xl mx-auto mb-12">
Details about my formal education and professional bootcamps/certifications.
</p>
<div id="education-content" class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<!-- Content generated by JS -->
</div>
</section>
</main>
<footer class="bg-stone-800 text-white mt-16">
<div class="container mx-auto px-6 py-8 text-center">
<p class="font-bold text-lg mb-2">Abhijeet Mishra</p>
<p class="text-stone-400">Interactive CV created to showcase skills and experience.</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const skillsData = {
// Skills updated based on uploaded document
'Programming': ['Java', 'Spring Boot', 'Kafka', 'REST APIs', 'Go', 'Gin', 'Elixir', 'Phoenix', 'Scala'],
'Cloud & DevOps': ['AWS', 'EC2', 'S3', 'ALB', 'SQS', 'Lambda', 'API Gateway', 'CloudWatch', 'Docker', 'Kubernetes', 'ECS', 'EKS'],
'Databases/Cache': ['PostgreSQL', 'Redis'],
'Concepts': ['Microservices', 'Event-Driven Systems', 'Clean Architecture', 'SOLID Principles', 'Design Patterns'],
'Tools/Monitoring': ['Datadog', 'JMeter', 'Swagger', 'Postman', 'IntelliJ IDEA', 'ArgoCD', 'Debezium']
};
const experienceData = [
{
role: 'Software Developer Backend',
company: 'Gamezop',
location: 'Remote',
period: 'March 2024 – Present',
details: [
'Developed a Go recommendation API with automated cron recomputation for a 15-day rolling score, ensuring 99.9% data freshness.',
'Constructed a real-time Game Ratings System in Go to capture and return like/dislike counts, increasing engagement tracking accuracy by 25%.',
'Built Go Gin APIs for the App Directory (10+ endpoints), improving response time and reducing DB load by 35% through Redis caching implementation.',
'Designed a Debezium + Kafka CDC pipeline for email-refiner, streaming DB triggers from key tables, automated classification into blocked tables, cutting ops overhead by 40%.',
'Engineered a Java Kafka stream pipeline processing 20M+ events daily, using separate topologies for generic event sessionization and click/impression aggregation to drive real-time article recommendations.',
'Developed an Elixir/Phoenix event collector for asynchronous ingestion into Kafka, reducing data pipeline latency by 50% and maintaining a 99.99% system uptime.',
'Implemented a game tagging system to categorize thousands of games, enabling personalized discovery and improved search by 30%.',
'Delivered a suite of metadata APIs for onboarding games, reducing integration time by 60%.'
]
},
{
role: 'Software Developer Backend',
company: 'Züs',
location: 'Remote',
period: 'March 2023 – Feb 2024',
details: [
'Implementing Kafka-based event streaming and WebSocket notifications for device sync and state consistency.',
'Developed multiple authentication flows, including mnemonic-based login, partner wallet authentication, and linking them with other login options like email, phone, Google, Apple, and Okta.'
]
},
{
role: 'Software Developer Backend',
company: 'LoanFrame',
location: 'Gurugram, Haryana',
period: 'Dec 2021 – Feb 2023',
details: [
'Developed automated Java Spring Boot lending scripts, processing 200+ applications/day, resulting in an average loan volume of $3M+.',
'Automated invoice upload, disbursal, and repayment workflows using Scala Akka scheduler, boosting daily disbursal by 100%.',
'Designed and deployed secure AWS S3 architecture for bulk document storage integrated with lender APIs, improving accuracy by 45%.',
'Implemented AWS SQS for asynchronous processing, increasing system throughput by 30%.'
]
}
];
const projectsData = [
{
title: 'Open Source: Things-Search Case Sensitivity Option - Eclipse/ditto',
description: 'Implemented the new ilike function in Ditto\'s API, providing case-insensitive search/RQL filtering capabilities not previously available and enhancing query flexibility.',
link: 'https://github.com/eclipse-ditto/ditto/issues/1087'
},
{
title: 'QEats - Scalable Distributed Backend',
description: 'A scalable distributed backend for a food-ordering app.',
// Placeholder link for Crio QEats project - REPLACE WITH YOUR ACTUAL GITHUB REPO URL
link: 'https://www.crio.do/portfolio/abhijeetmishra498/ME_QEATS_V2/'
},
{
title: 'QMoney - Stock Portfolio Analyzer',
description: 'A visual stock portfolio analyzer.',
// Placeholder link for Crio QMoney project - REPLACE WITH YOUR ACTUAL GITHUB REPO URL
link: 'https://www.crio.do/portfolio/abhijeetmishra498/ME_QMONEY/'
}
];
const certificationsData = [
{
name: 'University of Petroleum and Energy Studies - B.Tech in Computer Science',
year: 'July 2017 - July 2021',
link: '#' // No external link needed for the degree itself
},
{
name: 'Crio.do, Java Backend Development',
year: '2021',
link: 'https://www.crio.do/portfolio/abhijeetmishra498/'
},
];
// ... (Rest of the JavaScript code remains the same as it handles the rendering and interactivity based on the data above) ...
const skillsContainer = document.getElementById('skills-container');
const experienceContainer = document.getElementById('experience-container');
const projectsContainer = document.getElementById('projects-container');
const educationContainer = document.getElementById('education-content');
const clearFilterBtn = document.getElementById('clear-filter-btn');
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
document.querySelectorAll('#mobile-menu a, header nav a').forEach(link => {
link.addEventListener('click', () => {
if(!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
});
});
for (const category in skillsData) {
const card = document.createElement('div');
card.className = 'bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300';
const title = document.createElement('h3');
title.className = 'text-xl font-bold mb-4 text-stone-800';
title.textContent = category;
card.appendChild(title);
const skillsList = document.createElement('div');
skillsList.className = 'flex flex-wrap gap-2';
skillsData[category].forEach(skill => {
const button = document.createElement('button');
button.className = 'skill-btn bg-stone-100 text-stone-700 text-sm font-medium py-1 px-3 rounded-full hover:bg-blue-100 hover:text-blue-700 transition-colors';
button.textContent = skill;
button.dataset.skill = skill;
skillsList.appendChild(button);
});
card.appendChild(skillsList);
skillsContainer.appendChild(card);
}
experienceData.forEach(exp => {
const item = document.createElement('div');
item.className = 'mb-12 relative timeline-item';
const content = `
<div class="bg-white p-6 rounded-xl shadow-lg">
<h3 class="text-xl font-bold text-stone-900">${exp.role}</h3>
<p class="text-blue-600 font-semibold my-1">${exp.company} | ${exp.location}</p>
<p class="text-sm text-stone-500 mb-4">${exp.period}</p>
<ul class="list-disc pl-5 space-y-2 text-stone-700 content-area">
${exp.details.map(d => `<li>${d}</li>`).join('')}
</ul>
</div>
`;
item.innerHTML = content;
experienceContainer.appendChild(item);
});
projectsData.forEach(proj => {
const card = document.createElement('div');
card.className = 'bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300';
const linkTag = proj.link && proj.link !== '#' ? `
<a href="${proj.link}" target="_blank" class="text-blue-600 hover:text-blue-700 text-sm font-medium flex items-center mt-3">
View Details
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4m-4-7l7-7m0 0h-7m7 0v7"></path></svg>
</a>
` : '';
const content = `
<h3 class="text-xl font-bold text-stone-900 mb-2">${proj.title}</h3>
<p class="text-stone-700 content-area">${proj.description}</p>
${linkTag}
`;
card.innerHTML = content;
projectsContainer.appendChild(card);
});
certificationsData.forEach(cert => {
const item = document.createElement('div');
item.className = 'bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300';
const linkElement = cert.link && cert.link !== '#' ? `
<a href="${cert.link}" target="_blank" class="text-blue-600 hover:text-blue-700 text-sm font-medium flex items-center">
View Certificate/Platform
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4m-4-7l7-7m0 0h-7m7 0v7"></path></svg>
</a>
` : `<p class="text-sm text-stone-500">Degree completed.</p>`;
const content = `
<h4 class="text-lg font-semibold text-stone-900">${cert.name}</h4>
<p class="text-sm text-stone-500 mb-2">${cert.year}</p>
${linkElement}
`;
item.innerHTML = content;
educationContainer.appendChild(item);
});
let activeSkill = null;
const highlightContent = (skill) => {
const contentAreas = document.querySelectorAll('.content-area');
const skillButtons = document.querySelectorAll('.skill-btn');
contentAreas.forEach(area => {
const originalHTML = area.dataset.originalHtml || area.innerHTML;
area.dataset.originalHtml = originalHTML;
if (skill) {
const regex = new RegExp(`\\b(${skill.replace(/\+/g, '\\+')})\\b`, 'gi');
area.innerHTML = originalHTML.replace(regex, `<span class="highlight">$1</span>`);
} else {
area.innerHTML = originalHTML;
}
});
skillButtons.forEach(btn => {
if (skill && btn.dataset.skill.toLowerCase() === skill.toLowerCase()) {
btn.classList.add('bg-blue-600', 'text-white');
btn.classList.remove('bg-stone-100', 'text-stone-700');
} else {
btn.classList.remove('bg-blue-600', 'text-white');
btn.classList.add('bg-stone-100', 'text-stone-700');
}
});
};
document.querySelectorAll('.skill-btn').forEach(button => {
button.addEventListener('click', (e) => {
const skill = e.target.dataset.skill;
if (activeSkill === skill) {
activeSkill = null;
highlightContent(null);
} else {
activeSkill = skill;
highlightContent(skill);
}
});
});
clearFilterBtn.addEventListener('click', () => {
activeSkill = null;
highlightContent(null);
});
const generateChartData = () => {
const allText = JSON.stringify(experienceData) + JSON.stringify(projectsData);
let skillCounts = {};
const allSkills = Object.values(skillsData).flat();
allSkills.forEach(skill => {
const regex = new RegExp(`\\b(${skill.replace(/\+/g, '\\+')})\\b`, 'gi');
const matches = allText.match(regex);
if(matches) {
skillCounts[skill] = (skillCounts[skill] || 0) + matches.length;
}
});
const sortedSkills = Object.entries(skillCounts)
.sort(([, a], [, b]) => b - a)
.slice(0, 15);
return {
labels: sortedSkills.map(item => item[0]),
data: sortedSkills.map(item => item[1])
};
};
const chartData = generateChartData();
const ctx = document.getElementById('skillsChart').getContext('2d');
const skillsChart = new Chart(ctx, {
type: 'bar',
data: {
labels: chartData.labels,
datasets: [{
label: 'Mentions in Experience & Projects',
data: chartData.data,
backgroundColor: 'rgba(59, 130, 246, 0.7)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
bodyFont: {
size: 14,
},
titleFont: {
size: 16,
weight: 'bold'
}
}
},
scales: {
x: {
beginAtZero: true,
ticks: {
precision: 0
}
},
y: {
ticks: {
font: {
size: 12
}
}
}
}
}
});
});
</script>
</body>
</html>