Skip to content

Commit 87bf3c6

Browse files
ithebkithebk
authored
Update index.html
1 parent ff1ffa5 commit 87bf3c6

File tree

1 file changed

+233
-22
lines changed

1 file changed

+233
-22
lines changed

‎index.html‎

Lines changed: 233 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Bharath Kumar - Senior Software Engineer</title>
6+
<title>Bharath Kumar - Senior Mobile Engineer</title>
77
<link rel="preconnect" href="https://fonts.googleapis.com">
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
99
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Spectral:wght@300;400&display=swap" rel="stylesheet">
@@ -24,13 +24,73 @@
2424
--serif: 'Spectral', serif;
2525
}
2626

27+
/* Dark theme */
28+
@media (prefers-color-scheme: dark) {
29+
:root {
30+
--bg: #1a1a1a;
31+
--fg: #e8e8e8;
32+
--accent: #0066ff;
33+
--muted: #999;
34+
--border: #333;
35+
}
36+
}
37+
38+
/* Manual theme overrides */
39+
[data-theme="light"] {
40+
--bg: #fafafa;
41+
--fg: #1a1a1a;
42+
--accent: #0066ff;
43+
--muted: #666;
44+
--border: #e0e0e0;
45+
}
46+
47+
[data-theme="dark"] {
48+
--bg: #1a1a1a;
49+
--fg: #e8e8e8;
50+
--accent: #0066ff;
51+
--muted: #999;
52+
--border: #333;
53+
}
54+
2755
body {
2856
font-family: var(--serif);
2957
background: var(--bg);
3058
color: var(--fg);
3159
line-height: 1.6;
3260
-webkit-font-smoothing: antialiased;
3361
overflow-x: hidden;
62+
transition: background-color 0.3s ease, color 0.3s ease;
63+
}
64+
65+
/* Theme Toggle Button */
66+
.theme-toggle {
67+
position: fixed;
68+
top: 2rem;
69+
right: 2rem;
70+
background: var(--bg);
71+
border: 1px solid var(--border);
72+
width: 44px;
73+
height: 44px;
74+
border-radius: 50%;
75+
cursor: pointer;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
transition: all 0.3s ease;
80+
z-index: 1000;
81+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
82+
}
83+
84+
.theme-toggle:hover {
85+
border-color: var(--accent);
86+
transform: scale(1.1);
87+
}
88+
89+
.theme-toggle svg {
90+
width: 20px;
91+
height: 20px;
92+
stroke: var(--fg);
93+
transition: stroke 0.3s ease;
3494
}
3595

3696
.container {
@@ -46,7 +106,7 @@
46106
}
47107

48108
header {
49-
margin-bottom: 5rem;
109+
margin-bottom: 3rem;
50110
padding-bottom: 2rem;
51111
border-bottom: 1px solid var(--border);
52112
}
@@ -128,7 +188,7 @@
128188
}
129189

130190
section {
131-
margin-bottom: 4rem;
191+
margin-bottom: 3rem;
132192
opacity: 0;
133193
animation: fadeInUp 0.6s ease forwards;
134194
}
@@ -137,6 +197,8 @@
137197
section:nth-child(2) { animation-delay: 0.7s; }
138198
section:nth-child(3) { animation-delay: 0.8s; }
139199
section:nth-child(4) { animation-delay: 0.9s; }
200+
section:nth-child(5) { animation-delay: 1.0s; }
201+
section:nth-child(6) { animation-delay: 1.1s; }
140202

