1<!doctype html> 2<html data-bs-theme="light" lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> 6 <title>Portfolio - Ramarko Bhattacharya</title> 7 <meta property="og:type" content="website" /> 8 <meta 9 name="Ramarko Bhattacharya" 10 content="C.T.O. and Co-founder at Relos, where we are building a digital representation of a real estate purchase contract that helps you schedule, plan, and conduct your real estate transactions. University of Chicago graduate with a B.S. in Computer Science and a B.A. in Economics, and in my free time, I love to experiment and learn about technology." 11 /> 12 <meta property="og:image" content="assets/img/Logo.png" /> 13 <link rel="icon" type="image/png" sizes="720x720" href="assets/img/Logo.png" /> 14 <link rel="âapple-touch-iconâ" type="image/png" href="assets/img/Logo.png" /> 15 <link rel="shortcut icon" type="image/png" href="assets/img/Logo.png" /> 16 <meta name="twitter:title" content="Ramarko Bhattacharya" /> 17 <meta name="twitter:image" content="assets/img/Logo.png" /> 18 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> 19 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" /> 20 <link rel="stylesheet" href="assets/css/Jost.css" /> 21 <link rel="stylesheet" href="assets/css/display.css" /> 22 <link rel="stylesheet" href="assets/css/landing.css" /> 23 <link rel="stylesheet" href="assets/css/styles.css" /> 24 </head> 25 26 <body> 27 <div id="modal"> 28 <div 29 id="modal-background" 30 style="width: 100%; height: 100%; position: absolute; background: var(--bs-dark); opacity: 0.67" 31 ></div> 32 <div class="card border-dark border rounded border-3" style="margin: 12px; background: transparent"> 33 <div class="card-body" style="background: var(--bs-white); padding: 0px 16px"> 34 <div class="modal-header"> 35 <h4 class="modal-title" id="modal-title"></h4> 36 </div> 37 <div class="row"> 38 <div 39 class="col-1 d-flex d-md-flex align-items-center justify-content-sm-start justify-content-md-start align-items-md-center" 40 > 41 <i class="fas fa-chevron-left img-change" id="img-prev" style="font-size: 3vw"></i> 42 </div> 43 <div 44 class="col d-flex d-sm-flex d-md-flex justify-content-center justify-content-sm-center justify-content-md-center" 45 style="height: 75vh" 46 > 47 <img id="modal-img" style="object-fit: contain; max-width: 100%" /> 48 </div> 49 <div 50 class="col-1 d-flex d-md-flex align-items-center justify-content-sm-end justify-content-md-end align-items-md-center" 51 > 52 <i class="fas fa-chevron-right img-change" id="img-next" style="font-size: 3vw"></i> 53 </div> 54 </div> 55 <div class="modal-footer" id="modal-footer"> 56 <button class="btn btn-outline-dark" id="modal-close">Close</button> 57 </div> 58 </div> 59 </div> 60 </div> 61 <!-- Start: Navbar Right Links --> 62 <nav 63 class="navbar navbar-expand-md text-uppercase py-3 navbar-light" 64 style="border-bottom: 3px solid var(--bs-body-color)" 65 > 66 <div class="container"> 67 <a class="navbar-brand d-flex align-items-center" href="/#home" 68 ><span id="nav-name" class="fw-bold, text-uppercase, blackout" style="font-weight: bold; letter-spacing: 10px" 69 ><span style="letter-spacing: 0; padding: 10px"><span style="text-decoration: line-through">R</span></span 70 >amarko</span 71 ></a 72 ><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-2"> 73 <span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span> 74 </button> 75 <div class="collapse navbar-collapse" id="navcol-2"> 76 <ul class="navbar-nav ms-auto"> 77 <li class="nav-item" style="font-weight: bold; margin-left: 1vw"> 78 <a class="nav-link active blackout" id="nav-portfolio" href="portfolio" style="font-weight: bold" 79 >Portfolio</a 80 > 81 </li> 82 <li class="nav-item" style="font-weight: bold; margin-left: 1vw"> 83 <a class="nav-link blackout" id="nav-experiences" href="experiences" style="font-weight: bold" 84 >Experiences</a 85 > 86 </li> 87 <li class="nav-item" style="font-weight: bold; margin-left: 1vw"> 88 <a class="nav-link blackout" id="nav-about" href="about" style="font-weight: bold">About</a> 89 </li> 90 </ul> 91 </div> 92 </div> 93 </nav> 94 <!-- End: Navbar Right Links --> 95 <!-- Start: Research --> 96 <section class="load-first"> 97 <h1>Exhibitions and Research</h1> 98 <div class="d-flex d-lg-flex align-items-center justify-content-lg-center align-items-lg-center"> 99 <p class="fs-5" style="margin-right: 10vw; margin-left: 10vw"> 100 For over two years, I was able to work on incredible experiences, both independently, and as a student 101 researcher at 102 <a class="link-dark" href="https://www.axlab.cs.uchicago.edu/">AxLab</a>, or the Actuated Experience Lab at 103 the University of Chicago. Here are some of the most exciting oppurtunites I've had to present my work! 104 </p> 105 </div> 106 <div 107 class="row row-cols-1 row-cols-md-3 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3" 108 style="margin-top: 24px; padding-right: 10px; padding-left: 10px" 109 > 110 <div class="col"> 111 <!-- Start: Research Card --> 112 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 113 <img class="card-img-top w-100 d-block" src="assets/img/NetworkBots.jpg" /> 114 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 115 <h5 class="card-title" style="margin-bottom: 0"> 116 NetworkBots: Swarm User Interfaces as a Platform for Physicalizing Network-Based Data 117 </h5> 118 <p>Undergraduate Thesis</p> 119 <p> 120 This thesis introduces NetworkBots, a novel approach that integrates Swarm User Interfaces (SwarmUIs) 121 with Network Visualizations to create an interactive swarm-based network physicalization. NetworkBots 122 facilitates the physical representation of networks, empowering users to comprehend and apply various 123 network-related methodologies and tasks tangibly. 124 </p> 125 <ul class="list-inline"> 126 <li class="list-inline-item" style="text-decoration: underline"> 127 <a class="link-dark" href="portfolio/NetworkBots.pdf">PDF</a> 128 </li> 129 </ul> 130 </div> 131 </div> 132 <!-- End: Research Card --> 133 134 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 135 <img class="card-img-top w-100 d-block" src="assets/img/swingnomoly.jpg" /> 136 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 137 <h4 class="card-title" style="margin-bottom: 0">Swingnomoly</h4> 138 <p>A Practice in Art and Technology</p> 139 <p> 140 Swingnomoly is a pendulum that defies the laws of physics. The artwork challenges our understanding and 141 perception of the universe around us. Through hypnotic motions that disrupt something as fundamental as 142 the laws of physics, Swingnomoly asks viewers to question the assumptions we make about the world around 143 us and imagine a world that breaks those assumptions. 144 </p> 145 </div> 146 </div> 147 148 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 149 <img class="card-img-top w-100 d-block" src="assets/img/SXSW.jpg" /> 150 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 151 <h4 class="card-title" style="margin-bottom: 0">Creative Living</h4> 152 <p>South by Southwest 2026</p> 153 <p> 154 At SXSW, we collobrated with Nippon TV's Co-Creation Labs, we explored what the future of Creative 155 Living looks like. Together, we presented efforts to pioneer future experiential value and address 156 social challenges by fostering collaborative innovation in entertainment and beyond. The exhibition 157 displayed how technology, services, and design could be used to create impactful solutions for future 158 society and culture. 159 </p> 160 </div> 161 </div> 162 </div> 163 164 <div class="col"> 165 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 166 <img class="card-img-top w-100 d-block" src="assets/img/eyecontact.jpeg" /> 167 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 168 <h4 class="card-title" style="margin-bottom: 0">Eye Contact</h4> 169 <p>Exhibit at School of Art Institute of Chicago</p> 170 <p> 171 In collaboration with Yukyeom Kim, a Graduate Student at the School of Art Institute of Chicago, Eye 172 Contact was an art project that we aim to replicated the experience of eye contact with one robot that 173 avoided eye contact and another that attempted to make eye contact. 174 </p> 175 <ul class="list-inline"> 176 <li class="list-inline-item" style="text-decoration: underline"> 177 <a class="link-dark" href="https://drive.google.com/file/d/1HdujupYewEVYfrR9BnPO7d998_5YhN60/view?t=1" 178 >Video</a 179 > 180 </li> 181 182 <li></li> 183 </ul> 184 </div> 185 </div> 186 187 <!-- Start: Project Card --> 188 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 189 <img class="card-img-top w-100 d-block" src="assets/img/ars2023.png" /> 190 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 191 <h4 class="card-title" style="margin-bottom: 0">Actuated Experi[ences|ments]</h4> 192 <p>Exhibit at Ars Electronica 2023</p> 193 <p> 194 At Ars Electronica in Linz, Austria, the premier Art and Tech Festival, AxLab showcased three of our 195 latest experimental works which explore how actuation technology and AI could shape the future through 196 their integration into everyday spaces, toys, and materials. 197 </p> 198 <ul class="list-inline"> 199 <li class="list-inline-item" style="text-decoration: underline"> 200 <a class="link-dark" href="https://ars.electronica.art/who-owns-the-truth/en/actuated-experience/" 201 >Check it Out!</a 202 > 203 </li> 204 <li class="list-inline-item" style="text-decoration: underline"> 205 <a class="link-dark" href="https://www.youtube.com/watch?v=y4LeBCKs41w&t=1s">Video</a> 206 </li> 207 </ul> 208 </div> 209 </div> 210 <!-- End: Project Card --> 211 212 <!-- Start: Research Card --> 213 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 214 <img class="card-img-top w-100 d-block" src="assets/img/FabRobotics.jpg" /> 215 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 216 <h5 class="card-title" style="margin-bottom: 0"> 217 FabRobotics: Fusing 3D Printing with Mobile Robots to Advance Fabrication, Robotics, and Interaction 218 </h5> 219 <p>Paper presented at ACM TEI '24</p> 220 <p> 221 FabRobotics combines 3D printing with mobile swarm robots to extend the functionalities of both the 222 printer and the robots through three core pillars: Assistive Fabrication, Adaptive Robotics, and 223 On-Demand Interaction. 224 </p> 225 <ul class="list-inline"> 226 <li class="list-inline-item" style="text-decoration: underline"> 227 <a class="link-dark" href="portfolio/FabRobotics.pdf">PDF</a> 228 </li> 229 <li class="list-inline-item" style="text-decoration: underline"> 230 <a class="link-dark" href="https://doi.org/10.1145/3623509.3633365">Official Publication</a> 231 </li> 232 <li class="list-inline-item" style="text-decoration: underline"> 233 <a class="link-dark" href="https://www.axlab.cs.uchicago.edu/projects/fabrobotics">Project Page</a> 234 </li> 235 <li class="list-inline-item" style="text-decoration: underline"> 236 <a class="link-dark" href="https://youtu.be/Snu5LnuXbCU">Video</a> 237 </li> 238 </ul> 239 </div> 240 </div> 241 <!-- End: Research Card --> 242 </div> 243 244 <div class="col"> 245 <!-- Start: Research Card --> 246 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 247 <img class="card-img-top w-100 d-block" src="assets/img/threadingspace.png" /> 248 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 249 <h5 class="card-title" style="margin-bottom: 0"> 250 Threading Space: Kinetic Sculpture exploring Spatial Interaction using Threads in Motion 251 </h5> 252 <p>Project at AxLab</p> 253 <p> 254 Threading Space is a kinetic sculpture that explores how spatial perception can be transformed by
255 dynamically and geometrically reconfiguring physical lines of thread. As the threads interact and 256 intertwine with each other, they become a hypnotic medium for tangible patterns in three-dimensional 257 space. 258 </p> 259 <ul class="list-inline"> 260 <li class="list-inline-item" style="text-decoration: underline"> 261 <a class="link-dark" href="portfolio/Threading Space.pdf">PDF</a> 262 </li> 263 <li class="list-inline-item" style="text-decoration: underline"> 264 <a class="link-dark" href="https://doi.org/10.1145/3623509.3633365">Official Publication</a> 265 </li> 266 <li class="list-inline-item" style="text-decoration: underline"> 267 <a class="link-dark" href="https://www.axlab.cs.uchicago.edu/projects/threading-space" 268 >Project Page</a 269 > 270 </li> 271 <li class="list-inline-item" style="text-decoration: underline"> 272 <a class="link-dark" href="https://youtu.be/fA6qBYcGkYk">Video</a> 273 </li> 274 </ul> 275 </div> 276 </div> 277 <!-- End: Research Card --> 278 279 <!-- Start: Research Card --> 280 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 281 <img class="card-img-top w-100 d-block" src="assets/img/southside.jpg" /> 282 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 283 <h4 class="card-title" style="margin-bottom: 0">South Side Science Festival</h4> 284 <p>Demo</p> 285 <p> 286 At the South Side Science Festival, AxLab had the chance to show off some of our research 287 prototypes to over 200+ visitors. 288 </p> 289 <ul class="list-inline"> 290 <li class="list-inline-item" style="text-decoration: underline"> 291 <a class="link-dark" href="https://southsidescience.event.uchicago.edu/">Check It Out!</a> 292 </li> 293 </ul> 294 </div> 295 </div> 296 <!-- End: Research Card --> 297 298 <!-- Start: Research Card --> 299 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 300 <img class="card-img-top w-100 d-block" src="assets/img/[e]motion.jpg" /> 301 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 302 <h5 class="card-title" style="margin-bottom: 0"> 303 [e]Motion: Designing Expressive Movement in Robots and Actuated Tangible User Interfaces 304 </h5> 305 <p>Studio presented at ACM TEI '24</p> 306 <p> 307 [e]Motion explored the emotive capabilities of robots by allowing participants to join in a process that 308 allowed them to design and animate motions using robots. I built a toolkit for users to record and 309 playback specific motions using mobile robots. 310 </p> 311 <ul class="list-inline"> 312 <li class="list-inline-item" style="text-decoration: underline"> 313 <a class="link-dark" href="portfolio/[e]Motion.pdf">PDF</a> 314 </li> 315 <li class="list-inline-item" style="text-decoration: underline"> 316 <a class="link-dark" href="https://doi.org/10.1145/3623509.3634741">Official Publication</a> 317 </li> 318 </ul> 319 </div> 320 </div> 321 <!-- End: Research Card --> 322 </div> 323 </div> 324 </section> 325 <!-- End: Research --> 326 327 <!-- Start: Projects --> 328 <section class="load-second"> 329 <h1>Projects</h1> 330 <div class="d-flex d-lg-flex align-items-center justify-content-lg-center align-items-lg-center"> 331 <div class="row row-cols-1"> 332 <div class="col"> 333 <p class="fs-5" style="margin-right: 10vw; margin-left: 10vw"> 334 This website is brand new and was only made
335 <span id="creationTimer" title="yo"></span> ago. 336 </p> 337 </div> 338 <div class="col"> 339 <p class="fs-5" style="margin-right: 10vw; margin-left: 10vw"> 340 Over time, this page will be updated with previous, current, and upcoming personal projects. If this page 341 has gone an unreasonably long time without being updated, you can assume that it is due to 342 <span id="excuses" style="text-decoration: underline"></span>. 343 </p> 344 </div> 345 </div> 346 </div> 347 <div 348 class="row row-cols-1 row-cols-md-3 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3" 349 style="margin-top: 24px; padding-right: 10px; padding-left: 10px" 350 > 351 <div class="col"> 352 <!-- Start: Stick S'talk --> 353 <div class="card border-dark border rounded border-2 card-portfolio card"> 354 <img class="card-img-top w-100 d-block" src="assets/img/stick.jpg" /> 355 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 356 <h4 class="card-title" style="margin-bottom: 0">Stick S'talk</h4> 357 <p> 358 Inspired by the talking stick, Stick S'talk was a project to create a tangible talking stick. With an 359 embedded IMU, vibration motor, and two sets of NeoPixel LED arrays, Stick S'talk was a prototype 360 Tangible User interface that could act a silent moderator. 361 </p> 362 </div> 363 </div> 364 <!-- End: Stick S'talk --> 365 <!-- Start: Pedestal --> 366 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 367 <img class="card-img-top w-100 d-block" src="assets/img/Pedestal.png" /> 368 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 369 <h4 class="card-title" style="margin-bottom: 0">Pedestal</h4> 370 <p>
371 Inspired by my experience at Ars Electronica 2023, <em>Pedestal </em>focuses on the paradox of art 372 analysis. Oftentimes, people will find incredibly profound meaning in an artwork while others will only 373 make asinine comments. <em>Pedestal</em> attempts to mimic this with a virtual experience. 374 </p> 375 <ul class="list-inline"> 376 <li class="list-inline-item" style="text-decoration: underline"> 377 <a class="link-dark" href="pedestal">Try it out!</a> 378 </li> 379 <li class="list-inline-item" style="text-decoration: underline"> 380 <a class="link-dark" href="https://github.com/RamarkoB/pedestal">Github</a> 381 </li> 382 </ul> 383 </div> 384 </div> 385 <!-- End: Pedestal --> 386 <!-- Start: Chiventure --> 387 <div class="card border-dark border rounded border-2 card-portfolio card"> 388 <img class="card-img-top w-100 d-block" src="assets/img/chiventure.jpeg" /> 389 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 390 <h4 class="card-title" style="margin-bottom: 0">Chiventure</h4> 391 <p> 392 An UChicago run, open-source project in C, Chiventure is a game engine that allows users to construct 393 their own text-based adventure games. Contributions mostly come students of the "Introduction to 394 Software Development" class offered on campus. I took this class in the spring of 2021, and became a 395 contributor to the project. 396 </p> 397 <ul class="list-inline"> 398 <li class="list-inline-item" style="text-decoration: underline"> 399 <a class="link-dark" href="https://github.com/uchicago-cs/chiventure">Github</a> 400 </li> 401 </ul> 402 </div> 403 </div> 404 <!-- End: Chiventure --> 405 </div> 406 <div class="col"> 407 <!-- Start: Lambda Calculator --> 408 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 409 <img class="card-img-top w-100 d-block" src="assets/img/lambda.png" /> 410 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 411 <h4 class="card-title" style="margin-bottom: 0">Lambda Calculator</h4> 412 <p>A drag-and-drop calculator for Untyped Lambda Calculus (UML)</p> 413 <ul class="list-inline"> 414 <li class="list-inline-item" style="text-decoration: underline"> 415 <a class="link-dark" href="lambda">Try it Out!</a> 416 </li> 417 <li class="list-inline-item" style="text-decoration: underline"> 418 <a class="link-dark" href="https://github.com/RamarkoB/lambda">Github</a> 419 </li> 420 </ul> 421 </div> 422 </div> 423 <!-- End: Lambda Calculator --> 424 425 <!-- Start: JARME --> 426 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 427 <img class="card-img-top w-100 d-block img-svg" src="assets/img/WIP.svg" /> 428 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 429 <h4 class="card-title" style="margin-bottom: 0">JARME</h4> 430 <p> 431 The JavaScript ARM Emulator (JARME) project was a way to visualize and demonstrate how arm commands are 432 executed. JARME is still in progress, but can currently execute 8 basic commands. 433 </p> 434 <ul class="list-inline"> 435 <li class="list-inline-item" style="text-decoration: underline"> 436 <a class="link-dark" href="jarme">Try it Out!</a> 437 </li> 438 <li class="list-inline-item" style="text-decoration: underline"> 439 <a class="link-dark" href="https://github.com/RamarkoB/jarme">Github</a> 440 </li> 441 </ul> 442 </div> 443 </div> 444 <!-- End: JARME --> 445 <!-- Start: Crime-Vision --> 446 <div class="card border-dark border rounded border-2 card-portfolio card" style="margin-bottom: 12px"> 447 <img class="card-img-top w-100 d-block" src="assets/img/crimevision.jpg" /> 448 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 449 <h4 class="card-title" style="margin-bottom: 0">Crime-Vision</h4> 450 <p> 451 As a part of my internship for Crime-Vision, I constructed a fully functioning machine vision model to 452 detect people and cars from street camera. I trained the model completely from scratch based off of 453 YOLOv8 and Ultralytics 454 </p> 455 </div> 456 </div> 457 <!-- End: Crime-Vision --> 458 <!-- Start: AutoChair --> 459 <div class="card border-dark border rounded border-2 card-portfolio card"> 460 <img class="card-img-top w-100 d-block" src="assets/img/autochair.png" /> 461 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 462 <h4 class="card-title" style="margin-bottom: 0">AutoChair</h4> 463 <p> 464 UChicago hosts the prestigious collegiate Model United Nations conference, ChoMUN, annually. Most chairs 465 use a combination of spreadsheets and a timer to keep track of their committee. When I chaired My own 466 committee, I decided to take a more advanced approach and develop an open-source platform that would 467 allow people to more easily chair a committee. 468 </p> 469 <ul class="list-inline"> 470 <li class="list-inline-item" style="text-decoration: underline"> 471 <a class="link-dark" href="https://github.com/RamarkoB/AutoChair">Github</a> 472 </li> 473 </ul> 474 </div> 475 </div> 476 <!-- End: AutoChair --> 477 </div> 478 <div class="col"> 479 <!-- Start: Decorum --> 480 <div class="card border-dark border rounded border-2 card-portfolio card"> 481 <img class="card-img-top w-100 d-block" src="assets/img/decorum.png" /> 482 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 483 <h4 class="card-title" style="margin-bottom: 0">Decorum</h4> 484 <p> 485 A more advanced version of "AutoChair," Decorum was a chairing and moderating tool deployed at the Model 486 United Nation of the University of Chicago, the third biggest Model Conference in the United States. I 487 personally designed and programmed the entire application myself using React. 488 </p> 489 <ul class="list-inline"> 490 <li class="list-inline-item" style="text-decoration: underline"> 491 <a class="link-dark" href="decorum">Try it out!</a> 492 </li> 493 <li class="list-inline-item" style="text-decoration: underline"> 494 <a class="link-dark" href="https://github.com/RamarkoB/decorum">Github</a> 495 </li> 496 </ul> 497 </div> 498 </div> 499 <!-- End: Decorum --> 500 <!-- Start: Alienation --> 501 <div class="card border-dark border rounded border-2 card-portfolio card"> 502 <img class="card-img-top w-100 d-block" src="assets/img/alienation.png" /> 503 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 504 <h4 class="card-title" style="margin-bottom: 0">Alienation</h4> 505 <p> 506 A art project originally designed to create a sense of isolation from traditional web design, Alienation 507 randomly generates elements using d3 to display to create a random screen experience. 508 </p> 509 <ul class="list-inline"> 510 <li class="list-inline-item" style="text-decoration: underline"> 511 <a class="link-dark" href="alienation">Try it out!</a> 512 </li> 513 <li class="list-inline-item" style="text-decoration: underline"> 514 <a class="link-dark" href="https://github.com/RamarkoB/alienation">Github</a> 515 </li> 516 </ul> 517 </div> 518 </div> 519 <!-- End: Alienation --> 520 <!-- Start: Bangla Tester --> 521 <div class="card border-dark border rounded border-2 card-portfolio card"> 522 <img class="card-img-top w-100 d-block" src="assets/img/bangla.png" /> 523 <div class="card-body" style="border-top-width: 2px; border-top-style: solid; padding-bottom: 0px"> 524 <h4 class="card-title" style="margin-bottom: 0">Bangla Tester</h4> 525 <p> 526 When taking a class in Bangla, I found most online flashcard websites unable to meet my needs of testing 527 me with the different letters of the Bangla alphabet. To remedy this, I constructed my own flashcard 528 application to test me on the consonants, vowels, and joint letters of the Bangla alphabet. 529 </p> 530 <ul class="list-inline"> 531 <li class="list-inline-item" style="text-decoration: underline"> 532 <a class="link-dark" href="https://github.com/RamarkoB/bangla-project">Github</a> 533 </li> 534 </ul> 535 </div> 536 </div> 537 <!-- End: Bangla Tester --> 538 </div> 539 </div> 540 </section> 541 <!-- End: Projects --> 542 543 <!-- Start: Design --> 544 <section class="load-fourth"> 545 <h1>Design</h1> 546 <div class="row row-cols-1"> 547 <div class="col"> 548 <p class="fs-5" style="margin-right: 10vw; margin-left: 10vw"> 549 Alongside my technical experience in computer science and hardware, I've also spent time with graphic 550 design. Although many of these designs are unfinished, I'm still proud to show them off. 551 </p> 552 </div> 553 </div> 554 <div 555 class="row row-cols-1 row-cols-md-3 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3" 556 style="margin-top: 24px; padding-right: 10px; padding-left: 10px" 557 > 558 <div class="col"> 559 <!-- Start: MUNUC --> 560 <div class="card border-dark border rounded border-2 card-design"> 561 <img class="card-img-top w-100 d-block" src="assets/img/MUNUCretro.png" /> 562 <div class="card-body" style="border-top-width: 2px; border-top-style: solid"> 563 <h4 class="card-title" style="margin-bottom: 0">MUNUC Anniversary Poster</h4> 564 </div> 565 </div> 566 <!-- End: MUNUC --> 567 <!-- Start: Design Card --> 568 <div class="card border-dark border rounded border-2 card-design"> 569 <img class="card-img-top w-100 d-block" src="assets/img/CTA.png" /> 570 <div class="card-body" style="border-top-width: 2px; border-top-style: solid"> 571 <h4 class="card-title" style="margin-bottom: 0">Chicago Stamp</h4> 572 </div> 573 </div> 574 <!-- End: Design Card --> 575 </div> 576 <div class="col"> 577 <!-- Start: ALPHABET --> 578 <div class="card border-dark border rounded border-2 card-design"> 579 <img class="card-img-top w-100 d-block" src="assets/img/alphabet%5E2.png" /> 580 <div class="card-body" style="border-top-width: 2px; border-top-style: solid"> 581 <h4 class="card-title" style="margin-bottom: 0">Alphabet<sup>
5812</sup></h4> 582 </div> 583 </div> 584 <!-- End: ALPHABET --> 585 <!-- Start: Crossroads --> 586 <div class="card border-dark border rounded border-2 card-design"> 587 <img class="card-img-top w-100 d-block" src="assets/img/MOTEL.png" /> 588 <div class="card-body" style="border-top-width: 2px; border-top-style: solid"> 589 <h4 class="card-title" style="margin-bottom: 0">Crossroads Motel</h4> 590 </div> 591 </div> 592 <!-- End: Crossroads --> 593 <!-- Start: OUTRUN --> 594 <div class="card border-dark border rounded border-2 card-design"> 595 <img class="card-img-top w-100 d-block" src="assets/img/OUTRUN.png" /> 596 <div class="card-body" style="border-top-width: 2px; border-top-style: solid"> 597 <h4 class="card-title" style="margin-bottom: 0">OUTRUN</h4> 598 </div> 599 </div> 600 <!-- End: OUTRUN --> 601 <!-- Start: Design Card --> 602 <div class="card border-dark border rounded border-2 card-design"> 603 <img class="card-img-top w-100 d-block img-svg" src="assets/img/Tilted%20Line%20Logo.svg" /> 604 <div class="card-body" style="border-top-width: 2px; border-top-style: solid"> 605 <h4 class="card-title" style="margin-bottom: 0">UC Open Data Logo</h4> 606 </div> 607 </div> 608 <!-- End: Design Card --> 609 </div> 610 <div class="col"> 611 <!-- Start: Didi --> 612 <div class="card border-dark border rounded border-2 card-design"> 613 <img class="card-img-top w-100 d-block" src="assets/img/didi.png" /> 614 <div class="card-body" style="border-top-width: 2px; border-top-style: solid"> 615 <h4 class="card-title" style="margin-bottom: 0">DIDI</h4> 616 </div> 617 </div> 618 <!-- End: Didi --> 619 <!-- Start: Design Card --> 620 <div class="card border-dark border rounded border-2 card-design"> 621 <img class="card-img-top w-100 d-block" src="assets/img/pine.png" /> 622 <div class="card-body" style="border-top-width: 2px; border-top-style: solid"> 623 <h4 class="card-title" style="margin-bottom: 0">"Pineapple"</h4> 624 </div> 625 </div> 626 <!-- End: Design Card --> 627 </div> 628 </div> 629 </section> 630 <!-- End: Design --> 631 632 <!-- Start: Footer Basic --> 633 <footer class="text-center load-fifth"> 634 <div class="container text-muted py-4 py-lg-5"> 635 <ul class="list-inline"> 636 <li class="list-inline-item me-4"> 637 <a href="https://github.com/RamarkoB"><i class="fab fa-github text-muted"></i></a> 638 </li> 639 <li class="list-inline-item me-4"> 640 <a href="https://www.linkedin.com/in/ramarkob/"><i class="fab fa-linkedin text-muted"></i></a> 641 </li> 642 <li class="list-inline-item"> 643 <a href="/cdn-cgi/l/email-protection#98eaf9f5f9eaf3f7fad8edfbf0f1fbf9fff7b6fdfced"><i class="fas fa-envelope text-muted"></i></a> 644 </li> 645 </ul> 646 <p class="mb-0">© 2026 Ramarko Bhattacharya. All rights reserved.</p> 647 </div> 648 </footer> 649 <!-- End: Footer Basic -->
vendor: 114 bytes, lines 649-651
649 650 651 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
651<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
651 652
652<script src="assets/js/cardvisibility.js"></script>
652 653
653<script src="assets/js/modal.js"></script>
653 654
654<script src="assets/js/projects.js"></script>
654 655
655<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"1c5215a23bff4939b3bbb44fe0634a81","r":1,"spa":2}' crossorigin="anonymous"></script>
655 656</body> 657</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.