PageSourceSearch

https://marincomics.com/dev.html

html marincomics.com collected 2026-09-24 20:32:56 UTC 23,128 bytes, 493 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Development &amp; Side Projects — Marin Balabanov</title>
6    <link rel="stylesheet" href="css/bootstrap.min.css" />
7    <link rel="stylesheet" href="css/custom.css?v=20260726" />
8    <link rel="canonical" href="https://marincomics.com/dev.html" />
9
10    <meta name="description" content="A showcase of some of the web development work of Marin Balabanov." />
11    <meta
12      name="keywords"
13      content="Web Development, Web Scraping, Data Scraping, Web Design, Web Projects, Web Development Projects, Web Scraping Projects, Data Scraping Projects"
14    />
15    <meta name="author" content="Marin Balabanov" />
16
17    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18    <link rel="icon" href="/favicon.png" type="image/png">
19      <meta property="og:title" content="Development &amp; Side Projects — Marin Balabanov" />
20    <meta property="og:description" content="A showcase of some of the web development work of Marin Balabanov." />
21    <meta property="og:image" content="https://marincomics.com/img/marincomics-logo.png" />
22    <meta property="og:url" content="https://marincomics.com/dev.html" />
23    <meta property="og:type" content="website" />
24    <meta name="twitter:card" content="summary_large_image" />
25    <meta name="twitter:title" content="Development &amp; Side Projects — Marin Balabanov" />
26    <meta name="twitter:description" content="A showcase of some of the web development work of Marin Balabanov." />
27    <meta name="twitter:image" content="https://marincomics.com/img/marincomics-logo.png" />
28  </head>
29
30  <body>
31    <a href="#main" class="visually-hidden-focusable">Skip to main content</a>
32    <nav class="navbar navbar-expand-lg bg-primary bg-gradient" data-bs-theme="dark">
33      <div class="container">
34        <a class="navbar-brand" href="https://marincomics.com"
35          ><img
36            src="https://marincomics.com/img/marincomics-logo-sm.webp"
37            alt="Marin Comics"
38            width="200"
39            class="mt-2"
40        /></a>
41        <button
42          class="navbar-toggler text-white border-white bg-light"
43          type="button"
44          data-bs-toggle="collapse"
45          data-bs-target="#navbarMarinComics"
46          aria-controls="navbarMarinComics"
47          aria-expanded="false"
48          aria-label="Toggle navigation"
49        >
50          <span class="navbar-toggler-icon"></span>
51        </button>
52        <div class="collapse navbar-collapse" id="navbarMarinComics">
53          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
54            <li class="nav-item">
55              <a class="nav-link link-light" href="https://marincomics.com/writing.html">Writing</a>
56            </li>
57            <li class="nav-item">
58              <a class="nav-link link-light" href="https://marincomics.com/dev.html"
59                aria-current="page"
60                >Dev</a>
61            </li>
62            <li class="nav-item">
63              <a class="nav-link link-light" href="https://marincomics.com/videos.html">Videos</a>
64            </li>
65            <li class="nav-item">
66              <a class="nav-link link-light" href="https://marincomics.com/comics.html">Comics</a>
67            </li>
68            <li class="nav-item">
69              <a class="nav-link link-light" href="https://marincomics.com/about.html">About</a>
70            </li>
71          </ul>
72          <a href="#" class="btn btn-outline-light" data-action="search">Search Site</a>
73          <a rel="noopener noreferrer" href="https://buymeacoffee.com/marincomics" target="_blank" class="btn btn-warning m-1"
74            >Buy Me A Coffee</a
75          >
76        </div>
77      </div>
78    </nav>
79
80    <main id="main" class="text-center bg-white">
81      <section class="album py-4 bg-light text-dark border border-top" id="dev-projects">
82        <div class="container">
83          <div class="row mt-5">
84            <div class="col-md-12 text-center mb-4">
85              <h1>
86                <img src="img/dev-projects.webp" alt="Dev Projects" class="img-fluid" />
87              </h1>
88              <a href="index.html" class="btn btn-sm btn-outline-primary">Back to Front Page</a>
89            </div>
90          </div>
91
92          <div class="row">
93            <div class="col-md-8 offset-md-2 text-center">
94              <p>
95                In this section, you will find some of my development side projects. I have a background in media art
96                history and have worked on projects in web development and data scraping.
97              </p>
98            </div>
99          </div>
100
101          <div class="row row-cols-1 row-cols-md-2 g-3 text-dark">
102            <div class="col">
103              <div class="card shadow-sm">
104                <a href="https://marincomics.com/ai-arcade/arcade-gallery.html">
105                  <img
106                    src="https://marincomics.com/ai-arcade/img/ai-arcade-tn.webp"
107                    alt="Welcome to the AI Arcade: Retro Arcade Games Built with AI"
108                    class="card-img-top img-fluid"
109                  />
110                </a>
111                <div class="card-body bg-white">
112                  <p>
113                    <span class="badge rounded-pill text-bg-secondary"
114                      >January 2026</span
115                    >
116                  </p>
117                  <h3 class="card-text">
118                    <a
119                      href="https://marincomics.com/ai-arcade/arcade-gallery.html"
120                      class="text-decoration-none"
121                      >Welcome to the AI Arcade</a
122                    >
123                  </h3>
124                  <h4 class="card-text">
125                    <a
126                      href="https://marincomics.com/ai-arcade/arcade-gallery.html"
127                      class="text-decoration-none"
128                      >Retro Arcade Games Built with AI</a
129                    >
130                  </h4>
131                  <p class="card-text">
132                    I developed these classic arcade games using AI tools. Claude Code handled the programming while ChatGPT and DALL-E created the logo graphics. The entire collection, including refinements and tweaks, took approximately six hours to complete.
133                  </p>
134                  <a
135                    class="btn btn-sm btn-outline-primary"
136                    href="https://marincomics.com/ai-arcade/arcade-gallery.html"
137                    >Read more</a
138                  >
139                </div>
140              </div>
141            </div>
142            <div class="col">
143              <div class="card shadow-sm">
144                <a href="https://marincomics.com/website-search-function.html">
145                  <img
146                    src="/img/website-search/website-search-tn.webp"
147                    alt="I Couldn't Decide Which Library to Use, So I Wrote My Own Website Search"
148                    class="card-img-top img-fluid"
149                  />
150                </a>
151                <div class="card-body bg-white">
152                  <p>
153                    <span class="badge rounded-pill text-bg-secondary">January 2025</span>
154                  </p>
155                  <h3 class="card-text">
156                    <a href="https://marincomics.com/website-search-function.html" class="text-decoration-none"
157                      >I Couldn't Decide Which Library to Use, So I Wrote My Own Website Search</a
158                    >
159                  </h3>
160                  <p class="card-text"></p>
161                  <p>
162                    I needed a search function on my website without bloating it with heavy libraries or server-side
163                    tools. Instead of relying on frameworks, I decided to write my own lightweight, client-side search
164                    from scratch. Here's how I did it, and why building it myself turned out to be a good idea.
165                  </p>
166                  <a class="btn btn-sm btn-outline-primary" href="https://marincomics.com/website-search-function.html"
167                    >Read more</a
168                  >
169                </div>
170              </div>
171            </div>
172
173            <div class="col">
174              <div class="card shadow-sm">
175                <a href="archiving-an-archive.html">
176                  <img
177                    src="/img/archive-scraping/archiving-the-archive-thumbnail.webp"
178                    alt="Archiving the Archive Thumbnail"
179                    class="card-img-top img-fluid"
180                  />
181                </a>
182                <div class="card-body bg-white">
183                  <p class="badge rounded-pill text-bg-secondary">February 2024</p>
184                  <h3 class="card-text">
185                    <a href="archiving-an-archive.html" class="text-decoration-none">Archiving an Archive</a>
186                  </h3>
187                  <h4 class="card-text">
188                    <a href="archiving-an-archive.html" class="text-decoration-none"
189                      >My Adventures Scraping the Contents of the Archive of Digital Art</a
190                    >
191                  </h4>
192                  <p class="card-text">
193                    A while ago, I wanted to learn web scraping so I wrote my own little suite of applications based on
194                    Puppeteer/Node.js to grab content from the
195                    <strong>Archive of Digital Art</strong> (ADA), parse it into JSON and extract the images. Join me as
196                    I scrape the bottom of the web archive.
197                  </p>
198                  <a class="btn btn-sm btn-outline-primary" href="archiving-an-archive.html">View Project</a>
199                </div>
200              </div>
201            </div>
202
203            <div class="col">
204              <div class="card shadow-sm">
205                <a href="about-mansion-game.html">
206                  <img
207                    src="/img/project-description-mansion/mansion-header-logo.webp"
208                    alt="Mansion of Trepidation"
209                    class="card-img-top img-fluid"
210                  />
211                </a>
212                <div class="card-body bg-white">
213                  <p class="badge rounded-pill text-bg-secondary">April 2023</p>
214                  <h3 class="card-text">
215                    <a href="about-mansion-game.html" class="text-decoration-none">Mansion of Trepidation</a>
216                  </h3>
217                  <p class="card-text">
218                    This is a choice-based solo fantasy adventure in the style of the 'Choose Your Own Adventure' books
219                    I developed in vanilla JavaScript. The graphics and text descriptions are generated using AI tools.
220                    The descriptions are generated using ChatGPT. The player can search the 'Mansion of Trepidation' to
221                    defeat the villain and rescue their young nephew.
222                  </p>
223                  <div class="btn-group">
224                    <a class="btn btn-sm btn-outline-primary" href="about-mansion-game.html">View Project</a>
225                    <a
226                      rel="noopener noreferrer"
227                      class="btn btn-sm btn-outline-primary"
228                      href="https://marincomics.com/project-mansion-of-trepidation/"
229                      target="_blank"
230                      >Play Game</a
231                    >
232                  </div>
233                </div>
234              </div>
235            </div>
236
237            <div class="col">
238              <div class="card shadow-sm">
239                <a href="about-ice-hockey-ex.html">
240                  <img
241                    src="/img/ice-hockey-exercise-page.webp"
242                    alt="Ice Hockey Exercise Site"
243                    class="card-img-top img-fluid"
244                  />
245                </a>
246                <div class="card-body bg-white">
247                  <p class="badge rounded-pill text-bg-secondary">March 2022</p>
248                  <h3 class="card-text">
249                    <a href="about-ice-hockey-ex.html" class="text-decoration-none">Ice Hockey Exercise Site</a>
250                  </h3>
251                  <p class="card-text">
252                    This is an unsolicited proof-of-concept for NHL Edge using ChartJS, Bootstrap and JQuery. It was
253                    developed in a one day hackathon session. It features a selectable video hero element and a player
254                    stats library with a simple filter function by player name.
255                  </p>
256                  <a class="btn btn-sm btn-outline-primary" href="https://marincomics.com/about-ice-hockey-ex.html"
257                    >View Project</a
258                  >
259                </div>
260              </div>
261            </div>
262
263            <div class="col">
264              <div class="card shadow-sm">
265                <a href="https://marincomics.com/project-eventradar-docs">
266                  <img
267                    src="https://marincomics.com/project-eventradar-docs/img/eventradar-header.webp"
268                    alt="EventRadar"
269                    class="card-img-top img-fluid"
270                  />
271                </a>
272                <div class="card-body bg-white">
273                  <p class="badge rounded-pill text-bg-secondary">December 2020</p>
274                  <h3 class="card-text">
275                    <a href="https://marincomics.com/project-eventradar-docs" class="text-decoration-none"
276                      >Sports Calendar Web App</a
277                    >
278                  </h3>
279                  <p class="card-text">
280                    EventRadar is a calendar of sports events, where events can be added and categorized based on
281                    sports. I have implemented a simple user registration and login, so that only signed-in users can
282                    make changes to the calendar. I developed it in PHP, Symfony, TWIG (with Bootstrap 5), and MySQL.
283                  </p>
284                  <a class="btn btn-sm btn-outline-primary" href="https://marincomics.com/project-eventradar-docs/"
285                    >View Project</a
286                  >
287                </div>
288              </div>
289            </div>
290
291            <div class="col">
292              <div class="card shadow-sm">
293                <a href="https://marincomics.com/project-adam-docs">
294                  <img
295                    src="https://marincomics.com/project-adam-docs/img/adam-header.webp"
296                    alt="ADAM, the Archive of Demo Art and Media"
297                    class="card-img-top img-fluid"
298                  />
299                </a>
300                <div class="card-body bg-white">
301                  <p class="badge rounded-pill text-bg-secondary">August 2020</p>
302                  <h3 class="card-text">
303                    <a href="https://marincomics.com/project-adam-docs" class="text-decoration-none"
304                      >Archive of Demo Art and Media</a
305                    >
306                  </h3>
307                  <p class="card-text">
308                    ADAM, the Archive of Digital Art and Media is an art archive with an Angular frontend and an API
309                    served through Express/NodeJS. I developed it as part of my master's thesis for my MA in Media Art
310                    History. The fully working prototype runs on Heroku. It features user management, editing and
311                    publishing of articles.
312                  </p>
313                  <a class="btn btn-sm btn-outline-primary" href="https://marincomics.com/project-adam-docs/"
314                    >View Project</a
315                  >
316                </div>
317              </div>
318            </div>
319          </div>
320
321          <div class="row mt-5">
322            <div class="col-md-12 text-center mb-4">
323              <a href="index.html" class="btn btn-sm btn-outline-primary">Back to Front Page</a>
324            </div>
325          </div>
326        </div>
327      </section>
328
329      <section class="album py-4 bg-white text-dark" id="cheesy">
330        <div class="container">
331          <div class="row mt-5">
332            <div class="col-md-12 text-center">
333              <img src="img/cheesystuff.webp" alt="Cheesy Stuff" class="img-fluid" />
334            </div>
335          </div>
336
337          <div class="row row-cols-1 row-cols-md-2 g-3text-dark">
338            <div class="col">
339              <div class="card shadow-sm">
340                <a href="https://marincomics.com/profireiniger-docs">
341                  <img
342                    src="/img/profireiniger-header.webp"
343                    alt="Profireiniger Cleaning Company"
344                    class="card-img-top img-fluid"
345                  />
346                </a>
347                <div class="card-body bg-white">
348                  <p class="badge rounded-pill text-bg-secondary">July 2022</p>
349                  <h3 class="card-text">
350                    <a href="https://marincomics.com/profireiniger-docs" class="text-decoration-none"
351                      >Cleaning Company Website</a
352                    >
353                  </h3>
354                  <p class="card-text">
355                    In the first phase of this project, I created a static brochure website for a cleaning company in
356                    Vienna featuring their services. In the phase is in progress to create a backoffice admin interface.
357                  </p>
358                  <a class="btn btn-sm btn-outline-primary" href="https://marincomics.com/profireiniger-docs/"
359                    >View Project</a
360                  >
361                </div>
362              </div>
363            </div>
364
365            <div class="col">
366              <div class="card shadow-sm">
367                <a href="trust-text-web-page.html">
368                  <img
369                    src="/img/pure-text-website-header.webp"
370                    alt="Pure Text Website"
371                    class="card-img-top img-fluid"
372                  />
373                </a>
374                <div class="card-body bg-white">
375                  <p class="badge rounded-pill text-bg-secondary">September 2021</p>
376                  <h3 class="card-text">
377                    <a href="trust-text-web-page.html" class="text-decoration-none">Pure Text Website</a>
378                  </h3>
379                  <p class="card-text">
380                    In the age of complex HTML and CSS, with content dynamically rendered with JavaScript and megabytes
381                    worth of images, I bring you a minimalistic page only composed of pure text. It still has large
382                    titles and a page layout.
383                  </p>
384                  <a class="btn btn-sm btn-outline-primary" href="https://marincomics.com/trust-text-web-page.html"
385                    >View Project</a
386                  >
387                </div>
388              </div>
389            </div>
390
391            <div class="col">
392              <div class="card shadow-sm">
393                <a rel="noopener noreferrer" href="s-transfer/index.html" target="_blank">
394                  <img
395                    src="/img/s-transfer-thumbnail.webp"
396                    alt="S-Transfer"
397                    class="card-img-top img-fluid"
398                  />
399                </a>
400                <div class="card-body bg-light">
401                  <p class="badge rounded-pill text-bg-secondary">June 2019</p>
402                  <h3 class="card-text">
403                    <a href="s-transfer/index.html" rel="noopener noreferrer" target="_blank" class="text-decoration-none"
404                      >S-Transfer Website</a
405                    >
406                  </h3>
407                  <p class="card-text">
408                    Nearly ten years ago, I created a website for S-Transfer. This was a local startup in Vienna for the
409                    secure transfer of data. Ultimately, the startup never took off. For me this wasn't a problem
410                    because I submitted my work as a project for a media design course I was taking.<br />
411                    <strong>(This is in German.)</strong>
412                  </p>
413                  <a class="btn btn-sm btn-outline-primary" href="s-transfer/index.html" rel="noopener noreferrer" target="_blank"
414                    >View Project</a
415                  >
416                </div>
417              </div>
418            </div>
419
420            <div class="col">
421              <div class="card shadow-sm">
422                <a rel="noopener noreferrer" href="xenon2/index.html" target="_blank">
423                  <img
424                    src="/img/xenon-2-thumbnail.webp"
425                    alt="Xenon 2: Megablast"
426                    class="card-img-top img-fluid"
427                  />
428                </a>
429                <div class="card-body bg-light">
430                  <p class="badge rounded-pill text-bg-secondary">April 2003</p>
431                  <h3 class="card-text">
432                    <a href="xenon2/index.html" class="text-decoration-none" target="_blank" rel="noopener noreferrer"
433                      >Table-based Xenon 2 Fansite</a
434                    >
435                  </h3>
436                  <p class="card-text">
437                    This is a little project from way back when I made a little fansite about the 1980s shoot 'em up
438                    game Xenon 2: Megablast. It's a table-based layout with rollover images and a lot of fun stuff. I
439                    made it in the early 2000s and it uses tables for the layout because IE needed that. It's a bit
440                    cheesy, but it's a fun little project.<br />
441                    <strong>(This is in German.)</strong>
442                  </p>
443                  <a class="btn btn-sm btn-o
443utline-primary" href="xenon2/index.html" target="_blank" rel="noopener noreferrer"
444                    >View Project</a
445                  >
446                </div>
447              </div>
448            </div>
449          </div>
450        </div>
451      </section>
452    </main>
453
454    <footer class="bg-dark text-muted p-4">
455      <div class="container">
456        <div class="row mb-4">
457          <div class="col-md-6 offset-md-3 text-center">
458            <p class="mb-1">
459              Showcase of side projects, videos and writing about the demoscene,
460              comics, computer history and development.
461            </p>
462          </div>
463        </div>
464        <div class="row">
465          <div class="col-md-4 text-center">
466            <p class="mb-1">
467              <a href="#" class="btn btn-sm btn-outline-light"
468                >Back to top</a
469              >
470            </p>
471          </div>
472          <div class="col-md-4 text-center">
473            <p class="mb-1">
474              <a
475                href="/privacy-policy.html"
476                class="btn btn-sm btn-outline-light"
477                >Privacy Policy</a
478              >
479            </p>
480          </div>
481          <div class="col-md-4 text-center">
482            <p class="mb-1">
483              <a href="/accessibility.html" class="btn btn-sm btn-outline-light">Accessibility</a>
484            </p>
485          </div>
486        </div>
487      </div>
488    </footer>
489    
489<script src="js/bootstrap.bundle.min.js"></script>
489
490    
490<script src="js/search.js"></script>
490
491    
491<script src="js/a11y.js"></script>
491
492  </body>
493</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.