resume-cli/resume.html at main · Bharath-code/resume-cli · GitHub

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

      <!DOCTYPE html>
      <html data-theme="light">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Resume - Modern Professional</title>
        <link href="https://fonts.googleapis.com/css2?family=Inter|JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
        <style>
          /* Light theme (default) */

      :root {
        /* Colors */
        --color-primary: #3b82f6;
        --color-secondary: #64748b;
        --color-accent: #10b981;
        --color-background: #ffffff;
        --color-surface: #f8fafc;
        --color-text-primary: #0f172a;
        --color-text-secondary: #475569;
        --color-text-muted: #64748b;
        --color-border: #e2e8f0;
        --color-success: #10b981;
        --color-warning: #f59e0b;
        --color-error: #ef4444;

        /* Fonts */
        --font-heading: 'Inter', sans-serif;
        --font-body: 'Inter', sans-serif;
        --font-code: 'JetBrains Mono', monospace;

        /* Spacing */
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;

        /* Border Radius */
        --radius-sm: 0.25rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;

        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      }


          /* Dark theme */
          [data-theme="dark"] {


        /* Colors */
        --color-primary: #60a5fa;
        --color-secondary: #94a3b8;
        --color-accent: #34d399;
        --color-background: #0f172a;
        --color-surface: #1e293b;
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-border: #334155;
        --color-success: #34d399;
        --color-warning: #fbbf24;
        --color-error: #f87171;

        /* Fonts */
        --font-heading: 'Inter', sans-serif;
        --font-body: 'Inter', sans-serif;
        --font-code: 'JetBrains Mono', monospace;

        /* Spacing */
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;

        /* Border Radius */
        --radius-sm: 0.25rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;

        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

          }

          body {
            font-family: var(--font-body);
            color: var(--color-text-primary);
            background-color: var(--color-background);
            line-height: 1.6;
            margin: 0;
            padding: var(--spacing-lg);
            transition: background-color 0.3s ease, color 0.3s ease;
          }

          h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            color: var(--color-primary);
            transition: color 0.3s ease;
          }

          /* Theme toggle button */
          .theme-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--color-primary);
            color: var(--color-background);
            border: none;
            border-radius: var(--radius-md);
            padding: var(--spacing-sm) var(--spacing-md);
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.3s ease;
            z-index: 1000;
          }

          .theme-toggle:hover {
            opacity: 0.8;
            transform: translateY(-1px);
          }

          @media print {
            .theme-toggle {
              display: none;
            }
          }
        </style>
      </head>
      <body>
        <button class="theme-toggle" onclick="toggleTheme()">
          <span class="light-icon">🌙</span>
          <span class="dark-icon">☀️</span>
          <span class="toggle-text">Toggle Theme</span>
        </button>

    <header class="header">
      <h1 class="name">Bharathkumar Palanisamy</h1>
      <p class="role">Full-Stack Engineer (JavaScript / Node.js & React)</p>
      <p class="location">Bengaluru, India</p>
      <div class="contact">
        <a href="mailto:kumarbharath63@icloud.com">kumarbharath63@icloud.com</a>
        <span>+91 8667861408</span>
        <a href="https://linkedin.com/in/bharathkumar-palanisamy" target="_blank">LinkedIn</a>
        <a href="https://github.com/Bharath-code/" target="_blank">GitHub</a>
        <a href="https://www.bharathkumar.dev" target="_blank">Portfolio</a>
      </div>
    </header>
    <section class="section">
      <h2>Profile</h2>
      <p class="profile-text">Full-Stack Engineer with 5 years of professional experience across the JavaScript ecosystem. I build end-to-end web applications and production APIs using Node.js, Express, React/Next.js and modern databases. I took a planned career break to focus on personal priorities while actively upskilling — building personal projects, contributing to open source, and staying current with modern tooling. Now actively seeking to re-enter the workforce and contribute as a focused, production-minded engineer.</p>
    </section>
    <section class="section">
      <h2>Tech Stack</h2>
      <div class="tech-stack">
        <span class="tech-item">Node.js</span><span class="tech-item">Express</span><span class="tech-item">TypeScript</span><span class="tech-item">Sveltekit</span><span class="tech-item">React</span><span class="tech-item">Next.js</span><span class="tech-item">Astro</span><span class="tech-item">Tailwind</span><span class="tech-item">shadcnUI</span><span class="tech-item">Postgres</span><span class="tech-item">MongoDB</span><span class="tech-item">Redis</span><span class="tech-item">Docker</span><span class="tech-item">REST</span><span class="tech-item">GitHub Actions</span><span class="tech-item">AWS</span>
      </div>
    </section>
    <section class="section">
      <h2>Experience</h2>

        <div class="experience-item">
          <div class="experience-header">
            <h3>Accenture</h3>
            <span class="dates">2019 — 2021</span>
          </div>
          <p class="job-title">Full-Stack Engineer</p>
          <ul class="bullets">
            <li>Built an enterprise-level <strong>Code Scan Platform</strong> from scratch that identified vulnerabilities in large-scale applications and suggested potential fixes.</li><li>Designed and implemented secure, scalable REST APIs with <strong>Node.js, Express, and MongoDB</strong> to handle high-volume scan data.</li><li>Developed <strong>pixel-perfect frontends</strong> by converting Figma designs into responsive React + Redux dashboards, ensuring design consistency and accessibility.</li><li>Integrated CI/CD pipelines using <strong>GitHub Actions and Docker</strong>, reducing deployment times by 60% and minimizing production errors.</li><li>Collaborated with product managers, security teams, and designers to deliver a compliant and enterprise-ready product.</li>
          </ul>
        </div>

        <div class="experience-item">
          <div class="experience-header">
            <h3>Infosys</h3>
            <span class="dates">2015 — 2019</span>
          </div>
          <p class="job-title">Full-Stack Engineer</p>
          <ul class="bullets">
            <li>Worked with <strong>major national banks</strong> to design and deliver secure, high-performance features for customer-facing applications.</li><li>Developed backend services in <strong>Node.js/Express with PostgreSQL</strong>, optimized queries, and introduced <strong>Redis caching</strong> to improve performance by 40%.</li><li>Wrote <strong>unit and integration tests</strong> using Jest and ensured code quality through rigorous code reviews.</li><li>Converted business requirements and <strong>Figma wireframes into production-grade UIs</strong> using React, HTML5, and CSS3.</li><li>Collaborated in Agile sprints with QA and frontend teams to deliver new banking modules within strict deadlines.</li>
          </ul>
        </div>

    </section>
    <section class="section">
      <h2>Key Projects</h2>

        <div class="project-item">
          <h3>git-scope</h3>
          <p class="project-desc">Terminal UI application for managing multiple Git repositories at scale. Features include contribution graphs, disk usage visualization, time machine for commit history, and batch operations across repos.</p>
          <p class="project-tech">Go • Bubbletea • Lipgloss • Git</p>
        </div>

        <div class="project-item">
          <h3>YouTube Companion</h3>
          <p class="project-desc">Full-stack dashboard for managing YouTube videos. View unlisted/published videos, track views, add comments, and take notes — a personal command center for content creators.</p>
          <p class="project-tech">Next.js • Node.js • YouTube Data API • PostgreSQL • TailwindCSS</p>
        </div>

        <div class="project-item">
          <h3>Website Highlight Saver</h3>
          <p class="project-desc">Chrome extension to manage save highlight content and AI summarize(Manifest V3).</p>
          <p class="project-tech">JavaScript • Chrome Extension APIs</p>
        </div>

        <div class="project-item">
          <h3>Tab Focus Chrome Extension</h3>
          <p class="project-desc">Chrome extension to manage open tabs by encouraging focus and closing unused tabs (Manifest V3).</p>
          <p class="project-tech">JavaScript • Chrome Extension APIs</p>
        </div>

        <div class="project-item">
          <h3>Portfolio & Blog</h3>
          <p class="project-desc">Personal portfolio built to showcase projects and write technical posts about modern JS tooling.</p>
          <p class="project-tech">SvelteKit • Vercel • Markdown</p>
        </div>

    </section>
    <section class="section">
      <h2>Leadership & Mentoring</h2>
      <ul class="simple-list">
        <li>Mentored junior developers and reviewed PRs to improve code quality.</li><li>Collaborated cross-functionally with QA and designers to ship polished features.</li>
      </ul>
    </section>
    <section class="section">
      <h2>Open-source & Community</h2>
      <ul class="simple-list">
        <li>Built and maintain git-scope — a Go-based TUI for managing multiple Git repos. 19 GitHub stars, 99+ downloads, and contributions from the community.</li><li>Published npm packages for CLI tooling and CI helpers.</li><li>Contributed documentation fixes and patches to open-source JavaScript libraries.</li>
      </ul>
    </section>
    <section class="section">
      <h2>Education</h2>

        <div class="education-item">
          <h3>B.E in Electrical and Electronics</h3>
          <p class="school">Sri Krishna College of Engineering and Technology (2011 – 2015)</p>
          <ul class="simple-list">
            <li>Graduated with First Class Honours</li>
          </ul>
        </div>

    </section>

        <script>
          function toggleTheme() {
            const html = document.documentElement;
            const currentTheme = html.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-theme', newTheme);

            // Save preference to localStorage
            localStorage.setItem('theme-preference', newTheme);

            // Update button text
            updateToggleButton(newTheme);
          }

          function updateToggleButton(theme) {
            const button = document.querySelector('.theme-toggle');
            const lightIcon = button.querySelector('.light-icon');
            const darkIcon = button.querySelector('.dark-icon');
            const text = button.querySelector('.toggle-text');

            if (theme === 'dark') {
              lightIcon.style.display = 'none';
              darkIcon.style.display = 'inline';
              text.textContent = 'Light Mode';
            } else {
              lightIcon.style.display = 'inline';
              darkIcon.style.display = 'none';
              text.textContent = 'Dark Mode';
            }
          }

          // Initialize theme from localStorage or system preference
          function initializeTheme() {
            const savedTheme = localStorage.getItem('theme-preference');
            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');

            document.documentElement.setAttribute('data-theme', initialTheme);
            updateToggleButton(initialTheme);
          }

          // Listen for system theme changes
          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            if (!localStorage.getItem('theme-preference')) {
              const newTheme = e.matches ? 'dark' : 'light';
              document.documentElement.setAttribute('data-theme', newTheme);
              updateToggleButton(newTheme);
            }
          });

          // Initialize on page load
          document.addEventListener('DOMContentLoaded', initializeTheme);
        </script>
      </body>
      </html>