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>Research & Projects | Raihan Mia</title> 7 <link rel="stylesheet" href="/assets/css/style.css"> 8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"> 10 <style> 11 /* ========================================================= 12 OVERFLOW CONTAINMENT (fixes horizontal scroll on mobile) 13 ========================================================= */ 14 *, *::before, *::after { box-sizing: border-box; } 15 16 html { -webkit-text-size-adjust: 100%; } 17 18 html, body { max-width: 100%; } 19 20 /* overflow-x:clip contains overflow WITHOUT creating a scroll container, 21 so position:sticky (navbar + project rail) keeps working. */ 22 @supports (overflow-x: clip) { 23 html, body { overflow-x: clip; } 24 } 25 /* Older browsers: fall back to hidden (sticky may degrade, but no h-scroll). */ 26 @supports not (overflow-x: clip) { 27 html, body { overflow-x: hidden; } 28 } 29 30 /* style.css sets .navbar-menu { width:100vw } ONLY inside its <=900px block, 31 where 100vw exceeds the viewport when a scrollbar is present. 32 Scope the fix to that breakpoint â applying it on desktop would stretch 33 the menu across the container and break its right alignment 34 (.navbar-container uses justify-content: space-between). */ 35 .navbar-custom, .navbar-container { max-width: 100%; } 36 @media (max-width: 900px) { 37 .navbar-menu { width: 100% !important; max-width: 100% !important; } 38 } 39 40 /* Nothing may exceed its container */ 41 img, video, svg, iframe, table, pre { max-width: 100%; } 42 43 /* Grid/flex children default to min-width:auto, which lets a scrolling child 44 (the chip rail) stretch its track past the viewport. Reset it everywhere. */ 45 .rp-layout, .rp-sidebar, .rp-panels, .rp-panel, 46 .project-item, .project-content, .project-image-container, 47 .project-links, .tech-stack, .project-highlights { 48 min-width: 0; 49 max-width: 100%; 50 } 51 52 main { 53 max-width: 100%; 54 width: 100%; 55 margin: 0 auto; 56 padding: 1.5rem; 57 margin-top: 0; 58 } 59 @supports (overflow-x: clip) { 60 main { overflow-x: clip; } 61 } 62 .rp-layout { width: 100%; } 63 64 .rp-header { max-width: 1300px; margin: 0 auto 1.25rem auto; } 65 .rp-header h1 { font-size: 2rem; font-weight: 700; color: #222; margin: 0 0 .4rem 0; } 66 .rp-header p { color: #666; font-size: 1.05rem; line-height: 1.6; margin: 0; } 67 68 /* ---- Two-column layout: sidebar list + detail panel ---- */ 69 .rp-layout { 70 display: grid; 71 grid-template-columns: minmax(0, 320px) minmax(0, 1fr); 72 gap: 1.75rem; 73 align-items: start; 74 max-width: 1300px; 75 margin: 0 auto; 76 } 77 78 .rp-sidebar { 79 position: sticky; 80 top: 80px; 81 background: #fff; 82 border: 1px solid #e9ecef; 83 border-radius: 12px; 84 box-shadow: 0 4px 6px rgba(0,0,0,0.06); 85 padding: .75rem; 86 max-height: calc(100vh - 110px); 87 overflow-y: auto; 88 } 89 .rp-sidebar h2 { 90 font-size: .8rem; 91 text-transform: uppercase; 92 letter-spacing: .06em; 93 color: #8a8f98; 94 margin: .4rem .6rem .6rem .6rem; 95 font-weight: 700; 96 } 97 .rp-nav { list-style: none; margin: 0; padding: 0; } 98 .rp-nav li { margin: 0 0 .25rem 0; } 99 .rp-nav button { 100 width: 100%; 101 text-align: left; 102 background: transparent; 103 border: 0; 104 border-left: 3px solid transparent; 105 border-radius: 8px; 106 padding: .7rem .75rem; 107 cursor: pointer; 108 font: inherit; 109 color: #333; 110 line-height: 1.35; 111 transition: background .18s ease, border-color .18s ease, color .18s ease; 112 } 113 .rp-nav button:hover { background: #f4f7fb; } 114 .rp-nav button .rp-nav-title { display: block; font-weight: 600; font-size: 1rem; } 115 .rp-nav button .rp-nav-tag { 116 display: block; font-size: .8rem; color: #7a8290; margin-top: .18rem; 117 } 118 .rp-nav button.active { 119 background: #eef5ff; 120 border-left-color: #007bff; 121 color: #0056b3; 122 } 123 .rp-nav button.active .rp-nav-tag { color: #4a7fb5; } 124 .rp-nav button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; } 125 126 .rp-panels { min-width: 0; } 127 .rp-panel { display: none; } 128 .rp-panel.active { display: block; animation: rpFade .22s ease; }
129 @keyframes rpFade { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform:none;} } 130 131 /* ---- Project card ---- */ 132 .project-item { 133 background: #fff; 134 border-radius: 12px; 135 overflow: visible; 136 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08); 137 border: 1px solid #e9ecef; 138 display: block; 139 padding: 1.75rem; 140 } 141 142 .project-image-container { 143 display: block; width: 100%; max-width: 100%; 144 margin: 0 0 1.25rem 0; text-align: center; 145 background: transparent; padding: 0; border: 0; box-shadow: none; 146 } 147 .project-image { 148 width: 100%; height: auto; object-fit: contain; object-position: center; 149 border-radius: 6px; max-width: 100%; display: block; margin: 0 auto; 150 } 151 .project-content { overflow: visible; display: block; clear: both; } 152 153 .project-title { 154 font-size: 1.6rem; font-weight: 700; color: #222; 155 margin: 0 0 1rem 0; line-height: 1.3; text-align: left; 156 } 157 .project-subtitle { font-weight: 500; color: #667; font-size: 1.1rem; } 158 159 .project-description { 160 color: #555; line-height: 1.7; margin-bottom: 1rem; font-size: 1.05rem; text-align: left; 161 } 162 163 .project-tech { margin-bottom: 1.1rem; } 164 .tech-label { 165 font-weight: 700; color: #333; margin-bottom: .5rem; 166 display: block; font-size: .95rem; 167 } 168 .tech-stack { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; } 169 .tech-tag { 170 background: #f1f4f8; color: #495057; padding: .25rem .6rem; 171 border-radius: 20px; font-size: .85rem; border: 1px solid #e3e8ef; 172 } 173 174 .project-highlights { margin-bottom: 1.1rem; } 175 .project-highlights ul { margin: .35rem 0 0 0; padding-left: 1.2rem; } 176 .project-highlights li { color: #555; line-height: 1.65; margin-bottom: .4rem; font-size: 1.02rem; } 177 178 .project-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0; } 179 .project-link { 180 display: inline-flex; align-items: center; gap: .4rem; 181 padding: .45rem .85rem; border-radius: 6px; 182 background: #f8f9fa; border: 1px solid #e3e8ef; 183 color: #007bff; text-decoration: none; font-size: .95rem; 184 transition: background .2s ease, color .2s ease; 185 } 186 .project-link:hover { background: #eef5ff; color: #0056b3; } 187 .project-link.publication { 188 display: inline; padding: 0; background: none; border: 0; font-size: inherit; 189 } 190 .project-link.publication:hover { text-decoration: underline; background: none; } 191 .project-link.youtube { color: #c4302b; } 192 193 a { color: #007bff; } 194 a:hover { color: #0056b3; } 195 196 .rp-nav-short { display: none; } 197 198 /* ========================================================= 199 RESPONSIVE 200 ========================================================= */ 201 202 /* Tablet / small laptop: single column, sidebar becomes a rail */ 203 @media (max-width: 950px) { 204 main { padding: 1rem 0.85rem; } 205 .rp-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; } 206 207 .rp-sidebar { 208 position: sticky; 209 top: 56px; /* clears the 56px sticky navbar on mobile */ 210 z-index: 900; /* below navbar (1000), above page content */ 211 max-height: none; 212 overflow: visible; 213 padding: .5rem .35rem; 214 border-radius: 10px; 215 background: rgba(255,255,255,.97); 216 backdrop-filter: saturate(180%) blur(6px); 217 border: 1px solid #e9ecef; 218 box-shadow: 0 2px 6px rgba(0,0,0,.06); 219 } 220 .rp-sidebar h2 { display: none; } 221 222 /* Horizontal scrolling chip rail */ 223 .rp-nav { 224 display: flex; 225 gap: .45rem; 226 width: 100%; 227 max-width: 100%; 228 min-width: 0; 229 overflow-x: auto; 230 overflow-y: hidden; 231 overscroll-behavior-x: contain; 232 padding: .15rem .1rem .35rem .1rem; 233 margin: 0; 234 -webkit-overflow-scrolling: touch; 235 scroll-snap-type: x proximity; 236 scrollbar-width: thin; 237 } 238 .rp-nav::-webkit-scrollbar { height: 4px; } 239 .rp-nav::-webkit-scrollbar-thumb { background: #d3d9e0; border-radius: 4px; } 240 .rp-nav li { margin: 0; flex: 0 0 auto; scroll-snap-align: start; } 241 242 .rp-nav button { 243 border-left: 0; 244 border: 1px solid #e3e8ef; 245 border-radius: 999px; 246 background: #f8f9fb; 247 white-space: nowrap; 248 padding: .6rem .9rem; /* >=44px touch target */ 249 min-height: 44px; 250 font-size: .95rem; 251 font-weight: 600; 252 } 253 .rp-nav button.active { 254 background: #007bff; 255 border-color: #007bff; 256 color: #fff; 257 } 258 .rp-nav button .rp-nav-title, 259 .rp-nav button .rp-nav-tag { display: none; } 260 .rp-nav button .rp-nav-short { display: block; font-weight: 600; } 261 262 /* Card + typography */ 263 .project-item { padding: 1.15rem; border-radius: 10px; } 264 .project-title { 265 font-size: 1.15rem; 266 line-height: 1.3; 267 text-align: left; 268 margin-bottom: .75rem; 269 hyphens: auto; 270 -webkit-hyphens: auto; 271 } 272 .project-subtitle { font-size: .92rem; display: block; margin-top: .2rem; font-weight: 500; } 273 .project-description { font-size: 1rem; line-height: 1.65; } 274 .project-highlights li { font-size: .98rem; } 275 .rp-header { margin-bottom: .9rem; } 276 .rp-header h1 { font-size: 1.5rem; } 277 .rp-header p { font-size: .98rem; } 278 279 /* Override hard-coded inline widths (60%/50%) so images fill the card */ 280 .project-image, 281 .project-item img, 282 .project-item video { 283 width: 100% !important; 284 max-width: 100% !important; 285 height: auto !important; 286 } 287 .project-image-container { 288 display: block !important; 289 gap: 1rem !important; 290 margin-bottom: 1rem; 291 } 292 .project-image-container > div { 293 max-width: 100% !important; 294 width: 100% !important; 295 margin-top: 1rem; 296 } 297 } 298 299 /* Phones */ 300 @media (max-width: 600px) { 301 main { padding: .75rem .6rem; } 302 .rp-sidebar { padding: .45rem .3rem; } 303 .rp-nav button { font-size: .9rem; padding: .55rem .8rem; } 304 .project-item { padding: .95rem; } 305 .project-title { font-size: 1.02rem; line-height: 1.32; margin-bottom: .65rem; } 306 .project-subtitle { font-size: .88rem; } 307 .project-description { font-size: .97rem; } 308 .project-highlights ul { padding-left: 1.05rem; } 309 .project-highlights li { font-size: .95rem; line-height: 1.6; } 310 .rp-header h1 { font-size: 1.35rem; } 311 312 /* Links become full-width tappable rows */ 313 .project-links { flex-direction: column; align-items: stretch; gap: .5rem; } 314 .project-links .project-link { 315 justify-content: center; 316 min-height: 44px; 317 font-size: .95rem; 318 } 319 .project-link.publication { 320 display: inline; min-height: 0; justify-content: flex-start; 321 } 322 .tech-tag { font-size: .8rem; padding: .22rem .55rem; } 323 } 324 325 /* Small phones (iPhone SE / mini): tighten titles further */ 326 @media (max-width: 400px) { 327 .project-title { font-size: .95rem; line-height: 1.3; } 328 .project-subtitle { font-size: .84rem; } 329 .project-item { padding: .8rem; } 330 .rp-header h1 { font-size: 1.22rem; } 331 .rp-header p { font-size: .92rem; } 332 .rp-nav button { font-size: .85rem; padding: .5rem .7rem; } 333 } 334 335 /* Prevent long URLs / model names from overflowing on any screen */ 336 .project-description, 337 .project-highlights li, 338 .project-title, 339 .rp-header p,
340 .project-link { overflow-wrap: anywhere; word-break: break-word; } 341 342 /* Respect reduced-motion preferences */ 343 @media (prefers-reduced-motion: reduce) { 344 .rp-panel.active { animation: none; } 345 * { scroll-behavior: auto !important; } 346 } 347 348 349 /* ========================================================= 350 OVERRIDE global style.css heading rules. 351 style.css sets: h3 { padding:30px 40px; margin-bottom:60px; 352 text-transform:uppercase; font-weight:200 } 353 and, inside its mobile blocks: 354 .section h2, .section h3 { font-size:1.2rem !important; 355 position:relative !important; z-index:100 !important } 356 Those !important declarations beat normal rules, so the project titles 357 kept their old size and picked up stray padding. Reset them explicitly. 358 ========================================================= */ 359 main section .rp-panel .project-item h3.project-title, 360 main section .rp-panel .project-item h4.project-title { 361 font-size: 1.6rem !important; 362 font-weight: 700 !important; 363 line-height: 1.3 !important; 364 color: #222 !important; 365 margin: 0 0 1.4rem 0 !important; 366 padding: 0 0 .8rem 0 !important; 367 border-bottom: 1px solid #eef1f5 !important; 368 text-transform: none !important; 369 letter-spacing: normal !important; 370 position: static !important; 371 z-index: auto !important; 372 text-align: left !important; 373 width: auto !important; 374 max-width: 100% !important; 375 overflow-wrap: anywhere; 376 word-break: break-word; 377 hyphens: auto; 378 -webkit-hyphens: auto; 379 } 380 381 main section .rp-panel .project-item .project-subtitle { 382 font-size: 1.05rem !important; 383 font-weight: 500 !important; 384 color: #667 !important; 385 text-transform: none !important; 386 } 387 388 @media (max-width: 950px) { 389 main section .rp-panel .project-item h3.project-title, 390 main section .rp-panel .project-item h4.project-title { 391 font-size: 1.1rem !important; 392 line-height: 1.4 !important; 393 margin: 0 0 1.35rem 0 !important; /* space between title and content */ 394 padding-bottom: .7rem !important; 395 border-bottom: 1px solid #eef1f5 !important; 396 } 397 main section .rp-panel .project-item .project-subtitle { 398 font-size: .9rem !important; 399 display: block !important; 400 margin-top: .3rem !important; 401 } 402 /* Normalise spacing of whatever follows the title */ 403 main section .rp-panel .project-item p, 404 main section .rp-panel .project-item ul { 405 margin-top: .6rem !important; 406 } 407 main section .rp-panel .project-item .project-title + * { 408 margin-top: 0 !important; 409 } 410 main section .rp-panel .project-item .project-image-container { margin-top: 0 !important; } 411 main section .rp-panel .project-item .project-content { padding-top: .1rem; } 412 main section .rp-panel .project-item .project-description { margin-bottom: 1.1rem !important; } 413 main section .rp-panel .project-item .project-highlights, 414 main section .rp-panel .project-item .project-tech { margin-top: 1.15rem !important; } 415 } 416 417 @media (max-width: 600px) { 418 main section .rp-panel .project-item h3.project-title, 419 main section .rp-panel .project-item h4.project-title { 420 font-size: .98rem !important; 421 line-height: 1.4 !important; 422 margin: 0 0 1.25rem 0 !important; 423 padding-bottom: .65rem !important; 424 } 425 main section .rp-panel .project-item .project-subtitle { font-size: .85rem !important; } 426 } 427 428 @media (max-width: 400px) { 429 main section .rp-panel .project-item h3.project-title, 430 main section .rp-panel .project-item h4.project-title { 431 font-size: .92rem !important; 432 line-height: 1.4 !important; 433 margin: 0 0 1.15rem 0 !important; 434 padding-bottom: .6rem !important; 435 } 436 main section .rp-panel .project-item .project-subtitle { font-size: .82rem !important; } 437 } 438 439 </style> 440</head> 441 442<body> 443 <nav class="navbar-custom"> 444 <div class="navbar-container"> 445 <div class="navbar-left"> 446 <a href="/index.html" class="navbar-logo" style="display: flex; align-items: center; text-decoration: none;"> 447 <!-- profile image intentionally removed from navbar -->
448 <span class="navbar-title" style="margin-left:8px; color:#111; font-weight:600;">Raihan Mia</span> 449 </a> 450 </div> 451 <button class="navbar-toggle" aria-label="Toggle navigation"> 452 <span></span><span></span><span></span> 453 </button> 454 <ul class="navbar-menu"> 455 <li><a href="/index.html">About</a></li> 456 <li><a href="/pages/experiences.html">Experiences</a></li> 457 <li><a href="/pages/research-projects.html">Research & Projects</a></li> 458 <li><a href="/pages/publications.html">Publications</a></li> 459 <li><a href="/pages/tools-dataset.html">Tools & Dataset</a></li> 460 <li><a href="/pages/contact.html">Contact</a></li> 461 </ul> 462 </div> 463 </nav> 464 <main> 465 <section> 466 <div class="rp-header"> 467 <h1>Research & Projects</h1> 468 <p> 469 Foundation models and agentic AI for biomedical systems, real-time multimodal sensing and 470 edge inference, and large-scale healthcare data curation — built end to end and evaluated 471 for deployment. Select a project to view details. 472 </p> 473 </div> 474 475 <div class="rp-layout"> 476 <!-- Sidebar project list --> 477 <aside class="rp-sidebar"> 478 <h2>Projects</h2> 479 <ul class="rp-nav" role="tablist"> 480 <li> 481 <button type="button" data-target="rp-agentic" role="tab" class="active" aria-selected="true" aria-controls="rp-agentic"> 482 <span class="rp-nav-title">Agentic AI & LLM Systems</span> 483 <span class="rp-nav-short">Agentic AI & LLMs</span> 484 <span class="rp-nav-tag">Ubicomply.ai · Production</span> 485 </button> 486 </li> 487 <li> 488 <button type="button" data-target="rp-mbci" role="tab" aria-selected="false" aria-controls="rp-mbci"> 489 <span class="rp-nav-title">Mobile BCI for Motor Training</span> 490 <span class="rp-nav-short">Mobile BCI</span> 491 <span class="rp-nav-tag">Dissertation · NMDSI Award</span> 492 </button> 493 </li> 494 <li> 495 <button type="button" data-target="rp-smt" role="tab" aria-selected="false" aria-controls="rp-smt"> 496 <span class="rp-nav-title">SMT-Learner: Foundation Model</span> 497 <span class="rp-nav-short">SMT-Learner</span> 498 <span class="rp-nav-tag">Dissertation · IEEE TNSRE</span> 499 </button> 500 </li> 501 <li> 502 <button type="button" data-target="rp-mlg" role="tab" aria-selected="false" aria-controls="rp-mlg"> 503 <span class="rp-nav-title">motorlearning.games mHealth Platform</span> 504 <span class="rp-nav-short">motorlearning.games</span> 505 <span class="rp-nav-tag">NIH R03 · R21 · C-STAR</span> 506 </button> 507 </li> 508 <li> 509 <button type="button" data-target="rp-hipaa" role="tab" aria-selected="false" aria-controls="rp-hipaa"> 510 <span class="rp-nav-title">HIPAAChecker.health</span> 511 <span class="rp-nav-short">HIPAAChecker</span> 512 <span class="rp-nav-tag">NIH STTR Phase I+II</span> 513 </button> 514 </li> 515 <li> 516 <button type="button" data-target="rp-ncdw" role="tab" aria-selected="false" aria-controls="rp-ncdw"> 517 <span class="rp-nav-title">National Clinical Data Warehouse</span> 518 <span class="rp-nav-short">Data Warehouse</span> 519 <span class="rp-nav-tag">Elsevier Best Paper 2022</span> 520 </button> 521 </li> 522 <li> 523 <button type="button" data-target="rp-nba" role="tab" aria-selected="false" aria-controls="rp-nba"> 524 <span class="rp-nav-title">NBA-Search Analytics</span> 525 <span class="rp-nav-short">NBA-Search</span> 526 <span class="rp-nav-tag">Open source</span> 527 </button> 528 </li> 529 <li> 530 <button type="button" data-target="rp-vint" role="tab" aria-selected="false" aria-controls="rp-vint">
531 <span class="rp-nav-title">vInternship.org</span> 532 <span class="rp-nav-short">vInternship</span> 533 <span class="rp-nav-tag">Education platform</span> 534 </button> 535 </li> 536 <li> 537 <button type="button" data-target="rp-rpa" role="tab" aria-selected="false" aria-controls="rp-rpa"> 538 <span class="rp-nav-title">Robotic Process Automation (Banking)</span> 539 <span class="rp-nav-short">RPA (Banking)</span> 540 <span class="rp-nav-tag">Era Infotech</span> 541 </button> 542 </li> 543 <li> 544 <button type="button" data-target="rp-archive" role="tab" aria-selected="false" aria-controls="rp-archive"> 545 <span class="rp-nav-title">Digital Document Archive System</span> 546 <span class="rp-nav-short">Doc Archive</span> 547 <span class="rp-nav-tag">Govt. of Bangladesh</span> 548 </button> 549 </li> 550 </ul> 551 </aside> 552 553 <!-- Project detail panels --> 554 <div class="rp-panels"> 555 <div class="rp-panel active" id="rp-agentic" role="tabpanel"> 556 <div class="project-item"> 557 <h3 class="project-title">Agentic AI & LLM Systems for Regulated Domains — <a href="https://ubicomply.ai/" target="_blank">Ubicomply.ai</a></h3> 558 <div class="project-image-container"> 559 <img src="/assets/img/myimg/ubicomply_arcitecture.png" 560 alt="Ubicomply.ai LLM and agentic-AI infrastructure architecture: SAST, DAST and policy-analysis pipelines served on AWS g4dn GPU instances" 561 class="project-image" loading="lazy"> 562 <p class="project-description" style="text-align:center; margin-top:.5rem; font-size:.95rem; color:#777;"> 563 Ubicomply.ai LLM and agentic-AI infrastructure — SAST, DAST, and policy-analysis 564 pipelines served on AWS <code>g4dn</code> GPU instances. 565 </p> 566 </div> 567 <div class="project-content"> 568 <p class="project-description"> 569 As <b>Founding Research Director</b>, I lead HPC infrastructure and agentic-AI engineering teams 570 (~10 engineers and developers) building production systems that reason over clinical and 571 regulatory corpora, with the evaluation and governance layer required to deploy them responsibly. 572 </p> 573 <div class="project-highlights"> 574 <span class="tech-label">Key contributions</span> 575 <ul> 576 <li><b>Shipped the Ubicomply.ai LLM and agentic-AI infrastructure</b>, deployed on <b>AWS <code>g4dn</code></b> GPU instances — powering <b>SAST</b> (static application security testing), <b>DAST</b> (dynamic application security testing), and <b>policy analysis</b> across a <b>multi-regulatory framework</b>, mapping findings to HIPAA, the NIST AI Risk Management Framework, and related controls in a single assessment pipeline.</li> 577 <li>Fine-tuned open-weight LLMs (Llama, Gemma, GPT-OSS) with LoRA/QLoRA/PEFT; engineered RAG pipelines and multi-agent orchestration for tool-augmented reasoning.</li> 578 <li>Shipped <a href="https://app.ubicomply.ai/" target="_blank">malURLBox</a>, an LLM-assisted dynamic-sandbox analyzer at <b>97.3% accuracy</b>, now distributed as a <a href="https://marketplace.microsoft.com/en-us/product/WA200011136?tab=Overview" target="_blank">Microsoft Outlook Extension</a>.</li> 579 </ul> 580 </div> 581 <div class="project-tech"> 582 <span class="tech-label">Technologies</span> 583 <div class="tech-stack"> 584 <span class="tech-tag">LangGraph</span> 585 <span class="tech-tag">LangChain</span> 586 <span class="tech-tag">MCP</span> 587 <span class="tech-tag">vLLM / TGI</span> 588 <span class="tech-tag">
588LoRA / QLoRA / PEFT</span> 589 <span class="tech-tag">AWS g4dn</span> 590 <span class="tech-tag">SAST / DAST</span> 591 <span class="tech-tag">Docker</span> 592 <span class="tech-tag">CI/CD</span> 593 </div> 594 </div> 595 <div class="project-links"> 596 <a href="https://ubicomply.ai/" target="_blank" class="project-link"><i class="fas fa-external-link-alt"></i> Ubicomply.ai</a> 597 <a href="https://app.ubicomply.ai/" target="_blank" class="project-link"><i class="fas fa-flask"></i> malURLBox</a> 598 </div> 599 <div class="project-highlights"> 600 <span class="tech-label">Related publications</span> 601 <ul> 602 <li><a class="project-link publication" href="/pages/publications.html">malURLBox: LLM-assisted malicious URL analysis for healthcare in a sandbox environment. <i>IEEE/ACM CHASE</i> 2026.</a></li> 603 <li><a class="project-link publication" href="/pages/publications.html">HIPAA Regulatory Assessment and Scoring System for Healthcare Applications. <i>ACM TOPS</i> (under review).</a></li> 604 </ul> 605 </div> 606 </div> 607 </div> 608 </div> 609 610 <div class="rp-panel" id="rp-mbci" role="tabpanel"> 611 <div class="project-item"> 612 <h3 class="project-title">Mobile BCI for Game-based Motor Training and Neurorehabilitation</h3> 613 <div class="project-image-container" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;"> 614 <!-- <img src="/assets/img/myimg/Brain-Mobile-Interface-Loop-Updated.png" alt="Brain-Mobile Interface Loop" class="project-image" style="max-width: 440px;"> --> 615 <img src="/assets/img/myimg/mBCI-Closed-Loop.png" alt="mBCI Closed Loop" class="project-image" style="max-width: 450px;"> 616 <div style="max-width: 440px; width: 100%; text-align: center;"> 617 <video class="project-image" autoplay muted loop playsinline preload="metadata" aria-label="EEG-controlled maze game demo"> 618 <source src="/assets/video/mBCI-Experiment.mp4" type="video/mp4"> 619 Your browser does not support the video tag. 620 </video> 621 <p class="project-description" style="text-align: center; margin-top: 0.5rem;"> 622 A volunteer wearing EMOTIV Flex 2 EEG headset controlling our mBCI maze game in iPad in real-time. 623 </p> 624 </div> 625 </div> 626 <div class="project-content"> 627 <p class="project-description"> 628 Mobile BCI with a low-latency closed loop between wearable EEG and a game engine. Built on AsyncDCNN, a coherence-based neuromorphic model with cross-session and cross-subject transfer for robust decoding of motor intent. 629 AsyncDCNN introduces a coherence-based perceptron that models stable synaptic states with graded updates from pre- and post-synaptic activity. This supports asynchronous, parallel learning across forward, backward, and lateral pathways for reliable real-time decoding under non-stationary EEG. 630 </p> 631 </div> 632 </div> 633 </div> 634 635 <div class="rp-panel" id="rp-smt" role="tabpanel"> 636 <div class="project-item"> 637 <h3 class="project-title">SMT-Learner — Self-Supervised Foundation Model for Physiological Time-Series</h3> 638 <div class="project-content"> 639 <p class="project-description"> 640 A transformer auto-encoder trained with masked reconstruction on <b>~16,320 human</b> and 641 <b>~23,639 non-human-primate</b> movement trajectories, learning transferable representations of 642 motor behavior under sparse supervision. From these representations I derive a novel 643 <b>Exploration–Exploitation biomarker</b> that separates early- from late-phase motor skill 644 learning — a construct long theorized in motor neuroscience but difficult to measure outside 645 a laboratory. 646 </p> 647 <div class="project-highlights">
648 <span class="tech-label">Key contributions</span> 649 <ul> 650 <li>Masked-reconstruction pretraining over spatiotemporal movement trajectories.</li> 651 <li>Evaluation via frozen-encoder linear probing, <b>cross-cohort and cross-species transfer</b>, and systematic ablations on masking ratio and cohort size.</li> 652 <li>Cross-species transfer as evidence that representations capture motor-control structure rather than cohort-specific artifacts.</li> 653 </ul> 654 </div> 655 <div class="project-tech"> 656 <span class="tech-label">Technologies</span> 657 <div class="tech-stack"> 658 <span class="tech-tag">PyTorch</span> 659 <span class="tech-tag">Transformers</span> 660 <span class="tech-tag">Self-Supervised Learning</span> 661 <span class="tech-tag">Python</span> 662 <span class="tech-tag">HPC / GPU</span> 663 </div> 664 </div> 665 <div class="project-links"> 666 <a href="https://github.com/RaihanSabique/SMT-Learner" target="_blank" class="project-link github"> 667 <i class="fab fa-github"></i> GitHub Repository 668 </a> 669 <a href="https://huggingface.co/raihan116/SMT-Learner" target="_blank" class="project-link"> 670 <i class="fas fa-cube"></i> Hugging Face Model 671 </a> 672 </div> 673 <div class="project-highlights"> 674 <span class="tech-label">Related publications</span> 675 <ul> 676 <li><a class="project-link publication" href="/pages/publications.html">A Deep Learning Framework for Assessing Pediatric Upper-limb Motor Control and Gamified Mobile Rehabilitation. <i>IEEE TNSRE</i>, 2026 (in revision).</a></li> 677 <li><a class="project-link publication" href="https://www.asnr.com/files/Past%20Meeting%20Programs/ASNR2025_Program.pdf" target="_blank">Self-Supervised Learning to Quantify Motor Control Strategies from Spatiotemporal Movement Trajectories in Young Children. <i>ASNR</i> 2025.</a></li> 678 </ul> 679 </div> 680 </div> 681 </div> 682 </div> 683 684 <div class="rp-panel" id="rp-mlg" role="tabpanel"> 685 <div class="project-item"> 686 <h3 class="project-title">mHealth ecosystem (<a href="https://www.motorlearning.games/" target="_blank">motorlearning.games</a>) for pediatric motor assessment and learning analytics</h3> 687 <div class="project-image-container"> 688 <img src="/assets/img/myimg/experimental_protocol.png" alt="Motor Skills Learning App" class="project-image"> 689 </div> 690 <div class="project-content"> 691 <p class="project-description"> 692 iPad-based neuromotor assessment for upper-limb performance in children. Integrates games, EEG, and IMU sensors to quantify spatiotemporal movement trajectories and learning dynamics. 693 </p> 694 <div class="project-links"> 695 <a href="https://www.otpedsneurolab.com/research-1" target="_blank" class="project-link"> 696 <i class="fas fa-external-link-alt"></i> View Project 697 </a> 698 </div> 699 <div class="funding-section"> 700 <div class="highlight-title">Fundings:</div> 701 <div class="funding-list"> 702 <div class="funding-item"> 703 <a href="https://reporter.nih.gov/project-details/10821482" >NIH R03: Motor Skill Learning in Young Children Born Preterm</a> 704 </div> 705 <div class="funding-item"> 706 <a href="https://reporter.nih.gov/project-details/11158930" >NIH R21: Game-based Mobile-Health Quantification of Upper-Limb Motor Performance in Children with Hemiparetic Cerebral Palsy</a> 707 </div> 708 </div> 709 </div> 710 711 <!-- <div class="project-tech"> 712 <span class="tech-label">Technologies:</span> 713 <div class="tech-stack">
714 <span class="tech-tag">iOS</span> 715 <span class="tech-tag">Python</span> 716 <span class="tech-tag">Django</span> 717 <span class="tech-tag">MATLAB</span> 718 <span class="tech-tag">EEGLab</span> 719 <span class="tech-tag">OpenSim</span> 720 <span class="tech-tag">AWS</span> 721 </div> 722 </div> --> 723 <div class="project-highlights"> 724 <div class="highlight-title">Key Achievements:</div> 725 <ul class="highlight-list"> 726 <li>Developed gamified mHealth tests for upper-limb assessment</li> 727 <li>Integrated VICON, EEG, and IMU sensors for multimodal motor analytics</li> 728 <li>Built AWS-based data storage and analysis pipeline</li> 729 </ul> 730 </div> 731 </div> 732 <div class="project-highlights"> 733 <div class="highlight-title">Related Publications:</div> 734 <ul class="highlight-list"> 735 <li><a class="project-link publication" href="https://marq-my.sharepoint.com/:b:/g/personal/mdraihan_mia_marquette_edu/IQA92s-njti2RprKkhREhRiQAX0DmnaWnLpcw__QRPl6sPo?e=qcIKSH" target="_blank">A Deep Learning Framework for Assessing Pediatric Upper-limb Motor Control and Gamified Mobile Rehabilitation. IEEE Transactions on Neural Systems and Rehabilitation Engineering (Under Review).</a></li> 736 <li><a class="project-link publication" href="https://doi.org/10.2196/57802" target="_blank">Gamified mHealth System for Evaluating Upper Limb Motor Performance in Children: JMIR Serious Games, 2025.</a></li> 737 <li><a class="project-link publication" href="/pages/publications.html">See all publications →</a></li> 738 </ul> 739 </div> 740 </div> 741 </div> 742 743 <div class="rp-panel" id="rp-hipaa" role="tabpanel"> 744 <div class="project-item"> 745 <h3 class="project-title"><a href="https://www.hipaachecker.health" target="_blank">HIPAAChecker.health</a> - <span class="project-subtitle">Healthcare Security and Privacy Assessment</span></h3> 746 <div class="project-image-container"> 747 <img src="/assets/img/myimg/hipaachecker-dashboard.png" alt="HIPAAChecker.health" class="project-image" style="width: 60%; height: auto;"> 748 </div> 749 <div class="project-content"> 750 <p class="project-description"> 751 Security and privacy assessment platform for mHealth apps using static + dynamic analysis and HIPAA-aligned risk scoring. 752 </p> 753 <div class="project-tech"> 754 <span class="tech-label">Technologies:</span> 755 <div class="tech-stack"> 756 <span class="tech-tag">Python</span> 757 <span class="tech-tag">Security Analysis</span> 758 <span class="tech-tag">Static Analysis</span> 759 <span class="tech-tag">Dynamic Analysis</span> 760 <span class="tech-tag">HIPAA Compliance</span> 761 </div> 762 </div> 763 <div class="project-highlights"> 764 <div class="highlight-title">Key contributions</div> 765 <ul class="highlight-list"> 766 <li>HIPAA threat model with <b>272 security patterns</b>; validated on an annotated dataset of 78 healthcare apps with expert review</li> 767 <li>HIPAAScoring risk model integrating <b>CVSS v4.0</b> and <b>NIST SP 800-66r2</b></li> 768 <li>Static/dynamic analysis pipelines and HIPAA LLM API infrastructure deployed on AWS</li> 769 </ul> 770 </div> 771 <div class="project-links"> 772 <a href="https://hipaachecker.health/" target="_blank" class="project-link"> 773 <i class="fas fa-external-link-alt"></i> Visit Platform 774 </a> 775 <a href="https://reporter.nih.gov/project-details/10918331" target="_blank" class="project-link"> 776 <i class="fas fa-university"></i> NIH STTR Grant 777 </a> 778 </div> 779 <div class="project-highlights"> 780 <div class="highlight-title">Related Publications:</div> 781 <ul class="highlight-list"> 782 <li><a class="project-link publication" href="/pages/publications.html" target="_blank">HIPAAScoring: Vulnerability Scoring Model for HIPAA Security and Privacy Assessment. ACM Transactions on Privacy and Security (Under Review).</a></li> 783 <li><a class="project-link publication" href="https://doi.org/10.1109/COMPSAC61105.2024.00390" target="_blank">Enhancing HIPAA Compliance in AI-driven mHealth Devices Security and Privacy. IEEE COMPSAC 2024.</a></li> 784 <li><a class="project-link publication" href="/pages/publications.html">See all publications →</a></li> 785 </ul> 786 </div> 787 </div> 788 </div> 789 </div> 790 791 <div class="rp-panel" id="rp-ncdw" role="tabpanel"> 792 <div class="project-item"> 793 <h3 class="project-title">National Clinical Data Warehouse (NCDW) Bangladesh</h3> 794 <div class="project-image-container"> 795 <img src="/assets/img/myimg/ncdw.jpg" alt="NCDW Bangladesh" class="project-image" style="width: 60%; height: auto;"> 796 </div> 797 <div class="project-content"> 798 <p class="project-description"> 799 Privacy-preserving national clinical data warehouse integrating de-identified records from <b>220 healthcare systems</b> — ETL, harmonization to OMOP CDM/FHIR/LOINC/SNOMED CT, and ML for vocabulary standardization. 800 </p> 801 <div class="project-tech">
802 <span class="tech-label">Technologies:</span> 803 <div class="tech-stack"> 804 <span class="tech-tag">Python</span> 805 <span class="tech-tag">Flask</span> 806 <span class="tech-tag">Hadoop</span> 807 <span class="tech-tag">Superset</span> 808 <span class="tech-tag">Angular</span> 809 <span class="tech-tag">PostgreSQL</span> 810 </div> 811 </div> 812 <div class="project-highlights"> 813 <div class="highlight-title">Key Features:</div> 814 <ul class="highlight-list"> 815 <li>Wrapper API-based data integration system</li> 816 <li>ETL pipeline and Central Data Repository</li> 817 <li>Data marts and OLAP Engine implementation</li> 818 </ul> 819 </div> 820 <div class="project-links"> 821 <a href="http://103.94.135.217:4444/home" target="_blank" class="project-link"> 822 <i class="fas fa-external-link-alt"></i> Live Demo 823 </a> 824 <a href="https://github.com/eSRD-Lab" target="_blank" class="project-link github"> 825 <i class="fab fa-github"></i> GitHub 826 </a> 827 <a href="https://www.sciencedirect.com/science/article/pii/S2352648321000544" target="_blank" class="project-link publication"> 828 <i class="ai ai-elsevier"></i> Publication 829 </a> 830 </div> 831 <div class="project-highlights"> 832 <div class="highlight-title">Related Publications:</div> 833 <ul class="highlight-list"> 834 <li><a class="project-link publication" href="https://doi.org/10.1016/j.smhl.2021.100238" target="_blank">A privacy-preserving national clinical data warehouse: Architecture and analysis. Smart Health 2022.</a></li> 835 <li><a class="project-link publication" href="https://doi.org/10.1109/COMPSAC61105.2024.00121" target="_blank">BlockPRLS: Blockchain-Based Patient Record Linkage System for Big Data Analytics. IEEE COMPSAC 2024.</a></li> 836 </ul> 837 </div> 838 </div> 839 </div> 840 </div> 841 842 <div class="rp-panel" id="rp-nba" role="tabpanel"> 843 <div class="project-item"> 844 <h3 class="project-title">NBA-Search Analytics</h3> 845 <div class="project-image-container"> 846 <img src="/assets/img/myimg/NBA-Search.png" alt="NBA-Search" class="project-image" style="width: 50%; height: auto;"> 847 </div> 848 <div class="project-content"> 849 <p class="project-description"> 850 Open-source NBA analytics platform. I contributed clustering and ML methods for player performance and team analytics. 851 </p> 852 <div class="project-tech"> 853 <span class="tech-label">Technologies:</span> 854 <div class="tech-stack"> 855 <span class="tech-tag">Python</span> 856 <span class="tech-tag">Flask</span> 857 <span class="tech-tag">K-Means</span> 858 <span class="tech-tag">KNN</span> 859 <span class="tech-tag">Data Analytics</span> 860 <span class="tech-tag">Machine Learning</span> 861 </div> 862 </div> 863 <div class="project-highlights"> 864 <div class="highlight-title">My Contributions:</div> 865 <ul class="highlight-list"> 866 <li>Implemented clustering algorithms (KNN, K-Means)</li> 867 <li>Developed player similarity analysis features</li> 868 <li>Created advanced statistical comparison tools</li> 869 </ul> 870 </div> 871 <div class="project-links"> 872 <a href="https://github.com/skekre98/NBA-Search" target="_blank" class="project-link github"> 873 <i class="fab fa-github"></i> GitHub Repository 874 </a> 875 </div> 876 </div> 877 </div> 878 </div> 879 880 <div class="rp-panel" id="rp-vint" role="tabpanel"> 881 <div class="project-item"> 882 <h3 class="project-title"> <a href="https://vinternship.org" target="_blank">
882vInternship.org</a> - Supporting Blended Learning Environment 883Connecting Interns, Universities and Industries</h3> 884 <div class="project-image-container"> 885 <img src="/assets/img/myimg/vis-dashboard.png" alt="vInternship.org" class="project-image" style="width: 50%; height: auto;"> 886 </div> 887 <div class="project-content"> 888 <p class="project-description"> 889 Virtual internship platform connecting universities, industry, and students — structured remote projects with benchmarked team performance. 890 </p> 891 <div class="project-tech"> 892 <span class="tech-label">Technologies:</span> 893 <div class="tech-stack"> 894 <span class="tech-tag">Python</span> 895 <span class="tech-tag">Django</span> 896 <span class="tech-tag">Angular</span> 897 <span class="tech-tag">MongoDB</span> 898 <span class="tech-tag">REST API</span> 899 </div> 900 </div> 901 <div class="project-highlights"> 902 <div class="highlight-title">Leadership & Development:</div> 903 <ul class="highlight-list"> 904 <li>Designed platform architecture and virtual internship protocols</li> 905 <li>Led and mentored a team of five developers</li> 906 <li>Conducted comprehensive research and optimization studies</li> 907 </ul> 908 </div> 909 <div class="project-links"> 910 <a href="https://www.vinternship.org/" target="_blank" class="project-link"> 911 <i class="fas fa-external-link-alt"></i> Visit Platform 912 </a> 913 <a href="https://github.com/eSRD-Lab" target="_blank" class="project-link github"> 914 <i class="fab fa-github"></i> GitHub 915 </a> 916 <a href="https://ieeexplore.ieee.org/abstract/document/9392670" target="_blank" class="project-link publication"> 917 <i class="ai ai-ieee"></i> IEEE Publication 918 </a> 919 </div> 920 <div class="project-highlights"> 921 <div class="highlight-title">Related Publications:</div> 922 <ul class="highlight-list"> 923 <li><a class="project-link publication" href="https://doi.org/10.1109/ICCIT51783.2020.9392670" target="_blank">A Conceptual Design of Virtual Internship System to Benchmark Software Development Skills in a Blended Learning Environment. ICCIT 2020.</a></li> 924 </ul> 925 </div> 926 </div> 927 </div> 928 </div> 929 930 <div class="rp-panel" id="rp-rpa" role="tabpanel"> 931 <div class="project-item"> 932 <h3 class="project-title">Robotic Process Automation (RPA) to Automate Banking Operations</h3> 933 <div class="project-image-container"> 934 <img src="/assets/img/myimg/RPA-BankAsia.png" alt="RPA System" class="project-image" style="width: 50%; height: auto;"> 935 </div> 936 <div class="project-content"> 937 <p class="project-description"> 938 Robotic Process Automation for <a href="https://www.bankasia-bd.com/" target="_blank">Bank Asia Ltd</a> — automates repetitive core-banking workflows to cut manual error and processing time. 939 </p> 940 <div class="project-tech"> 941 <span class="tech-label">Technologies:</span> 942 <div class="tech-stack"> 943 <span class="tech-tag">Python</span> 944 <span class="tech-tag">JavaScript</span> 945 <span class="tech-tag">Process Automation</span> 946 <span class="tech-tag">Banking Systems</span> 947 <span class="tech-tag">Agile Scrum</span> 948 </div> 949 </div> 950 <div class="project-highlights"> 951 <div class="highlight-title">Project Achievements:</div> 952 <ul class="highlight-list"> 953 <li>Designed automation system for Bank Asia Ltd operations</li> 954 <li>Implemented client requirements using Agile Scrum methodology</li> 955 <li>Developed clean, robust, and reusable automation modules</li> 956 </ul> 957 </div> 958 <div class="project-links"> 959 <a href="https://www.tbsnews.net/companies/bank-asia-introduces-robotic-process-automation-solutions-108277" target="_blank" class="project-link"> 960 <i class="fas fa-newspaper"></i> News Article 961 </a> 962 <a href="https://www.youtube.com/watch?v=iB5cRbWEhGM" target="_blank" class="project-link youtube"> 963 <i class="fab fa-youtube"></i> Demo Video 964 </a> 965 </div> 966 </div> 967 </div> 968 </div> 969 970 <div class="rp-panel" id="rp-archive" role="tabpanel"> 971 <div class="project-item"> 972 <h3 class="project-title">Digital Document Archive System for Planning Commission of Bangladesh Government</h3> 973 <div class="project-image-container"> 974 <img src="/assets/img/myimg/DDAS.png" alt="Digital Archive" class="project-image" style="width: 50%; height: auto;"> 975 </div> 976 <div class="project-content"> 977 <p class="project-description"> 978 Digital archival system for the <a href="https://plancomm.gov.bd/" target="_blank">Planning Commission of Bangladesh</a> — digitizes and manages historical documents with Bengali OCR. 979 </p> 980 <div class="project-tech">
981 <span class="tech-label">Technologies:</span> 982 <div class="tech-stack"> 983 <span class="tech-tag">Python</span> 984 <span class="tech-tag">ETL Pipeline</span> 985 <span class="tech-tag">Bangla OCR</span> 986 <span class="tech-tag">Document Processing</span> 987 <span class="tech-tag">Government Systems</span> 988 </div> 989 </div> 990 <div class="project-highlights"> 991 <div class="highlight-title">Technical Contributions:</div> 992 <ul class="highlight-list"> 993 <li>Designed and developed comprehensive ETL pipeline</li> 994 <li>Conducted R&D for Bengali Optical Character Recognition</li> 995 <li>Collaborated with cross-functional development teams</li> 996 </ul> 997 </div> 998 <div class="project-links"> 999 <a href="http://120.50.8.205/reporting-analysis/" target="_blank" class="project-link"> 1000 <i class="fas fa-external-link-alt"></i> System Access 1001 </a> 1002 <a href="https://www.youtube.com/watch?v=MP7YJhcRjI4&t=351s" target="_blank" class="project-link youtube"> 1003 <i class="fab fa-youtube"></i> System Demo 1004 </a> 1005 </div> 1006 </div> 1007 </div> 1008 </div> 1009 </div> 1010 1011 </div> 1012 </section> 1013 </main>
1014<script> 1015 document.addEventListener('DOMContentLoaded', function () { 1016 // ---- Navbar toggle (mobile) ---- 1017 var toggle = document.querySelector('.navbar-toggle'); 1018 var menu = document.querySelector('.navbar-menu'); 1019 if (toggle && menu) { 1020 toggle.addEventListener('click', function (e) { 1021 e.preventDefault(); 1022 menu.classList.toggle('open'); 1023 }); 1024 } 1025 document.querySelectorAll('.navbar-menu a').forEach(function (link) { 1026 link.addEventListener('click', function () { 1027 if (window.innerWidth <= 900 && menu) { menu.classList.remove('open'); } 1028 }); 1029 }); 1030 1031 // ---- Project sidebar switching ---- 1032 var buttons = Array.prototype.slice.call(document.querySelectorAll('.rp-nav button')); 1033 var panels = Array.prototype.slice.call(document.querySelectorAll('.rp-panel')); 1034 1035 // NOTE: switching projects intentionally does NOT modify the URL. 1036 // Writing a hash here made the address bar change on every click and 1037 // left a stale fragment behind when navigating away and back. 1038 function show(targetId) { 1039 var found = false; 1040 panels.forEach(function (p) { 1041 var on = (p.id === targetId); 1042 p.classList.toggle('active', on); 1043 if (on) { found = true; } 1044 }); 1045 if (!found) { return false; } 1046 buttons.forEach(function (b) { 1047 var on = (b.getAttribute('data-target') === targetId); 1048 b.classList.toggle('active', on); 1049 b.setAttribute('aria-selected', on ? 'true' : 'false'); 1050 }); 1051 return true; 1052 } 1053 1054 buttons.forEach(function (btn) { 1055 btn.addEventListener('click', function () { 1056 show(btn.getAttribute('data-target')); 1057 if (window.innerWidth <= 950) { 1058 // keep the tapped chip visible in the rail 1059 if (btn.scrollIntoView) { 1060 btn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }); 1061 } 1062 // bring the panel just below the sticky rail into view 1063 var rail = document.querySelector('.rp-sidebar'); 1064 var panelsEl = document.querySelector('.rp-panels'); 1065 if (panelsEl) { 1066 var nav = document.querySelector('.navbar-custom'); 1067 var navH = nav ? nav.getBoundingClientRect().height : 0; 1068 var offset = navH + (rail ? rail.getBoundingClientRect().height : 0) + 12; 1069 var top = panelsEl.getBoundingClientRect().top + window.pageYOffset - offset; 1070 window.scrollTo({ top: Math.max(top, 0), behavior: 'smooth' }); 1071 } 1072 } 1073 }); 1074 // keyboard: arrow navigation between projects 1075 btn.addEventListener('keydown', function (e) { 1076 var i = buttons.indexOf(btn); 1077 var next = null; 1078 if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { next = buttons[i + 1]; } 1079 if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { next = buttons[i - 1]; } 1080 if (next) { 1081 e.preventDefault(); 1082 next.focus(); 1083 show(next.getAttribute('data-target')); 1084 } 1085 }); 1086 }); 1087 1088 // ---- Deep link support (read-only): /pages/research-projects.html#smt ---- 1089 if (window.location.hash) { 1090 var opened = show('rp-' + window.location.hash.replace(/^#/, '')); 1091 // Clear the fragment so the nav link and the page URL stay identical. 1092 if (opened && history.replaceState) { 1093 history.replaceState(null, '', window.location.pathname + window.location.search); 1094 } 1095 } 1096 1097 // ---- Center the active chip in the mobile rail on load / rotate ---- 1098 function centerActiveChip() { 1099 if (window.innerWidth > 950) { return; } 1100 var active = document.querySelector('.rp-nav button.active'); 1101 if (active && active.scrollIntoView) { 1102 active.scrollIntoView({ block: 'nearest', inline: 'center' }); 1103 } 1104 } 1105 centerActiveChip(); 1106 window.addEventListener('orientationchange', function () { 1107 setTimeout(centerActiveChip, 250); 1108 }); 1109 }); 1110</script>
1110 1111</body> 1112</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.