PageSourceSearch

https://raihansabique.github.io/pages/research-projects.html

html raihansabique.github.io collected 2026-10-03 09:49:07 UTC 53,721 bytes, 1,112 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>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 &amp; 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 &amp; 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 &mdash; 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 &amp; LLM Systems</span>
483              <span class="rp-nav-short">Agentic AI &amp; LLMs</span>
484              <span class="rp-nav-tag">Ubicomply.ai &middot; 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 &middot; 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 &middot; 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 &middot; R21 &middot; 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 &amp; LLM Systems for Regulated Domains &mdash; <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 &mdash; 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 &mdash; 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 &mdash; 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&ndash;Exploitation biomarker</b> that separates early- from late-phase motor skill
644              learning &mdash; 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 &rarr;</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 &rarr;</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> &mdash; 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 &mdash; 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> &mdash; 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> &mdash; 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.