cv/outside-work.html at main · springleo/cv · 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
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects - Manohar Mikkili</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 20px;
      }

      .container {
        max-width: 900px;
        margin: 0 auto;
        background: white;
        border-radius: 10px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        padding: 40px;
      }

      h1 {
        color: #667eea;
        margin-bottom: 30px;
        font-size: 2.5em;
      }

      .project-card {
        background: #f9f9f9;
        border-left: 4px solid #667eea;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 5px;
        transition: box-shadow 0.3s;
      }

      .project-card:hover {
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
      }

      .project-card h2 {
        color: #667eea;
        margin-bottom: 10px;
        font-size: 1.5em;
      }

      .project-card p {
        color: #666;
        line-height: 1.8;
        margin-bottom: 10px;
      }

      .project-points {
        color: #666;
        line-height: 1.8;
        margin-bottom: 5px;
      }

      .project-card .tech {
        color: #764ba2;
        font-weight: bold;
        font-size: 0.9em;
      }

      .projects-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
      }

      .project-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s;
        user-select: none;
      }

      .project-header:hover {
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        transform: translateY(-2px);
      }

      .project-header h2 {
        margin: 0;
        color: white;
        font-size: 1.3em;
        border: none;
        padding: 0;
      }

      .toggle-icon {
        font-size: 1.5em;
        transition: transform 0.3s;
      }

      .project-content {
        background: #f9f9f9;
        padding: 0;
        border-left: 4px solid #667eea;
        border-radius: 0 5px 5px 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
      }

      .project-content.expanded {
        max-height: 5000px; /* allow more content when expanded */
        transition: max-height 0.5s ease-in;
        padding: 20px;
        overflow: visible;
      }

      .project-item {
        border-radius: 5px;
        margin-bottom: 32px;
        overflow: hidden;
        background: none;
      }

      .back-link {
        display: inline-block;
        margin-top: 20px;
        color: #667eea;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
      }

      .back-link:hover {
        color: #764ba2;
      }

      /* Mobile Responsive Styles */
      @media (max-width: 768px) {
        .container {
          padding: 20px;
          max-width: 100%;
        }

        h1 {
          font-size: 1.8em;
        }

        .project-card {
          padding: 15px;
        }

        .project-card h2 {
          font-size: 1.3em;
        }

        .project-card p {
          font-size: 0.95em;
        }

        .project-points {
          font-size: 0.9em;
        }

        .tech {
          font-size: 0.85em;
        }
      }

      @media (max-width: 480px) {
        .container {
          padding: 15px;
        }

        h1 {
          font-size: 1.5em;
        }

        .project-card {
          padding: 12px;
        }

        .project-card h2 {
          font-size: 1.1em;
        }

        .project-card p {
          font-size: 0.9em;
        }

        .project-points {
          font-size: 0.85em;
          margin-bottom: 3px;
        }

        .tech {
          font-size: 0.8em;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Projects outside of work</h1>

      <div class="projects-grid">
        <div class="project-item">
          <div class="project-header" onclick="toggleProject(this)">
            <h2>AI-Assisted Kubernetes Troubleshooting using GitHub Copilot CLI + MCP</h2>
            <span class="toggle-icon">▼</span>
          </div>
          <div class="project-content">
            <div class="project-points"><strong>Problem Statement:</strong></div>
            <div class="project-points">• Pipeline failures in the Kubernetes ecosystem were difficult to diagnose because engineers relied on manual command lookups and disparate tools, which increased mean time to recovery (MTTR).</div>
            <div class="project-points">• Github Actions pipelines can fail for multiple reasons, including missing dependencies, incorrect configurations, and environment-specific issues. Pinpointing root causes was time-consuming and error-prone.</div>

            <div class="project-points"><strong>Design & Solutions:</strong></div>
            <div class="project-points">Provide a seamless integration between an open-source Kubernetes MCP server and the GitHub Copilot CLI, enabling contextual suggestions for Kubernetes commands, Github Actions specific anomalies, configuration snippets and much more.</div>

            <div class="project-points"><strong>Tools</strong></div>
            <div class="project-points">WSL2 Debian, k3s local cluster, Github Copilot CLI, OpenSource K8S MCP server, Natural language prompts</div>

            <div class="project-points"><strong>Setup</strong></div>
            <div class="project-points">Assuming WSL2 Debian is already installed, execute:</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;">curl -fsSL https://gh.io/copilot-install | bash</code>
            <div class="project-points">NOTE: It expects GLIBC 2.28 or later, so make sure the Linux flavor is not too old.</div>
            <div class="project-points">Navigate to a working git repository:</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;">cd /path/to/your/git/repository</code>
            <div class="project-points">Invoke Github Copilot CLI:</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;">copilot</code>
            <div class="project-points">This launches a Copilot CLI terminal with a visual animation, as shown below:</div>
            <div class="project-points"><img src="/images/cp1.jpg" alt="Copilot CLI terminal preview" style="max-width:100%; height:auto; display:block;"></div>
            <div class="project-points">Follow on-screen instruction and trust the directory</div>
            <div class="project-points">Now, you can start entering natural language prompts to get GitHub-related suggestions. For example:</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;">Show me success rate of this pipeline</code>
            <div class="project-points">Copilot CLI will analyze the context and provide relevant Kubernetes commands or configuration snippets to help troubleshoot the issue. Assuming the pipeline execution involves logging into a Kubernetes cluster, you would love to identify the failures within k8s cluster and their root cause. Choose a OpenSource K8S MCP server like KubeMCP or similar.</div>
            <div class="project-points">Exit the copilot terminal by pressing ctrl+c+c (yes, double 'c')</div>
            <div class="project-points">Once back at the prompt, navigate to a different folder and run the following commands to clone and build a open source k8s MCP server</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;">cd /your/workspace/root<br>git clone https://github.com/reza-gholizade/k8s-mcp-server.git<br>cd k8s-mcp-server<br>go mod download<br>go build -o k8s-mcp-server main.go</code>
            <div class="project-points">This will create the go executable viz. <code>k8s-mcp-server</code> in your local workspace dir, make sure you provide it execute rights.</div>
            <div class="project-points">Next we will add this built go executable as a MCP server in copilot CLI. For this, invoke copilot and type:<br> <code>/mcp add</code></div>
            <div class="project-points">Inside the resulting screen, enter details for each text box as show below</div>
            <div class="project-points"><img src="/images/add-mcp.png" alt="Add MCP Server" style="max-width:100%; height:auto; display:block;"></div>
            <div class="project-points">Once done, press ctrl+s to save the MCP server configuration. Now you can use this MCP server to get Kubernetes-specific suggestions. For example, you can ask:</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;">Investigate the failure of the last run of the pipeline viz. "CICD Orchestrator"</code>
            <div class="project-points">The MCP server will analyze the prompt and provide relevant Kubernetes commands or configuration snippets to help troubleshoot the issue.</div>

            <div class="project-points"><strong>Potential Enhancements:</strong></div>
            <div class="project-points">These steps assume a controlled environment where the Copilot CLI and the k3s cluster run in the same terminal session. In production or enterprise deployments, configure network access and authentication between the Copilot CLI and the Kubernetes cluster. A more robust option is to package Copilot CLI and the k8s-mcp-server executables in a container and run it from a bastion host to access private EKS/AKS clusters. In that case, the container has to be started in such a way so as to dynamically make the <code>$HOME/.kube/config</code> available inside the running container at /root/.kube/config:</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;">docker run -it --rm -v ~/.kube:/root/.kube -v springleo/copilot-cli-image</code><br>

            <div class="project-points"><strong>References and Credits:</strong></div>
            <div class="project-points">
              <a href="https://github.com/reza-gholizade/k8s-mcp-server" title="k8s-mcp-server GitHub repository (reza-gholizade/k8s-mcp-server)" target="_blank" rel="noopener">k8s-mcp-server — GitHub repository</a><br>
              <a href="https://github.com/features/copilot/cli" title="GitHub Copilot CLI" target="_blank" rel="noopener">GitHub Copilot CLI</a>
            </div>
          </div>

          <div class="project-item">
          <div class="project-header" onclick="toggleProject(this)">
            <h2>Self Hosted portfolio like CV site (The one currently in use)</h2>
            <span class="toggle-icon">▼</span>
          </div>
          <div class="project-content">
            <div class="project-points"><strong>Why the need:</strong></div>
            <div class="project-points">• I was looking for a one stop shop for my professional information.</div>
            <div class="project-points">• Something that could showcase my skills and experience in a single location.</div>
            <div class="project-points"><strong>Implementation Details:</strong></div>
            <div class="project-points">• Python Flask application as backend</div>
            <div class="project-points">• HTML/CSS as frontend</div>
            <div class="project-points">• The project structure is as follows:</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;">.<br>
            ├── app.py<br>
            ├── contact.html<br>
            ├── Dockerfile<br>
            ├── docs<br>
            │   └── assets<br>
            ├── images<br>
            │   ├── add-mcp.png<br>
            │   ├── az900.png<br>
            │   ├── ckad.png<br>
            │   ├── cka.png<br>
            │   ├── cks.png<br>
            │   ├── cp1.jpg<br>
            │   ├── itil.jpg<br>
            │   ├── pmp.png<br>
            │   └── profile.png<br>
            ├── index.html<br>
            ├── outside-work.html<br>
            ├── projects.html<br>
            ├── README.md<br>
            └── requirements.txt<br></code>
            <div class="project-points">• Build and run steps:</div>
            <code style="background-color: black; color: white; padding: 10px; display: block; border-radius: 5px; overflow-x: auto;"># Build the Docker image<br>docker build -t manohar-portfolio .<br><br># Run the Docker container<br>docker run -d -p 8080:8080 manohar-portfolio</code>
            <div class="project-points">• This will start the Flask application and make it accessible at http://localhost:8080. You can navigate to this URL in your web browser to view the portfolio site.</div>
          </div>
        </div>

<!--
        <div class="project-item">
          <div class="project-header" onclick="toggleProject(this)">
            <h2>Utility Server Security Hardening - DoS Vulnerability Mitigation (at Avaya)</h2>
            <span class="toggle-icon">▼</span>
          </div>
          <div class="project-content">
            <div class="project-points"><strong>Problem Statement:</strong></div>
            <div class="project-points">• Utility Server's /PhoneBackup/ endpoint was vulnerable to Denial-of-Service (DoS) attacks via floods of PUT/GET requests, rendering the server unavailable.</div>
            <div class="project-points">• Enterprise desk IP Phones could not authenticate themselves due to no password being saved in flat files.</div>
            <div class="project-points">• Existing authentication via URL-embedded credentials was considered insecure per CEC standards.</div>

            <div class="project-points"><strong>Design & Solutions:</strong></div>
            <div class="project-points">• Developed a multi-option patch binary with self-extracting archive supporting install, rollback, and status commands.</div>
            <div class="project-points">• <strong>Option 1:</strong> Blocking PhoneBackup feature completely - suitable for setups with only SIP phones.</div>
            <div class="project-points">• <strong>Option 2:</strong> IP/subnet whitelisting - restricts traffic from known sources, allowing genuine requests from enterprise IP ranges.</div>
            <div class="project-points">• <strong>Option 3:</strong> Rate limiting via nginx configuration - throttles incoming request pace to prevent DoS while maintaining legitimate traffic.</div>

            <div class="project-points"><strong>Resolution & Results:</strong></div>
            <div class="project-points">• Implemented rate limiting in nginx configuration, blocking ~67% of malicious PUT requests (340 out of 1000 succeeded).</div>
            <div class="project-points">• Validated solution using Application Layer DoS attack simulator (slowhttptest) across multiple attack vectors: Slow Body, Slow Header, Slow Read, and Range tests.</div>
            <div class="project-points">• Established comprehensive acceptance criteria with test procedures for blocking, whitelisting, and rate limiting options.</div>
            <div class="project-points">• Delivered throttled traffic handling returning "503 Unavailable" for excessive requests while allowing legitimate traffic through.</div>
            <div class="project-points">• Enabled customers and Business Partners to deploy security fixes via self-contained patch binary with rollback capabilities.</div>
            <div class="tech">Technologies: Nginx, Rate Limiting, Bash scripting, DoS Attack Simulation, VIP configuration, HTTP security headers</div>
          </div>
        </div>
      </div> -->

      <a href="/" class="back-link">← Back to Home</a>
    </div>

    <script>
      function toggleProject(header) {
        const content = header.nextElementSibling;
        const icon = header.querySelector('.toggle-icon');

        content.classList.toggle('expanded');
        icon.style.transform = content.classList.contains('expanded') ? 'rotate(180deg)' : 'rotate(0deg)';
      }
    </script>
  </body>
</html>