added english version for imprint and donation

added service icons (closes #7)

src/de/donate.html

@@ -6,9 +6,9 @@ eleventyNavigation:
   key: donate
   title: Unterstützen
   icon: hand-holding-heart
-  order: 4
+  order: 3
 ---
-<h1><i class="fas fa-hand-holding-heart fa-fw mr-1"></i>Unterstützen</h1>
+<h1><i class="fas fa-hand-holding-heart"></i> Unterstützen</h1>
 
 <p>Alle öffentlichen Dienste sind kostenfrei nutzbar. Wenn du dich trotzdem an den Unkosten für Server-Infrastruktur
     beteiligen oder mir eine kleine Anerkennung für meinen Blog zukommen lassen willst, kannst du mich gerne über die
@@ -17,9 +17,9 @@ eleventyNavigation:
 <div class="row justify-content-center">
     <div class="col-12 col-md-10 col-lg-8">
         <div class="card mb-3">
-            <h2><i class="fas fa-comments fa-fw m-2"></i>Empfehlen</h2>
+            <h2><i class="fas fa-comments fa-fw m-2"></i>Recommend</h2>
-            <div>Gerne darfst du meine Dienste und meine Blog-Beiträge weiter empfehlen, wenn sie dir gefallen. Ich
+            <div>Gerne darfst du meine Dienste und meine Blog-Beiträge weiter empfehlen. Ich freue mich sehr, wenn ich
-                freue mich sehr, wenn ich euch damit eine Freude machen kann.
+                euch damit eine Freude machen kann.
             </div>
         </div>
         <div class="card mb-3">
@@ -36,10 +36,10 @@ eleventyNavigation:
         </div>
         <div class="card mb-3">
             <h2><i class="fas fa-network-wired fa-fw m-2"></i>netcup</h2>
-            <div>Einige meiner Dienste hoste ich bei netcup. Wenn du einen eigenen Server oder eine Webseite bei netcup
+            <div>Einige meiner Dienste hoste ich bei <a href="https://www.netcup.de/" target="_blank">netcup</a>. Wenn
-                betreiben willst, kannst du gerne den folgenden Link (auf dem Bild) nutzen. Dadurch erhalte ich bei
+                du einen eigenen Server oder eine Webseite bei netcup betreiben willst, kannst du gerne den folgenden
-                deiner Bestellung eine kleine Provision. Falls du ein Neukunde bist, erhältst du einen 5 € Gutschein für
+                Link (auf dem Bild) nutzen. Dadurch erhalte ich bei deiner Bestellung eine kleine Provision. Falls du
-                deine Bestellung.
+                ein Neukunde bist, erhältst du einen 5 € Gutschein für deine Bestellung.
             </div>
             <div class="mt-3 text-center">
                 <a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"

src/de/services.html

@@ -8,7 +8,7 @@ eleventyNavigation:
   icon: server
   order: 2
 ---
-<h1><i class="fas fa-server fa-fw mr-1"></i>Dienste</h1>
+<h1><i class="fas fa-server"></i> Dienste</h1>
 <p>In meiner Freizeit stelle ich verschiedene quelloffene Dienste für die freie Nutzung bereit. Hier findest du eine
     Übersicht der einzelnen Services und jeweils eine kurze Beschreibung. Alle Services werden in Deutschland
     gehostet. Fühl dich frei, davon Gebrauch zu machen.</p>

src/de/services/connectivitycheck.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: connectivitycheck
 title: Captive Portal Check
 ---
-# Captive Portal Check
+# <i class="fas fa-wifi"></i> Captive Portal Check
 
 Ein Captive Portal ist eine Anmeldeseite in öffentlichen WLAN-Netzwerken, um den Internet-Zugriff an die Zustimmung bestimmter Nutzungsregeln zu binden. Wenn du in einem öffentlichen Netzwerk eine Anmeldeseite angezeigt bekommst, nutzt dein Gerät dafür einen Captive Portal Check. Dieser ermöglicht es dem Gerät, herauszufinden, ob du einen direkten Internetzugang hast oder nicht. Unter Android wird hierfür beispielsweise eine Anfrage an einen Google-Server gestellt.
 

src/de/services/firefox-sync.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: firefox-sync
 title: Firefox Sync
 ---
-# Firefox Sync
+# <i class="fab fa-firefox-browser"></i> Firefox Sync
 
 Nutzt du Firefox auf mehreren Geräten zum Surfen? Dann kannst du mit Firefox Sync deine Browserdaten (Lesezeichen, offene Tabs, die Suchhistorie, uvm.) zwischen all deinen Geräten synchronisieren.
 

src/de/services/gitea.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: gitea
 title: Gitea
 ---
-# Gitea
+# <i class="fas fa-code"></i> Gitea
 
 Gitea ist eine einfache Code-Hosting-Plattform wie GitHub oder GitLab. Sie ist opensource und wird kontinuierlich weiterentwickelt. __Seit Ende 2019 betreibe ich eine eigene Gitea Instanz, in der ich meine Projekte verwalte.__ So zum Beispiel auch diese Webseite. Schau dir gerne mal den Quelltext an und lass mir Feedback da.
 

src/de/services/invidious.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: invidious
 title: Invidious
 ---
-# Invidious
+# <i class="fab fa-youtube"></i> Invidious
 
 Invidious ist ein alternatives Frontend für YouTube. 
 Da nur die nötigsten Verbindungen zu YouTube aufgebaut werden und viele sogar vom Server selber übernommen werden, erhöht Invidious die Privatsphäre der Nutzer:innen.

src/de/services/jitsi.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: jitsi
 title: Jitsi Meet
 ---
-# Jitsi Meet
+# <i class="fas fa-users"></i> Jitsi Meet
 
 Jitsi-Meet ist eine Plattform für Videokonferenzen. Ohne Anmeldung können vollständig verschlüsselte Video-Chats gestartet werden. Zusätzlich bietet Jitsi-Meet die Möglichkeit den Bildschirm für die anderen Teilnehmer:innen freizugeben, neue Benutzer:innen einfach per Link einzuladen und Nachrichten im integrierten Chat zu verschicken.
 

src/de/services/matrix.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: matrix
 title: Matrix
 ---
-# Matrix
+# <i class="fas fa-comments"></i> Matrix
 
 [Matrix](https://matrix.org) ist eine moderne, quelloffene Software für dezentrale Kommunikation (wie E-Mail). Matrix bietet von Haus aus Sprach- und Videoanrufe, inklusive Ende-zu-Ende Verschlüsselung und vieles mehr. Das Entscheidende ist, dass es nicht den einen Matrix-Server gibt, den alle Nutzer:innen verwenden müssen, wie das beispielsweise bei WhatsApp, Telegram und vielen anderen verbreiteten Messengern der Fall ist.
 
@@ -17,25 +17,6 @@ Melde dich gerne auf meinem Server an oder suche dir einen aus der unten verlink
 
 Auf meinem Blog findest du einen einfachen Einstieg in das Matrix-Netzwerk: [Werde Teil der Matrix](https://blog.sp-codes.de/werde-teil-der-matrix-matrix-teil-1/)
 
-## Warum Matrix?
-
-Für die Anmeldung ist keine Handynummer oder Mailadresse nötig. Das Hinzufügen einer Mailadresse kann aber sinnvoll sein um ggfs. das Passwort wiederherstellen zu können.
-Es gibt keine einfache Verbindung von dem Matrix Account zur eigenen Rechtsperson, außer wenn man das selbst so möchte.
-Man kann mehrere Accounts anlegen und gleichzeitig nutzen.
-Man kann die Nachrichten verschlüsseln (muss man aber nicht).
-Es gibt sowohl für Desktop, als auch für mobile Devices attraktive Clients (App), welche sich im Aussehen und in der Bedienung nutzerfreundlich verhalten. Eine Übersicht ist hier zu finden: https://matrix.org/docs/projects/clients-matrix
-Man kann sich selbst Daten von Endgerät zu Endgerät schicken (z.B. Handy nach PC). Je nachdem muss man dazu eine Gruppe erstellen mit nur sich selbst als Mitglied.
-Die Server sind dezentral, wenn mal ein Server ausfällt, funktioniert das Netzwerk trotzdem noch.
-Das System ist föderiert, das heißt, man kann sich von Server zu Server Nachrichten schicken, so wie man das von Email auch schon gewohnt ist.
-Ihr könnt euch den Anbieter (Server) heraussuchen, der euch am besten gefällt.
-Man kann sich selbst einen Server installieren
-Das Protokoll (die Art wie Daten übertragen werden) ist offen, das heißt jeder kann sich Anwendungen schreiben, die dieses Protokoll verwenden.
-Die Verschlüsselungsalgorithmen liegen offen und sind öffentlich analysierbar. Sie sind nicht patentgeschützt durch eine Firma.
-Die Software ist oftmals Open Source, z.B. Clienten, Server
-Es gibt Software von verschiedenen Entwickler:innen, man ist nicht ausschließlich von einem bestimmten Unternehmen abhängig
-In Gruppenchats können den Teilnehmer unterschiedliche Berechtigungen zugewiesen werden.
-Sprach- und Video-Telefonie sind eingebaut (per Jitsi). Auch Gruppenanrufe sind möglich.
-
 ## Weitere nützliche Links
 
 * [Verschiedene Apps](https://matrix.org/clients)

src/de/services/nitter.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: nitter
 title: Nitter
 ---
-# Nitter
+# <i class="fab fa-twitter"></i> Nitter
 
 Eine freies und quelloffenes Twitter-Frontend, das auf Privatsphäre der Nutzer ausgerichtet ist. Die Verbindungen zu Twitter werden vom Server selber übernommen, um Tracking über IP oder JavaScript zu verhindern.
 

src/de/services/searx.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: searx
 title: Searx
 ---
-# Searx
+# <i class="fas fa-search"></i> Searx
 
 Searx ist eine freie Metasuchmaschine, das heißt sie nutzt für die Suche öffentliche Suchmaschinen, wie Google, DuckDuckGo, StartPage und viele andere. 
 

src/de/services/shields.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: shields
 title: Shields
 ---
-# Shields
+# <i class="fas fa-tags"></i> Shields
 
 Shields ist ein Service für prägnante, konsistente und lesbare Badges im SVG- und Rasterformat. Über eine URL können sie sehr einfach in Readmes oder jede andere Webseite eingebunden werden. Außerdem werden Integrationen zu verschiedenen Diensten oder Netzwerken bereitgestellt.
 

src/en/donate.html

@@ -8,6 +8,49 @@ eleventyNavigation:
   icon: hand-holding-heart
   order: 3
 ---
-<h1>Donate</h1>
+<h1><i class="fas fa-hand-holding-heart"></i> Donate</h1>
 
-<i>tbd</i>
+<p>All public services can be used for free. If you still want to contribute to the costs for server infrastructure or
+    send me a small donation for my blog, you can support me in the following ways<sup>1</sup>:</p>
+
+<div class="row justify-content-center">
+    <div class="col-12 col-md-10 col-lg-8">
+        <div class="card mb-3">
+            <h2><i class="fas fa-comments fa-fw m-2"></i>Empfehlen</h2>
+            <div>You are welcome to recommend my services and my blog posts. I am very glad if I can make you happy with
+                it.
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="fas fa-credit-card fa-fw m-2"></i>Bank transfer</h2>
+            <div>If you want to transfer some money to me, just write me a short <a href="/en/imprint">message</a>. I
+                will then send you my bank details as soon as possible.
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="fas fa-money-bill fa-fw m-2"></i>Cash</h2>
+            <div>If you want to send me some cash, feel free to send it to the address provided in the <a
+                    href="/en/imprint">imprint</a>.
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="fas fa-network-wired fa-fw m-2"></i>netcup</h2>
+            <div>Some of my services are hosted at netcup. If you want to run your own server or website at <a
+                    href="https://www.netcup.de/" target="_blank">netcup</a>, you can use the following link (on the
+                picture). This way I get a small commission on your order. If you are a new customer, you will receive a
+                5€ voucher for your order.
+            </div>
+            <div class="mt-3 text-center">
+                <a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"
+                   target="_blank">
+                    <img src="/img/netcup-setC-234x60.png" width="234" height="60" alt="zu netcup"/>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="border-top mt-5 pt-2">
+    <p><small><sup>1</sup> The payments made are donations in terms of § 516 BGB, not tax-deductible donations in terms
+        of tax law.</small></p>
+</div>

src/en/imprint.html

@@ -2,7 +2,34 @@
 layout: base.njk
 title: sp-codes
 ---
-<div class="legal">
 <h1>Imprint</h1>
-<p>Sorry, this document is only available in German so far. Read it <a href="/de/imprint">here</a>.</p>
+<div class="mb-4">
+    <h2>Information as per § 5 TMG:</h2>
+    <p>Samuel Philipp<br/>
+        Otto-von-Guericke-Straße 40a<br/>
+        39104 Magdeburg<br/>
+        Deutschland</p>
+</div>
+<div class="mb-3 pt-4 border-top">
+    <h2>Contact Information</h2>
+    <p>You want to contact me, report a problem, have a question about a service or would like to support me? Please
+        send me your message in any of the following ways. I am looking forward to receive your message.</p>
+    <div class="row justify-content-center">
+        <div class="col-12 col-md-10 col-lg-8">
+            <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:mail@sp-codes.de">
+                <div class="pr-3"><span class="fas fa-fw fa-4x fa-envelope text-white"></span></div>
+                <div>Send me an email to <strong>mail@sp-codes.de</strong></div>
+            </a>
+            <a class="card mb-3 d-flex align-items-center text-decoration-none"
+               href="https://social.tchncs.de/@samuel_p">
+                <div class="pr-3"><span class="fab fa-fw fa-4x fa-mastodon text-white"></span></div>
+                <div>Follow me on Mastodon or send me a message to <strong>@samuel_p@social.tchncs.de</strong></div>
+            </a>
+            <a class="card mb-3 d-flex align-items-center text-decoration-none"
+               href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+                <div class="pr-3"><img class="matrix-icon" src="/img/matrix.png" alt=""></div>
+                <div>Write me on Matrix to <strong>@samuel-p:matrix.sp-codes.de</strong></div>
+            </a>
+        </div>
+    </div>
 </div>

src/en/services.html

@@ -8,7 +8,7 @@ eleventyNavigation:
   icon: server
   order: 2
 ---
-<h1>Services</h1>
+<h1><i class="fas fa-server"></i> Services</h1>
 <p>In my spare time I provide various open source services for free. Here you can find an overview of the individual
     services and a short description for each of them. All services are hosted in Germany. Feel free to use it.</p>
 

src/en/services/connectivitycheck.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: connectivitycheck
 title: Captive Portal Check
 ---
-# Captive Portal Check
+# <i class="fas fa-wifi"></i> Captive Portal Check
 
 A captive portal is a login page in public WLAN networks to restrict Internet access to the approval of certain terms of use. When you see a login page on a public network, your device uses a captive portal check. This allows the device to find out whether you have direct Internet access or not. In Android, for example, your device sends a request to a Google server.
 

src/en/services/firefox-sync.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: firefox-sync
 title: Firefox Sync
 ---
-# Firefox Sync
+# <i class="fab fa-firefox-browser"></i> Firefox Sync
 
 Do you use Firefox on more than one device for surfing? Then Firefox Sync lets you synchronize your browser data (bookmarks, open tabs, search history, and more) between all your devices.
 

src/en/services/gitea.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: gitea
 title: Gitea
 ---
-# Gitea
+# <i class="fas fa-code"></i> Gitea
 
 Gitea is a simple code hosting platform like GitHub or GitLab. It is open source and under continuous development. __Since the end of 2019 I have my own Gitea instance, to manage my projects.__ For example this website. Feel free to have a look at the source code and leave some feedback.
 

src/en/services/invidious.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: invidious
 title: Invidious
 ---
-# Invidious
+# <i class="fab fa-youtube"></i> Invidious
 
 Invidious is an alternative YouTube-Frontend. It establishes only the most necessary connections to YouTube and many of them are even made by the server itself. So Invidious increases the privacy of the users.
 

src/en/services/jitsi.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: jitsi
 title: Jitsi Meet
 ---
-# Jitsi Meet
+# <i class="fas fa-users"></i> Jitsi Meet
 
 Jitsi-Meet is a platform for video conferences. You can start fully encrypted video chats without registration. Additionally, Jitsi-Meet offers the possibility to share the screen with other participants, invite new users with a simple link and send messages in the integrated chat.
 

src/en/services/matrix.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: matrix
 title: Matrix
 ---
-# Matrix
+# <i class="fas fa-comments"></i> Matrix
 
 Matrix is a modern, open source software for decentralized communication (like e-mail). Matrix offers end-to-end encryption, voice and video calls and much more. However, the most important thing is that there is not one Matrix server that all users have to use, like WhatsApp, Telegram and many other popular messengers.
 

src/en/services/nitter.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: nitter
 title: Nitter
 ---
-# Nitter
+# <i class="fab fa-twitter"></i> Nitter
 
 A free and open source Twitter frontend that is focussed on user privacy. Connections to Twitter are handled by the server itself to prevent tracking by IP or JavaScript.
 

src/en/services/searx.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: searx
 title: Searx
 ---
-# Searx
+# <i class="fas fa-search"></i> Searx
 
 Searx is a free meta search engine, which uses other public search engines like Google, DuckDuckGo, StartPage and many others.
 

src/en/services/shields.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: shields
 title: Shields
 ---
-# Shields
+# <i class="fas fa-tags"></i> Shields
 
 Shields is a service for concise, consistent and legible badges in SVG and raster format. Via a URL they can be easily embedded in readmes or any other website. In addition, integrations to various services or networks are provided.