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.