PageSourceSearch

https://sgowdaks.github.io/

html sgowdaks.github.io collected 2026-10-03 09:55:59 UTC 103,731 bytes, 2,735 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Shivani Gowda KS - Cloud Engineer & Tech Enthusiast</title>
7  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:wght@500;600;700&display=swap" rel="stylesheet">
8  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9  
10  <!-- Common Styles -->
11  <link rel="stylesheet" href="css/common.css">
12  <link rel="stylesheet" href="css/stick-figures.css">
13  <link rel="stylesheet" href="css/ai-agent.css">
14  
15  <style>
16    :root {
17      /* Light Monochrome Theme */
18      --primary-color: #333333;
19      --secondary-color: #555555;
20      --accent-color: #666666;
21      --success-color: #777777;
22      --warning-color: #888888;
23      --text-color: #222222;
24      --text-light: #666666;
25      --text-muted: #666666;
26      --text-dim: #999999;
27      --bg-color: #ffffff;
28      --bg-secondary: #f8f9fa;
29      --bg-tertiary: #e9ecef;
30      --surface-color: #f1f3f4;
31      --border-color: #dee2e6;
32      --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
33      --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
34      --glow: 0 0 20px rgba(51, 51, 51, 0.1);
35      --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
36    }
37
38    /* ===== GLOBAL STYLES ===== */
39    * {
40      margin: 0;
41      padding: 0;
42      box-sizing: border-box;
43    }
44
45    body {
46      font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
47      background: var(--bg-primary);
48      color: var(--text-color);
49      line-height: 1.6;
50      position: relative;
51      overflow-x: hidden;
52    }
53
54    /* Subtle animated background */
55    body::before {
56      content: '';
57      position: fixed;
58      top: 0;
59      left: 0;
60      width: 100%;
61      height: 100%;
62      background: 
63        radial-gradient(circle at 20% 20%, rgba(51, 51, 51, 0.03) 0%, transparent 50%),
64        radial-gradient(circle at 80% 80%, rgba(102, 102, 102, 0.03) 0%, transparent 50%),
65        radial-gradient(circle at 40% 60%, rgba(85, 85, 85, 0.02) 0%, transparent 50%);
66      z-index: -2;
67      pointer-events: none;
68    }
69
70    /* ===== HERO SECTION ===== */
71    .hero {
72      background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%);
73      color: var(--text-color);
74      text-align: center;
75      padding: 8rem 2rem 10rem;
76      position: relative;
77      overflow: hidden;
78    }
79
80    .hero::before {
81      content: '';
82      position: absolute;
83      top: 0;
84      left: 0;
85      right: 0;
86      bottom: 0;
87      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23333333' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
88      opacity: 0.5;
89      pointer-events: none;
90    }
91
92    .hero h1 {
93      font-family: 'Source Serif 4', 'Georgia', serif;
94      font-size: 3.5rem;
95      font-weight: 700;
96      margin-bottom: 1rem;
97      color: var(--text-color);
98      position: relative;
99      z-index: 1;
100    }
101
102    .hero h1 span.highlight {
103      background: var(--gradient);
104      -webkit-background-clip: text;
105      -webkit-text-fill-color: transparent;
106      background-clip: text;
107    }
108
109    .hero .subtitle {
110      font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
111      font-size: 1.3rem;
112      margin-bottom: 1rem;
113      color: var(--primary-color);
114      font-weight: 500;
115      position: relative;
116      z-index: 1;
117    }
118
119    .hero p {
120      font-size: 1.1rem;
121      margin-bottom: 3rem;
122      opacity: 0.8;
123      max-width: 600px;
124      margin-left: auto;
125      margin-right: auto;
126      color: var(--text-light);
127      line-height: 1.8;
128      position: relative;
129      z-index: 1;
130    }
131
132    .hero-buttons {
133      display: flex;
134      gap: 1.5rem;
135      justify-content: center;
136      flex-wrap: wrap;
137      position: relative;
138      z-index: 1;
139    }
140
141    .btn {
142      display: inline-flex;
143      align-items: center;
144      gap: 0.5rem;
145      padding: 12px 24px;
146      border-radius: 8px;
147      text-decoration: none;
148      font-weight: 600;
149      transition: all 0.3s ease;
150      border: 2px solid transparent;
151      cursor: pointer;
152      font-size: 0.95rem;
153      position: relative;
154      overflow: hidden;
155    }
156
157    .btn::before {
158      content: '';
159      position: absolute;
160      top: 0;
161      left: -100%;
162      width: 100%;
163      height: 100%;
164      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
165      transition: left 0.5s ease;
166    }
167
168    .btn:hover::before {
169      left: 100%;
170    }
171
172    .btn-primary {
173      background: var(--gradient);
174      color: white;
175      border-color: var(--primary-color);
176    }
177
178    .btn-primary:hover {
179      transform: translateY(-2px);
180      box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
181    }
182
183    .btn-secondary {
184      background: transparent;
185      color: var(--primary-color);
186      border-color: var(--primary-color);
187    }
188
189    .btn-secondary:hover {
190      background: var(--primary-color);
191      color: white;
192      transform: translateY(-2px);
193      box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
194    }
195
196    /* ===== MAIN CONTENT ===== */
197    .main-content {
198      max-width: 1200px;
199      margin: 0 auto;
200      padding: 4rem 2rem;
201    }
202
203    .section {
204      margin-bottom: 4rem;
205      background: var(--surface-color);
206      border-radius: 16px;
207      border: 1px solid var(--border-color);
208      padding: 3rem;
209      box-shadow: var(--shadow);
210      position: relative;
211      transition: all 0.3s ease;
212    }
213
214    .section:hover {
215      transform: translateY(-5px);
216      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
217    }
218
219    .section::before {
220      content: '';
221      position: absolute;
222      top: 0;
223      left: 0;
224      right: 0;
225      height: 3px;
226      background: var(--gradient);
227      border-radius: 16px 16px 0 0;
228    }
229
230    .section h2 {
231      font-family: 'Source Serif 4', 'Georgia', serif;
232      font-size: 2.2rem;
233      color: var(--text-color);
234      margin-bottom: 1rem;
235      text-align: center;
236      font-weight: 700;
237      position: relative;
238    }
239
240    .section h2 .icon {
241      color: var(--primary-color);
242      margin-right: 1rem;
243      font-size: 1.8rem;
244    }
245
246    .section p {
247      font-size: 1.1rem;
248      text-align: center;
249      margin-bottom: 2rem;
250      color: var(--text-light);
251      line-height: 1.7;
252    }
253
254    /* ===== ABOUT SECTION ===== */
255    .about-content {
256      display: grid;
257      grid-template-columns: 1fr 2fr;
258      gap: 3rem;
259      align-items: center;
260    }
261
262    .profile-card {
263      text-align: center;
264    }
265
266    .profile-image {
267      width: 100%;
268      max-width: 350px;
269      height: 400px;
270      border-radius: 16px;
271      background: var(--gradient);
272      margin: 0 auto 1.5rem;
273      display: flex;
274      align-items: center;
275      justify-content: center;
276      color: white;
277      font-size: 2.5rem;
278      font-weight: bold;
279      font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
280      border: 3px solid var(--primary-color);
281      box-shadow: 0 8px 30px rgba(0, 212, 255, 0.3);
282      transition: all 0.3s ease;
283      overflow: hidden;
284    }
285
286    .profile-image img {
287      width: 100%;
288      height: 100%;
289      object-fit: cover;
290    }
291
292    .profile-image:hover {
293      transform: scale(1.05);
294      box-shadow: 0 12px 40px rgba(0, 212, 255, 0.4);
295    }
296
297    .profile-card h3 {
298      color: var(--text-color);
299      font-size: 1.3rem;
300      margin-bottom: 0.5rem;
301    }
302
303    .profile-card p {
304      color: var(--text-light);
305      font-size: 0.95rem;
306      margin-bottom: 0.3rem;
307    }
308
309    /* Skills Section */
310    .skills-section {
311      margin-top: 2rem;
312    }
313
314    .skills-section h3 {
315      color: var(--primary-color);
316      font-size: 1.3rem;
317      margin-bottom: 1.2rem;
318      display: flex;
319      align-items: center;
320      gap: 0.5rem;
321      text-align: center;
322      justify-content: center;
323    }
324
325    .skills-grid {
326      display: grid;
327      grid-template-columns: repeat(2, 1fr);
328      gap: 1rem;
329    }
330
331    .skills-category {
332      background: var(--bg-secondary);
333      border: 1px solid var(--border-color);
334      border-radius: 10px;
335      padding: 1rem 1.2rem;
336      transition: all 0.3s ease;
337    }
338
339    .skills-category:hover {
340      border-color: var(--primary-color);
341      box-shadow: 0 4px 20px rgba(0, 212, 255, 0.15);
342      transform: translateY(-3px);
343    }
344
345    .skills-category h4 {
346      color: var(--text-color);
347      font-size: 0.95rem;
348      margin-bottom: 0.7rem;
349      font-weight: 600;
350      display: flex;
351      align-items: center;
352      gap: 0.5rem;
353    }
354
355    .skills-category h4 i {
356      color: var(--primary-color);
357      font-size: 0.9rem;
358    }
359
360    .skills-tags {
361      display: flex;
362      flex-wrap: wrap;
363      gap: 0.5rem;
364    }
365
366    .skills-badges {
367      display: flex;
368      flex-wrap: wrap;
369      gap: 0.5rem;
370      align-items: center;
371    }
372
373    .skills-badges img {
374      height: 28px;
375      transition: all 0.2s ease;
376      border-radius: 4px;
377    }
378
379    .skills-badges img:hover {
380      transform: translateY(-2px) scale(1.05);
381      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
382    }
383
384    .skill-tag {
385      display: inline-block;
386      padding: 0.3rem 0.75rem;
387      background: var(--surface-color);
388      border: 1px solid var(--border-color);
389      border-radius: 5px;
390      color: #555555;
391      font-size: 0.8rem;
392      transition: all 0.2s ease;
393      cursor: default;
394    }
395
396    .skill-tag:hover {
397      transform: translateY(-3px);
398      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
399    }
400    
401    /* Subtle color variations for different skill categories */
402    .skills-category:nth-child(1) h4 { color: #4a5568; }
403    .skills-category:nth-child(1) h4 i { color: #5a6c7d; }
404    .skills-category:nth-child(1) .skill-tag { color: #4a5568; border-color: #b8c5d0; background: #f7fafc; }
405    
406    .skills-category:nth-child(2) h4 { color: #2d3748; }
407    .skills-category:nth-child(2) h4 i { color: #4a5568; }
408    .skills-category:nth-child(2) .skill-tag { color: #2d3748; border-color: #b8c5d0; background: #f7fafc; }
409    
410    .skills-category:nth-child(3) h4 { color: #1a202c; }
411    .skills-category:nth-child(3) h4 i { color: #2d3748; }
412    .skills-category:nth-child(3) .skill-tag { color: #1a202c; border-color: #b8c5d0; background: #f7fafc; }
413    
414    .skills-category:nth-child(4) h4 { color: #3d4852; }
415    .skills-category:nth-child(4) h4 i { color: #5a6c7d; }
416    .skills-category:nth-child(4) .skill-tag { color: #3d4852; border-color: #b8c5d0; background: #f7fafc; }
417    
418    .skills-category:nth-child(5) h4 { color: #2c3e50; }
419    .skills-category:nth-child(5) h4 i { color: #475569; }
420    .skills-category:nth-child(5) .skill-tag { color: #2c3e50; border-color: #b8c5d0; background: #f7fafc; }
421    
422    .skills-category:nth-child(6) h4 { color: #1e293b; }
423    .skills-category:nth-child(6) h4 i { color: #334155; }
424    .skills-category:nth-child(6) .skill-tag { color: #1e293b; border-color: #b8c5d0; background: #f7fafc; }
425
426    .experience-grid {
427      display: grid;
428      grid-template-columns: 1fr 1fr;
429      gap: 3rem;
430      margin-top: 2rem;
431    }
432
433    .experience-section h3 {
434      color: var(--primary-color);
435      font-size: 1.4rem;
436      margin-bottom: 1.5rem;
437      display: flex;
438      align-items: center;
439      gap: 0.5rem;
440    }
441
442    .experience-item {
443      background: var(--bg-secondary);
444      border: 1px solid var(--border-color);
445      padding: 1.2rem;
446      border-radius: 12px;
447      margin-bottom: 1rem;
448      transition: all 0.3s ease;
449      position: relative;
450      border-left: 4px solid var(--primary-color);
451      cursor: pointer;
452    }
453
454    .experience-item:hover {
455      border-color: var(--primary-color);
456      box-shadow: 0 8px 30px rgba(0, 212, 255, 0.2);
457      transform: translateY(-3px);
458      background: var(--surface-color);
459    }
460
461    .experience-header {
462      display: flex;
463      align-items: center;
464      gap: 1rem;
465      position: relative;
466    }
467
468    .experience-header::after {
469      content: '\f078';
470      font-family: 'Font Awesome 5 Free';
471      font-weight: 900;
472      position: absolute;
473      right: 0;
474      color: var(--text-light);
475      transition: transform 0.3s ease;
476    }
477
478    .experience-item.expanded .experience-header::after {
479      transform: rotate(180deg);
480    }
481
482    .experience-logo {
483      width: 80px;
484      height: 80px;
485      background: var(--bg-tertiary);
486      border-radius: 8px;
487      display: flex;
488      align-items: center;
489      justify-content: center;
490      flex-shrink: 0;
491      border: 1px solid var(--border-color);
492      transition: all 0.3s ease;
493      padding: 4px;
494    }
495
496    .experience-logo i {
497      font-size: 2rem;
498      color: var(--primary-color);
499    }
500
501    /* Logo images inside experience blocks */
502    .experience-logo img {
503      width: 100%;
504      height: 100%;
505      object-fit: contain;
506      display: block;
507      border-radius: 4px;
508    }
509
510    .experience-logo.microsoft {
511      background: #333333;
512    }
513
514    .experience-logo.microsoft i {
515      color: white;
516    }
517
518    .experience-logo.education {
519      background: var(--accent-color);
520    }
521
522    .experience-logo.education i {
523      color: white;
524    }
525
526    .experience-basic-info {
527      flex: 1;
528      min-width: 0;
529    }
530
531    .experience-basic-info h4 {
532      color: var(--text-color);
533      font-weight: 600;
534      margin-bottom: 0.2rem;
535      font-size: 1rem;
536    }
537
538    .experience-basic-info .company {
539      color: var(--accent-color);
540      font-weight: 500;
541      margin-bottom: 0.2rem;
542      font-size: 0.9rem;
543    }
544
545    .experience-basic-info .duration {
546      color: var(--text-light);
547      font-size: 0.8rem;
548      font-style: italic;
549    }
550
551    .experience-details {
552      max-height: 0;
553      overflow: hidden;
554      transition: max-height 0.3s ease, padding-top 0.3s ease;
555      padding-top: 0;
556    }
557
558    .experience-item.expanded .experience-details {
559      max-height: 300px;
560      padding-top: 1rem;
561    }
562
563    .experience-details p {
564      color: var(--text-light);
565      font-size: 0.85rem;
566      line-height: 1.5;
567      margin-bottom: 0.5rem;
568    }
569
570    .experience-details ul {
571      color: var(--text-light);
572      font-size: 0.8rem;
573      line-height: 1.4;
574      padding-left: 1.2rem;
575      margin: 0;
576    }
577
578    .experience-details li {
579      margin-bottom: 0.2rem;
580    }
581
582    /* ===== PROJECTS SECTION ===== */
583    .projects-grid {
584      display: grid;
585      grid-template-columns: 1fr 1fr;
586      gap: 2rem;
587      margin-top: 2rem;
588    }
589
590    /* Ensure the projects section can host an overlay positioned inside it */
591    #projects {
592      position: relative;
593      z-index: 1;
594      isolation: isolate;
595    }
596
597    /* Hide projects beyond initial display */
598    .project-card.hidden {
599      display: none;
600    }
601
602    /* Load More Button */
603    .load-more-container {
604      text-align: center;
605      margin-top: 2rem;
606    }
607
608    .load-more-btn {
609      display: inline-flex;
610      align-items: center;
611      gap: 0.75rem;
612      padding: 14px 32px;
613      background: var(--gradient);
614      color: white;
615      border: 2px solid var(--primary-color);
616      border-radius: 8px;
617      font-size: 1rem;
618      font-weight: 600;
619      cursor: pointer;
620      transition: all 0.3s ease;
621      position: relative;
622      overflow: hidden;
623    }
624
625    .load-more-btn::before {
626      content: '';
627      position: absolute;
628      top: 0;
629      left: -100%;
630      width: 100%;
631      height: 100%;
632      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
633      transition: left 0.5s ease;
634    }
635
636    .load-more-btn:hover::before {
637      left: 100%;
638    }
639
640    .load-more-btn:hover {
641      transform: translateY(-2px);
642      box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
643    }
644
645    .load-more-btn i {
646      transition: transform 0.3s ease;
647    }
648
649    .load-more-btn:hover i {
650      transform: translateY(2px);
651    }
652
653    .load-more-btn.hidden {
654      display: none;
655    }
656
657    .project-card {
658      background: var(--bg-color);
659      border: 2px solid var(--border-color);
660      border-radius: 12px;
661      padding: 2rem;
662      transition: all 0.3s ease;
663      position: relative;
664      overflow: hidden;
665      cursor: pointer;
666      min-height: 200px;
667      box-shadow: var(--shadow-light);
668    }
669
670    .project-card:hover {
671      transform: translateY(-5px);
672      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
673      border-color: var(--primary-color);
674      background: var(--bg-color);
675    }
676
677    /* ===== PROJECT MODAL ===== */
678    .project-modal {
679      position: absolute;
680      top: 0;
681      left: 0;
682      width: 100%;
683      height: 100%;
684      background: rgba(0, 0, 0, 0.15);
685      z-index: 100;
686      display: none;
687      justify-content: center;
688      align-items: center;
689      padding: 20px;
690    }
691
692    .project-modal.active {
693      display: flex;
694    }
695
696    .modal-content {
697      background: var(--bg-color);
698      border: 3px solid var(--primary-color);
699      border-radius: 16px;
700      padding: 2rem;
701      max-width: 650px;
702      width: 95%;
703      max-height: 85vh;
704      overflow-y: auto;
705      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
706      position: relative;
707      margin: auto;
708    }
709
710    .modal-header {
711      display: flex;
712      justify-content: space-between;
713      align-items: flex-start;
714      margin-bottom: 1.5rem;
715      padding-bottom: 1rem;
716      border-bottom: 2px solid var(--border-color);
717    }
718
719    .modal-close {
720      background: none;
721      border: none;
722      font-size: 1.5rem;
723      color: var(--text-light);
724      cursor: pointer;
725      padding: 0.5rem;
726      border-radius: 50%;
727      transition: all 0.3s ease;
728      width: 40px;
729      height: 40px;
730      display: flex;
731      align-items: center;
732      justify-content: center;
733    }
734
735    .modal-close:hover {
736      background: var(--bg-secondary);
737      color: var(--primary-color);
738      transform: rotate(90deg);
739    }
740
741    .modal-title {
742      margin: 0;
743      color: var(--primary-color);
744      font-size: 1.4rem;
745      font-weight: 600;
746      display: flex;
747      align-items: center;
748      gap: 0.5rem;
749    }
750
751    .modal-tech-stack {
752      display: flex;
753      flex-wrap: wrap;
754      gap: 0.5rem;
755      margin: 1rem 0;
756    }
757
758    .modal-tech-tag {
759      background: transparent;
760      color: var(--text-color);
761      padding: 6px 12px;
762      border-radius: 15px;
763      font-size: 0.8rem;
764      font-weight: 500;
765      border: 1px solid var(--border-color);
766    }
767
768    .modal-description {
769      color: var(--text-color);
770      line-height: 1.6;
771      margin-bottom: 1.5rem;
772      font-size: 1rem;
773    }
774
775    .modal-features {
776      margin-bottom: 1.5rem;
777    }
778
779    .modal-features h4 {
780      color: var(--primary-color);
781      margin-bottom: 0.8rem;
782      font-size: 1.1rem;
783    }
784
785    .modal-features ul {
786      list-style: none;
787      padding: 0;
788    }
789
790    .modal-features li {
791      color: var(--text-color);
792      padding: 0.4rem 0;
793      position: relative;
794      padding-left: 1.5rem;
795    }
796
797    .modal-features li::before {
798      content: '•';
799      color: var(--primary-color);
800      font-weight: bold;
801      position: absolute;
802      left: 0;
803      font-size: 1.2rem;
804    }
805
806    .modal-links {
807      display: flex;
808      flex-wrap: wrap;
809      gap: 1rem;
810      margin-bottom: 1rem;
811    }
812
813    .modal-link {
814      color: #0066cc;
815      text-decoration: none;
816      font-weight: 600;
817      display: inline-flex;
818      align-items: center;
819      gap: 0.4rem;
820      padding: 0;
821    }
822
823    .modal-link:hover {
824      color: #0052a3;
825      text-decoration: underline;
826      transform: none;
827      box-shadow: none;
828    }
829
830    .project-card::before {
831      content: '';
832      position: absolute;
833      top: 0;
834      left: 0;
835      width: 100%;
836      height: 3px;
837      background: var(--gradient);
838      border-radius: 12px 12px 0 0;
839    }
840
841    .project-card h4 {
842      color: var(--text-color);
843      font-weight: 600;
844      margin-bottom: 1rem;
845      font-size: 1.2rem;
846      display: flex;
847      align-items: center;
848      gap: 0.5rem;
849    }
850
851    .project-card .tech-stack {
852      display: flex;
853      flex-wrap: wrap;
854      gap: 0.5rem;
855      margin-bottom: 1rem;
856    }
857
858    .project-card .tech-tag {
859      background: transparent;
860      color: var(--text-color);
861      padding: 4px 10px;
862      border-radius: 999px;
863      font-size: 0.8rem;
864      font-weight: 500;
865      border: 1px solid var(--border-color);
866    }
867
868    .project-card p {
869      color: var(--text-color);
870      font-size: 0.95rem;
871      line-height: 1.6;
872      margin-bottom: 1rem;
873    }
874
875    /* ===== BLOG PREVIEW & CONTACT SECTIONS ===== */
876    .blog-preview, .contact-grid {
877      display: grid;
878      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
879      gap: 2rem;
880      margin-top: 2rem;
881    }
882
883    .contact-grid {
884      gap: 1.5rem;
885      margin-top: 1.5rem;
886    }
887
888    .blog-card, .contact-card {
889      background: var(--bg-secondary);
890      border: 1px solid var(--border-color);
891      border-radius: 12px;
892      padding: 2rem;
893      transition: all 0.3s ease;
894      position: relative;
895      overflow: hidden;
896      display: flex;
897      flex-direction: column;
898    }
899
900    .contact-card {
901      text-align: center;
902      padding: 1.5rem 1rem;
903    }
904
905    .contact-card i {
906      font-size: 1.6rem;
907      color: var(--primary-color);
908      margin-bottom: 0.6rem;
909      transition: all 0.2s ease;
910    }
911
912    /* Compact contact section styling */
913    #contact {
914      padding: 2rem 3rem;
915    }
916
917    #contact h2 {
918      font-size: 1.5rem;
919      font-weight: 600;
920      margin-bottom: 0.5rem;
921    }
922
923    #contact p {
924      font-size: 0.95rem;
925      color: var(--text-muted);
926      margin-bottom: 1.5rem;
927      max-width: 600px;
928      margin-left: auto;
929      margin-right: auto;
930    }
931
932    .contact-links {
933      display: flex;
934      gap: 2rem;
935      justify-content: center;
936      flex-wrap: wrap;
937    }
938
939    .contact-link {
940      display: flex;
941      align-items: center;
942      gap: 0.5rem;
943      padding: 0.75rem 1.5rem;
944      background: var(--bg-secondary);
945      border: 1px solid var(--border-color);
946      border-radius: 8px;
947      text-decoration: none;
948      color: var(--text-color);
949      font-weight: 500;
950      font-size: 0.95rem;
951      transition: all 0.3s ease;
952    }
953
954    .contact-link i {
955      font-size: 1.2rem;
956      color: var(--primary-color);
957    }
958    .contact-link:hover {
959      color: white;
960      transform: translateY(-2px);
961      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
962    }
963
964    .contact-link:hover i {
965      color: white;
966    }
967
968    /* Brand-specific icon colors (default) */
969    .contact-link.email i { color: #EA4335; }       /* Gmail red */
970    .contact-link.linkedin i { color: #0A66C2; }    /* LinkedIn blue */
971    .contact-link.github i { color: #333; }         /* GitHub black */
972
973    /* Brand-specific hover backgrounds */
974    .contact-link.email:hover { background: #EA4335; border-color: #EA4335; }
975    .contact-link.linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
976    .contact-link.github:hover { background: #333; border-color: #333; }
977
978    /* Hero/social link styles */
979    .social-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text-color); transition: color 0.2s ease; }
980    .social-link i { font-size: 1.2rem; }
981    .social-link.github i { color: #333; }
982    .social-link.linkedin i { color: #0A66C2; }
983    .social-link.scholar i { color: #4285F4; }
984    .social-link.github:hover { color: #333; }
985    .social-link.linkedin:hover { color: #0A66C2; }
986    .social-link.scholar:hover { color: #4285F4; }
987
988    .contact-card h4 {
989      margin-bottom: 0.5rem;
990      color: var(--text-color);
991      font-weight: 600;
992      font-size: 1rem;
993    }
994
995    .blog-card::after {
996      content: '';
997      position: absolute;
998      top: 0;
999      left: 0;
1000      width: 100%;
1001      height: 3px;
1002      background: var(--gradient);
1003      border-radius: 12px 12px 0 0;
1004    }
1005
1006    .blog-card:hover, .contact-card:hover {
1007      transform: translateY(-3px);
1008      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
1009      border-color: var(--primary-color);
1010      background: var(--surface-color);
1011    }
1012
1013    .blog-card .category {
1014      background: transparent;
1015      color: #6b9bd1;
1016      padding: 3px 8px;
1017      border-radius: 12px;
1018      font-size: 0.7rem;
1019      font-weight: 600;
1020      display: inline-block;
1021      margin-bottom: 1rem;
1022      border: 1px solid #6b9bd1;
1023    }
1024
1025    .blog-card h4 {
1026      margin-bottom: 1rem;
1027      color: var(--text-color);
1028      font-weight: 600;
1029      font-size: 1.2rem;
1030    }
1031
1032    .blog-card p {
1033      font-size: 0.95rem;
1034      color: var(--text-light);
1035      margin-bottom: 1.5rem;
1036      line-height: 1.6;
1037      flex-grow: 1;
1038    }
1039
1040    .blog-card a, .contact-card a {
1041      color: #0066cc;
1042      text-decoration: none;
1043      font-weight: 600;
1044      transition: all 0.3s ease;
1045      font-size: 0.95rem;
1046      display: inline-flex;
1047      align-items: center;
1048      gap: 0.5rem;
1049    }
1050
1051    .blog-card a:hover, .contact-card a:hover {
1052      color: #0052a3;
1053    }
1054
1055    .contact-card:hover i {
1056      color: var(--accent-color);
1057      transform: scale(1.05);
1058    }
1059
1060    /* ===== RESPONSIVE DESIGN ===== */
1061    @media (max-width: 1024px) {
1062      .hero h1 {
1063        font-size: 2.8rem;
1064      }
1065      
1066      /* Keep 2-column layouts on tablets */
1067      .skills-grid {
1068        grid-template-columns: repeat(2, 1fr);
1069      }
1070      
1071      .experience-grid {
1072        grid-template-columns: 1fr 1fr;
1073      }
1074      
1075      .projects-grid {
1076        grid-template-columns: 1fr 1fr;
1077      }
1078    }
1079
1080    @media (max-width: 768px) {
1081      .hero {
1082        padding: 4rem 1.5rem 7rem;
1083      }
1084
1085      .hero h1 {
1086        font-size: 1.8rem;
1087        line-height: 1.2;
1088      }
1089
1090      .hero .subtitle {
1091        font-size: 1rem;
1092        margin-bottom: 0.75rem;
1093      }
1094
1095      .hero p {
1096        font-size: 0.9rem;
1097        line-height: 1.5;
1098        padding: 0 0.5rem;
1099      }
1100
1101      .hero-buttons {
1102        gap: 1rem;
1103        flex-direction: column;
1104        width: 100%;
1105        padding: 0 1rem;
1106        align-items: center;
1107      }
1108
1109      .btn {
1110        width: 100%;
1111        max-width: 300px;
1112        justify-content: center;
1113      }
1114
1115      /* About section - photo first, then content */
1116      .about-content {
1117        display: flex !important;
1118        flex-direction: column !important;
1119        align-items: center;
1120        text-align: center;
1121        gap: 1.5rem;
1122      }
1123
1124      .about-content > div:first-child {
1125        order: -1;
1126      }
1127      
1128      .about-content > div {
1129        width: 100%;
1130      }
1131
1132      .about-content p {
1133        text-align: left;
1134      }
1135
1136      .profile-card {
1137        margin: 0 auto;
1138      }
1139
1140      .main-content {
1141        padding: 1.5rem 1rem;
1142      }
1143
1144      .section {
1145        padding: 1.5rem 1rem;
1146        margin-bottom: 2rem;
1147      }
1148
1149      .section h2 {
1150        font-size: 1.5rem;
1151      }
1152
1153      .section h2 .icon {
1154        font-size: 1.3rem;
1155      }
1156
1157      .section p {
1158        font-size: 0.9rem;
1159      }
1160
1161      .profile-image {
1162        max-width: 250px;
1163        height: 300px;
1164        font-size: 1.8rem;
1165      }
1166
1167      .profile-card h3 {
1168        font-size: 1.1rem;
1169      }
1170
1171      .profile-card p {
1172        font-size: 0.85rem;
1173      }
1174
1175      /* Experience and Education - stack vertically */
1176      .experience-grid {
1177        display: flex !important;
1178        flex-direction: column !important;
1179        gap: 2rem;
1180      }
1181
1182      /* Skills grid - one column */
1183      .skills-grid {
1184        display: flex !important;
1185        flex-direction: column !important;
1186        gap: 1rem;
1187      }
1188
1189      .skills-section h3 {
1190        font-size: 1.1rem;
1191      }
1192
1193      .skills-category {
1194        padding: 1rem;
1195      }
1196
1197      .skills-category h4 {
1198        font-size: 0.85rem;
1199      }
1200
1201      .skill-tag {
1202        font-size: 0.75rem;
1203        padding: 0.25rem 0.65rem;
1204      }
1205
1206      .experience-section h3 {
1207        font-size: 1.2rem;
1208      }
1209
1210      .experience-item {
1211        padding: 1rem;
1212      }
1213
1214      .experience-logo {
1215        width: 65px;
1216        height: 65px;
1217      }
1218
1219      .experience-logo i {
1220        font-size: 1.6rem;
1221      }
1222
1223      .experience-basic-info h4 {
1224        font-size: 0.9rem;
1225      }
1226
1227      .experience-basic-info .company {
1228        font-size: 0.85rem;
1229      }
1230
1231      .experience-basic-info .duration {
1232        font-size: 0.75rem;
1233      }
1234
1235      .experience-details p {
1236        font-size: 0.8rem;
1237      }
1238
1239      .experience-details ul {
1240        font-size: 0.75rem;
1241      }
1242
1243      /* Projects - one column */
1244      .projects-grid {
1245        display: flex !important;
1246        flex-direction: column !important;
1247        gap: 1.5rem;
1248      }
1249
1250      .project-card {
1251        padding: 1.5rem;
1252        min-height: 180px;
1253      }
1254
1255      .project-card h4 {
1256        font-size: 1.05rem;
1257      }
1258
1259      .project-card p {
1260        font-size: 0.85rem;
1261      }
1262
1263      .project-card .tech-tag {
1264        font-size: 0.75rem;
1265        padding: 3px 7px;
1266      }
1267
1268      .load-more-btn {
1269        padding: 12px 28px;
1270        font-size: 0.9rem;
1271      }
1272
1273      .contact-links {
1274        flex-direction: column;
1275        gap: 1rem;
1276        padding: 0 1rem;
1277      }
1278
1279      .contact-link {
1280        width: 100%;
1281        justify-content: center;
1282      }
1283
1284      /* Latest Posts - one column */
1285      .blog-preview {
1286        grid-template-columns: 1fr;
1287      }
1288      
1289      .section h2 {
1290        font-size: 1.5rem;
1291      }
1292      
1293      .section p {
1294        font-size: 0.85rem;
1295        line-height: 1.5;
1296      }
1297
1298      .blog-card h4 {
1299        font-size: 1.05rem;
1300      }
1301
1302      .blog-card p {
1303        font-size: 0.85rem;
1304        line-height: 1.5;
1305      }
1306
1307      .blog-card .category {
1308        font-size: 0.75rem;
1309        padding: 5px 12px;
1310      }
1311
1312      .modal-content {
1313        padding: 1.5rem;
1314        max-height: 90vh;
1315      }
1316
1317      .modal-title {
1318        font-size: 1.2rem;
1319      }
1320
1321      .modal-tech-tag {
1322        font-size: 0.75rem;
1323        padding: 5px 10px;
1324      }
1325    }
1326
1327    @media (max-width: 480px) {
1328      .hero {
1329        padding: 2.5rem 1rem;
1330      }
1331
1332      .hero h1 {
1333        font-size: 1.5rem;
1334      }
1335
1336      .hero .subtitle {
1337        font-size: 0.85rem;
1338      }
1339
1340      .hero p {
1341        font-size: 0.85rem;
1342      }
1343
1344      .section {
1345        padding: 1.25rem 0.75rem;
1346        border-radius: 12px;
1347      }
1348
1349      .section h2 {
1350        font-size: 1.3rem;
1351      }
1352
1353      .section h2 .icon {
1354        font-size: 1.1rem;
1355      }
1356
1357      .section p {
1358        font-size: 0.85rem;
1359      }
1360
1361      .btn {
1362        padding: 10px 18px;
1363        font-size: 0.85rem;
1364      }
1365
1366      .profile-image {
1367        max-width: 220px;
1368        height: 280px;
1369        font-size: 1.5rem;
1370      }
1371
1372      .skills-category {
1373        padding: 0.85rem;
1374      }
1375
1376      .skills-category h4 {
1377        font-size: 0.8rem;
1378      }
1379
1380      .skill-tag {
1381        font-size: 0.7rem;
1382        padding: 0.2rem 0.55rem;
1383      }
1384
1385      .experience-item {
1386        padding: 0.85rem;
1387      }
1388
1389      .experience-logo {
1390        width: 55px;
1391        height: 55px;
1392      }
1393
1394      .experience-logo i {
1395        font-size: 1.4rem;
1396      }
1397
1398      .experience-basic-info h4 {
1399        font-size: 0.85rem;
1400      }
1401
1402      .experience-basic-info .company {
1403        font-size: 0.8rem;
1404      }
1405
1406      .experience-basic-info .duration {
1407        font-size: 0.7rem;
1408      }
1409
1410      .project-card {
1411        padding: 1.25rem;
1412        min-height: 160px;
1413      }
1414
1415      .project-card h4 {
1416        font-size: 0.95rem;
1417      }
1418
1419      .project-card p {
1420        font-size: 0.8rem;
1421      }
1422
1423      .load-more-btn {
1424        padding: 10px 24px;
1425        font-size: 0.85rem;
1426      }
1427
1428      .blog-card h4 {
1429        font-size: 0.95rem;
1430      }
1431
1432      .blog-card p {
1433        font-size: 0.8rem;
1434      }
1435
1436      .modal-content {
1437        padding: 1.25rem;
1438      }
1439
1440      .modal-title {
1441        font-size: 1.1rem;
1442      }
1443    }
1444
1445    /* ===== SUBTLE ANIMATIONS ===== */
1446    @keyframes fadeInUp {
1447      from {
1448        opacity: 0;
1449        transform: translateY(30px);
1450      }
1451      to {
1452        opacity: 1;
1453        transform: translateY(0);
1454      }
1455    }
1456
1457    .section {
1458      animation: fadeInUp 0.6s ease-out;
1459    }
1460  </style>
1461</head>
1462<body>
1463  <!-- Header (auto-generated by common.js) -->
1464  <header></header>
1465
1466  <section class="hero">
1467    <!-- Stick figures background container (confined to hero) -->
1468    <div class="stick-figures-container">
1469
1470      <!-- 1. Broomstick rider — person in front, bristles trailing behind -->
1471      <div class="broomstick-rider">
1472        <svg viewBox="0 0 180 120" fill="none" xmlns="http://www.w3.org/2000/svg">
1473          <!-- Broomstick (slight curve, bristles on right/back) -->
1474          <path d="M25 70 Q90 66 155 68" stroke="#8b0000" stroke-width="3" stroke-linecap="round" fill="none"/>
1475          <!-- Bristles (trailing behind on right) -->
1476          <path d="M148 68 Q158 58 165 54" stroke="#cc3333" stroke-width="2" fill="none"/>
1477          <path d="M148 68 Q162 64 170 62" stroke="#cc3333" stroke-width="2" fill="none"/>
1478          <path d="M148 68 Q162 72 170 74" stroke="#cc3333" stroke-width="2" fill="none"/>
1479          <path d="M148 68 Q158 78 165 82" stroke="#cc3333" stroke-width="2" fill="none"/>
1480          <path d="M148 68 Q160 68 172 68" stroke="#cc3333" stroke-width="2" fill="none"/>
1481          <!-- Person (sitting in front / left side of broom) -->
1482          <!-- Head -->
1483          <circle cx="42" cy="34" r="10" stroke="#b22222" stroke-width="2.5" fill="none"/>
1484          <!-- Body (curved spine) -->
1485          <path d="M42 44 Q40 54 42 66" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1486          <!-- Legs (sitting on broom, curved) -->
1487          <path d="M42 66 Q34 72 28 76" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1488          <path d="M42 66 Q50 72 56 74" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1489          <!-- Arms (holding broom, reaching back) -->
1490          <path d="M42 52 Q52 56 60 62" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1491          <path d="M42 52 Q34 58 28 64" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1492          <!-- Hat (witch/wizard) -->
1493          <path d="M32 34 Q37 14 42 10 Q47 14 52 34" stroke="#b22222" stroke-width="2" fill="none"/>
1494          <line x1="28" y1="34" x2="56" y2="34" stroke="#b22222" stroke-width="2" stroke-linecap="round"/>
1495          <!-- Speed lines (behind the rider) -->
1496          <line x1="120" y1="50" x2="140" y2="50" stroke="#b22222" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
1497          <line x1="125" y1="58" x2="142" y2="58" stroke="#b22222" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
1498          <line x1="118" y1="66" x2="135" y2="66" stroke="#b22222" stroke-width="1.5" stroke-linecap="round" opacity="0.3"/>
1499        </svg>
1500      </div>
1501
1502      <!-- 2. Walking & Thinking — static, bottom-left -->
1503      <div class="figure-walking">
1504        <svg viewBox="0 0 90 120" fill="none" xmlns="http://www.w3.org/2000/svg">
1505          <!-- Thought cloud -->
1506          <path d="M58 8 Q54 2 48 4 Q43 0 38 4 Q33 2 31 7 Q27 6 27 11 Q24 13 26 17 Q25 20 29 22 Q31 25 36 24 Q39 28 44 26 Q48 28 52 25 Q56 27 58 23 Q62 22 62 18 Q65 15 62 12 Q63 10 60 8 Z" stroke="#b22222" stroke-width="1.5" fill="none"/>
1507          <!-- "idea" dot inside cloud -->
1508          <circle cx="44" cy="14" r="1.5" fill="#b22222"/>
1508
1509          <!-- Small connector bubbles from head to cloud -->
1510          <circle cx="48" cy="28" r="1.8" stroke="#b22222" stroke-width="1.2" fill="none"/>
1511          <circle cx="45" cy="33" r="1.2" stroke="#b22222" stroke-width="1" fill="none"/>
1512          <!-- Head -->
1513          <circle cx="42" cy="42" r="10" stroke="#b22222" stroke-width="2.5" fill="none"/>
1514          <!-- Body (curved posture) -->
1515          <path d="M42 52 Q44 66 42 82" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1516          <!-- Arms (curved swing) -->
1517          <path d="M42 62 Q32 66 26 74" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1518          <path d="M42 62 Q52 66 58 72" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1519          <!-- Legs (curved stride) -->
1520          <path d="M42 82 Q34 94 28 106" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1521          <path d="M42 82 Q50 94 56 106" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1522          <!-- Feet -->
1523          <path d="M28 106 Q24 106 22 105" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none"/>
1524          <path d="M56 106 Q60 106 62 105" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none"/>
1525        </svg>
1526      </div>
1527
1528      <!-- 4. Hiking figure on mountain terrain — static, bottom-right -->
1529      <div class="figure-hiking">
1530        <svg viewBox="0 0 140 110" fill="none" xmlns="http://www.w3.org/2000/svg">
1531          <!-- Mountain terrain: up, down, up, down, up — real hiking feel -->
1532          <path d="M5 95 Q15 85 25 75 Q35 85 45 90 Q55 78 65 65 Q75 75 85 82 Q95 68 108 52 Q118 62 135 70" stroke="#b22222" stroke-width="1.8" stroke-linecap="round" fill="none"/>
1533          <!-- Small vegetation/rocks on trail -->
1534          <circle cx="20" cy="78" r="1.5" stroke="#b22222" stroke-width="1" fill="none" opacity="0.4"/>
1535          <circle cx="48" cy="88" r="1.2" stroke="#b22222" stroke-width="1" fill="none" opacity="0.4"/>
1536          <circle cx="78" cy="79" r="1.5" stroke="#b22222" stroke-width="1" fill="none" opacity="0.4"/>
1537          <circle cx="112" cy="56" r="1.2" stroke="#b22222" stroke-width="1" fill="none" opacity="0.4"/>
1538          <!-- Hiker on mid-peak -->
1539          <!-- Head -->
1540          <circle cx="65" cy="28" r="7" stroke="#b22222" stroke-width="2.5" fill="none"/>
1541          <!-- Hat (curved brim) -->
1542          <path d="M56 24 Q65 20 74 24" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none"/>
1543          <!-- Body (curved, leaning into climb) -->
1544          <path d="M65 35 Q63 46 62 58" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1545          <!-- Backpack (rounded) -->
1546          <path d="M67 38 Q73 38 74 42 Q76 48 74 52 Q72 54 67 52" stroke="#b22222" stroke-width="2" fill="none"/>
1547          <!-- Walking stick -->
1548          <path d="M50 48 Q47 62 44 84" stroke="#8b0000" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1549          <!-- Arm holding stick -->
1550          <path d="M63 44 Q56 46 50 48" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1551          <!-- Other arm swinging -->
1552          <path d="M63 44 Q70 50 74 56" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1553          <!-- Legs on slope -->
1554          <path d="M62 58 Q55 66 50 72" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1555          <path d="M62 58 Q68 64 72 70" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1556          <!-- Boots -->
1557          <path d="M50 72 Q46 73 44 72" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1558          <path d="M72 70 Q76 71 78 70" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1559        </svg>
1560      </div>
1561
1562      <!-- 5. Sitting with cat, gazing at mountains — static, bigger -->
1563      <div class="figure-cat">
1564        <svg viewBox="0 0 160 110" fill="none" xmlns="http://www.w3.org/2000/svg">
1565          <!-- Mountains -->
1566          <path d="M75 78 Q88 50 100 28 Q112 50 125 78" stroke="#b22222" stroke-width="1.8" fill="none"/>
1567          <path d="M95 78 Q105 55 112 40 Q119 55 130 78" stroke="#b22222" stroke-width="1.8" fill="none"/>
1568          <path d="M85 78 Q98 48 108 32 Q118 48 132 78" stroke="#b22222" stroke-width="1.2" fill="none" opacity="0.35"/>
1569          <!-- Snow caps -->
1570          <path d="M96 36 Q100 28 104 36" stroke="#b22222" stroke-width="1.2" fill="none" opacity="0.5"/>
1571          <path d="M108 46 Q112 40 116 46" stroke="#b22222" stroke-width="1.2" fill="none" opacity="0.5"/>
1572          <!-- Ground -->
1573          <line x1="8" y1="78" x2="152" y2="78" stroke="#b22222" stroke-width="1.5" stroke-linecap="round"/>
1574          <!-- Grass tufts -->
1575          <path d="M20 78 Q22 74 24 78" stroke="#b22222" stroke-width="1" fill="none" opacity="0.3"/>
1576          <path d="M60 78 Q62 74 64 78" stroke="#b22222" stroke-width="1" fill="none" opacity="0.3"/>
1577          <!-- Person sitting (curvy body) -->
1578          <circle cx="35" cy="46" r="8" stroke="#b22222" stroke-width="2.5" fill="none"/>
1579          <path d="M35 54 Q36 62 35 70" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1580          <!-- Legs (sitting, bent — curved) -->
1581          <path d="M35 70 Q28 74 26 78 Q30 78 36 76" stroke="#b22222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
1582          <!-- Arm resting (curved) -->
1583          <path d="M35 60 Q28 65 26 68" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1584          <!-- Arm petting cat (curved) -->
1585          <path d="M35 60 Q44 62 52 66" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1586          <!-- Cat body -->
1587          <ellipse cx="60" cy="72" rx="9" ry="6" stroke="#b22222" stroke-width="2" fill="none"/>
1588          <!-- Cat head -->
1589          <circle cx="68" cy="64" r="5" stroke="#b22222" stroke-width="2" fill="none"/>
1590          <!-- Cat ears -->
1591          <path d="M64 60 Q65 55 67 59" stroke="#b22222" stroke-width="1.5" fill="none"/>
1592          <path d="M69 59 Q71 55 72 60" stroke="#b22222" stroke-width="1.5" fill="none"/>
1593          <!-- Cat whiskers -->
1594          <line x1="63" y1="64" x2="57" y2="62" stroke="#b22222" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
1595          <line x1="63" y1="66" x2="57" y2="67" stroke="#b22222" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
1596          <!-- Cat tail (curly) -->
1597          <path d="M51 70 Q45 60 48 52 Q50 49 52 52" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1598        </svg>
1599      </div>
1600
1601      <!-- 6. Working on laptop — static, top-left -->
1602      <div class="figure-laptop">
1603        <svg viewBox="0 0 100 110" fill="none" xmlns="http://www.w3.org/2000/svg">
1604          <!-- Chair -->
1605          <path d="M30 90 Q30 78 32 70" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1606          <path d="M60 90 Q60 78 58 70" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1607          <!-- Seat -->
1608          <path d="M28 70 Q45 72 62 70" stroke="#b22222" stroke-width="2" fill="none" stroke-linecap="round"/>
1609          <!-- Desk surface -->
1610          <path d="M38 52 Q55 50 82 52" stroke="#b22222" stroke-width="2" fill="none" stroke-linecap="round"/>
1611          <!-- Desk legs -->
1612          <line x1="42" y1="52" x2="42" y2="90" stroke="#b22222" stroke-width="1.5" stroke-linecap="round"/>
1613          <line x1="78" y1="52" x2="78" y2="90" stroke="#b22222" stroke-width="1.5" stroke-linecap="round"/>
1614          <!-- Laptop base -->
1615          <path d="M50 52 Q58 51 72 52" stroke="#b22222" stroke-width="2" fill="none" stroke-linecap="round"/>
1616          <!-- Laptop screen -->
1617          <path d="M52 52 Q52 38 54 32 Q62 30 70 32 Q72 38 72 52" stroke="#b22222" stroke-width="2" fill="none" stroke-linecap="round"/>
1618          <!-- Screen content lines -->
1619          <line x1="56" y1="38" x2="66" y2="38" stroke="#b22222" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
1620          <line x1="56" y1="42" x2="64" y2="42" stroke="#b22222" stroke-width="1" stroke-linecap="round" opacity="0.4"/>
1621          <line x1="56" y1="46" x2="68" y2="46" stroke="#b22222" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
1622          <!-- Head -->
1623          <circle cx="40" cy="24" r="8" stroke="#b22222" stroke-width="2.5" fill="none"/>
1624          <!-- Body sitting (curved) -->
1625          <path d="M40 32 Q42 48 40 68" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1626          <!-- Arms reaching to laptop (curved) -->
1627          <path d="M40 44 Q46 46 52 50" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1628          <path d="M40 44 Q48 48 54 50" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1629          <!-- Legs (sitting, bent under desk) -->
1630          <path d="M40 68 Q34 76 30 82" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1631          <path d="M40 68 Q46 74 48 80" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1632          <!-- Feet -->
1633          <path d="M30 82 Q27 83 25 82" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none"/>
1634          <path d="M48 80 Q51 81 53 80" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none"/>
1635        </svg>
1636      </div>
1637
1638      <!-- 7. AI Agent — cute robot stick figure looking around, bottom-center-right -->
1639      <div class="figure-agent">
1640        <svg viewBox="0 0 100 110" fill="none" xmlns="http://www.w3.org/2000/svg">
1641          <!-- Head group (animated — looks around) -->
1642          <g class="agent-head">
1643            <!-- Antenna -->
1644            <line x1="50" y1="18" x2="50" y2="8" stroke="#b22222" stroke-width="2" stroke-linecap="round"/>
1645            <circle cx="50" cy="5" r="3" stroke="#b22222" stroke-width="1.5" fill="none"/>
1646            <!-- Head (rounded square — robot-like) -->
1647            <rect x="34" y="18" width="32" height="26" rx="8" ry="8" stroke="#b22222" stroke-width="2.5" fill="none"/>
1648            <!-- Eyes (big, curious) -->
1649            <circle cx="43" cy="30" r="4" stroke="#b22222" stroke-width="2" fill="none"/>
1650            <circle cx="57" cy="30" r="4" stroke="#b22222" stroke-width="2" fill="none"/>
1651            <!-- Pupils (animated with head) -->
1652            <circle cx="45" cy="30" r="1.5" fill="#b22222"/>
1653            <circle cx="59" cy="30" r="1.5" fill="#b22222"/>
1654            <!-- Cute smile -->
1655            <path d="M44 37 Q50 41 56 37" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1656          </g>
1657          <!-- Neck -->
1658          <line x1="50" y1="44" x2="50" y2="50" stroke="#b22222" stroke-width="2.5" stroke-linecap="round"/>
1659          <!-- Body -->
1660          <path d="M50 50 Q51 62 50 74" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1661          <!-- Arms (one waving, one relaxed) -->
1662          <path d="M50 56 Q38 52 30 46" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1663          <path d="M30 46 Q28 42 32 40" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none"/>
1664          <path d="M50 56 Q62 60 68 66" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1665          <!-- Legs -->
1666          <path d="M50 74 Q42 86 36 96" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1667          <path d="M50 74 Q58 86 64 96" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1668          <!-- Feet -->
1669          <path d="M36 96 Q32 97 30 96" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none"/>
1670          <path d="M64 96 Q68 97 70 96" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none"/>
1671          <!-- Sparkle/thought dots (curiosity) -->
1672          <circle cx="22" cy="20" r="1.5" fill="#b22222" opacity="0.5"/>
1673          <circle cx="78" cy="16" r="1" fill="#b22222" opacity="0.4"/>
1674          <circle cx="76" cy="24" r="1.5" fill="#b22222" opacity="0.35"/>
1675        </svg>
1676      </div>
1677
1678      <!-- 8. Azure Cloud doodle — blue cloud symbol, top center -->
1679      <div class="doodle-azure">
1680        <svg viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
1681          <!-- Azure cloud shape -->
1682          <path d="M30 58 Q14 58 14 46 Q14 36 26 34 Q24 22 36 16 Q48 10 60 18 Q66 8 80 10 Q94 12 96 28 Q108 30 110 42 Q114 54 104 58 Z" stroke="#0078d4" stroke-width="2.5" fill="none" opacity="0.9"/>
1683          <!-- Inner highlight puffs -->
1684          <path d="M36 46 Q44 38 54 42" stroke="#0078d4" stroke-width="1.2" fill="none" opacity="0.3"/>
1685          <path d="M64 38 Q76 32 88 40" stroke="#0078d4" stroke-width="1.2" fill="none" opacity="0.3"/>
1686          <!-- Small Azure "A" hint -->
1687          <path d="M54 36 L60 24 L66 36" stroke="#0078d4" stroke-width="1.8" fill="none" stroke-linecap="round" opacity="0.5"/>
1688          <line x1="56" y1="32" x2="64" y2="32" stroke="#0078d4" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
1689        </svg>
1690      </div>
1691
1692      <!-- 9. Data Transfer between laptops — bottom center -->
1693      <div class="doodle-transfer">
1694        <svg viewBox="0 0 160 80" fill="none" xmlns="http://www.w3.org/2000/svg">
1695          <!-- Laptop 1 (left) -->
1696          <rect x="6" y="38" width="40" height="26" rx="3" stroke="#555" stroke-width="2" fill="none"/>
1697          <!-- Screen -->
1698          <rect x="10" y="42" width="32" height="14" rx="2" stroke="#555" stroke-width="1.2" fill="none" opacity="0.5"/>
1699          <!-- Screen lines -->
1700          <line x1="14" y1="47" x2="28" y2="47" stroke="#555" stroke-width="1" stroke-linecap="round" opacity="0.35"/>
1701          <line x1="14" y1="51" x2="24" y2="51" stroke="#555" stroke-width="1" stroke-linecap="round" opacity="0.25"/>
1702          <!-- Base -->
1703          <line x1="2" y1="64" x2="50" y2="64" stroke="#555" stroke-width="2" stroke-linecap="round"/>
1704
1705          <!-- Laptop 2 (right) -->
1706          <rect x="114" y="38" width="40" height="26" rx="3" stroke="#555" stroke-width="2" fill="none"/>
1707          <rect x="118" y="42" width="32" height="14" rx="2" stroke="#555" stroke-width="1.2" fill="none" opacity="0.5"/>
1708          <line x1="122" y1="47" x2="136" y2="47" stroke="#555" stroke-width="1" stroke-linecap="round" opacity="0.35"/>
1709          <line x1="122" y1="51" x2="132" y2="51" stroke="#555" stroke-width="1" stroke-linecap="round" opacity="0.25"/>
1710          <line x1="110" y1="64" x2="158" y2="64" stroke="#555" stroke-width="2" stroke-linecap="round"/>
1711
1712          <!-- Data packets flying left-to-right -->
1713          <g class="data-packets-lr">
1714            <rect x="58" y="42" width="8" height="5" rx="1.5" stroke="#0078d4" stroke-width="1.5" fill="none"/>
1715            <rect x="74" y="42" width="8" height="5" rx="1.5" stroke="#0078d4" stroke-width="1.5" fill="none"/>
1716            <rect x="90" y="42" width="8" height="5" rx="1.5" stroke="#0078d4" stroke-width="1.5" fill="none"/>
1717          </g>
1718          <!-- Arrow right -->
1719          <path d="M54 44 L106 44" stroke="#0078d4" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
1720          <path d="M102 40 L108 44 L102 48" stroke="#0078d4" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.5"/>
1721
1722          <!-- Data packets flying right-to-left -->
1723          <g class="data-packets-rl">
1724            <rect x="90" y="53" width="8" height="5" rx="1.5" stroke="#555" stroke-width="1.5" fill="none"/>
1725            <rect x="74" y="53" width="8" height="5" rx="1.5" stroke="#555" stroke-width="1.5" fill="none"/>
1726            <rect x="58" y="53" width="8" height="5" rx="1.5" stroke="#555" stroke-width="1.5" fill="none"/>
1727          </g>
1728          <!-- Arrow left -->
1729          <path d="M106 56 L54 56" stroke="#555" stroke-width="1.5" stroke-linecap="round" opacity="0.4"/>
1730          <path d="M58 52 L52 56 L58 60" stroke="#555" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.5"/>
1731        </svg>
1732      </div>
1733
1734      <!-- 11. Stargazing pair — two figures sitting together watching stars & shooting star -->
1735      <div class="figure-stargazing">
1736        <svg viewBox="0 0 150 120" fill="none" xmlns="http://www.w3.org/2000/svg">
1737          <!-- Ground -->
1738          <path d="M10 95 Q40 92 75 95 Q110 92 140 95" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1739          <!-- Grass tufts -->
1740          <path d="M18 95 Q20 90 22 95" stroke="#b22222" stroke-width="1" fill="none" opacity="0.3"/>
1741          <path d="M100 95 Q102 91 104 95" stroke="#b22222" stroke-width="1" fill="none" opacity="0.3"/>
1742          <path d="M125 95 Q127 91 129 95" stroke="#b22222" stroke-width="1" fill="none" opacity="0.3"/>
1743
1744          <!-- Person 1 (left, slightly taller, hair messy) -->
1745          <circle cx="52" cy="56" r="8" stroke="#b22222" stroke-width="2.5" fill="none"/>
1746          <!-- Messy hair -->
1747          <path d="M46 50 Q44 46 47 44" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1748          <path d="M50 49 Q50 44 53 43" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1749          <path d="M56 50 Q58 46 56 44" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1750          <!-- Body -->
1751          <path d="M52 64 Q53 74 52 84" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1752          <!-- Legs (sitting, bent) -->
1753          <path d="M52 84 Q44 88 40 94 Q46 94 52 92" stroke="#b22222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
1754          <!-- Arm behind person 2 -->
1755          <path d="M52 72 Q62 68 72 70" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1756          <!-- Other arm resting -->
1757          <path d="M52 72 Q44 76 40 80" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1758
1759          <!-- Person 2 (right, slightly shorter, round hair/curls) -->
1760          <circle cx="72" cy="60" r="7" stroke="#b22222" stroke-width="2.5" fill="none"/>
1761          <!-- Curly/round hair -->
1762          <path d="M66 55 Q64 50 67 48 Q70 46 73 48 Q76 46 78 48 Q80 50 78 55" stroke="#b22222" stroke-width="1.5" fill="none" stroke-linecap="round"/>
1763          <!-- Body (leaning into person 1) -->
1764          <path d="M72 67 Q70 76 72 86" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1765          <!-- Legs (sitting) -->
1766          <path d="M72 86 Q78 90 82 94 Q76 94 72 92" stroke="#b22222" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
1767          <!-- Arm resting on lap -->
1768          <path d="M72 74 Q78 78 82 80" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" fill="none"/>
1769
1770          <!-- Holding hands (between them) -->
1771          <path d="M52 80 Q58 82 62 82 Q68 82 72 80" stroke="#b22222" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6"/>
1772
1773          <!-- Stars -->
1774          <circle cx="30" cy="20" r="1" fill="#b22222" opacity="0.5"/>
1775          <circle cx="55" cy="12" r="1.2" fill="#b22222" opacity="0.45"/>
1776          <circle cx="80" cy="8" r="1" fill="#b22222" opacity="0.5"/>
1777          <circle cx="105" cy="18" r="1.3" fill="#b22222" opacity="0.4"/>
1778          <circle cx="120" cy="30" r="1" fill="#b22222" opacity="0.45"/>
1779          <circle cx="95" cy="28" r="0.8" fill="#b22222" opacity="0.35"/>
1780          <circle cx="42" cy="30" r="0.8" fill="#b22222" opacity="0.35"/>
1781          <circle cx="68" cy="24" r="1" fill="#b22222" opacity="0.4"/>
1782          <circle cx="135" cy="15" r="0.8" fill="#b22222" opacity="0.3"/>
1783          <circle cx="18" cy="35" r="1" fill="#b22222" opacity="0.35"/>
1784
1785          <!-- Shooting star (with trail) -->
1786          <g class="shooting-star">
1787            <line x1="115" y1="8" x2="98" y2="22" stroke="#b22222" stroke-width="2" stroke-linecap="round"/>
1788            <line x1="118" y1="6" x2="115" y2="8" stroke="#b22222" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
1789            <!-- Trail sparkles -->
1790            <line x1="120" y1="5" x2="126" y2="3" stroke="#b22222" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
1791            <line x1="121" y1="8" x2="128" y2="7" stroke="#b22222" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
1792            <line x1="119" y1="3" x2="124" y2="-1" stroke="#b22222" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
1793          </g>
1794        </svg>
1795      </div>
1796
1797      <!-- 12. Code Browser doodle — browser window with </> brackets, blue -->
1798      <div class="doodle-code">
1799        <svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg">
1800          <!-- Browser window -->
1801          <rect x="8" y="8" width="94" height="74" rx="8" ry="8" stroke="#0078d4" stroke-width="2.5" fill="none"/>
1802          <!-- Title bar -->
1803          <line x1="8" y1="24" x2="102" y2="24" stroke="#0078d4" stroke-width="2" stroke-linecap="round"/>
1804          <!-- Window dots -->
1805          <circle cx="20" cy="16" r="2.5" stroke="#0078d4" stroke-width="1.5" fill="none"/>
1806          <circle cx="30" cy="16" r="2.5" stroke="#0078d4" stroke-width="1.5" fill="none"/>
1807          <circle cx="40" cy="16" r="2.5" stroke="#0078d4" stroke-width="1.5" fill="none"/>
1808          <!-- Left angle bracket < -->
1809          <path d="M38 40 L24 52 L38 64" stroke="#0078d4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1810          <!-- Slash / -->
1811          <line x1="48" y1="38" x2="62" y2="66" stroke="#0078d4" stroke-width="3" stroke-linecap="round"/>
1812          <!-- Right angle bracket > -->
1813          <path d="M72 40 L86 52 L72 64" stroke="#0078d4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1814        </svg>
1815      </div>
1816
1817    </div><!-- end stick-figures-container -->
1818    <h1>Shivani <span class="highlight">Gowda KS</span></h1>
1819    <div class="subtitle">Cloud Engineer & ML Enthusiast</div>
1820    <p style="max-width: 700px; margin: 1rem auto 2rem; font-size: 1rem;">
1821      Building ML tools and exploring the world of LLMs—because who isn’t thrilled by agents redefining how tasks get done?
1822    </p>
1823    
1824    <!-- Social Links -->
1825    <div style="display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap;">
1826      <a href="https://github.com/sgowdaks" target="_blank" class="social-link github">
1827        <i class="fab fa-github"></i>
1828        <span>GitHub</span>
1829      </a>
1830      <a href="https://www.linkedin.com/in/sgowdaks/" target="_blank" class="social-link linkedin">
1831        <i class="fab fa-linkedin"></i>
1832        <span>LinkedIn</span>
1833      </a>
1834      <a href="https://scholar.google.com/citations?user=-dru8h4AAAAJ&hl=en" target="_blank" class="social-link scholar">
1835        <i class="fas fa-graduation-cap"></i>
1836        <span>Google Scholar</span>
1837      </a>
1838    </div>
1839    
1840    <div class="hero-buttons">
1841      <a href="#contact" class="btn btn-primary">
1842        <i class="fas fa-envelope"></i>
1843        Contact Me
1844      </a>
1845      <a href="#about" class="btn btn-secondary">
1846        <i class="fas fa-user"></i>
1847        Learn More
1848      </a>
1849    </div>
1850  </section>
1851
1852  <div class="main-content">
1853    <section id="about" class="section">
1854      <h2>About Me</h2>      
1855      <div class="about-content">
1856        <div class="profile-card">
1857          <div class="profile-image">
1858            <img src="assets/shivani-face.png" alt="Shivani Gowda KS" />
1859          </div>
1860        </div>
1861        
1862        <div>
1863          <p style="text-align: left; font-size: 1.1rem; margin-bottom: 2rem; color: var(--text-color);">
1864            Hey there, I’m the kind of engineer who enjoys understanding why things work just as much as how they work. My career has taken me through AI/ML and Azure networking (L3/L7), where I learned to make systems both intelligent and reliable.
1865            <br>
1866            <br>
1867These days, I’m knee-deep in personal projects around ONNX, C++ inference, and model optimization, chasing performance improvements the way some people chase coffee refills. I’m not a fast learner by nature; I prefer to slow down, get the fundamentals rock solid, and then move fast with confidence. Once something clicks, I dive all in.
1868I love the blend of research and engineering, building ML tools, experimenting with agents, and learning how to make complex ideas work in the real world. My favorite feeling is when something I built finally runs just right and I immediately start thinking about how to make it better.
1869
1870If you’re into thoughtful engineering, LLM experiments, or the art of making models a little smarter (and a lot faster), we’ll probably get along.
1871        </div>
1872      </div>
1873
1874      <div class="experience-grid">
1875        <div class="experience-section">
1876          <h3><i class="fas fa-briefcase"></i> Professional Experience</h3>
1877
1878          <!-- Cloud Engineer (left intentionally blank per request) -->
1879          <div class="experience-item" onclick="toggleExperience(this)">
1880            <div class="experience-header">
1881              <div class="experience-logo">
1882                <img src="assets/LTImindtree-logo.png" alt="LTIMindtree logo" />
1883              </div>
1884              <div class="experience-basic-info">
1885                <h4>Cloud Engineer (Vendor to Microsoft)</h4>
1886                <div class="company">LTIMindtree · Bellevue, WA, USA</div>
1887                <div class="duration">March 2024 – Present</div>
1888              </div>
1889            </div>
1890            <div class="experience-details">
1891              <p>Details to be added.</p>
1892            </div>
1893          </div>
1894
1895                    <!-- Flavor -->
1896          <div class="experience-item" onclick="toggleExperience(this)">
1897            <div class="experience-header">
1898              <div class="experience-logo">
1899                <img src="assets/flavor_app_logo.jpg" alt="Flavor logo" />
1900              </div>
1901              <div class="experience-basic-info">
1902                <h4>Machine Learning Engineer (Contract)</h4>
1903                <div class="company">Flavor · Remote, USA</div>
1904                <div class="duration">Nov 2023 – Jan 2024</div>
1905              </div>
1906            </div>
1907            <div class="experience-details">
1908              <p><strong>Tools:</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias vel voluptatibus sit odit architecto tempore praesentium dignissimos possimus aperiam ducimus dolore neque, unde voluptatum obcaecati iusto! Suscipit quidem unde eligendi?</p>
1909              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore ducimus, neque facilis animi iusto corrupti aliquam doloremque! Optio quisquam pariatur sunt aliquid vel, dolore beatae, excepturi, iure soluta in quidem.</p>
1910            </div>
1911          </div>
1912
1913          <!-- PixStory -->
1914          <div class="experience-item" onclick="toggleExperience(this)">
1915            <div class="experience-header">
1916              <div class="experience-logo">
1917                <img src="assets/pix-logo.png" alt="PixStory logo" />
1918              </div>
1919              <div class="experience-basic-info">
1920                <h4>Machine Learning Engineer (Intern → Full-time)</h4>
1921                <div class="company">PixStory · Remote, USA</div>
1922                <div class="duration">Jan 2023 – Dec 2023</div>
1923              </div>
1924            </div>
1925            <div class="experience-details">
1926              <p><strong>Tools:</strong> Python, Flask, SQLite, Apache Airflow, BERT, NLLB, Transformers</p>
1927              <p>
1927Built ETL pipelines with Airflow (31% performance boost) and a Flask/SQLite annotation platform with RESTful APIs for real-time labeling (15% increase in data collection). Fine-tuned multilingual transformer models for hate speech classification and benchmarked embedding models for unstructured data indexing.</p>
1928            </div>
1929          </div>
1930
1931          <!-- Loyola Marymount University (Graduate Research Assistant) -->
1932          <div class="experience-item" onclick="toggleExperience(this)">
1933            <div class="experience-header">
1934              <div class="experience-logo">
1935                <img src="assets/lmu-logo.png" alt="LMU logo" />
1936              </div>
1937              <div class="experience-basic-info">
1938                <h4>Graduate Research Assistant</h4>
1939                <div class="company">Loyola Marymount University · Los Angeles, CA, USA</div>
1940                <div class="duration">Jun 2022 – Dec 2022</div>
1941              </div>
1942            </div>
1943            <div class="experience-details">
1944              <p><strong>Tools:</strong> PyTorch, Transformers, Data Processing</p>
1945              <p>Improved diet tracking system performance by 21.8% by replacing RNN+LSTM with transformer architecture. Collected and analyzed large datasets, identified bottlenecks, and boosted F1-score by 5.2%. Published a paper at ICASSP 2023 on multi-modal food classification.</p>
1946            </div>
1947          </div>
1948
1949          <!-- IBM -->
1950          <div class="experience-item" onclick="toggleExperience(this)">
1951            <div class="experience-header">
1952              <div class="experience-logo">
1953                <img src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" alt="IBM logo" />
1954              </div>
1955              <div class="experience-basic-info">
1956                <h4>Application Developer</h4>
1957                <div class="company">IBM · India</div>
1958                <div class="duration">Dec 2019 – May 2021</div>
1959              </div>
1960            </div>
1961            <div class="experience-details">
1962              <p><strong>Tools:</strong> Java, Spring Boot, OpenShift, GitLab, Jenkins</p>
1963              <p>Developed backend logic for a CPQ system using Java and Spring Boot. Assisted in migrating legacy services to cloud-native microservices on OpenShift and used CI/CD pipelines (GitLab, Jenkins) to execute deployments and run validation scripts.</p>
1964            </div>
1965          </div>
1966        </div>
1967
1968        <div class="experience-section">
1969          <h3><i class="fas fa-graduation-cap"></i> Education</h3>
1970
1971          <div class="experience-item" onclick="toggleExperience(this)">
1972            <div class="experience-header">
1973              <div class="experience-logo">
1974                <img src="assets/lmu-logo.png" alt="LMU logo" />
1975              </div>
1976              <div class="experience-basic-info">
1977                <h4>Loyola Marymount University</h4>
1978                <div class="company">Master of Science in Computer Science</div>
1979                <div class="duration">Aug 2021 – May 2023</div>
1980              </div>
1981            </div>
1982            <div class="experience-details">
1983              <p>Los Angeles, CA, USA. Received 'Outstanding Graduate Award in Computer Science' from Frank R. Seaver College of Science and Engineering.</p>
1984            </div>
1985          </div>
1986
1987          <div class="experience-item" onclick="toggleExperience(this)">
1988            <div class="experience-header">
1989              <div class="experience-logo">
1990                <img src="assets/amrita-logo.png" alt="Amrita logo" />
1991              </div>
1992              <div class="experience-basic-info">
1993                <h4>Amrita School of Engineering</h4>
1994                <div class="company">Bachelor of Technology in Electrical and Electronics Engineering</div>
1995                <div class="duration">Jun 2015 – May 2019</div>
1996              </div>
1997            </div>
1998            <div class="experience-details">
1999              <p>Bengaluru, KA, India.</p>
2000            </div>
2001          </div>
2002
2003          <!-- <div class="experience-item" onclick="toggleExperience(this)">
2004            <div class="experience-header">
2005              <div class="experience-logo microsoft">
2006                <i class="fab fa-microsoft"></i>
2007              </div>
2008              <div class="experience-basic-info">
2009                <h4>Azure Certifications</h4>
2010                <div class="company">Microsoft</div>
2011                <div class="duration">Current</div>
2012              </div>
2013            </div>
2014            <div class="experience-details">
2015              <ul>
2016                <li>Azure Solutions Architect</li>
2017                <li>Azure Network Engineer</li>
2018                <li>Azure AI Engineer (in progress)</li>
2019              </ul>
2020            </div>
2021          </div> -->
2022        </div>
2023      </div>
2024
2025      <!-- Skills Section -->
2026      <div class="skills-section">
2027        <h3><i class="fas fa-code"></i> Skills & Technologies</h3>
2028
2029        <div class="skills-grid">
2030          <div class="skills-category">
2031            <h4><i class="fas fa-laptop-code"></i> Programming Languages</h4>
2032            <div class="skills-badges">
2033              <img src="https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54" alt="Python"/>
2034              <img src="https://img.shields.io/badge/c-%2300599C.svg?style=for-the-badge&logo=c&logoColor=white" alt="C"/>
2035              <img src="https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white" alt="C++"/>
2036              <img src="https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=java&logoColor=white" alt="Java"/>
2037              <img src="https://img.shields.io/badge/Shell_Script-121011?style=for-the-badge&logo=gnu-bash&logoColor=white" alt="Bash"/>
2038              <img src="https://img.shields.io/badge/SQL-4479A1?style=for-the-badge&logo=mysql&logoColor=white" alt="SQL"/>
2039            </div>
2040          </div>
2041
2042          <div class="skills-category">
2043            <h4><i class="fas fa-robot"></i> AI / ML</h4>
2044            <div class="skills-badges">
2045              <img src="https://img.shields.io/badge/PyTorch-%23EE4C2C.svg?style=for-the-badge&logo=PyTorch&logoColor=white" alt="PyTorch"/>
2046              <img src="https://img.shields.io/badge/🤗%20Hugging%20Face-FFD21E?style=for-the-badge&logoColor=black" alt="Hugging Face"/>
2047              <img src="https://img.shields.io/badge/ONNX-005CED?style=for-the-badge&logo=onnx&logoColor=white" alt="ONNX"/>
2048              <img src="https://img.shields.io/badge/🦜_LangChain-1C3C3C?style=for-the-badge&logoColor=white" alt="LangChain"/>
2049              <img src="https://img.shields.io/badge/Pandas-2C2D72?style=for-the-badge&logo=pandas&logoColor=white" alt="Pandas"/>
2050              <img src="https://img.shields.io/badge/scikit--learn-%23F7931E.svg?style=for-the-badge&logo=scikit-learn&logoColor=white" alt="scikit-learn"/>
2051              <img src="https://img.shields.io/badge/numpy-%23013243.svg?style=for-the-badge&logo=numpy&logoColor=white" alt="NumPy"/>
2052            </div>
2053          </div>
2054
2055          <div class="skills-category">
2056            <h4><i class="fas fa-tools"></i> Tools & Platforms</h4>
2057            <div class="skills-badges">
2058              <img src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" alt="Linux"/>
2059              <img src="https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white" alt="Git"/>
2060              <img src="https://img.shields.io/badge/Wireshark-1679A7?style=for-the-badge&logo=wireshark&logoColor=white" alt="Wireshark"/>
2061              <img src="https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge&logo=postman&logoColor=white" alt="Postman"/>
2062              <img src="https://img.shields.io/badge/Apache%20Spark-E25A1C?style=for-the-badge&logo=apachespark&logoColor=white" alt="PySpark"/>
2063              <img src="https://img.shields.io/badge/Grafana-F46800?style=for-the-badge&logo=grafana&logoColor=white" alt="Grafana"/>
2064            </div>
2065          </div>
2066
2067          <div class="skills-category">
2068            <h4><i class="fas fa-database"></i> Databases</h4>
2069            <div class="skills-badges">
2070              <img src="https://img.shields.io/badge/sqlite-%2307405e.svg?style=for-the-badge&logo=sqlite&logoColor=white" alt="SQLite"/>
2071              <img src="https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge&logo=mysql&logoColor=white" alt="MySQL"/>
2072            </div>
2073          </div>
2074
2075          <div class="skills-category">
2076            <h4><i class="fas fa-cloud"></i> Cloud & DevOps</h4>
2077            <div class="skills-badges">
2078              <img src="https://img.shields.io/badge/Microsoft_Azure-0078D4?style=for-the-badge&logo=microsoft-azure&logoColor=white" alt="Azure"/>
2079              <img src="https://img.shields.io/badge/Amazon_AWS-FF9900?style=for-the-badge&logo=amazonaws&logoColor=white" alt="AWS"/>
2080              <img src="https://img.shields.io/badge/OpenShift-EE0000?style=for-the-badge&logo=redhatopenshift&logoColor=white" alt="OpenShift"/>
2081              <img src="https://img.shields.io/badge/Docker-2CA5E0?style=for-the-badge&logo=docker&logoColor=white" alt="Docker"/>
2082              <img src="https://img.shields.io/badge/jenkins-%232C5263.svg?style=for-the-badge&logo=jenkins&logoColor=white" alt="Jenkins"/>
2083            </div>
2084          </div>
2085
2086          <div class="skills-category">
2087            <h4><i class="fas fa-globe"></i> Web Development</h4>
2088            <div class="skills-badges">
2089              <img src="https://img.shields.io/badge/flask-%23000.svg?style=for-the-badge&logo=flask&logoColor=white" alt="Flask"/>
2090              <img src="https://img.shields.io/badge/FastAPI-009688?style=for-the-badge&logo=fastapi&logoColor=white" alt="FastAPI"/>
2091              <img src="https://img.shields.io/badge/Spring_Boot-6DB33F?style=for-the-badge&logo=springboot&logoColor=white" alt="Spring Boot"/>
2092              <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5"/>
2093              <img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3"/>
2094              <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript"/>
2095              <img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" alt="React"/>
2096            </div>
2097          </div>
2098        </div>
2099      </div>
2100    </section>
2101
2102    <section id="projects" class="section">
2103      <h2><i class="icon fas fa-code"></i>Projects</h2>
2104      <p>Some of the projects I've worked on in cloud engineering and automation</p>
2105      
2106      <div class="projects-grid">
2107        <!-- <div class="project-card" onclick="openProjectModal('project1')">
2108          <h4><i class="fab fa-microsoft"></i> Azure Network Automation</h4>
2109          <div class="tech-stack">
2110            <span class="tech-tag">Azure</span>
2111            <span class="tech-tag">Python</span>
2112            <span class="tech-tag">PowerShell</span>
2113          </div>
2114          <p>Automated network provisioning and monitoring system for enterprise Azure deployments.</p>
2115        </div> -->
2116
2117        <div class="project-card" onclick="openProjectModal('project2')">
2118          <h4>Multi-Modal Food Classification in a Diet Tracking System</h4>
2119          <div class="tech-stack">
2120            <span class="tech-tag">PyTorch</span>
2121            <span class="tech-tag">Vision</span>
2122            <span class="tech-tag">Speech</span>
2123          </div>
2124          <p>Leveraged multi-modal deep learning techniques (vision + spoken inputs) to classify food items for a diet-tracking system. Built data pipelines and preprocessing for large-scale training.</p>
2125        </div>
2126
2127        <div class="project-card" onclick="openProjectModal('project3')">
2128          <h4>Nichirin: Webcrawler + Retrieval-Augmented Generator</h4>
2129          <div class="tech-stack">
2130            <span class="tech-tag">Apache Solr</span>
2131            <span class="tech-tag">Apache Spark</span>
2132            <span class="tech-tag">Python</span>
2133          </div>
2134          <p>Multi-level web crawler with Solr-powered indexing and retrieval; integrates Spark for parallel processing and scalable text indexing. Open sourced and published to PyPI.</p>
2135        </div>
2136
2137        <!-- <div class="project-card" onclick="openProjectModal('project4')">
2138          <h4><i class="fas fa-shield-alt"></i> Security Compliance Automation</h4>
2139          <div class="tech-stack">
2140            <span class="tech-tag">Azure Policy</span>
2141            <span class="tech-tag">Security Center</span>
2142            <span class="tech-tag">PowerShell</span>
2143          </div>
2144          <p>Automated compliance monitoring and remediation system for enterprise security policies.</p>
2145        </div> -->
2146
2147        <!-- <div class="project-card" onclick="openProjectModal('project5')">
2148          <h4><i class="fas fa-robot"></i> DevOps Pipeline Optimizer</h4>
2149          <div class="tech-stack">
2150            <span class="tech-tag">Azure DevOps</span>
2151            <span class="tech-tag">CI/CD</span>
2152            <span class="tech-tag">YAML</span>
2153          </div>
2154          <p>Automated pipeline optimization tool that reduces build times and improves deployment efficiency.</p>
2155        </div> -->
2156
2157        <!-- <div class="project-card" onclick="openProjectModal('project6')">
2158          <h4><i class="fas fa-database"></i> Cloud Cost Analytics Dashboard</h4>
2159          <div class="tech-stack">
2160            <span class="tech-tag">Power BI</span>
2161            <span class="tech-tag">Azure Cost Management</span>
2162            <span class="tech-tag">Python</span>
2163          </div>
2164          <p>Real-time cost analytics and forecasting dashboard for multi-cloud resource optimization.</p>
2165        </div> -->
2166      </div>
2167
2168      <!-- Load More Button -->
2169      <div class="load-more-container">
2170        <button class="load-more-btn hidden" id="loadMoreProjects" onclick="loadMoreProjects()">
2171          <i class="fas fa-plus-circle"></i>
2172          More Projects
2173        </button>
2174      </div>
2175
2176      <!-- Project Modals -->
2177      <div id="project1" class="project-modal">
2178        <div class="modal-content">
2179          <div class="modal-header">
2180            <h3 class="modal-title"><i class="fab fa-microsoft"></i> Azure Network Automation</h3>
2181            <button class="modal-close" onclick="closeProjectModal('project1')">×</button>
2182          </div>
2183          <div class="modal-links">
2184            <a href="#" class="modal-link">
2185              <i class="fab fa-github"></i> View on GitHub
2186            </a>
2187            <a href="#" class="modal-link">
2188              <i class="fas fa-external-link-alt"></i> Live Demo
2189            </a>
2190          </div>
2191          <div class="modal-tech-stack">
2192            <span class="modal-tech-tag">Azure</span>
2193            <span class="modal-tech-tag">Python</span>
2194            <span class="modal-tech-tag">PowerShell</span>
2195            <span class="modal-tech-tag">ARM Templates</span>
2196            <span class="modal-tech-tag">Logic Apps</span>
2197          </div>
2198          <p class="modal-description">
2199            Developed a comprehensive automated network provisioning system that revolutionizes how enterprise Azure deployments are managed. This solution reduces manual configuration time by 80% and significantly improves reliability through automated monitoring and alerting systems.
2200          </p>
2201          <div class="modal-features">
2202            <h4>Key Features & Achievements:</h4>
2203            <ul>
2204              <li>Automated VNet and subnet provisioning with intelligent IP allocation</li>
2205              <li>ExpressRoute configuration automation with failover capabilities</li>
2206              <li>Real-time network monitoring dashboards with custom metrics</li>
2207              <li>Automated incident response workflows reducing MTTR by 60%</li>
2208              <li>Cost optimization recommendations saving 30% on network resources</li>
2209              <li>Integration with existing ITSM tools for seamless operations</li>
2210            </ul>
2211          </div>
2212          
2213        </div>
2214      </div>
2215
2216      <div id="project2" class="project-modal">
2217        <div class="modal-content">
2218          <div class="modal-header">
2219            <h3 class="modal-title">Multi-Modal Food Classification in a Diet Tracking System</h3>
2220            <button class="modal-close" onclick="closeProjectModal('project2')">×</button>
2221          </div>
2222          <div class="modal-links">
2223            <a href="https://github.com/sgowdaks/food-detection" class="modal-link" target="_blank">
2224              <i class="fab fa-github"></i> GitHub Repo
2225            </a>
2226            <a href="https://github.com/sgowdaks/food-detection" class="modal-link" target="_blank">
2227              <i class="fas fa-book"></i> Project Details
2228            </a>
2229          </div>
2230          <div class="modal-tech-stack">
2231            <span class="modal-tech-tag">PyTorch</span>
2232            <span class="modal-tech-tag">TensorFlow</span>
2233            <span class="modal-tech-tag">Vision</span>
2234            <span class="modal-tech-tag">Speech</span>
2235            <span class="modal-tech-tag">Data Pipelines</span>
2236          </div>
2237          <p class="modal-description">
2238            Leveraged multi-modal deep learning (vision + spoken inputs) to accurately classify food items for a diet-tracking system. As part of this work I gathered large-scale datasets, engineered preprocessing pipelines, and trained transformer-based models to improve classification accuracy.
2239          </p>
2240          <div class="modal-features">
2241            <h4>Key Achievements:</h4>
2242            <ul>
2243              <li>Applied multi-modal architectures for image+speech inputs to improve food classification accuracy.</li>
2244              <li>Built scalable data collection and preprocessing pipelines; created a web scraper to gather training data at scale.</li>
2245              <li>Improved model robustness and F1 scores through careful dataset cleaning and augmentation.</li>
2246            </ul>
2247          </div>
2248        </div>
2249      </div>
2250
2251      <div id="project3" class="project-modal">
2252        <div class="modal-content">
2253          <div class="modal-header">
2254            <h3 class="modal-title">Nichirin: Webcrawler + Retrieval Augmented Generator</h3>
2255            <button class="modal-close" onclick="closeProjectModal('project3')">×</button>
2256          </div>
2257          <div class="modal-links">
2258            <a href="https://github.com/sgowdaks/nichirin" class="modal-link" target="_blank">
2259              <i class="fab fa-github"></i> GitHub Repo
2260            </a>
2261            <a href="https://pypi.org/project/nichirin/" class="modal-link" target="_blank">
2262              <i class="fas fa-box"></i> PyPI (pip install nichirin)
2263            </a>
2264          </div>
2265          <div class="modal-tech-stack">
2266            <span class="modal-tech-tag">Apache Solr</span>
2267            <span class="modal-tech-tag">Apache Spark</span>
2268            <span class="modal-tech-tag">Python</span>
2269            <span class="modal-tech-tag">Scrapy</span>
2270            <span class="modal-tech-tag">Selenium</span>
2271          </div>
2272          <p class="modal-description">
2273            Nichirin is a multi-level web crawler and retrieval-augmented generator that uses Apache Solr for text indexing and retrieval. It integrates Apache Spark for parallel processing to scale web crawling and indexing, and includes preprocessing steps to structure raw inputs for downstream embedding and retrieval.
2274          </p>
2275          <div class="modal-features">
2276            <h4>Platform Features:</h4>
2277            <ul>
2278              <li>Multi-level crawling with configurable depth and rate limits.</li>
2279              <li>Apache Solr-based indexing for fast full-text retrieval.</li>
2280              <li>Spark integration for parallel processing and scalable indexing.</li>
2281              <li>Preprocessing strategies to clean and structure raw HTML/text for embeddings.</li>
2282              <li>Published to PyPI (pip install nichirin) and open sourced on GitHub.</li>
2283            </ul>
2284          </div>
2285        </div>
2286      </div>
2287
2288      <div id="project4" class="project-modal">
2289        <div class="modal-content">
2290          <div class="modal-header">
2291            <h3 class="modal-title"><i class="fas fa-shield-alt"></i> Security Compliance Automation</h3>
2292            <button class="modal-close" onclick="closeProjectModal('project4')">×</button>
2293          </div>
2294          <div class="modal-links">
2295            <a href="#" class="modal-link">
2296              <i class="fab fa-github"></i> View on GitHub
2297            </a>
2298            <a href="#" class="modal-link">
2299              <i class="fas fa-shield-alt"></i> Security Report
2300            </a>
2301          </div>
2302          <div class="modal-tech-stack">
2303            <span class="modal-tech-tag">Azure Policy</span>
2304            <span class="modal-tech-tag">Security Center</span>
2305            <span class="modal-tech-tag">PowerShell</span>
2306            <span class="modal-tech-tag">Log Analytics</span>
2307            <span class="modal-tech-tag">Sentinel</span>
2308          </div>
2309          <p class="modal-description">
2310            Developed a comprehensive automated system for monitoring security compliance across enterprise Azure environments with intelligent remediation capabilities. This solution ensures continuous compliance and dramatically reduces security risks.
2311          </p>
2312          <div class="modal-features">
2313            <h4>Security Impact:</h4>
2314            <ul>
2315              <li>99% compliance score achievement across all enterprise environments</li>
2316              <li>Automated remediation of 500+ policy violations daily</li>
2317              <li>Real-time security posture monitoring and reporting</li>
2318              <li>Reduced manual audit time by 90% through automation</li>
2319              <li>Custom security policies tailored to industry requirements</li>
2320              <li>Integration with SIEM tools for enhanced threat detection</li>
2321            </ul>
2322          </div>
2323        </div>
2324      </div>
2325
2326      <div id="project5" class="project-modal">
2327        <div class="modal-content">
2328          <div class="modal-header">
2329            <h3 class="modal-title"><i class="fas fa-robot"></i> DevOps Pipeline Optimizer</h3>
2330            <button class="modal-close" onclick="closeProjectModal('project5')">×</button>
2331          </div>
2332          <div class="modal-links">
2333            <a href="#" class="modal-link">
2334              <i class="fab fa-github"></i> View on GitHub
2335            </a>
2336            <a href="#" class="modal-link">
2337              <i class="fas fa-external-link-alt"></i> Documentation
2338            </a>
2339          </div>
2340          <div class="modal-tech-stack">
2341            <span class="modal-tech-tag">Azure DevOps</span>
2342            <span class="modal-tech-tag">CI/CD</span>
2343            <span class="modal-tech-tag">YAML</span>
2344            <span class="modal-tech-tag">PowerShell</span>
2345            <span class="modal-tech-tag">Docker</span>
2346          </div>
2347          <p class="modal-description">
2348            Built an intelligent pipeline optimization tool that analyzes build and deployment patterns to automatically suggest and implement efficiency improvements, reducing overall CI/CD cycle times significantly.
2349          </p>
2350          <div class="modal-features">
2351            <h4>Key Features:</h4>
2352            <ul>
2353              <li>Automated pipeline analysis and bottleneck detection</li>
2354              <li>Smart caching strategies reducing build times by 50%</li>
2355              <li>Parallel execution optimization across multiple agents</li>
2356              <li>Automated test suite optimization and selection</li>
2357              <li>Cost optimization through efficient resource utilization</li>
2358              <li>Integration with Azure Boards for automated tracking</li>
2359            </ul>
2360          </div>
2361        </div>
2362      </div>
2363
2364      <div id="project6" class="project-modal">
2365        <div class="modal-content">
2366          <div class="modal-header">
2367            <h3 class="modal-title"><i class="fas fa-database"></i> Cloud Cost Analytics Dashboard</h3>
2368            <button class="modal-close" onclick="closeProjectModal('project6')">×</button>
2369          </div>
2370          <div class="modal-links">
2371            <a href="#" class="modal-link">
2372              <i class="fab fa-github"></i> View on GitHub
2373            </a>
2374            <a href="#" class="modal-link">
2375              <i class="fas fa-chart-line"></i> Live Demo
2376            </a>
2377          </div>
2378          <div class="modal-tech-stack">
2379            <span class="modal-tech-tag">Power BI</span>
2380            <span class="modal-tech-tag">Azure Cost Management</span>
2381            <span class="modal-tech-tag">Python</span>
2382            <span class="modal-tech-tag">Azure Functions</span>
2383            <span class="modal-tech-tag">SQL</span>
2384          </div>
2385          <p class="modal-description">
2386            Developed a comprehensive cost analytics platform providing real-time insights into cloud spending patterns, forecasting future costs, and identifying optimization opportunities across multi-cloud environments.
2387          </p>
2388          <div class="modal-features">
2389            <h4>Dashboard Capabilities:</h4>
2390            <ul>
2391              <li>Real-time cost tracking across Azure, AWS, and GCP</li>
2392              <li>AI-powered cost forecasting and trend analysis</li>
2393              <li>Automated anomaly detection for unexpected spending spikes</li>
2394              <li>Department and project-level cost allocation</li>
2395              <li>Actionable optimization recommendations saving 25% on average</li>
2396              <li>Customizable alerts and automated reporting</li>
2397            </ul>
2398          </div>
2399        </div>
2400      </div>
2401    </section>
2402
2403    <section class="section">
2404      <h2><i class="icon fas fa-blog"></i>Latest Posts</h2>
2405      <p>Thoughts on technology, cloud engineering, and life experiences</p>
2406      
2407      <div class="blog-preview" id="featured-posts">
2408        <!-- Featured posts will be rendered dynamically from js/blog-manager.js -->
2409        <div style="text-align:center; color:var(--text-light); padding:2rem;">
2410          <i class="fas fa-spinner fa-spin" style="font-size:2rem; margin-bottom:1rem;"></i>
2411          <div>Loading featured posts...</div>
2412        </div>
2413      </div>
2414      
2415      <div style="text-align: center; margin-top: 3rem;">
2416        <a href="blog.html" class="btn btn-primary">
2417          <i class="fas fa-book-open"></i>
2418          View All Posts
2419        </a>
2420      </div>
2421    </section>
2422
2423    <section id="contact" class="section">
2424      <h2>Contact</h2>
2425      <p>Let's connect - reach out via email, LinkedIn, or check out my work on GitHub.</p>
2426      
2427      <div class="contact-links">
2428        <a href="mailto:[email protected]" class="contact-link email">
2429          <i class="fas fa-envelope"></i>
2430          <span>Email</span>
2431        </a>
2432        <a href="https://www.linkedin.com/in/sgowdaks/" target="_blank" class="contact-link linkedin">
2433          <i class="fab fa-linkedin"></i>
2434          <span>LinkedIn</span>
2435        </a>
2436        <a href="https://github.com/sgowdaks" target="_blank" class="contact-link github">
2437          <i class="fab fa-github"></i>
2438          <span>GitHub</span>
2439        </a>
2440      </div>
2441    </section>
2442
2443    <section id="personal-space-teaser" class="section" style="text-align:center;">
2444      <h2><span class="icon"><i class="fas fa-camera-retro"></i></span> Beyond the Code</h2>
2445      <p>Want to know more about me? Welcome to my personal space, a little window into the world outside the terminal.</p>
2446      <a href="about-me.html" class="btn btn-secondary" style="margin: 0 auto; display: inline-flex;">
2447        <i class="fas fa-images"></i>
2448        Explore my personal space
2449      </a>
2450    </section>
2451  </div>
2452
2453  <footer></footer>
2454
2455  <!-- Common JavaScript (generates header/footer) -->
2456  
2456<script src="js/common.js"></script>
2456
2457  
2457<script src="js/blog-manager.js"></script>
2457
2458  
2458<script src="js/ai-agent.js"></script>
2458
2459  
2459<script>
2460    // ===== EXPERIENCE TOGGLE FUNCTIONALITY =====
2461    function toggleExperience(element) {
2462      element.classList.toggle('expanded');
2463    }
2464
2465    // ===== LOAD MORE PROJECTS FUNCTIONALITY =====
2466    let visibleProjects = 4; // Initially show 4 projects
2467    const projectsPerLoad = 2; // Load 2 more each time
2468
2469    function initializeProjects() {
2470      const projectCards = document.querySelectorAll('.project-card');
2471      const loadMoreBtn = document.getElementById('loadMoreProjects');
2472      
2473      // Hide projects beyond initial count
2474      projectCards.forEach((card, index) => {
2475        if (index >= visibleProjects) {
2476          card.classList.add('hidden');
2477        }
2478      });
2479      
2480      // Show load more button if there are hidden projects
2481      if (projectCards.length > visibleProjects) {
2482        loadMoreBtn.classList.remove('hidden');
2483      }
2484    }
2485
2486    function loadMoreProjects() {
2487      const projectCards = document.querySelectorAll('.project-card');
2488      const loadMoreBtn = document.getElementById('loadMoreProjects');
2489      const hiddenProjects = document.querySelectorAll('.project-card.hidden');
2490      
2491      // Show next batch of projects
2492      let shown = 0;
2493      hiddenProjects.forEach((card) => {
2494        if (shown < projectsPerLoad) {
2495          card.classList.remove('hidden');
2496          // Add a nice fade-in animation
2497          card.style.opacity = '0';
2498          card.style.transform = 'translateY(20px)';
2499          setTimeout(() => {
2500            card.style.transition = 'all 0.5s ease';
2501            card.style.opacity = '1';
2502            card.style.transform = 'translateY(0)';
2503          }, 50);
2504          shown++;
2505        }
2506      });
2507      
2508      visibleProjects += shown;
2509      
2510      // Hide button if all projects are visible
2511      if (visibleProjects >= projectCards.length) {
2512        loadMoreBtn.classList.add('hidden');
2513      }
2514    }
2515
2516    // Initialize on page load
2517    document.addEventListener('DOMContentLoaded', initializeProjects);
2518
2519    // ===== PROJECT MODAL FUNCTIONALITY =====
2520    function openProjectModal(modalId) {
2521      const modal = document.getElementById(modalId);
2522      if (modal) {
2523        modal.classList.add('active');
2524      }
2525    }
2526
2527    function closeProjectModal(modalId) {
2528      const modal = document.getElementById(modalId);
2529      if (modal) {
2530        modal.classList.remove('active');
2531      }
2532    }
2533
2534    // Close modal when clicking outside the content
2535    document.addEventListener('click', function(e) {
2536      if (e.target.classList.contains('project-modal') && e.target.classList.contains('active')) {
2537        closeProjectModal(e.target.id);
2538      }
2539    });
2540
2541    // Close modal with Escape key
2542    document.addEventListener('keydown', function(e) {
2543      if (e.key === 'Escape') {
2544        const activeModal = document.querySelector('.project-modal.active');
2545        if (activeModal) {
2546          closeProjectModal(activeModal.id);
2547        }
2548      }
2549    });
2550
2551    // Auto-close modal when scrolling away from projects section
2552    window.addEventListener('scroll', function() {
2553      const activeModal = document.querySelector('.project-modal.active');
2554      if (!activeModal) return; // No modal open, nothing to do
2555      
2556      const projectsSection = document.getElementById('projects');
2557      if (!projectsSection) return;
2558      
2559      const rect = projectsSection.getBoundingClientRect();
2560      const viewportHeight = window.innerHeight;
2561      
2562      // Close modal if projects section is completely out of view
2563      if (rect.bottom < 0 || rect.top > viewportHeight) {
2564        closeProjectModal(activeModal.id);
2565      }
2566    });
2567
2568    // ===== MATRIX DIGITAL RAIN EFFECT =====
2569    function createMatrixRain() {
2570      const matrixBg = document.getElementById('matrix-bg');
2571      const characters = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
2572      
2573      function createFallingChar() {
2574        const char = document.createElement('div');
2575        char.className = 'matrix-char';
2576        char.textContent = characters[Math.floor(Math.random() * characters.length)];
2577        char.style.left = Math.random() * 100 + 'vw';
2578        char.style.animationDuration = (Math.random() * 3 + 2) + 's';
2579        char.style.opacity = Math.random() * 0.5 + 0.1;
2580        
2581        matrixBg.appendChild(char);
2582        
2583        // Remove character after animation
2584        setTimeout(() => {
2585          if (char.parentNode) {
2586            char.parentNode.removeChild(char);
2587          }
2588        }, 5000);
2589      }
2590      
2591      // Create falling characters
2592      setInterval(createFallingChar, 100);
2593    }
2594
2595    // ===== SMOOTH SCROLLING =====
2596    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
2597      anchor.addEventListener('click', function (e) {
2598        e.preventDefault();
2599        const target = document.querySelector(this.getAttribute('href'));
2600        if (target) {
2601          target.scrollIntoView({
2602            behavior: 'smooth',
2603            block: 'start'
2604          });
2605        }
2606      });
2607    });
2608
2609    // ===== NAVIGATION ACTIVE STATE =====
2610    // Temporarily disabled to prevent modal conflicts
2611    /*
2612    window.addEventListener('scroll', function() {
2613      // Don't update navigation when modal is open
2614      if (document.querySelector('.project-modal.active')) {
2615        return;
2616      }
2617      
2618      const sections = document.querySelectorAll('.section');
2619      const navLinks = document.querySelectorAll('nav a');
2620      
2621      let current = '';
2622      sections.forEach(section => {
2623        const sectionTop = section.offsetTop - 100;
2624        if (window.pageYOffset >= sectionTop) {
2625          current = section.getAttribute('id');
2626        }
2627      });
2628
2629      navLinks.forEach(link => {
2630        link.classList.remove('active');
2631        if (link.getAttribute('href') === '#' + current) {
2632          link.classList.add('active');
2633        }
2634      });
2635    });
2636    */
2637
2638    // ===== GLITCH TEXT EFFECT =====
2639    function glitchText(element) {
2640      const text = element.textContent;
2641      const glitchChars = '!@#$%^&*()_+-=[]{}|;:,.<>?';
2642      
2643      let iterations = 0;
2644      const interval = setInterval(() => {
2645        element.textContent = text.split('').map((char, index) => {
2646          if (index < iterations) {
2647            return text[index];
2648          }
2649          return glitchChars[Math.floor(Math.random() * glitchChars.length)];
2650        }).join('');
2651        
2652        iterations += 1/3;
2653        
2654        if (iterations >= text.length) {
2655          clearInterval(interval);
2656          element.textContent = text;
2657        }
2658      }, 30);
2659    }
2660
2661    // ===== INITIALIZE EFFECTS =====
2662    // Temporarily disabled to prevent modal conflicts
2663    /*
2664      // Start matrix rain effect
2665      createMatrixRain();
2666      
2667      // Add glitch effect to logo on hover
2668      const logo = document.querySelector('.logo');
2669      logo.addEventListener('mouseenter', () => glitchText(logo));
2670      
2671      // Add typing effect to hero subtitle
2672      const subtitle = document.querySelector('.hero .subtitle');
2673      if (subtitle) {
2674        subtitle.style.overflow = 'hidden';
2675        subtitle.style.borderRight = '2px solid var(--primary-color)';
2676        subtitle.style.whiteSpace = 'nowrap';
2677        subtitle.style.animation = 'typing 3s steps(40, end), blink-caret 0.75s step-end infinite';
2678      }
2679    */
2680
2681      // Render latest posts (if BlogManager available)
2682      const featuredContainer = document.getElementById('featured-posts');
2683      if (featuredContainer && window.BlogManager) {
2684        const latest = window.BlogManager.getRecentPosts(3);
2685        if (!latest || latest.length === 0) {
2686          featuredContainer.innerHTML = '<p style="color:var(--text-light); text-align:center; padding:1rem;">No posts yet.</p>';
2687        } else {
2688          featuredContainer.innerHTML = latest.map(post => `
2689            <div class="blog-card">
2690              <span class="category" style="color:${post.category === 'life' ? '#a78bce' : '#6b9bd1'}; border-color:${post.category === 'life' ? '#a78bce' : '#6b9bd1'};">${post.categoryLabel}</span>
2691              <h4>${post.title}</h4>
2692              <p style="color:var(--text-light);">${post.excerpt}</p>
2693              <a href="posts/${post.id}.html">Read More <i class="fas fa-arrow-right"></i></a>
2694            </div>
2695          `).join('');
2696        }
2697      }
2698
2699    // ===== TYPING ANIMATION =====
2700    const style = document.createElement('style');
2701    style.textContent = `
2702      @keyframes typing {
2703        from { width: 0 }
2704        to { width: 100% }
2705      }
2706      
2707      @keyframes blink-caret {
2708        from, to { border-color: transparent }
2709        50% { border-color: var(--primary-color) }
2710      }
2711    `;
2712    document.head.appendChild(style);
2713
2714    // ===== TERMINAL CURSOR BLINK =====
2715    // Temporarily disabled to prevent modal conflicts
2716    /*
2717    setInterval(() => {
2718      // Don't run cursor blink when modal is open
2719      if (document.querySelector('.project-modal.active')) {
2720        return;
2721      }
2722      
2723      const cursors = document.querySelectorAll('.hero h1, .section h2');
2724      cursors.forEach(cursor => {
2725        if (cursor.textContent.endsWith('_')) {
2726          cursor.textContent = cursor.textContent.slice(0, -1);
2727        } else if (!cursor.textContent.endsWith('_')) {
2728          cursor.textContent += '_';
2729        }
2730      });
2731    }, 1000);
2732    */
2733  </script>
2733
2734</body>
2735</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.