Sampada Kulkarni — Portfolio <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;600;700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> <style> :root { --void: #050508; --obsidian: #0a090f; --surface: #0f0d18; --surface2: #16132a; --blade: #1a1630; --border: rgba(120,80,200,0.18); --border-blade: rgba(160,100,240,0.4); --text: #e8e0ff; --text-muted: #8878b8; --text-dim: #4a3f70; --lotus: #9b5de5; /* Purple — main accent */ --lotus2: #7b3fc5; --visor: #b388ff; /* Translucent purple visor */ --crimson: #e53e6b; /* Red king blood */ --crimson2: #c0254f; --wing: #d4b8ff; /* Butterfly wing highlights */ --glow-lotus: rgba(155,93,229,0.25); --glow-crimson: rgba(229,62,107,0.2); --canvas-bg: #040308; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--void); color: var(--text); overflow-x: hidden; cursor: none; } /* ── BACKGROUND ── */ #bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* ── HEX GRID OVERLAY ── */ #hex-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(120,80,200,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(120,80,200,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%); } /* ── CUSTOM CURSOR ── */ #cursor { position: fixed; width: 6px; height: 6px; background: var(--crimson); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); pointer-events: none; z-index: 9999; transform: translate(-50%,-50%) rotate(0deg); box-shadow: 0 0 8px var(--crimson), 0 0 20px rgba(229,62,107,0.5); transition: transform 0.1s ease; animation: bladeRotate 3s linear infinite; } @keyframes bladeRotate { to { transform: translate(-50%,-50%) rotate(360deg); } } #cursor-ring { position: fixed; width: 28px; height: 28px; border: 1px solid rgba(179,136,255,0.5); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width 0.2s, height 0.2s; } /* ── PAGE CONTENT ── */ .page-content { position: relative; z-index: 2; } /* ── HEADER ── */ .header { padding: 80px 0 56px; border-bottom: 1px solid var(--border); position: relative; background: linear-gradient(180deg, rgba(155,93,229,0.06) 0%, transparent 100%); } .header::before { content: 'MLE · CLARITYPAY · NORTHEASTERN MS CS'; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 4px; color: var(--text-dim); white-space: nowrap; } .header::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--crimson), var(--lotus), var(--visor), var(--lotus), var(--crimson), transparent); } .container { max-width: 1200px; margin: 0 auto; padding: 0 48px; } .header-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .header-left h1 { font-family: 'Orbitron', monospace; font-size: clamp(28px, 4.5vw, 52px); font-weight: 900; letter-spacing: 2px; line-height: 1.1; margin-bottom: 6px; background: linear-gradient(135deg, #e8e0ff 0%, #b388ff 40%, #9b5de5 70%, #e53e6b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .header-left .avatar-name { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600; color: var(--crimson); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; opacity: 0.85; } .header-left .role { font-size: 14px; font-weight: 300; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 24px; } /* Status — Brain Burst style */ .status-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(229,62,107,0.06); border: 1px solid rgba(229,62,107,0.25); color: #f48ca8; padding: 8px 18px; border-radius: 3px; font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); } .status-dot { width: 6px; height: 6px; background: var(--crimson); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); animation: pulse 1.8s ease infinite; box-shadow: 0 0 6px var(--crimson); } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} } .contact-links { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-start; margin-top: 8px; } .contact-link { display: inline-flex; align-items: center; gap: 7px; background: rgba(155,93,229,0.06); color: var(--text-muted); text-decoration: none; padding: 10px 16px; border: 1px solid var(--border); font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); transition: all 0.2s ease; } .contact-link:hover { background: rgba(155,93,229,0.12); border-color: var(--lotus); color: var(--visor); box-shadow: 0 0 16px var(--glow-lotus), inset 0 0 16px rgba(155,93,229,0.05); } .contact-link svg { width: 14px; height: 14px; flex-shrink: 0; } /* ── MODE TOGGLE ── */ .mode-toggle { position: fixed; top: 18px; right: 18px; z-index: 1000; display: flex; gap: 2px; background: rgba(10,9,15,0.9); backdrop-filter: blur(16px); border: 1px solid var(--border); padding: 4px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); } .mode-btn { background: transparent; color: var(--text-muted); border: none; padding: 8px 18px; cursor: none; font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; transition: all 0.2s; } .mode-btn:hover { color: var(--visor); } .mode-btn.active { background: linear-gradient(135deg, rgba(155,93,229,0.3), rgba(229,62,107,0.2)); color: var(--wing); border: 1px solid var(--border-blade); box-shadow: 0 0 16px var(--glow-lotus); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); } /* ── GAME ── */ .game-section { padding: 60px 0; border-bottom: 1px solid var(--border); } .game-intro { text-align: center; max-width: 600px; margin: 0 auto 40px; } .game-intro h2 { font-family: 'Orbitron', monospace; font-size: 22px; font-weight: 700; margin-bottom: 12px; letter-spacing: 2px; color: var(--visor); text-shadow: 0 0 20px var(--glow-lotus); } .game-intro p { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 6px; } .game-intro .hint { font-size: 11px; color: var(--text-dim); margin-top: 12px; font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; } .game-intro .hint strong { color: var(--lotus); } .game-wrap { position: relative; display: flex; justify-content: center; } #gameCanvas { display: block; background: var(--canvas-bg); border: 1px solid var(--border); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); box-shadow: 0 0 40px rgba(155,93,229,0.12), 0 0 80px rgba(229,62,107,0.06); } .game-hud { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(5,5,8,0.92); backdrop-filter: blur(16px); border: 1px solid var(--border-blade); padding: 14px 24px; min-width: 200px; text-align: center; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); box-shadow: 0 0 24px var(--glow-lotus); } .hud-label { font-family: 'Orbitron', monospace; color: var(--text-dim); font-size: 8px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 6px; } .hud-score { font-family: 'Orbitron', monospace; font-size: 26px; font-weight: 900; background: linear-gradient(135deg, var(--visor), var(--crimson)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .completion-msg { margin-top: 12px; padding: 12px; background: rgba(229,62,107,0.07); border: 1px solid rgba(229,62,107,0.3); display: none; animation: fadeUp 0.4s ease; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); } .completion-msg.show { display: block; } @keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .completion-msg img { width: 120px; border: 1px solid var(--border-blade); margin: 0 auto 8px; display: block; } .completion-msg p { color: var(--crimson); font-size: 11px; font-weight: 600; font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; } .game-controls { text-align: center; margin-top: 18px; font-family: 'Rajdhani', sans-serif; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; } .game-controls span { margin: 0 12px; } .game-controls kbd { background: rgba(155,93,229,0.08); border: 1px solid var(--border); padding: 2px 7px; font-family: 'Rajdhani', sans-serif; font-size: 10px; color: var(--text-muted); clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 3px 100%, 0 calc(100% - 3px)); } /* ── LIST VIEW ── */ .list-section { padding: 60px 0; display: none; } .list-section.active { display: block; } .section-eyebrow { font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; color: var(--crimson); margin-bottom: 8px; } .section-heading { font-family: 'Orbitron', monospace; font-size: 24px; font-weight: 700; margin-bottom: 8px; letter-spacing: 1px; background: linear-gradient(135deg, #e8e0ff 20%, #b388ff 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 36px; max-width: 560px; line-height: 1.75; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 60px; } .card { background: rgba(155,93,229,0.03); border: 1px solid var(--border); padding: 28px; position: relative; overflow: hidden; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: all 0.25s ease; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--crimson), var(--lotus), var(--visor), var(--lotus), var(--crimson)); opacity: 0; transition: opacity 0.25s; } .card::after { content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: var(--border-blade); clip-path: polygon(0 0, 100% 0, 100% 100%); } .card:hover { border-color: var(--border-blade); background: rgba(155,93,229,0.06); box-shadow: 0 0 30px var(--glow-lotus), inset 0 0 30px rgba(155,93,229,0.03); transform: translateY(-3px); } .card:hover::before { opacity: 1; } .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .card-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; margin-bottom: 3px; color: var(--wing); } .card-org { font-size: 11px; color: var(--lotus); font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; } .card-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 10px; border: 1px solid; flex-shrink: 0; margin-left: 8px; font-family: 'Rajdhani', sans-serif; clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); } .badge-cloud { color:#7dd3fc; border-color:rgba(125,211,252,0.3); background:rgba(125,211,252,0.06); } .badge-oss { color:#86efac; border-color:rgba(134,239,172,0.3); background:rgba(134,239,172,0.06); } .badge-ai { color:#b388ff; border-color:rgba(179,136,255,0.3); background:rgba(179,136,255,0.06); } .badge-mobile { color:#f9a8d4; border-color:rgba(249,168,212,0.3); background:rgba(249,168,212,0.06); } .badge-ml { color:#e53e6b; border-color:rgba(229,62,107,0.3); background:rgba(229,62,107,0.06); } .badge-exp { color:var(--text-muted); border-color:var(--border); background:rgba(155,93,229,0.04); } .card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; } .tech-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; } .tech-tag { font-size: 10px; font-weight: 600; background: rgba(155,93,229,0.07); border: 1px solid rgba(155,93,229,0.2); color: var(--text-muted); padding: 3px 9px; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.5px; clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 3px 100%, 0 calc(100% - 3px)); } .highlights { list-style: none; margin-bottom: 18px; } .highlights li { font-size: 12px; color: var(--text-muted); line-height: 1.65; padding-left: 18px; margin-bottom: 5px; position: relative; } .highlights li::before { content: '◆'; position: absolute; left: 0; color: var(--crimson); font-size: 8px; top: 3px; } .card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--lotus); text-decoration: none; border: 1px solid rgba(155,93,229,0.35); padding: 8px 14px; font-family: 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); transition: all 0.2s; } .card-link:hover { background: rgba(155,93,229,0.12); border-color: var(--lotus); color: var(--visor); box-shadow: 0 0 14px var(--glow-lotus); } /* ── MODAL ── */ .modal { display: none; position: fixed; inset: 0; background: rgba(3,2,8,0.92); z-index: 2000; justify-content: center; align-items: center; padding: 24px; backdrop-filter: blur(8px); } .modal.active { display: flex; } .modal-content { background: rgba(10,9,20,0.99); border: 1px solid var(--border-blade); padding: 40px; max-width: 640px; width: 100%; max-height: 82vh; overflow-y: auto; position: relative; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); animation: modalIn 0.25s ease; box-shadow: 0 0 60px var(--glow-lotus), 0 0 120px var(--glow-crimson); } @keyframes modalIn { from{opacity:0;transform:scale(0.96) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .modal-title { font-family: 'Orbitron', monospace; font-size: 18px; font-weight: 700; letter-spacing: 1px; color: var(--wing); } .modal-org { font-size: 11px; color: var(--lotus); margin-top: 5px; font-family: 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } .close-btn { background: rgba(229,62,107,0.08); border: 1px solid rgba(229,62,107,0.3); color: var(--crimson); width: 32px; height: 32px; cursor: none; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; transition: all 0.2s; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .close-btn:hover { background: rgba(229,62,107,0.2); box-shadow: 0 0 12px var(--glow-crimson); } .modal-desc { font-size: 13px; color: var(--text-muted); line-height: 1.75; margin-bottom: 20px; } .modal-links { display: flex; gap: 12px; margin-top: 28px; } /* ── FOOTER ── */ .footer { padding: 36px 0; border-top: 1px solid var(--border); text-align: center; background: linear-gradient(0deg, rgba(229,62,107,0.03) 0%, transparent 100%); } .footer p { font-size: 11px; color: var(--text-dim); font-family: 'Rajdhani', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .container { padding: 0 20px; } .header-inner { flex-direction: column; align-items: flex-start; } .grid { grid-template-columns: 1fr; } .mode-toggle { top: 10px; right: 10px; } #gameCanvas { width: 100% !important; } body { cursor: auto; } #cursor, #cursor-ring { display: none; } } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--void); } ::-webkit-scrollbar-thumb { background: rgba(155,93,229,0.4); } </style> </head> <body>  <canvas id="bg-canvas"></canvas> <div id="hex-overlay"></div>  <div id="cursor"></div> <div id="cursor-ring"></div> <div class="page-content"> <div class="mode-toggle"> <button class="mode-btn active" id="gameBtn" onclick="switchMode('game')">◈ INTERACTIVE</button> <button class="mode-btn" id="listBtn" onclick="switchMode('list')">LIST VIEW</button> </div> <header class="header"> <div class="container"> <div class="header-inner"> <div class="header-left"> <div class="avatar-name">Backend & ML Infrastructure · Open to Connect</div> <h1>Sampada Kulkarni</h1> <p class="role">MLE @ ClarityPay · Backend & ML Infrastructure · Northeastern MS CS</p> <div class="status-badge"> <span class="status-dot"></span> CURRENTLY @ CLARITYPAY · OPEN TO CONNECT </div> </div> <div class="contact-links"> <a href="mailto:kulkarni.samp@northeastern.edu" class="contact-link"> <svg fill="currentColor" viewBox="0 0 20 20"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/></svg> EMAIL </a> <a href="https://linkedin.com/in/samkul-swe" class="contact-link" target="_blank"> <svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd"/></svg> LINKEDIN </a> <a href="https://github.com/samkul-swe" class="contact-link" target="_blank"> <svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/></svg> GITHUB </a> </div> </div> </div> </header> <section class="game-section" id="gameSection"> <div class="container"> <div class="game-intro"> <h2>— INTERACTIVE PORTFOLIO —</h2> <p>Each target is a project or experience. Hit them to unlock the full record.</p> <p class="hint"><strong>← → ARROWS</strong> · <strong>SPACE</strong> TO FIRE · OR <strong>CLICK</strong> DIRECTLY</p> </div> <div class="game-wrap"> <div class="game-hud"> <div class="hud-label">UNLOCKED</div> <div class="hud-score"><span id="hits">0</span> / 9</div> <div class="completion-msg" id="completionMessage"> <img src="https://i.imgflip.com/4/4t0m5.jpg" alt="waiting"> <p>✉️ STILL AWAITING "YOU'RE HIRED" EMAIL</p> </div> </div> <canvas id="gameCanvas"></canvas> </div> <div class="game-controls"> <span><kbd>←</kbd> <kbd>→</kbd> AIM</span> <span><kbd>SPACE</kbd> FIRE</span> <span><kbd>CLICK</kbd> TARGET</span> <span><kbd>ESC</kbd> CLOSE</span> </div> </div> </section> <section class="list-section" id="listSection"> <div class="container"> <div class="section-eyebrow">Selected Work</div> <h2 class="section-heading">PROJECTS</h2> <p class="section-sub">Personal and open-source projects spanning cloud architecture, AI/ML, and full-stack development.</p> <div class="grid"> <div class="card"><div class="card-top"><div><div class="card-title">AI Demo Builder</div></div><span class="card-badge badge-cloud">Cloud</span></div><p class="card-desc">Serverless platform that generates demo videos from GitHub repos. Submit a repo, get AI suggestions, upload clips — out comes a polished demo.</p><div class="tech-tags"><span class="tech-tag">AWS Lambda</span><span class="tech-tag">S3</span><span class="tech-tag">DynamoDB</span><span class="tech-tag">SQS/SNS</span><span class="tech-tag">React</span><span class="tech-tag">Gemini AI</span><span class="tech-tag">FFmpeg</span></div><ul class="highlights"><li>18 microservices, event-driven architecture</li><li>Gemini AI codebase analysis for demo suggestions</li><li>Async video processing with FFmpeg stitching</li></ul><a href="https://github.com/samkul-swe/ai-demo-builder" class="card-link" target="_blank">VIEW ↗</a></div> <div class="card"><div class="card-top"><div><div class="card-title">SurfSense</div></div><span class="card-badge badge-oss">Open Source</span></div><p class="card-desc">5 merged PRs to an open-source AI research platform with 1000+ stars. Full-stack contributions from FastAPI backend to React frontend.</p><div class="tech-tags"><span class="tech-tag">Python</span><span class="tech-tag">FastAPI</span><span class="tech-tag">React</span><span class="tech-tag">Next.js</span><span class="tech-tag">PostgreSQL</span><span class="tech-tag">Celery</span></div><ul class="highlights"><li>Web crawler with Firecrawl API + async fallback</li><li>Luma events connector with OAuth</li><li>Firecrawl v1 SDK migration with Pydantic validation</li></ul><a href="https://github.com/MODSetter/SurfSense" class="card-link" target="_blank">VIEW ↗</a></div> <div class="card"><div class="card-top"><div><div class="card-title">MindMelt</div></div><span class="card-badge badge-ai">AI</span></div><p class="card-desc">CS learning platform using Socratic questioning — asks rather than tells, with adaptive difficulty paths.</p><div class="tech-tags"><span class="tech-tag">React</span><span class="tech-tag">Node.js</span><span class="tech-tag">DeepSeek AI</span></div><ul class="highlights"><li>Socratic method with adaptive learning paths</li><li>Real-time progress tracking</li><li>Personalized hints and feedback</li></ul><a href="https://github.com/samkul-swe/MindMelt" class="card-link" target="_blank">VIEW ↗</a></div> <div class="card"><div class="card-top"><div><div class="card-title">TravelPal</div></div><span class="card-badge badge-mobile">Mobile</span></div><p class="card-desc">Android travel app with Gemini AI itinerary generation, Firebase offline sync, and Google Maps routes.</p><div class="tech-tags"><span class="tech-tag">Java</span><span class="tech-tag">Android</span><span class="tech-tag">Firebase</span><span class="tech-tag">Gemini API</span><span class="tech-tag">Google Maps</span></div><ul class="highlights"><li>Gemini AI personalized itineraries</li><li>Firebase auth + offline sync</li><li>Group trip collaboration features</li></ul><a href="https://github.com/samkul-swe/TravelPal" class="card-link" target="_blank">VIEW ↗</a></div> <div class="card"><div class="card-top"><div><div class="card-title">The-ROBIN</div></div><span class="card-badge badge-ml">ML</span></div><p class="card-desc">Ensemble fraud detection for job postings — 92% accuracy on 18k+ listings. Ironic to have on this portfolio.</p><div class="tech-tags"><span class="tech-tag">Python</span><span class="tech-tag">Flask</span><span class="tech-tag">Scikit-learn</span><span class="tech-tag">NLP</span><span class="tech-tag">SMOTE</span></div><ul class="highlights"><li>LR + MLP + Random Forest + SVM ensemble</li><li>TF-IDF vectorization pipeline</li><li>Real-time detection Flask app</li></ul><a href="https://github.com/samkul-swe/The-Robin" class="card-link" target="_blank">VIEW ↗</a></div> <div class="card"><div class="card-top"><div><div class="card-title">SUYT</div></div><span class="card-badge badge-mobile">Mobile</span></div><p class="card-desc">Android recycling app — point camera at waste, get disposal instructions and nearest recycling centres.</p><div class="tech-tags"><span class="tech-tag">Android</span><span class="tech-tag">Gemini API</span><span class="tech-tag">Location Services</span></div><ul class="highlights"><li>Gemini vision for waste classification</li><li>Location-aware recycling routes</li><li>Cost estimates for disposal methods</li></ul><a href="https://github.com/samkul-swe/SUYT" class="card-link" target="_blank">VIEW ↗</a></div> </div> <div class="section-eyebrow">Work History</div> <h2 class="section-heading">EXPERIENCE</h2> <p class="section-sub">3 years at IBM building enterprise systems and ML infrastructure, plus teaching grad students how computers actually work.</p> <div class="grid"> <div class="card"><div class="card-top"><div><div class="card-title">Software Engineer</div><div class="card-org">IBM Instana · 2023</div></div><span class="card-badge badge-exp">2023</span></div><p class="card-desc">Led IBM Instana's first Business Process Monitoring product — POC to 500+ enterprise customers in 6 months.</p><div class="tech-tags"><span class="tech-tag">Java</span><span class="tech-tag">Spring Boot</span><span class="tech-tag">Camunda</span><span class="tech-tag">IBM BAW</span><span class="tech-tag">Red Hat PAM</span><span class="tech-tag">Docker</span><span class="tech-tag">Kubernetes</span></div><ul class="highlights"><li>POC → production → 500+ customers in 6 months</li><li>Resolved 15+ critical data sync issues</li><li>Plugin architecture cut integration from 7 weeks to hours</li></ul><a href="https://linkedin.com/in/samkul-swe" class="card-link" target="_blank">LINKEDIN ↗</a></div> <div class="card"><div class="card-top"><div><div class="card-title">Software Developer</div><div class="card-org">IBM AIOps · 2021–22</div></div><span class="card-badge badge-exp">2021–22</span></div><p class="card-desc">Built ML evaluation infrastructure for IBM AIOps. Turned a full-day process into a one-hour automated pipeline.</p><div class="tech-tags"><span class="tech-tag">Python</span><span class="tech-tag">Docker</span><span class="tech-tag">Jenkins</span><span class="tech-tag">Flask</span><span class="tech-tag">Celery</span><span class="tech-tag">Pandas</span></div><ul class="highlights"><li>Validation time: 1 day → under 1 hour</li><li>Containerized testing infra + Jenkins CI/CD</li><li>Time-series dashboards for anomaly detection evaluation</li></ul><a href="https://linkedin.com/in/samkul-swe" class="card-link" target="_blank">LINKEDIN ↗</a></div> <div class="card"><div class="card-top"><div><div class="card-title">Teaching Assistant</div><div class="card-org">Northeastern · 2025</div></div><span class="card-badge badge-exp">2025</span></div><p class="card-desc">TA for CS5600 Computer Systems — where grad students learn why their code was slower than they thought.</p><div class="tech-tags"><span class="tech-tag">C/C++</span><span class="tech-tag">Linux</span><span class="tech-tag">Systems Programming</span></div><ul class="highlights"><li>Office hours for 100+ MS and PhD students</li><li>OS, concurrency, memory management, distributed systems</li><li>15% improvement in assignment completion rates</li></ul><a href="https://northeastern.edu" class="card-link" target="_blank">NEU ↗</a></div> <div class="card"><div class="card-top"><div><div class="card-title">Technical Article</div><div class="card-org">IBM Cloud · Medium</div></div><span class="card-badge badge-ai">Writing</span></div><p class="card-desc">Published deep-dive on Watson AIOps intelligent event grouping — reducing alert fatigue, surfacing root causes faster.</p><div class="tech-tags"><span class="tech-tag">AIOps</span><span class="tech-tag">Event Correlation</span><span class="tech-tag">IBM Cloud</span></div><ul class="highlights"><li>Explains intelligent event grouping algorithms</li><li>Architecture and real-world use cases</li></ul><a href="https://medium.com/ibm-cloud/grouping-events-to-make-sense-of-it-noise-using-ibm-cloud-pak-for-watson-aiops-5a28905d5216" class="card-link" target="_blank">READ ↗</a></div> </div> </div> </section> <div class="modal" id="modal"> <div class="modal-content"> <div class="modal-header"> <div><div class="modal-title" id="modalTitle"></div><div class="modal-org" id="modalOrg"></div></div> <button class="close-btn" onclick="closeModal()">✕</button> </div> <div id="modalContent"></div> </div> </div> <footer class="footer"> <div class="container"> <p>© 2025 Sampada Kulkarni · MLE @ ClarityPay · Built with too much caffeine and a very sharp aesthetic</p> </div> </footer> </div> <script> // ── BACKGROUND — floating blade particles ── (function(){ const bc = document.getElementById('bg-canvas'); const bx = bc.getContext('2d'); function resize(){ bc.width=window.innerWidth; bc.height=window.innerHeight; } resize(); window.addEventListener('resize', resize); const blades = Array.from({length:30}, () => ({ x: Math.random(), y: Math.random(), size: Math.random()*8+3, rot: Math.random()*Math.PI*2, rotSpeed: (Math.random()-.5)*0.008, vx: (Math.random()-.5)*0.0003, vy: -Math.random()*0.0004-0.0001, alpha: Math.random()*0.12+0.03, hue: Math.random()<0.5 ? 270 : 345 })); function loop(){ bx.clearRect(0,0,bc.width,bc.height); blades.forEach(b => { b.x += b.vx; b.y += b.vy; b.rot += b.rotSpeed; if(b.y < -0.05) b.y = 1.05; if(b.x < -0.05) b.x = 1.05; if(b.x > 1.05) b.x = -0.05; const px = b.x*bc.width, py = b.y*bc.height; bx.save(); bx.translate(px, py); bx.rotate(b.rot); // Diamond blade shape bx.beginPath(); bx.moveTo(0, -b.size); bx.lineTo(b.size*0.25, 0); bx.lineTo(0, b.size); bx.lineTo(-b.size*0.25, 0); bx.closePath(); bx.fillStyle = `hsla(${b.hue},70%,65%,${b.alpha})`; bx.fill(); bx.restore(); }); requestAnimationFrame(loop); } loop(); })(); // ── CUSTOM CURSOR ── (function(){ const dot = document.getElementById('cursor'); const ring = document.getElementById('cursor-ring'); let rx=0, ry=0; document.addEventListener('mousemove', e => { dot.style.left=e.clientX+'px'; dot.style.top=e.clientY+'px'; }); function trackRing(){ const tx=parseFloat(dot.style.left)||0, ty=parseFloat(dot.style.top)||0; rx+=(tx-rx)*0.12; ry+=(ty-ry)*0.12; ring.style.left=rx+'px'; ring.style.top=ry+'px'; requestAnimationFrame(trackRing); } trackRing(); document.querySelectorAll('a,button,canvas').forEach(el => { el.addEventListener('mouseenter', () => { ring.style.width='44px'; ring.style.height='44px'; }); el.addEventListener('mouseleave', () => { ring.style.width='28px'; ring.style.height='28px'; }); }); })(); // ── GAME ── const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = Math.min(window.innerWidth-96, 1100); canvas.height = 520; let hits=0, angle=-90, targets=[], projectiles=[], particles=[]; const projectData = { 'AI Demo': {title:'AI Demo Builder', org:'Personal Project · Cloud', description:'Serverless video generation — 18 AWS Lambda microservices, Gemini AI codebase analysis, FFmpeg video stitching.', tech:['AWS Lambda','S3','DynamoDB','SQS/SNS','React','Gemini AI','FFmpeg'], highlights:['18 microservices, event-driven architecture','Gemini AI repo analysis for suggestions','Async FFmpeg video pipeline'], link:'https://github.com/samkul-swe/ai-demo-builder'}, 'SurfSense': {title:'SurfSense OSS', org:'Open Source Contribution', description:'5 merged PRs to a 1000+ star AI research platform. FastAPI backend, React frontend, PostgreSQL.', tech:['Python','FastAPI','React','Next.js','PostgreSQL','Celery'], highlights:['Firecrawl API web crawler + async fallback','Luma OAuth connector','Firecrawl v1 SDK migration'], link:'https://github.com/MODSetter/SurfSense'}, 'MindMelt': {title:'MindMelt', org:'Personal Project · AI / Ed-Tech', description:'CS education platform using Socratic questioning — asks rather than tells. Adaptive difficulty paths, real-time tracking.', tech:['React','Node.js','DeepSeek AI'], highlights:['Socratic method, adaptive difficulty','Real-time progress tracking','Personalized hints and feedback'], link:'https://github.com/samkul-swe/MindMelt'}, 'TravelPal': {title:'TravelPal', org:'Personal Project · Mobile', description:'Android travel app with Gemini AI itinerary generation, Firebase offline sync, Google Maps route visualization.', tech:['Java','Android','Firebase','Gemini API','Google Maps'], highlights:['Gemini AI personalized itineraries','Firebase auth + offline sync','Group trip collaboration'], link:'https://github.com/samkul-swe/TravelPal'}, 'The-ROBIN': {title:'The-ROBIN', org:'Personal Project · ML', description:'Ensemble fraud detection for job postings. 92% accuracy on 18k+ listings. Ironic to have on a portfolio page.', tech:['Python','Flask','Scikit-learn','NLP','SMOTE'], highlights:['LR + MLP + Random Forest + SVM ensemble','TF-IDF pipeline','Real-time Flask detection app'], link:'https://github.com/samkul-swe/The-Robin'}, 'SUYT': {title:'SUYT', org:'Personal Project · Mobile', description:'Android recycling app — point camera at waste, get disposal instructions and nearest recycling centres.', tech:['Android','Gemini API','Location Services'], highlights:['Gemini vision waste classification','Location-aware recycling routes','Cost estimates for disposal'], link:'https://github.com/samkul-swe/SUYT'}, 'IBM Instana': {title:'Software Engineer', org:'IBM Instana · 2023', description:'Led IBM Instana\'s first Business Process Monitoring product. POC to 500+ enterprise customers in 6 months flat.', tech:['Java','Spring Boot','Camunda','IBM BAW','Red Hat PAM','Docker','K8s'], highlights:['POC → production in 6 months, 500+ customers','Resolved 15+ critical data sync issues','Plugin arch cut integration from 7 weeks to hours'], link:'https://linkedin.com/in/samkul-swe'}, 'IBM Dev': {title:'Software Developer', org:'IBM AIOps · 2021–22', description:'ML evaluation infrastructure for IBM AIOps. Validation time: full day → under one hour. Containerized and deployed to CI/CD.', tech:['Python','Docker','Jenkins','Flask','Celery','Pandas'], highlights:['Validation: 1 day → under 1 hour','Containerized infra + Jenkins CI/CD','Time-series dashboards for anomaly detection'], link:'https://linkedin.com/in/samkul-swe'}, 'TA NEU': {title:'Teaching Assistant', org:'Northeastern · CS5600 · 2025', description:'TA for CS5600 Computer Systems — 100+ grad students. OS, concurrency, memory management, distributed systems.', tech:['C/C++','Linux','Systems Programming'], highlights:['Office hours for 100+ MS/PhD students','OS, concurrency, distributed systems','15% improvement in completion rates'], link:'https://northeastern.edu'} }; // Target colors — blade-themed const tColors = { 'AI Demo': {stroke:'#7dd3fc', fill:'rgba(125,211,252,0.06)', glow:'rgba(125,211,252,0.3)', hue:200}, 'SurfSense': {stroke:'#86efac', fill:'rgba(134,239,172,0.06)', glow:'rgba(134,239,172,0.3)', hue:145}, 'MindMelt': {stroke:'#b388ff', fill:'rgba(179,136,255,0.06)', glow:'rgba(179,136,255,0.4)', hue:270}, 'TravelPal': {stroke:'#e53e6b', fill:'rgba(229,62,107,0.06)', glow:'rgba(229,62,107,0.35)', hue:345}, 'The-ROBIN': {stroke:'#f9a8d4', fill:'rgba(249,168,212,0.06)', glow:'rgba(249,168,212,0.3)', hue:330}, 'SUYT': {stroke:'#5eead4', fill:'rgba(94,234,212,0.06)', glow:'rgba(94,234,212,0.3)', hue:175}, 'IBM Instana': {stroke:'#9b5de5', fill:'rgba(155,93,229,0.06)', glow:'rgba(155,93,229,0.4)', hue:275}, 'IBM Dev': {stroke:'#e53e6b', fill:'rgba(229,62,107,0.06)', glow:'rgba(229,62,107,0.3)', hue:345}, 'TA NEU': {stroke:'#b388ff', fill:'rgba(179,136,255,0.06)', glow:'rgba(179,136,255,0.3)', hue:270} }; class Target { constructor(x,y,label){ this.x=x; this.y=y; this.label=label; this.w=120; this.h=52; this.hit=false; this.wobble=Math.random()*Math.PI*2; this.wobbleSpeed=0.014+Math.random()*0.01; this.pulse=Math.random()*Math.PI*2; this.hitAnim=0; } draw(){ if(this.hit && this.hitAnim<=0) return; this.wobble+=this.wobbleSpeed; this.pulse+=0.03; const wy=Math.sin(this.wobble)*3; const col=tColors[this.label]; const pa=0.4+0.25*Math.sin(this.pulse); ctx.save(); ctx.translate(this.x, this.y+wy); if(this.hit){ ctx.globalAlpha=this.hitAnim/20; ctx.scale(1+(1-this.hitAnim/20)*0.5,1+(1-this.hitAnim/20)*0.5); this.hitAnim--; } ctx.shadowColor=col.stroke; ctx.shadowBlur=12+8*Math.sin(this.pulse); // Angular blade-shaped target (cut corners) const hw=this.w/2, hh=this.h/2, cut=8; ctx.beginPath(); ctx.moveTo(-hw+cut, -hh); ctx.lineTo(hw-cut, -hh); ctx.lineTo(hw, -hh+cut); ctx.lineTo(hw, hh-cut); ctx.lineTo(hw-cut, hh); ctx.lineTo(-hw+cut, hh); ctx.lineTo(-hw, hh-cut); ctx.lineTo(-hw, -hh+cut); ctx.closePath(); ctx.fillStyle=col.fill; ctx.fill(); ctx.globalAlpha=(this.hit?this.hitAnim/20:1)*pa; ctx.strokeStyle=col.stroke; ctx.lineWidth=1.5; ctx.stroke(); // Corner accent ctx.globalAlpha=this.hit?this.hitAnim/20:1; ctx.shadowBlur=0; ctx.fillStyle=col.stroke; ctx.beginPath(); ctx.moveTo(hw-cut,-hh); ctx.lineTo(hw,-hh+cut); ctx.lineTo(hw-cut,-hh+1); ctx.closePath(); ctx.fill(); ctx.font='700 11px "Rajdhani",sans-serif'; ctx.fillStyle=col.stroke; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.letterSpacing='1px'; ctx.fillText(this.label.toUpperCase(), 0, 0); ctx.restore(); } contains(mx,my){ return mx>=this.x-this.w/2&&mx<=this.x+this.w/2&&my>=this.y-this.h/2&&my<=this.y+this.h/2; } } class Projectile { constructor(x,y,vx,vy){ this.x=x;this.y=y;this.vx=vx;this.vy=vy;this.rot=Math.atan2(vy,vx);this.trail=[]; } update(){ this.trail.push({x:this.x,y:this.y}); if(this.trail.length>10)this.trail.shift(); this.x+=this.vx;this.y+=this.vy;this.vy+=0.18; this.rot=Math.atan2(this.vy,this.vx); } draw(){ // Trail this.trail.forEach((p,i)=>{ const a=i/this.trail.length; ctx.save(); ctx.translate(p.x,p.y); ctx.rotate(this.rot); ctx.beginPath(); ctx.moveTo(0,-a*4); ctx.lineTo(a*2,0); ctx.lineTo(0,a*4); ctx.lineTo(-a*2,0); ctx.closePath(); ctx.fillStyle=`rgba(155,93,229,${a*0.4})`; ctx.fill(); ctx.restore(); }); // Blade projectile — diamond ctx.save(); ctx.translate(this.x,this.y); ctx.rotate(this.rot); ctx.shadowColor='rgba(229,62,107,0.8)'; ctx.shadowBlur=12; ctx.beginPath(); ctx.moveTo(10,0); ctx.lineTo(2,3); ctx.lineTo(-4,0); ctx.lineTo(2,-3); ctx.closePath(); ctx.fillStyle='#e8d4ff'; ctx.fill(); ctx.strokeStyle='#e53e6b'; ctx.lineWidth=1; ctx.stroke(); ctx.shadowBlur=0; ctx.restore(); } offScreen(){ return this.x<0||this.x>canvas.width||this.y>canvas.height; } } class Particle { constructor(x,y,hue,isBlade){ this.x=x;this.y=y; this.vx=(Math.random()-.5)*9; this.vy=(Math.random()-.5)*9-2; this.rot=Math.random()*Math.PI*2; this.rotSpeed=(Math.random()-.5)*0.2; this.size=Math.random()*5+2; this.hue=hue; this.life=1; this.decay=0.015+Math.random()*0.01; this.isBlade=isBlade&&Math.random()>0.5; } update(){ this.x+=this.vx;this.y+=this.vy;this.vy+=0.25;this.rot+=this.rotSpeed;this.life-=this.decay;this.vx*=0.97; } draw(){ ctx.save(); ctx.translate(this.x,this.y); ctx.rotate(this.rot); ctx.globalAlpha=this.life; if(this.isBlade){ ctx.beginPath(); ctx.moveTo(0,-this.size); ctx.lineTo(this.size*0.3,0); ctx.lineTo(0,this.size); ctx.lineTo(-this.size*0.3,0); ctx.closePath(); ctx.fillStyle=`hsl(${this.hue},80%,70%)`; ctx.fill(); } else { ctx.beginPath(); ctx.arc(0,0,this.size*0.5,0,Math.PI*2); ctx.fillStyle=`hsla(${this.hue},80%,70%,${this.life})`; ctx.fill(); } ctx.restore(); } } function initTargets(){ targets=[]; const labels=['AI Demo','SurfSense','MindMelt','TravelPal','The-ROBIN','SUYT','IBM Instana','IBM Dev','TA NEU']; const r1=5,r2=4,usableW=canvas.width-80,colW=usableW/r1; const y1=canvas.height*0.28, y2=canvas.height*0.6; for(let i=0;i<r1;i++) targets.push(new Target(40+colW*i+colW/2,y1,labels[i])); const off=(colW*r1-colW*r2)/2; for(let i=0;i<r2;i++) targets.push(new Target(40+off+colW*i+colW/2,y2,labels[r1+i])); } function drawCannon(){ const cx=canvas.width/2, cy=canvas.height-28, rad=angle*Math.PI/180; // Base — angular cut ctx.beginPath(); ctx.moveTo(cx-46,cy+28); ctx.lineTo(cx-46,cy+14); ctx.lineTo(cx-38,cy+14); ctx.lineTo(cx+38,cy+14); ctx.lineTo(cx+46,cy+14); ctx.lineTo(cx+46,cy+28); ctx.closePath(); ctx.fillStyle='rgba(155,93,229,0.1)'; ctx.fill(); ctx.strokeStyle='rgba(155,93,229,0.3)'; ctx.lineWidth=1; ctx.stroke(); // Pivot diamond ctx.save(); ctx.translate(cx,cy); ctx.beginPath(); ctx.moveTo(0,-18); ctx.lineTo(12,0); ctx.lineTo(0,18); ctx.lineTo(-12,0); ctx.closePath(); ctx.fillStyle='rgba(26,22,48,0.95)'; ctx.fill(); ctx.strokeStyle='rgba(155,93,229,0.5)'; ctx.lineWidth=1.5; ctx.stroke(); ctx.restore(); // Barrel ctx.save(); ctx.translate(cx,cy); ctx.rotate(rad); const bg=ctx.createLinearGradient(0,-6,0,6); bg.addColorStop(0,'#4a2080'); bg.addColorStop(0.5,'#9b5de5'); bg.addColorStop(1,'#4a2080'); ctx.shadowColor='rgba(229,62,107,0.6)'; ctx.shadowBlur=12; ctx.beginPath(); ctx.moveTo(0,-6); ctx.lineTo(42,-4); ctx.lineTo(48,0); ctx.lineTo(42,4); ctx.lineTo(0,6); ctx.closePath(); ctx.fillStyle=bg; ctx.fill(); ctx.strokeStyle='rgba(229,62,107,0.5)'; ctx.lineWidth=1; ctx.stroke(); ctx.shadowBlur=0; ctx.restore(); // Center gem ctx.save(); ctx.translate(cx,cy); ctx.beginPath(); ctx.moveTo(0,-8); ctx.lineTo(6,0); ctx.lineTo(0,8); ctx.lineTo(-6,0); ctx.closePath(); const dg=ctx.createRadialGradient(0,0,0,0,0,8); dg.addColorStop(0,'#ffe0f8'); dg.addColorStop(0.5,'#e53e6b'); dg.addColorStop(1,'#7b1a40'); ctx.fillStyle=dg; ctx.shadowColor='rgba(229,62,107,0.8)'; ctx.shadowBlur=16; ctx.fill(); ctx.shadowBlur=0; ctx.restore(); } function drawGrid(){ ctx.strokeStyle='rgba(120,80,200,0.05)'; ctx.lineWidth=1; for(let x=0;x<canvas.width;x+=50){ ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,canvas.height);ctx.stroke(); } for(let y=0;y<canvas.height;y+=50){ ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(canvas.width,y);ctx.stroke(); } } function drawScanline(){ const time = Date.now() * 0.0008; const y = ((time % 1) * canvas.height); const g = ctx.createLinearGradient(0, y-30, 0, y+30); g.addColorStop(0,'transparent'); g.addColorStop(0.5,'rgba(155,93,229,0.04)'); g.addColorStop(1,'transparent'); ctx.fillStyle=g; ctx.fillRect(0,y-30,canvas.width,60); } function hitTarget(t){ t.hit=true; t.hitAnim=20; const col=tColors[t.label]; for(let i=0;i<32;i++) particles.push(new Particle(t.x,t.y,col.hue,true)); hits++; document.getElementById('hits').textContent=hits; if(hits===9) document.getElementById('completionMessage').classList.add('show'); showModal(t.label); } function checkCollisions(){ projectiles.forEach((proj,pi)=>{ targets.forEach(t=>{ if(t.hit) return; if(proj.x>=t.x-t.w/2&&proj.x<=t.x+t.w/2&&proj.y>=t.y-t.h/2&&proj.y<=t.y+t.h/2){ projectiles.splice(pi,1); hitTarget(t); } }); }); } function gameLoop(){ ctx.fillStyle='#040308'; ctx.fillRect(0,0,canvas.width,canvas.height); drawGrid(); drawScanline(); targets.forEach(t=>t.draw()); projectiles=projectiles.filter(p=>{ p.update();p.draw();return !p.offScreen(); }); particles=particles.filter(p=>{ p.update();p.draw();return p.life>0; }); checkCollisions(); drawCannon(); requestAnimationFrame(gameLoop); } function showModal(label){ const d=projectData[label]; if(!d) return; document.getElementById('modalTitle').textContent=d.title; document.getElementById('modalOrg').textContent=d.org; let html=`<p class="modal-desc">${d.description}</p>`; html+='<div class="tech-tags">'+d.tech.map(t=>`<span class="tech-tag">${t}</span>`).join('')+'</div>'; html+='<ul class="highlights">'+d.highlights.map(h=>`<li>${h}</li>`).join('')+'</ul>'; html+=`<div class="modal-links"><a href="${d.link}" target="_blank" class="card-link">VIEW PROJECT ↗</a></div>`; document.getElementById('modalContent').innerHTML=html; document.getElementById('modal').classList.add('active'); } function closeModal(){ document.getElementById('modal').classList.remove('active'); } function switchMode(mode){ const game=document.getElementById('gameSection'), list=document.getElementById('listSection'); if(mode==='game'){ game.style.display='';list.classList.remove('active');document.getElementById('gameBtn').classList.add('active');document.getElementById('listBtn').classList.remove('active'); } else{ game.style.display='none';list.classList.add('active');document.getElementById('gameBtn').classList.remove('active');document.getElementById('listBtn').classList.add('active'); } } document.addEventListener('keydown',e=>{ if(e.key==='ArrowLeft') angle=Math.max(-175,angle-4); else if(e.key==='ArrowRight') angle=Math.min(-5,angle+4); else if(e.key===' '){ e.preventDefault(); projectiles.push(new Projectile(canvas.width/2,canvas.height-28,Math.cos(angle*Math.PI/180)*14,Math.sin(angle*Math.PI/180)*14)); } else if(e.key==='Escape') closeModal(); }); canvas.addEventListener('click',e=>{ const rect=canvas.getBoundingClientRect(),mx=e.clientX-rect.left,my=e.clientY-rect.top; targets.forEach(t=>{ if(!t.hit&&t.contains(mx,my)) hitTarget(t); }); }); document.getElementById('modal').addEventListener('click',e=>{ if(e.target===document.getElementById('modal')) closeModal(); }); window.addEventListener('resize',()=>{ canvas.width=Math.min(window.innerWidth-96,1100);canvas.height=520;initTargets(); }); initTargets(); gameLoop(); </script> </body> </html>