2b:null 2c:["$","title",null,{"children":"Sri Krishna KoushikKomanduru | Sri Krishna Koushik Komanduru | Observable"}] 31:T1363, const CONTENT = { given: "Sri Krishna Koushik", family: "Komanduru", tagline: "Data science student in Portland, Maine. Hover my name.", intro: "I'm Koushik. MS in Data Science at Northeastern's Roux Institute, after a CS degree focused on AI and ML. " + "Most of my work is the unglamorous middle: getting messy data to agree with itself, then making it useful. " + "Off the clock I'm usually in a game or editing video.", stack: ["Python", "SQL", "machine learning", "deep learning", "statistics", "data visualisation"], links: [ { label: "GitHub", url: "https://github.com/" }, { label: "LinkedIn", url: "https://linkedin.com/" }, { label: "Email", url: "mailto:hello@example.com" } ] }; const CSS = ` .bio{ --ink:#14181F; --soft:#5A6472; --line:rgba(20,24,33,.16); --card:#FFFFFF; --accent:#2440D6; position:relative; text-align:center; padding:clamp(36px,8vh,80px) 20px clamp(130px,20vh,190px); color:var(--ink); font-family:"Helvetica Neue", Helvetica, Inter, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing:antialiased; } .bio *{box-sizing:border-box} .bio h1{ margin:0; font-size:clamp(28px,5.6vw,64px); font-weight:700; letter-spacing:-.035em; line-height:.95; text-transform:lowercase; transition:color .25s ease; } .bio h1 span{display:block} .bio .tagline{ margin:14px auto 0;max-width:36ch; font-size:14px;line-height:1.5;color:var(--soft); } /* the name is the only trigger */ .bio .who{position:relative;display:inline-block;cursor:help} .bio .who:focus-visible{outline:2px solid var(--accent);outline-offset:10px} .bio .who:hover h1,.bio .who.open h1,.bio .who:focus-visible h1{color:var(--accent)} .bio .bubble{ position:absolute;top:calc(100% + 24px);left:50%; width:min(420px, calc(100vw - 36px)); padding:18px 20px 16px; background:var(--card); border:1px solid var(--line); box-shadow:0 18px 40px -22px rgba(20,24,33,.45); text-align:left;z-index:5; opacity:0;visibility:hidden; transform:translateX(-50%) translateY(-6px); transition:opacity .25s ease, transform .25s ease, visibility .25s; } .bio .bubble::before,.bio .bubble::after{ content:"";position:absolute;left:50%;margin-left:-9px; width:0;height:0;border:9px solid transparent; } .bio .bubble::before{top:-19px;border-bottom-color:var(--line)} .bio .bubble::after{top:-18px;border-bottom-color:var(--card)} .bio .who:hover .bubble,.bio .who:focus-within .bubble,.bio .who.open .bubble{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0); } .bio .bubble p{margin:0;font-size:14.5px;line-height:1.6} .bio .stack{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px} .bio .stack li{font-size:12px;line-height:1;padding:6px 8px;border:1px solid var(--line);color:var(--soft)} .bio .links{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);display:flex;gap:18px} .bio .links a{color:var(--ink);font-size:13px;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px} .bio .links a:hover{color:var(--accent)} .bio .links a:focus-visible{outline:2px solid var(--accent);outline-offset:4px} @media (prefers-reduced-motion:reduce){.bio .bubble{transition:none}} `; const root = document.createElement("div"); root.className = "bio"; root.innerHTML = `

`; const style = document.createElement("style"); style.textContent = CSS; root.prepend(style); root.querySelector(".given").textContent = CONTENT.given; root.querySelector(".family").textContent = CONTENT.family; root.querySelector(".intro").textContent = CONTENT.intro; root.querySelector(".tagline").textContent = CONTENT.tagline; for (const s of CONTENT.stack) { const li = document.createElement("li"); li.textContent = s; root.querySelector(".stack").append(li); } for (const l of CONTENT.links) { const a = document.createElement("a"); a.href = l.url; a.textContent = l.label; root.querySelector(".links").append(a); } // no hover on touch, so a tap on the name toggles the bubble const who = root.querySelector(".who"); who.addEventListener("click", e => { e.stopPropagation(); who.classList.toggle("open"); }); function onDocClick(e) { if (!root.isConnected) return document.removeEventListener("click", onDocClick); if (!who.contains(e.target)) who.classList.remove("open"); } function onKey(e) { if (!root.isConnected) return document.removeEventListener("keydown", onKey); if (e.key === "Escape") { who.classList.remove("open"); who.blur(); } } document.addEventListener("click", onDocClick); document.addEventListener("keydown", onKey); if (typeof display === "function") display(root); else document.body.append(root);32:[] 2f:{"id":"f8f82ea39b4158f0","slug":"sri-krishna-koushik-komanduru","title":"Sri Krishna KoushikKomanduru","thumbnail":"ca5816d46bc35ea7eb68a6dbf1a43097737725a2921a3dd90c2d17d26fbddc59","access_level":"public","create_time":"$D2026-09-09T18:37:57.019Z","update_time":"$D2026-09-09T20:03:46.600Z","view_time":null,"first_public_time":"$D2026-09-09T20:08:07.548Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b4c94c4c66391089","login":"skkoushik453","name":"Sri Krishna Koushik Komanduru","avatar_url":"https://avatars-next.observableusercontent.com/ebf27e77a2b7384810c9854c4b237843fcd1ed9b5c31d78fd7b625029c872615","tier":"starter_2024"},"version":54,"publish_version":54,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba606d67d08a0ced","login":"skkoushik453","name":"Sri Krishna Koushik Komanduru","avatar_url":"https://avatars-next.observableusercontent.com/ebf27e77a2b7384810c9854c4b237843fcd1ed9b5c31d78fd7b625029c872615","tier":null}],"members":[{"type":"team","id":"b4c94c4c66391089","login":"skkoushik453","name":"Sri Krishna Koushik Komanduru","avatar_url":"https://avatars-next.observableusercontent.com/ebf27e77a2b7384810c9854c4b237843fcd1ed9b5c31d78fd7b625029c872615","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Sri Krishna KoushikKomanduru","cells":[{"id":12,"value":"$31","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"2","titling":"auto"}} 30:"$2f:body"