141203
@keyframes fadeInUp {
142204
from {
@@ -297,12 +359,24 @@
297359

298360
/* Mobile Optimizations */
299361
@media (max-width: 640px) {
362+
.theme-toggle {
363+
top: 1.25rem;
364+
right: 1.25rem;
365+
width: 40px;
366+
height: 40px;
367+
}
368+
369+
.theme-toggle svg {
370+
width: 18px;
371+
height: 18px;
372+
}
373+
300374
.container {
301375
padding: 2rem 1.25rem;
302376
}
303377

304378
header {
305-
margin-bottom: 3rem;
379+
margin-bottom: 2rem;
306380
}
307381

308382
.title {
@@ -319,7 +393,7 @@
319393
}
320394

321395
section {
322-
margin-bottom: 3rem;
396+
margin-bottom: 2.5rem;
323397
}
324398

325399
.links {
@@ -344,58 +418,137 @@
344418
</style>
345419
</head>
346420
<body>
421+
<!-- Theme Toggle Button -->
422+
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
423+
<svg class="sun-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
424+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
425+
</svg>
426+
<svg class="moon-icon" style="display: none;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
427+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
428+
</svg>
429+
</button>
430+
347431
<div class="container">
348432
<header>
349433
<h1>Bharath Kumar</h1>
350-
<div class="title">Senior Software Engineer</div>
351-
<div class="subtitle">Bangalore, India</div>
434+
<div class="title">Senior Mobile Engineer</div>
435+
<div class="subtitle">9.5+ years building scalable mobile applications</div>
352436

353437
<nav>
354-
<a href="#experience">Experience</a>
355438
<a href="#about">About</a>
439+
<a href="#experience">Experience</a>
440+
<a href="#education">Education</a>
441+
<a href="#projects">Projects</a>
356442
<a href="#posts">Posts</a>
357443
<a href="#contact">Contact</a>
358444
</nav>
359445
</header>
360446

361447
<main>
448+
<section id="about">
449+
<h2>About</h2>
450+
<p class="about-text">
451+
Senior Mobile Engineer with 9.5+ years of experience building and scaling applications in Payments, Banking, Employee Benefits, CRM, and EdTech domains. Proven track record in Android platform modernization, SDK upgrades, modular architecture, and mentoring engineers to deliver high-quality mobile products at scale.
452+
</p>
453+
<p class="about-text" style="margin-top: 1rem;">
454+
Specialized in Kotlin, Java, React Native, and modern Android development with Jetpack Compose, Clean Architecture, and MVVM patterns. Experience includes leading migration efforts, designing shared modules, and implementing offline-first experiences with performance optimization.
455+
</p>
456+
</section>
457+
362458
<section id="experience">
363459
<h2>Experience</h2>
364460

365461
<div class="experience-item">
366462
<div class="experience-title">
367-
Software Engineer at <a href="https://www.zeta.tech/in/" class="experience-company" target="_blank" rel="noopener">Zeta</a>
463+
Software Development Engineer 3 at <a href="https://www.zeta.tech/in/" class="experience-company" target="_blank" rel="noopener">Zeta</a>
464+
</div>
465+
<div class="experience-date">Jun 2023 - Present</div>
466+
<p class="about-text" style="margin-top: 0.75rem; font-size: 0.95rem;">
467+
Leading Android migration efforts for Pluxee India & Philippines. Upgraded Kotlin, AGP, and compileSdk for modern toolchains. Designed android-shared Git sub-module to reduce code duplication across apps.
468+
</p>
469+
</div>
470+
471+
<div class="experience-item">
472+
<div class="experience-title">
473+
Software Development Engineer 2 at <a href="https://www.zeta.tech/in/" class="experience-company" target="_blank" rel="noopener">Zeta</a>
368474
</div>
369-
<div class="experience-date">May 2022 - Present</div>
475+
<div class="experience-date">May 2022 - May 2023</div>
476+
<p class="about-text" style="margin-top: 0.75rem; font-size: 0.95rem;">
477+
Developed core features for PayZapp (HDFC Bank) including Cards, Wallet, AutoPay, Recharge. Led migration from React Native to native Android for improved stability and performance.
478+
</p>
370479
</div>
371480

372481
<div class="experience-item">
373482
<div class="experience-title">
374-
Software Engineer at <a href="https://www.icicilombard.com/" class="experience-company" target="_blank" rel="noopener">ICICI Lombard</a>
483+
Senior Software Engineer at <a href="http://www.autoninja.net" class="experience-company" target="_blank" rel="noopener">Unbox Technologies</a>
375484
</div>
376-
<div class="experience-date">Nov 2019 - Apr 2022</div>
485+
<div class="experience-date">Apr 2019 - Apr 2022</div>
486+
<p class="about-text" style="margin-top: 0.75rem; font-size: 0.95rem;">
487+
Owned end-to-end mobile development for NinjaCRM. Introduced React Native and CodePush for faster cross-platform delivery. Designed offline-first experiences using Realm DB.
488+
</p>
377489
</div>
378490

379491
<div class="experience-item">
380492
<div class="experience-title">
381-
Android Engineer at <a href="http://www.autoninja.net" class="experience-company" target="_blank" rel="noopener">Autoninja</a>
493+
Software Engineer at <a href="http://www.autoninja.net" class="experience-company" target="_blank" rel="noopener">Unbox Technologies</a>
382494
</div>
383-
<div class="experience-date">Jun 2016 - Oct 2019</div>
495+
<div class="experience-date">Jun 2016 - Mar 2019</div>
384496
</div>
385497

498+
</section>
499+
500+
<section id="education">
501+
<h2>Education</h2>
502+
386503
<div class="experience-item">
387504
<div class="experience-title">
388-
B.E (CSE) from <a href="https://www.pes.edu" class="experience-company" target="_blank" rel="noopener">PES Institute of Technology</a>
505+
B.E (Computer Science) from <a href="https://www.pes.edu" class="experience-company" target="_blank" rel="noopener">PES Institute of Technology</a>
389506
</div>
390507
<div class="experience-date">2012 - 2016</div>
391508
</div>
392509
</section>
393510

394-
<section id="about">
395-
<h2>About</h2>
396-
<p class="about-text">
397-
Software Developer specializing in Android development. Built B2B app <a href="https://play.google.com/store/apps/details?id=com.salescrm.telephony" style="color: var(--accent); text-decoration: none;" target="_blank" rel="noopener">Sales CRM</a> from scratch at Autoninja, taking ownership of the app architecture to empower sales in car dealerships. Published <a href="https://play.google.com/store/apps/details?id=easydo.ithebk" style="color: var(--accent); text-decoration: none;" target="_blank" rel="noopener">Easy Do</a> app for Android with 10K+ downloads and 4.5★ rating, helping users make daily tasks easier.
398-
</p>
511+
<section id="projects">
512+
<h2>Projects</h2>
513+
514+
<div class="post-item">
515+
<div class="post-title">
516+
<a href="https://www.kadmik.in/" target="_blank" rel="noopener">Kadmik - Gamified Exam Prep App</a>
517+
</div>
518+
<p class="about-text" style="margin-top: 0.5rem; font-size: 0.9rem;">
519+
Founding team member responsible for product development, app architecture, and UX for a government exam prep app. 10L+ downloads.
520+
</p>
521+
<div class="post-tags" style="margin-top: 0.5rem;">
522+
<span class="tag">React Native</span>
523+
<span class="tag">Product</span>
524+
</div>
525+
</div>
526+
527+
<div class="post-item">
528+
<div class="post-title">
529+
<a href="https://play.google.com/store/apps/details?id=com.moneymanager.ithebk" target="_blank" rel="noopener">Money Manager - Personal Finance App</a>
530+
</div>
531+
<p class="about-text" style="margin-top: 0.5rem; font-size: 0.9rem;">
532+
Independently designed and developed a feature-rich personal finance app with budgeting, analytics, export capabilities, and customization options. 50K+ downloads.
533+
</p>
534+
<div class="post-tags" style="margin-top: 0.5rem;">
535+
<span class="tag">React Native</span>
536+
<span class="tag">Finance</span>
537+
</div>
538+
</div>
539+
540+
<div class="post-item">
541+
<div class="post-title">
542+
<a href="https://github.com/ithebk/BarChart" target="_blank" rel="noopener">BarChart - Android Library</a>
543+
</div>
544+
<p class="about-text" style="margin-top: 0.5rem; font-size: 0.9rem;">
545+
Customizable vertical and horizontal bar chart library with animation support.
546+
</p>
547+
<div class="post-tags" style="margin-top: 0.5rem;">
548+
<span class="tag">Android</span>
549+
<span class="tag">Open Source</span>
550+
</div>
551+
</div>
399552
</section>
400553

401554
<section id="posts">
@@ -430,16 +583,20 @@ <h2>Contact</h2>
430583
<span class="contact-label">Email</span>
431584
bharath7242@gmail.com
432585
</div>
586+
<div class="contact-item">
587+
<span class="contact-label">Phone</span>
588+
(+91) 9972705071
589+
</div>
433590
<div class="contact-item">
434591
<span class="contact-label">Location</span>
435592
Bangalore, India
436593
</div>
437594
</div>
438595

439596
<div class="links">
440-
<a href="https://github.com/ithebk/ithebk.github.io/raw/88dc5dfec8a557c8ea9e3a3bcdd1a529a3648c3d/docs/MinimalResume2021.pdf" class="link-item" target="_blank" rel="noopener">Resume</a>
597+
<a href="https://docs.google.com/document/d/1AEaFWoOm2EsCvbNy7hrfrrqEmDydYK75OYaeapk8ECw/edit?usp=sharing" class="link-item" target="_blank" rel="noopener">Resume</a>
441598
<a href="mailto:bharath7242@gmail.com" class="link-item">Mail</a>
442-
<a href="https://play.google.com/store/apps/details?id=easydo.ithebk" class="link-item" target="_blank" rel="noopener">Play Store</a>
599+
<a href="https://play.google.com/store/apps/dev?id=7732158698743494041" class="link-item" target="_blank" rel="noopener">Play Store</a>
443600
<a href="https://www.linkedin.com/in/ithebk" class="link-item" target="_blank" rel="noopener">LinkedIn</a>
444601
<a href="https://github.com/ithebk" class="link-item" target="_blank" rel="noopener">Github</a>
445602
<a href="https://stackoverflow.com/users/4491620/bharath-kumar" class="link-item" target="_blank" rel="noopener">Stack Overflow</a>
@@ -451,5 +608,59 @@ <h2>Contact</h2>
451608
© 2025 Bharath Kumar
452609
</footer>
453610
</div>
611+
612+
<script>
613+
// Theme switching functionality
614+
const themeToggle = document.getElementById('themeToggle');
615+
const sunIcon = document.querySelector('.sun-icon');
616+
const moonIcon = document.querySelector('.moon-icon');
617+
const html = document.documentElement;
618+
619+
// Check for saved theme preference or default to system preference
620+
const savedTheme = localStorage.getItem('theme');
621+
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
622+
623+
// Set initial theme
624+
if (savedTheme) {
625+
html.setAttribute('data-theme', savedTheme);
626+
updateIcon(savedTheme);
627+
} else if (systemPrefersDark) {
628+
html.setAttribute('data-theme', 'dark');
629+
updateIcon('dark');
630+
} else {
631+
html.setAttribute('data-theme', 'light');
632+
updateIcon('light');
633+
}
634+
635+
// Toggle theme on button click
636+
themeToggle.addEventListener('click', () => {
637+
const currentTheme = html.getAttribute('data-theme');
638+
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
639+
640+
html.setAttribute('data-theme', newTheme);
641+
localStorage.setItem('theme', newTheme);
642+
updateIcon(newTheme);
643+
});
644+
645+
// Update icon based on theme
646+
function updateIcon(theme) {
647+
if (theme === 'dark') {
648+
sunIcon.style.display = 'none';
649+
moonIcon.style.display = 'block';
650+
} else {
651+
sunIcon.style.display = 'block';
652+
moonIcon.style.display = 'none';
653+
}
654+
}
655+
656+
// Listen for system theme changes
657+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
658+
if (!localStorage.getItem('theme')) {
659+
const newTheme = e.matches ? 'dark' : 'light';
660+
html.setAttribute('data-theme', newTheme);
661+
updateIcon(newTheme);
662+
}
663+
});
664+
</script>
454665
</body>
455666
</html>

0 commit comments

Comments
 (0)