PageSourceSearch

https://ramarko.com/portfolio

html ramarko.com collected 2026-09-29 19:04:39 UTC 36,515 bytes, 657 lines download raw bytes

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. &nbsp;
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. &nbsp;
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. &nbsp;
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.&nbsp;
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&nbsp;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>&nbsp;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.&nbsp;
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>&nbsp;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.&nbsp;
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.&nbsp;&nbsp;
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.