PageSourceSearch

https://timo-reymann.de/kompetenzen/

html timo-reymann.de collected 2026-10-04 07:54:14 UTC 57,634 bytes, 1,327 lines download raw bytes

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