1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Development & 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 & 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 & 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.