1<!DOCTYPE html> 2<html lang="de"> 3<head> 4 <!-- Title --> 5 <title>Kompetenzen | Timo Reymann</title> 6 7 <!-- Link-Tags --> 8 <link rel="icon" type="image/png" href="https://cdn.timo-reymann.de/public/img/logo/timo_reymann/logo.png"> 9 10 <!-- Meta-Tags --> 11 <meta charset="UTF-8"/> 12 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 13 <meta name="description" content="Erfahre alles über die fachlichen Kompetenzen von Timo Reymann!"/> 14 <meta name="robots" content="index, follow"/> 15 <meta name="author" content="Timo Reymann"> 16 17 <!-- DNS Preftch --> 18 <link rel="dns-prefetch" href="https://cdn.timo-reymann.de"> 19 <link rel="dns-prefetch" href="https://analytics.timo-reymann.de"> 20 <link rel="dns-prefetch" href="https://fonts.googleapis.com"> 21 22 <!-- Status-Bar Farben Android + iOS --> 23 <meta name="theme-color" content="#D65108"/> 24 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 25 26 <!-- Open Graph --> 27 <meta property="og:title" content="Kompetenzen | Timo Reymann"/> 28 <meta property="og:site_name" content="Timo Reymann"/> 29 <meta property="og:locality" content="Germany"/> 30 <meta property="og:locale" content="de_DE"/> 31 <meta property="og:url" content="https://timo-reymann.de/kompetenzen/"/> 32 <meta property="og:description" content="Erfahre alles über die fachlichen Kompetenzen von Timo Reymann!"/> 33 <meta property="og:type" content="website"> 34 <meta property="og:email" content="[email protected]"/> 35 <meta property="og:image" content="/assets/img/logo.png"/> 36 37 <!-- Twitter Card --> 38 <meta name="twitter:url" content="https://timo-reymann.de/kompetenzen/"> 39 <meta name="twitter:card" content="Erfahre alles über die fachlichen Kompetenzen von Timo Reymann!"> 40 <meta name="twitter:site" content="@timo_reymann"> 41 <meta name="twitter:title" content="Kompetenzen | Timo Reymann"> 42 <meta name="twitter:description" content="Erfahre alles über die fachlichen Kompetenzen von Timo Reymann!"> 43 <meta name="twitter:creator" content="@timo_reymann"> 44 <meta name="twitter:image" content="https://timo-reymann.de/assets/img/profil.jpeg"> 45 46 <!-- Stylesheets --> 47 <link rel="preload" href="https://cdn.timo-reymann.de/public/fontawesome/5.0.12/css/fontawesome-all.css" as="style"/> 48 <link rel="stylesheet" href="https://cdn.timo-reymann.de/public/css/release.css"> 49 <link href="/stylesheets/page.css" rel="stylesheet" /> 50 <link rel="stylesheet" href="https://cdn.timo-reymann.de/public/aos/2.3.4/aos.css"/> 51 <link href="/stylesheets/kompetenzen.css" rel="stylesheet" /> 52 53
53<script defer src="https://analytics.timo-reymann.de/script.js" data-website-id="f1447052-ef58-4dd0-bff4-2606ee4f91f2"></script>
53 54
54<script type="module" src="https://the-agent.timo-reymann.de/component.js?v=2026-07-07_2106"></script>
54 55</head> 56<body class=""> 57<section class="page-header"> 58 <div class="alert lang-alert invisible" aria-hidden="true"> 59 <span class="lang-alert--text"> 60 <strong>ð Hello there!</strong> 61 I noticed your language is not set to german. Do you want to see the english version of the page? 62 </span> 63 64 <div class="lang-alert--buttons"> 65 <button class="lang-alert--okay btn-success">Yes</button> 66 <button class="lang-alert--back btn-danger">No</button> 67 </div> 68 </div> 69 <nav class="custom"> 70 <ul class="navbar-ul"> 71 <li> 72<a href="../" class=""> <i class="fa fa-fw fa-home fa-fw "></i> Startseite 73</a> </li> 74 <li> 75<a href="/kompetenzen/" class="active"> <i class="fa fa-fw fa-list fa-fw "></i> Kompetenzen 76</a> </li> 77 <li> 78<a href="/portfolio/" class=""> <i class="fa fa-fw fa-briefcase fa-fw "></i> Portfolio 79</a> </li> 80 <li class="spacer"></li> 81 <li> 82 <a href="https://blog.timo-reymann.de/"> 83 <i class="fa fa-fw fa-pencil-alt"></i> Blog 84 </a> 85 </li> 86 </ul> 87 </nav> 88 <h1>Kompetenzen</h1> 89</section> 90<main> 91 <section id="fachlich" class="tab-pane fade in active"> 92 <h2>Fachliche Kompetenzen</h2> 93 <p> 94 Hier eine kleine Ãbersicht meiner <b>fachlichen</b> Kompetenzen, die ich natürlich ständig ausbaue. 95Die Fortschrittsbalken sollen hierbei einen groben Eindruck vermitteln, 96wo meine gröÃten Stärken liegen. 97 98 </p> 99 <div id="filters" class="text-center"> 100 <span class="badge info filter" data-category="Tool"><i class='fa fa-eye'></i> Tool</span> 101 <span class="badge info filter" data-category="Framework"><i class='fa fa-eye'></i> Framework</span> 102 <span class="badge info filter" data-category="Technologie"><i class='fa fa-eye'></i> Technology</span> 103 <span class="badge info filter" data-category="Sprache"><i class='fa fa-eye'></i> Language</span> 104 <span class="badge info filter" data-category="Platform"><i class='fa fa-eye'></i> Platform</span> 105 <span class="badge info filter" data-category="Software"><i class='fa fa-eye'></i> Software</span> 106 </div> 107 <br/> 108 <div class="grid kompetenzen-container"> 109 110 <div class="col-1-12 skill-div Docker tool" data-aos-once="true" data-aos="zoom-out"> 111 <div class="flip-container"> 112 <div class="flipper"> 113 <div class="progress front"> 114 <div class="progress-bar progress-bar-success" 115 style="width: 98%"> 116 <span> 117 <img class="img-center" loading="lazy" alt="Docker" src="https://cdn.timo-reymann.de/public/img/kompetenzen/docker.svg"> 118 </span> 119 </div> 120 </div> 121 <div class="back"> 122 <div class="back-content"> 123 <h2>Docker</h2> 124 <p>Open-Source-Software zur Isolierung von Anwendungen mit Containervirtualisierung, dies vereinfacht die Bereitstellung von Anwendungen</p> 125 </div> 126 </div> 127 </div> 128 </div> 129 </div> 130 131 <div class="col-1-12 skill-div Git tool" data-aos-once="true" data-aos="zoom-out"> 132 <div class="flip-container"> 133 <div class="flipper"> 134 <div class="progress front"> 135 <div class="progress-bar progress-bar-success" 136 style="width: 95%"> 137 <span> 138 <img class="img-center" loading="lazy" alt="Git" src="https://cdn.timo-reymann.de/public/img/kompetenzen/git.svg"> 139 </span> 140 </div> 141 </div> 142 <div class="back"> 143 <div class="back-content"> 144 <h2>Git</h2> 145 <p>Schnelle, intuitive Open-Source-Lösung aber dennoch sehr leistungsstarke Möglichkeit für die Versionsverwaltung Projekte aller GröÃen</p> 146 </div> 147 </div> 148 </div> 149 </div> 150 </div> 151 152 <div class="col-1-12 skill-div mkdocs framework" data-aos-once="true" data-aos="zoom-out"> 153 <div class="flip-container"> 154 <div class="flipper"> 155 <div class="progress front"> 156 <div class="progress-bar progress-bar-success" 157 style="width: 95%">
158 <span> 159 <img class="img-center" loading="lazy" alt="mkdocs" src="https://cdn.timo-reymann.de/public/img/kompetenzen/mkdocs.png"> 160 </span> 161 </div> 162 </div> 163 <div class="back"> 164 <div class="back-content"> 165 <h2>mkdocs</h2> 166 <p>mkdocs ist ein schneller, einfacher und auf Markdown basierender Generator für statische Websites, der für die Erstellung von Projektdokumentationen mit minimalem Einrichtungsaufwand entwickelt wurde und Themen, Plugins und eine einfache Bereitstellung bietet.</p> 167 </div> 168 </div> 169 </div> 170 </div> 171 </div> 172 173 <div class="col-1-12 skill-div Rest technologie" data-aos-once="true" data-aos="zoom-out"> 174 <div class="flip-container"> 175 <div class="flipper"> 176 <div class="progress front"> 177 <div class="progress-bar progress-bar-success" 178 style="width: 95%"> 179 <span> 180 <img class="img-center" loading="lazy" alt="Rest" src="https://cdn.timo-reymann.de/public/img/kompetenzen/rest.png"> 181 </span> 182 </div> 183 </div> 184 <div class="back"> 185 <div class="back-content"> 186 <h2>Rest</h2> 187 <p>Programmierparadigma für verteilte Systeme, insbesondere für Webservices. Abstraktion der Struktur und des Verhaltens des World Wide Web</p> 188 </div> 189 </div> 190 </div> 191 </div> 192 </div> 193 194 <div class="col-1-12 skill-div Human Rubberduck technologie" data-aos-once="true" data-aos="zoom-out"> 195 <div class="flip-container"> 196 <div class="flipper"> 197 <div class="progress front"> 198 <div class="progress-bar progress-bar-success" 199 style="width: 95%"> 200 <span> 201 <img class="img-center" loading="lazy" alt="Human Rubberduck" src="https://cdn.timo-reymann.de/public/img/kompetenzen/rubber_duck.svg"> 202 </span> 203 </div> 204 </div> 205 <div class="back"> 206 <div class="back-content"> 207 <h2>Human Rubberduck</h2> 208 <p>Eine Methode des Debuggens von Code bei der man das Problem mündlich oder schriftlich ausführt</p> 209 </div> 210 </div> 211 </div> 212 </div> 213 </div> 214 215 <div class="col-1-12 skill-div Bash sprache" data-aos-once="true" data-aos="zoom-out"> 216 <div class="flip-container"> 217 <div class="flipper"> 218 <div class="progress front"> 219 <div class="progress-bar progress-bar-success" 220 style="width: 90%"> 221 <span> 222 <img class="img-center" loading="lazy" alt="Bash" src="https://cdn.timo-reymann.de/public/img/kompetenzen/bash.svg"> 223 </span> 224 </div> 225 </div> 226 <div class="back"> 227 <div class="back-content"> 228 <h2>Bash</h2> 229 <p>Die Bash ist ein mächtiger Interpreter für Befehle, der unter anderem auch für Skripte genutzt werden kann zu Automatisierung und vieles mehr</p> 230 </div> 231 </div> 232 </div> 233 </div> 234 </div> 235 236 <div class="col-1-12 skill-div GitHub platform" data-aos-once="true" data-aos="zoom-out"> 237 <div class="flip-container"> 238 <div class="flipper"> 239 <div class="progress front"> 240 <div class="progress-bar progress-bar-success" 241 style="width: 90%"> 242 <span> 243 <img class="img-center" loading="lazy" alt="GitHub" src="https://cdn.timo-reymann.de/public/img/kompetenzen/github.png"> 244 </span> 245 </div> 246 </div> 247 <div class="back"> 248 <div class="back-content"> 249 <h2>GitHub</h2> 250 <p>GitHub ist eine Platform für Code-Hosting, Versionskontrolle und Kollobaration</p> 251 </div> 252 </div> 253 </div> 254 </div> 255 </div> 256 257 <div class="col-1-12 skill-div Gitlab platform" data-aos-once="true" data-aos="zoom-out"> 258 <div class="flip-container"> 259 <div class="flipper"> 260 <div class="progress front"> 261 <div class="progress-bar progress-bar-success" 262 style="width: 90%">
263 <span> 264 <img class="img-center" loading="lazy" alt="Gitlab" src="https://cdn.timo-reymann.de/public/img/kompetenzen/gitlab.svg"> 265 </span> 266 </div> 267 </div> 268 <div class="back"> 269 <div class="back-content"> 270 <h2>Gitlab</h2> 271 <p>Sofware für Projektplanung, Source-Code-Management und CI/CD</p> 272 </div> 273 </div> 274 </div> 275 </div> 276 </div> 277 278 <div class="col-1-12 skill-div Go sprache" data-aos-once="true" data-aos="zoom-out"> 279 <div class="flip-container"> 280 <div class="flipper"> 281 <div class="progress front"> 282 <div class="progress-bar progress-bar-success" 283 style="width: 90%"> 284 <span> 285 <img class="img-center" loading="lazy" alt="Go" src="https://cdn.timo-reymann.de/public/img/kompetenzen/golang-colored.svg"> 286 </span> 287 </div> 288 </div> 289 <div class="back"> 290 <div class="back-content"> 291 <h2>Go</h2> 292 <p>Go ist eine kompilierbare Programmiersprache, die über Multithreading und GC verfügt. Entwickelt wurde sie initial von Mitarbeitern bei Google</p> 293 </div> 294 </div> 295 </div> 296 </div> 297 </div> 298 299 <div class="col-1-12 skill-div HTML5 sprache" data-aos-once="true" data-aos="zoom-out"> 300 <div class="flip-container"> 301 <div class="flipper"> 302 <div class="progress front"> 303 <div class="progress-bar progress-bar-success" 304 style="width: 90%"> 305 <span> 306 <img class="img-center" loading="lazy" alt="HTML5" src="https://cdn.timo-reymann.de/public/img/kompetenzen/html5.svg "> 307 </span> 308 </div> 309 </div> 310 <div class="back"> 311 <div class="back-content"> 312 <h2>HTML5</h2> 313 <p>Perfekt Basis für moderne Websites, native Apps und vieles mehr</p> 314 </div> 315 </div> 316 </div> 317 </div> 318 </div> 319 320 <div class="col-1-12 skill-div Python sprache" data-aos-once="true" data-aos="zoom-out"> 321 <div class="flip-container"> 322 <div class="flipper"> 323 <div class="progress front"> 324 <div class="progress-bar progress-bar-success" 325 style="width: 90%"> 326 <span> 327 <img class="img-center" loading="lazy" alt="Python" src="https://cdn.timo-reymann.de/public/img/kompetenzen/python.svg"> 328 </span> 329 </div> 330 </div> 331 <div class="back"> 332 <div class="back-content"> 333 <h2>Python</h2> 334 <p>Eine interpretierte Programmiersprache die objektorientiert, aber auch funktional genutzt werden kann, performant und plattformunabhängig</p> 335 </div> 336 </div> 337 </div> 338 </div> 339 </div> 340 341 <div class="col-1-12 skill-div Backstage platform" data-aos-once="true" data-aos="zoom-out"> 342 <div class="flip-container"> 343 <div class="flipper"> 344 <div class="progress front"> 345 <div class="progress-bar progress-bar-success" 346 style="width: 80%"> 347 <span> 348 <img class="img-center" loading="lazy" alt="Backstage" src="https://cdn.timo-reymann.de/public/img/kompetenzen/backstage.svg"> 349 </span> 350 </div> 351 </div> 352 <div class="back"> 353 <div class="back-content"> 354 <h2>Backstage</h2> 355 <p>Durch den Einsatz von Backstage werden zentrale Developer-Portale aufgebaut, in denen Dokumentation, Services und Tools gebündelt werden. Dadurch wird die Transparenz erhöht, das Onboarding beschleunigt und die Zusammenarbeit im Team optimiert.</p> 356 </div> 357 </div> 358 </div> 359 </div> 360 </div> 361 362 <div class="col-1-12 skill-div CircleCI platform" data-aos-once="true" data-aos="zoom-out"> 363 <div class="flip-container"> 364 <div class="flipper"> 365 <div class="progress front"> 366 <div class="progress-bar progress-bar-success" 367 style="width: 80%">
368 <span> 369 <img class="img-center" loading="lazy" alt="CircleCI" src="https://cdn.timo-reymann.de/public/img/kompetenzen/circleci.png"> 370 </span> 371 </div> 372 </div> 373 <div class="back"> 374 <div class="back-content"> 375 <h2>CircleCI</h2> 376 <p>CircleCI ist eine CI und CD platform die dafür genutzt werden kann DevOps Pratiken zu implementieren</p> 377 </div> 378 </div> 379 </div> 380 </div> 381 </div> 382 383 <div class="col-1-12 skill-div SQL sprache" data-aos-once="true" data-aos="zoom-out"> 384 <div class="flip-container"> 385 <div class="flipper"> 386 <div class="progress front"> 387 <div class="progress-bar progress-bar-success" 388 style="width: 80%"> 389 <span> 390 <img class="img-center" loading="lazy" alt="SQL" src="https://cdn.timo-reymann.de/public/img/kompetenzen/sql.svg"> 391 </span> 392 </div> 393 </div> 394 <div class="back"> 395 <div class="back-content"> 396 <h2>SQL</h2> 397 <p>Diese Abfragesprache ist ein Standard für viele Datenbanksysteme und existiert bereits seit 1970</p> 398 </div> 399 </div> 400 </div> 401 </div> 402 </div> 403 404 <div class="col-1-12 skill-div Java sprache" data-aos-once="true" data-aos="zoom-out"> 405 <div class="flip-container"> 406 <div class="flipper"> 407 <div class="progress front"> 408 <div class="progress-bar progress-bar-success" 409 style="width: 75%"> 410 <span> 411 <img class="img-center" loading="lazy" alt="Java" src="https://cdn.timo-reymann.de/public/img/kompetenzen/java.svg"> 412 </span> 413 </div> 414 </div> 415 <div class="back"> 416 <div class="back-content"> 417 <h2>Java</h2> 418 <p>Eine objektorientierte typsichere Sprache die auf allen gängigen Plattformen ausgeführt werden kann</p> 419 </div> 420 </div> 421 </div> 422 </div> 423 </div> 424 425 <div class="col-1-12 skill-div JavaScript sprache" data-aos-once="true" data-aos="zoom-out"> 426 <div class="flip-container"> 427 <div class="flipper"> 428 <div class="progress front"> 429 <div class="progress-bar progress-bar-success" 430 style="width: 75%"> 431 <span> 432 <img class="img-center" loading="lazy" alt="JavaScript" src="https://cdn.timo-reymann.de/public/img/kompetenzen/javascript.svg"> 433 </span> 434 </div> 435 </div> 436 <div class="back"> 437 <div class="back-content"> 438 <h2>JavaScript</h2> 439 <p>Diese Skriptsprache, ermöglicht asynchrone Programmierung beim Client, jedoch verwendet man meist bei gröÃeren Anwendungen ein Framework</p> 440 </div> 441 </div> 442 </div> 443 </div> 444 </div> 445 446 <div class="col-1-12 skill-div Linux software" data-aos-once="true" data-aos="zoom-out"> 447 <div class="flip-container"> 448 <div class="flipper"> 449 <div class="progress front"> 450 <div class="progress-bar progress-bar-success" 451 style="width: 75%"> 452 <span> 453 <img class="img-center" loading="lazy" alt="Linux" src="https://cdn.timo-reymann.de/public/img/kompetenzen/linux.svg"> 454 </span> 455 </div> 456 </div> 457 <div class="back"> 458 <div class="back-content"> 459 <h2>Linux</h2> 460 <p>Auf über 86 Millionen Maschinen läuft Linux, dabei überzeugen die Linux-Distributionen durch Geschwindigkeit und Sicherheit</p> 461 </div> 462 </div> 463 </div> 464 </div> 465 </div> 466 467 <div class="col-1-12 skill-div NGINX software" data-aos-once="true" data-aos="zoom-out"> 468 <div class="flip-container"> 469 <div class="flipper"> 470 <div class="progress front"> 471 <div class="progress-bar progress-bar-success" 472 style="width: 75%">
473 <span> 474 <img class="img-center" loading="lazy" alt="NGINX" src="https://cdn.timo-reymann.de/public/img/kompetenzen/nginx.svg"> 475 </span> 476 </div> 477 </div> 478 <div class="back"> 479 <div class="back-content"> 480 <h2>NGINX</h2> 481 <p>Nginx bietet die Grundlage für über 46,7% der Top 10.000 Websites weltweit, wegen seiner rapiden Geschwindigkeit und extrem hohen Sicherheit</p> 482 </div> 483 </div> 484 </div> 485 </div> 486 </div> 487 488 <div class="col-1-12 skill-div Traefik tool" data-aos-once="true" data-aos="zoom-out"> 489 <div class="flip-container"> 490 <div class="flipper"> 491 <div class="progress front"> 492 <div class="progress-bar progress-bar-success" 493 style="width: 75%"> 494 <span> 495 <img class="img-center" loading="lazy" alt="Traefik" src="https://cdn.timo-reymann.de/public/img/kompetenzen/traefik.png"> 496 </span> 497 </div> 498 </div> 499 <div class="back"> 500 <div class="back-content"> 501 <h2>Traefik</h2> 502 <p>Traefik ist der weltweit beliebteste Cloud-native Application Networking Stack, der komplexes und dynamisches Loadbalancing mit Docker und Cloud ermöglicht.</p> 503 </div> 504 </div> 505 </div> 506 </div> 507 </div> 508 509 <div class="col-1-12 skill-div CSS3 sprache" data-aos-once="true" data-aos="zoom-out"> 510 <div class="flip-container"> 511 <div class="flipper"> 512 <div class="progress front"> 513 <div class="progress-bar progress-bar-success" 514 style="width: 70%"> 515 <span> 516 <img class="img-center" loading="lazy" alt="CSS3" src="https://cdn.timo-reymann.de/public/img/kompetenzen/css3.svg"> 517 </span> 518 </div> 519 </div> 520 <div class="back"> 521 <div class="back-content"> 522 <h2>CSS3</h2> 523 <p>Responsive Design und Animationen ohne JavaScript wären ohne diese Technologie kaum vorstellbar</p> 524 </div> 525 </div> 526 </div> 527 </div> 528 </div> 529 530 <div class="col-1-12 skill-div React framework" data-aos-once="true" data-aos="zoom-out"> 531 <div class="flip-container"> 532 <div class="flipper"> 533 <div class="progress front"> 534 <div class="progress-bar progress-bar-success" 535 style="width: 70%"> 536 <span> 537 <img class="img-center" loading="lazy" alt="React" src="https://cdn.timo-reymann.de/public/img/kompetenzen/react.svg?v=1"> 538 </span> 539 </div> 540 </div> 541 <div class="back"> 542 <div class="back-content"> 543 <h2>React</h2> 544 <p>React ist eine JavaScript-Bibliothek zur Erstellung interaktiver Benutzeroberflächen â komponentenbasiert, flexibel und weit verbreitet im modernen Web.</p> 545 </div> 546 </div> 547 </div> 548 </div> 549 </div> 550 551 <div class="col-1-12 skill-div Terraform / OpenTofu tool" data-aos-once="true" data-aos="zoom-out"> 552 <div class="flip-container"> 553 <div class="flipper"> 554 <div class="progress front"> 555 <div class="progress-bar progress-bar-success" 556 style="width: 70%"> 557 <span> 558 <img class="img-center" loading="lazy" alt="Terraform / OpenTofu" src="https://cdn.timo-reymann.de/public/img/kompetenzen/terraform.svg?v=1"> 559 </span> 560 </div> 561 </div> 562 <div class="back"> 563 <div class="back-content"> 564 <h2>Terraform / OpenTofu</h2> 565 <p>
565Ermöglicht Infrastructure as Code und setzt dabei auf die HashiCorp-Config-Sprache</p> 566 </div> 567 </div> 568 </div> 569 </div> 570 </div> 571 572 <div class="col-1-12 skill-div Kubernetes platform" data-aos-once="true" data-aos="zoom-out"> 573 <div class="flip-container"> 574 <div class="flipper"> 575 <div class="progress front"> 576 <div class="progress-bar progress-bar-success" 577 style="width: 65%"> 578 <span> 579 <img class="img-center" loading="lazy" alt="Kubernetes" src="https://cdn.timo-reymann.de/public/img/kompetenzen/kubernetes.svg"> 580 </span> 581 </div> 582 </div> 583 <div class="back"> 584 <div class="back-content"> 585 <h2>Kubernetes</h2> 586 <p>Ein Open-Source-System zur Automatisierung der Bereitstellung, Skalierung und Verwaltung von Containern. Eine Plattform für Plattformen.</p> 587 </div> 588 </div> 589 </div> 590 </div> 591 </div> 592 593 <div class="col-1-12 skill-div Next.js framework" data-aos-once="true" data-aos="zoom-out"> 594 <div class="flip-container"> 595 <div class="flipper"> 596 <div class="progress front"> 597 <div class="progress-bar progress-bar-success" 598 style="width: 65%"> 599 <span> 600 <img class="img-center" loading="lazy" alt="Next.js" src="https://cdn.timo-reymann.de/public/img/kompetenzen/nextjs.svg"> 601 </span> 602 </div> 603 </div> 604 <div class="back"> 605 <div class="back-content"> 606 <h2>Next.js</h2> 607 <p>Next.js ist ein React-Framework für die Entwicklung moderner Webanwendungen â mit Features wie Server-Side Rendering, statischer Generierung und API-Routen out of the box.</p> 608 </div> 609 </div> 610 </div> 611 </div> 612 </div> 613 614 <div class="col-1-12 skill-div NodeJS framework" data-aos-once="true" data-aos="zoom-out"> 615 <div class="flip-container"> 616 <div class="flipper"> 617 <div class="progress front"> 618 <div class="progress-bar progress-bar-success" 619 style="width: 65%"> 620 <span> 621 <img class="img-center" loading="lazy" alt="NodeJS" src="https://cdn.timo-reymann.de/public/img/kompetenzen/nodejs.svg"> 622 </span> 623 </div> 624 </div> 625 <div class="back"> 626 <div class="back-content"> 627 <h2>NodeJS</h2> 628 <p>Schnelle und effiziente Runtime auf Basis von Chromes V8 JavaScript engine. Event- und I/O-basiert. Perfekt für asynchrone Echtzeitanwendungen!</p> 629 </div> 630 </div> 631 </div> 632 </div> 633 </div> 634 635 <div class="col-1-12 skill-div Grafana tool" data-aos-once="true" data-aos="zoom-out"> 636 <div class="flip-container"> 637 <div class="flipper"> 638 <div class="progress front"> 639 <div class="progress-bar progress-bar-success" 640 style="width: 60%"> 641 <span> 642 <img class="img-center" loading="lazy" alt="Grafana" src="https://cdn.timo-reymann.de/public/img/kompetenzen/grafana.svg"> 643 </span> 644 </div> 645 </div> 646 <div class="back"> 647 <div class="back-content"> 648 <h2>Grafana</h2> 649 <p>Mit Grafana werden Dashboards und Observability-Lösungen erstellt, die Metriken, Logs und Traces zentral visualisieren â für eine verbesserte Ãberwachung, schnellere Fehleranalyse und datengetriebene Entscheidungen im Team.</p> 650 </div> 651 </div> 652 </div> 653 </div> 654 </div> 655 656 <div class="col-1-12 skill-div Helm tool" data-aos-once="true" data-aos="zoom-out"> 657 <div class="flip-container"> 658 <div class="flipper"> 659 <div class="progress front"> 660 <div class="progress-bar progress-bar-success" 661 style="width: 60%">
662 <span> 663 <img class="img-center" loading="lazy" alt="Helm" src="https://cdn.timo-reymann.de/public/img/kompetenzen/helm.svg"> 664 </span> 665 </div> 666 </div> 667 <div class="back"> 668 <div class="back-content"> 669 <h2>Helm</h2> 670 <p>Paketmanager für Kubernetes</p> 671 </div> 672 </div> 673 </div> 674 </div> 675 </div> 676 677 <div class="col-1-12 skill-div Kotlin sprache" data-aos-once="true" data-aos="zoom-out"> 678 <div class="flip-container"> 679 <div class="flipper"> 680 <div class="progress front"> 681 <div class="progress-bar progress-bar-success" 682 style="width: 60%"> 683 <span> 684 <img class="img-center" loading="lazy" alt="Kotlin" src="https://cdn.timo-reymann.de/public/img/kompetenzen/kotlin.svg"> 685 </span> 686 </div> 687 </div> 688 <div class="back"> 689 <div class="back-content"> 690 <h2>Kotlin</h2> 691 <p>Kotlin ist eine statisch typisierte Programmiersprache von JetBrains, die in Bytecode für die JVM übersetzt wird</p> 692 </div> 693 </div> 694 </div> 695 </div> 696 </div> 697 698 <div class="col-1-12 skill-div TypeScript sprache" data-aos-once="true" data-aos="zoom-out"> 699 <div class="flip-container"> 700 <div class="flipper"> 701 <div class="progress front"> 702 <div class="progress-bar progress-bar-success" 703 style="width: 60%"> 704 <span> 705 <img class="img-center" loading="lazy" alt="TypeScript" src="https://cdn.timo-reymann.de/public/img/kompetenzen/ts.svg"> 706 </span> 707 </div> 708 </div> 709 <div class="back"> 710 <div class="back-content"> 711 <h2>TypeScript</h2> 712 <p>Diese Programmiersprache greift den ECMAScript-6-Standard auf und erweitert diesen zusätzlich um Datentypen und kompiliert zu JavaScript</p> 713 </div> 714 </div> 715 </div> 716 </div> 717 </div> 718 719 <div class="col-1-12 skill-div ArgoCD tool" data-aos-once="true" data-aos="zoom-out"> 720 <div class="flip-container"> 721 <div class="flipper"> 722 <div class="progress front"> 723 <div class="progress-bar progress-bar-success" 724 style="width: 55%"> 725 <span> 726 <img class="img-center" loading="lazy" alt="ArgoCD" src="https://cdn.timo-reymann.de/public/img/kompetenzen/argocd.svg"> 727 </span> 728 </div> 729 </div> 730 <div class="back"> 731 <div class="back-content"> 732 <h2>ArgoCD</h2> 733 <p>GitOps-Tool für Kubernetes zur kontinuierlichen Bereitstellung</p> 734 </div> 735 </div> 736 </div> 737 </div> 738 </div> 739 740 <div class="col-1-12 skill-div C# sprache" data-aos-once="true" data-aos="zoom-out"> 741 <div class="flip-container"> 742 <div class="flipper"> 743 <div class="progress front"> 744 <div class="progress-bar progress-bar-success" 745 style="width: 55%"> 746 <span> 747 <img class="img-center" loading="lazy" alt="C#" src="https://cdn.timo-reymann.de/public/img/kompetenzen/csharp.svg"> 748 </span> 749 </div> 750 </div> 751 <div class="back"> 752 <div class="back-content"> 753 <h2>C#</h2> 754 <p>Typsichere objektorientierte Programmiersprache die seit 2001 von Microsoft betreut und entwickelt wird und plattformunabhängig arbeitet</p> 755 </div> 756 </div> 757 </div> 758 </div> 759 </div> 760 761 <div class="col-1-12 skill-div Prometheus software" data-aos-once="true" data-aos="zoom-out"> 762 <div class="flip-container"> 763 <div class="flipper"> 764 <div class="progress front"> 765 <div class="progress-bar progress-bar-success" 766 style="width: 55%">
767 <span> 768 <img class="img-center" loading="lazy" alt="Prometheus" src="https://cdn.timo-reymann.de/public/img/kompetenzen/prometheus.svg"> 769 </span> 770 </div> 771 </div> 772 <div class="back"> 773 <div class="back-content"> 774 <h2>Prometheus</h2> 775 <p>Prometheus ist eine Open-Source-Lösung zur Ereignisüberwachung und -warnung</p> 776 </div> 777 </div> 778 </div> 779 </div> 780 </div> 781 782 <div class="col-1-12 skill-div Responsive Design technologie" data-aos-once="true" data-aos="zoom-out"> 783 <div class="flip-container"> 784 <div class="flipper"> 785 <div class="progress front"> 786 <div class="progress-bar progress-bar-success" 787 style="width: 55%"> 788 <span> 789 <img class="img-center" loading="lazy" alt="Responsive Design" src="https://cdn.timo-reymann.de/public/img/kompetenzen/responsive.svg"> 790 </span> 791 </div> 792 </div> 793 <div class="back"> 794 <div class="back-content"> 795 <h2>Responsive Design</h2> 796 <p>Responsive Design bezeichnet die Gestaltung einer Website für Tablet, Smartphone und PC, die sich ohne wenn und aber anpasst</p> 797 </div> 798 </div> 799 </div> 800 </div> 801 </div> 802 803 <div class="col-1-12 skill-div AWS platform" data-aos-once="true" data-aos="zoom-out"> 804 <div class="flip-container"> 805 <div class="flipper"> 806 <div class="progress front"> 807 <div class="progress-bar progress-bar-success" 808 style="width: 50%"> 809 <span> 810 <img class="img-center" loading="lazy" alt="AWS" src="https://cdn.timo-reymann.de/public/img/kompetenzen/aws.svg"> 811 </span> 812 </div> 813 </div> 814 <div class="back"> 815 <div class="back-content"> 816 <h2>AWS</h2> 817 <p>Der führende Cloud-Anbieter. Unter den Skills sind hier Services & Konzepte zu verstehen</p> 818 </div> 819 </div> 820 </div> 821 </div> 822 </div> 823 824 <div class="col-1-12 skill-div GraphQL technologie" data-aos-once="true" data-aos="zoom-out"> 825 <div class="flip-container"> 826 <div class="flipper"> 827 <div class="progress front"> 828 <div class="progress-bar progress-bar-success" 829 style="width: 50%"> 830 <span> 831 <img class="img-center" loading="lazy" alt="GraphQL" src="https://cdn.timo-reymann.de/public/img/kompetenzen/graphql.svg"> 832 </span> 833 </div> 834 </div> 835 <div class="back"> 836 <div class="back-content"> 837 <h2>GraphQL</h2> 838 <p>GraphQL ist eine Open-Source-Datenabfrage- und -manipulationssprache und eine Laufzeitumgebung zum Ausführen von Abfragen mit vorhandenen Daten</p> 839 </div> 840 </div> 841 </div> 842 </div> 843 </div> 844 845 <div class="col-1-12 skill-div PHP sprache" data-aos-once="true" data-aos="zoom-out"> 846 <div class="flip-container"> 847 <div class="flipper"> 848 <div class="progress front"> 849 <div class="progress-bar progress-bar-success" 850 style="width: 50%"> 851 <span> 852 <img class="img-center" loading="lazy" alt="PHP" src="https://cdn.timo-reymann.de/public/img/kompetenzen/php.svg"> 853 </span> 854 </div> 855 </div> 856 <div class="back"> 857 <div class="back-content"> 858 <h2>PHP</h2> 859 <p>Eine freie Skriptsprache, hauptsächlich zum erstellen moderner Webanwendungen und dynamischer Websites. Eingesetzt auf über 80 % der Web-Server global</p> 860 </div> 861 </div> 862 </div> 863 </div> 864 </div> 865 866 <div class="col-1-12 skill-div Spring Boot framework" data-aos-once="true" data-aos="zoom-out"> 867 <div class="flip-container"> 868 <div class="flipper"> 869 <div class="progress front"> 870 <div class="progress-bar progress-bar-success" 871 style="width: 50%">
872 <span> 873 <img class="img-center" loading="lazy" alt="Spring Boot" src="https://cdn.timo-reymann.de/public/img/kompetenzen/spring.svg"> 874 </span> 875 </div> 876 </div> 877 <div class="back"> 878 <div class="back-content"> 879 <h2>Spring Boot</h2> 880 <p>Ermöglicht es einfach Spring-basierte produktionsfertige Anwendungen und Dienste mit minimalen Aufwand zu erstellen</p> 881 </div> 882 </div> 883 </div> 884 </div> 885 </div> 886 887 <div class="col-1-12 skill-div Rust sprache" data-aos-once="true" data-aos="zoom-out"> 888 <div class="flip-container"> 889 <div class="flipper"> 890 <div class="progress front"> 891 <div class="progress-bar progress-bar-success" 892 style="width: 45%"> 893 <span> 894 <img class="img-center" loading="lazy" alt="Rust" src="https://cdn.timo-reymann.de/public/img/kompetenzen/rust.png"> 895 </span> 896 </div> 897 </div> 898 <div class="back"> 899 <div class="back-content"> 900 <h2>Rust</h2> 901 <p>Rust ist eine moderne Systemprogrammiersprache, die auf Sicherheit, Geschwindigkeit und Nebenläufigkeit ausgelegt ist. Sie verhindert Speicherfehler ohne Garbage Collector und wird zum Erstellen zuverlässiger und effizienter Software verwendet.</p> 902 </div> 903 </div> 904 </div> 905 </div> 906 </div> 907 908 <div class="col-1-12 skill-div Maven tool" data-aos-once="true" data-aos="zoom-out"> 909 <div class="flip-container"> 910 <div class="flipper"> 911 <div class="progress front"> 912 <div class="progress-bar progress-bar-success" 913 style="width: 35%"> 914 <span> 915 <img class="img-center" loading="lazy" alt="Maven" src="https://cdn.timo-reymann.de/public/img/kompetenzen/maven.svg"> 916 </span> 917 </div> 918 </div> 919 <div class="back"> 920 <div class="back-content"> 921 <h2>Maven</h2> 922 <p>Build-Management-Tool um Java-Programme standardisiert zu builden und Abhängigkeiten zu verwalten</p> 923 </div> 924 </div> 925 </div> 926 </div> 927 </div> 928 929 <div class="col-1-12 skill-div Sass sprache" data-aos-once="true" data-aos="zoom-out"> 930 <div class="flip-container"> 931 <div class="flipper"> 932 <div class="progress front"> 933 <div class="progress-bar progress-bar-success" 934 style="width: 35%"> 935 <span> 936 <img class="img-center" loading="lazy" alt="Sass" src="https://cdn.timo-reymann.de/public/img/kompetenzen/sass.svg"> 937 </span> 938 </div> 939 </div> 940 <div class="back"> 941 <div class="back-content"> 942 <h2>Sass</h2> 943 <p>Dieser CSS-Präprozessor macht CSS-Code leichter zu warten und kann HTTP-Requests durch spezielle Features einsparen</p> 944 </div> 945 </div> 946 </div> 947 </div> 948 </div> 949 950 <div class="col-1-12 skill-div Ansible tool" data-aos-once="true" data-aos="zoom-out"> 951 <div class="flip-container"> 952 <div class="flipper"> 953 <div class="progress front"> 954 <div class="progress-bar progress-bar-success" 955 style="width: 33%"> 956 <span> 957 <img class="img-center" loading="lazy" alt="Ansible" src="https://cdn.timo-reymann.de/public/img/kompetenzen/ansible.svg"> 958 </span> 959 </div> 960 </div> 961 <div class="back"> 962 <div class="back-content"> 963 <h2>Ansible</h2> 964 <p>Ermöglicht die Automatisierung der Provisionierung von IT-Infrastruktur</p> 965 </div> 966 </div> 967 </div> 968 </div> 969 </div> 970 971 <div class="col-1-12 skill-div Suchmaschinenoptimierung technologie" data-aos-once="true" data-aos="zoom-out"> 972 <div class="flip-container"> 973 <div class="flipper"> 974 <div class="progress front"> 975 <div class="progress-bar progress-bar-success" 976 style="width: 33%">
977 <span> 978 <img class="img-center" loading="lazy" alt="Suchmaschinenoptimierung" src="https://cdn.timo-reymann.de/public/img/kompetenzen/seo.svg"> 979 </span> 980 </div> 981 </div> 982 <div class="back"> 983 <div class="back-content"> 984 <h2>Suchmaschinenoptimierung</h2> 985 <p>Suchmaschinenoptimierung ist wichtiger denje, viele Websiten werden meist nicht direkt, sondern über Google & Co aufgerufen</p> 986 </div> 987 </div> 988 </div> 989 </div> 990 </div> 991 992 <div class="col-1-12 skill-div Composer tool" data-aos-once="true" data-aos="zoom-out"> 993 <div class="flip-container"> 994 <div class="flipper"> 995 <div class="progress front"> 996 <div class="progress-bar progress-bar-success" 997 style="width: 30%"> 998 <span> 999 <img class="img-center" loading="lazy" alt="Composer" src="https://cdn.timo-reymann.de/public/img/kompetenzen/composer.svg?v=1"> 1000 </span> 1001 </div> 1002 </div> 1003 <div class="back"> 1004 <div class="back-content"> 1005 <h2>Composer</h2> 1006 <p>Anwendungsorientierter Paketmanager für PHP</p> 1007 </div> 1008 </div> 1009 </div> 1010 </div> 1011 </div> 1012 1013 <div class="col-1-12 skill-div Keycloak software" data-aos-once="true" data-aos="zoom-out"> 1014 <div class="flip-container"> 1015 <div class="flipper"> 1016 <div class="progress front"> 1017 <div class="progress-bar progress-bar-success" 1018 style="width: 30%"> 1019 <span> 1020 <img class="img-center" loading="lazy" alt="Keycloak" src="https://cdn.timo-reymann.de/public/img/kompetenzen/keycloak.svg"> 1021 </span> 1022 </div> 1023 </div> 1024 <div class="back"> 1025 <div class="back-content"> 1026 <h2>Keycloak</h2> 1027 <p>Keycloak ist eine Open-Source-Software, die Red Hat als Implementierung von OpenID Connect veröffentlicht hat. Entwickler können sie einfach und flexibel</p> 1028 </div> 1029 </div> 1030 </div> 1031 </div> 1032 </div> 1033 1034 <div class="col-1-12 skill-div MongoDB software" data-aos-once="true" data-aos="zoom-out"> 1035 <div class="flip-container"> 1036 <div class="flipper"> 1037 <div class="progress front"> 1038 <div class="progress-bar progress-bar-success" 1039 style="width: 30%"> 1040 <span> 1041 <img class="img-center" loading="lazy" alt="MongoDB" src="https://cdn.timo-reymann.de/public/img/kompetenzen/mongo.png"> 1042 </span> 1043 </div> 1044 </div> 1045 <div class="back"> 1046 <div class="back-content"> 1047 <h2>MongoDB</h2> 1048 <p>Die am weitesten verbreitete NoSQL-Datenbank</p> 1049 </div> 1050 </div> 1051 </div> 1052 </div> 1053 </div> 1054 1055 <div class="col-1-12 skill-div Slim framework" data-aos-once="true" data-aos="zoom-out"> 1056 <div class="flip-container"> 1057 <div class="flipper"> 1058 <div class="progress front"> 1059 <div class="progress-bar progress-bar-success" 1060 style="width: 30%"> 1061 <span> 1062 <img class="img-center" loading="lazy" alt="Slim" src="https://cdn.timo-reymann.de/public/img/kompetenzen/slim.png"> 1063 </span> 1064 </div> 1065 </div> 1066 <div class="back"> 1067 <div class="back-content"> 1068 <h2>Slim</h2> 1069 <p>PHP Mikro Framework, welches es ermöglicht schnell sehr performante und groÃe Anwendungen und APIs zu erstellen</p> 1070 </div> 1071 </div> 1072 </div> 1073 </div> 1074 </div> 1075 1076 <div class="col-1-12 skill-div Vue framework" data-aos-once="true" data-aos="zoom-out"> 1077 <div class="flip-container"> 1078 <div class="flipper"> 1079 <div class="progress front"> 1080 <div class="progress-bar progress-bar-success" 1081 style="width: 30%">
1082 <span> 1083 <img class="img-center" loading="lazy" alt="Vue" src="https://cdn.timo-reymann.de/public/img/kompetenzen/vue.svg"> 1084 </span> 1085 </div> 1086 </div> 1087 <div class="back"> 1088 <div class="back-content"> 1089 <h2>Vue</h2> 1090 <p>Clientseitiges JavaScript-Webframework zum Erstellen von Single-Page-Webanwendungen nach dem MVVM-Muster</p> 1091 </div> 1092 </div> 1093 </div> 1094 </div> 1095 </div> 1096 1097 <div class="col-1-12 skill-div Webpack tool" data-aos-once="true" data-aos="zoom-out"> 1098 <div class="flip-container"> 1099 <div class="flipper"> 1100 <div class="progress front"> 1101 <div class="progress-bar progress-bar-success" 1102 style="width: 30%"> 1103 <span> 1104 <img class="img-center" loading="lazy" alt="Webpack" src="https://cdn.timo-reymann.de/public/img/kompetenzen/webpack.svg"> 1105 </span> 1106 </div> 1107 </div> 1108 <div class="back"> 1109 <div class="back-content"> 1110 <h2>Webpack</h2> 1111 <p>Bundling-Tool für Assets wie CSS, JS und Bilder um die Ladezeiten zu beschleunigen</p> 1112 </div> 1113 </div> 1114 </div> 1115 </div> 1116 </div> 1117 1118 <div class="col-1-12 skill-div Bootstrap framework" data-aos-once="true" data-aos="zoom-out"> 1119 <div class="flip-container"> 1120 <div class="flipper"> 1121 <div class="progress front"> 1122 <div class="progress-bar progress-bar-success" 1123 style="width: 29%"> 1124 <span> 1125 <img class="img-center" loading="lazy" alt="Bootstrap" src="https://cdn.timo-reymann.de/public/img/kompetenzen/bootstrap.svg"> 1126 </span> 1127 </div> 1128 </div> 1129 <div class="back"> 1130 <div class="back-content"> 1131 <h2>Bootstrap</h2> 1132 <p>Hervorragende Grundlage für Websiten, Web-Apps und native Entwicklung. Responsive und gut getestet</p> 1133 </div> 1134 </div> 1135 </div> 1136 </div> 1137 </div> 1138 1139 <div class="col-1-12 skill-div Vuetify framework" data-aos-once="true" data-aos="zoom-out"> 1140 <div class="flip-container"> 1141 <div class="flipper"> 1142 <div class="progress front"> 1143 <div class="progress-bar progress-bar-success" 1144 style="width: 27%"> 1145 <span> 1146 <img class="img-center" loading="lazy" alt="Vuetify" src="https://cdn.timo-reymann.de/public/img/kompetenzen/vuetify.webp"> 1147 </span> 1148 </div> 1149 </div> 1150 <div class="back"> 1151 <div class="back-content"> 1152 <h2>Vuetify</h2> 1153 <p>Framework zur effizienten Erstellung von Vue.js Anwendungen auf Basis des Material Design-Konzept</p> 1154 </div> 1155 </div> 1156 </div> 1157 </div> 1158 </div> 1159 1160 <div class="col-1-12 skill-div IBM i5 iSeries for Business software" data-aos-once="true" data-aos="zoom-out"> 1161 <div class="flip-container"> 1162 <div class="flipper"> 1163 <div class="progress front"> 1164 <div class="progress-bar progress-bar-success" 1165 style="width: 25%"> 1166 <span> 1167 <img class="img-center" loading="lazy" alt="IBM i5 iSeries for Business" src="https://cdn.timo-reymann.de/public/img/kompetenzen/as400.png"> 1168 </span> 1169 </div> 1170 </div> 1171 <div class="back"> 1172 <div class="back-content"> 1173 <h2>IBM i5 iSeries for Business</h2> 1174 <p>Grundlegende Administration und Sicherung des Betriebssystems IBM i for Business, sowie DB2</p> 1175 </div> 1176 </div> 1177 </div> 1178 </div> 1179 </div> 1180 1181 <div class="col-1-12 skill-div Jenkins tool" data-aos-once="true" data-aos="zoom-out"> 1182 <div class="flip-container"> 1183 <div class="flipper"> 1184 <div class="progress front"> 1185 <div class="progress-bar progress-bar-success" 1186 style="width: 25%">
1187 <span> 1188 <img class="img-center" loading="lazy" alt="Jenkins" src="https://cdn.timo-reymann.de/public/img/kompetenzen/jenkins.svg"> 1189 </span> 1190 </div> 1191 </div> 1192 <div class="back"> 1193 <div class="back-content"> 1194 <h2>Jenkins</h2> 1195 <p>Erweiterbares, webbasiertes Software-System zur kontinuierlichen Integration von Komponenten zu einem Anwendungsprogramm</p> 1196 </div> 1197 </div> 1198 </div> 1199 </div> 1200 </div> 1201 1202 <div class="col-1-12 skill-div Hibernate framework" data-aos-once="true" data-aos="zoom-out"> 1203 <div class="flip-container"> 1204 <div class="flipper"> 1205 <div class="progress front"> 1206 <div class="progress-bar progress-bar-success" 1207 style="width: 10%"> 1208 <span> 1209 <img class="img-center" loading="lazy" alt="Hibernate" src="https://cdn.timo-reymann.de/public/img/kompetenzen/hibernate.svg"> 1210 </span> 1211 </div> 1212 </div> 1213 <div class="back"> 1214 <div class="back-content"> 1215 <h2>Hibernate</h2> 1216 <p>Open-Source-Persistenz- und ORM-Framework für Java</p> 1217 </div> 1218 </div> 1219 </div> 1220 </div> 1221 </div> 1222 </div> 1223</section>
1224<script> 1225 document.addEventListener("DOMContentLoaded", () => { 1226 const filterClicked = function (source) { 1227 let el = source.target; 1228 if (el.tagName.toLowerCase() === "i") { 1229 el = el.parentElement; 1230 } 1231 const className = el.dataset.category.toLowerCase(), 1232 icon = el.querySelector(".fa"); 1233 document.querySelectorAll("." + className).forEach(el => el.classList.toggle("hidden")); 1234 el.classList.toggle("badge"); 1235 icon.classList.toggle("fa-eye-slash"); 1236 icon.classList.toggle("fa-eye"); 1237 AOS.refresh() 1238 }; 1239 1240 document.querySelectorAll(".filter").forEach(filterItem => { 1241 filterItem.addEventListener("click", filterClicked) 1242 }) 1243 }) 1244</script>
1244 1245 1246</main> 1247 1248<!-- Footer --> 1249<footer class="grid" id="copy"> 1250 <div class="col"> 1251<a href="/impressum/"> <i class="fas fa-balance-scale"></i> 1252 Impressum & Haftungsausschluss 1253</a> | 1254<a href="/datenschutz/"> <i class="fa fa-user-secret"></i> Datenschutz 1255</a> </div> 1256 <div class="col"> 1257 Erstellt von Timo Reymann mit <span class="fa fa-heart text-danger"></span> und <span 1258 class="fas fa-coffee roll"></span> 1259 </div> 1260 <div class="col"> 1261 <a href="https://jetbrains.com" target="_blank" title="This page and all of my projects are created using IntelliJ IDEs"> 1262 <img src="/images/icons/jetbrains.svg" width="80" height="50" alt="jetbrains logo" /> 1263 </a> 1264 <a href="https://www.netcup.com/de/?ref=58357" target="_blank" title="netcup is the hoster for all my pages & mail"> 1265 <img src="/images/ext/netcup_banner.png" height="50" alt="netcup banner" /> 1266 </a> 1267 </div> 1268</footer> 1269<chat-modal api-url="https://the-agent.timo-reymann.de" turnstile-site-key="0x4AAAAAADuqT2IGYMWZ1fe1"></chat-modal>
1270<script> 1271 window.pageLocale = "de"; 1272 1273 const isGerman = () => { 1274 const browserLanguage = navigator.language || navigator.userLanguage 1275 return browserLanguage.includes("de") 1276 } 1277 1278 document.addEventListener("DOMContentLoaded", () => { 1279 const isGermanLang = isGerman(); 1280 1281 // in case german is the native language -> do nothing 1282 if(isGermanLang) { 1283 return; 1284 } 1285 1286 // Check if a redirect is required 1287 const lang = sessionStorage.getItem("language") 1288 if(lang === "en" && window.pageLocale !== "en") { 1289 window.location.pathname = "/en" + window.location.pathname; 1290 return; 1291 } 1292 1293 // User has not set german as native language and has not yet approved english as his language -> ask 1294 if (!lang && !isGermanLang && window.pageLocale == "de") { 1295 const alert = document.querySelector(".lang-alert"); 1296 let setTimeoutId = null; 1297 alert.classList.remove("invisible"); 1298 1299 const hideAlertAndDontRemindAgain = (languageToUse) => { 1300 alert.classList.add("invisible"); 1301 sessionStorage.setItem("language", languageToUse); 1302 1303 if (setTimeoutId != null) { 1304 clearTimeout(setTimeoutId) 1305 } 1306 } 1307 1308 document.querySelector(".lang-alert--okay").addEventListener("click", e => { 1309 window.location.pathname = window.location.pathname.replace("/en", "") 1310 hideAlertAndDontRemindAgain("en"); 1311 }); 1312 1313 document.querySelector(".lang-alert--back").addEventListener("click", e => { 1314 hideAlertAndDontRemindAgain("de"); 1315 }); 1316 1317 setTimeout(hideAlertAndDontRemindAgain, 30_000) 1318 } 1319 }); 1320</script>
vendor: 1 bytes, line 1320
1320
1321<script src="https://cdn.timo-reymann.de/public/aos/2.3.4/aos.js"></script>
vendor: 1 bytes, line 1321
1321
1322<script> 1323 AOS.init(); 1324</script>
1324 1325 1326</body> 1327</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.