sites/de/index.html

@@ -8,27 +8,57 @@ eleventyNavigation:
   icon: home
 ---
 <div class="d-flex flex-column">
-    <div class="container flex-column flex-grow p-3">
+    <div class="flex-column flex-grow p-3">
         <div class="row py-5">
             <div class="col">
                 <img class="logo" src="../../img/samuel.png">
             </div>
         </div>
 
-        <div class="row justify-content-center py-4 border-top-bottom">
+        <div class="row justify-content-center py-4 border-top">
             <div class="col-lg-8 col-md-10 col-12">
                 <h1 class="sp-codes">SP-CODES</h1>
                 <p class="lead text-center mb-2">
                     Herzlich willkommen bei sp-codes!
                     Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus Magdeburg.
-                    Auf dieser Seite finden Sie meine Profile auf GitHub, GitLab und Stackoverflow.
+                    Auf dieser Seite finden Sie Informationen über mich und eine Übersicht über die von mir
-                    Außerdem finden die verschiedene Möglichkeiten um mit mir in Kontakt zu treten.
+                    bereitgestellten Dienste.
-                    Ich freue mich auf Ihre Nachricht.
+                    Schauen Sie sich gerne um oder nutzen Sie die verschiedenen Tools.
+                </p>
+            </div>
+        </div>
+        <div class="row justify-content-center py-4 border-top">
+            <div class="col-lg-8 col-md-10 col-12">
+                <h1 class="heading"><a href="/{{locale}}/services">Dienste</a></h1>
+                <div class="row">
+                    {%- for service in services %}
+                    <div class="col-12 col-md-6 p-3">
+                        <div class="service flat">
+                            <a class="link inner" href="/{{locale}}/services/{{service.id}}">
+                                <i class="{{service.icon}} fa-fw fa-2x"></i>
+                                <h2 class="mt-2">{{service.name}}</h2>
+                            </a>
+                        </div>
+                    </div>
+                    {%- endfor %}
+                </div>
+            </div>
+        </div>
+        <div class="row justify-content-center pt-4 border-top">
+            <div class="col-lg-8 col-md-10 col-12">
+                <h1 class="heading">Profile & Kontakt</h1>
+                <p class="lead text-center mb-2">
+                    Sie haben einen Fehler gefunden, Verbesserungsvorschläge, oder eine andere Frage? Treten Sie gerne
+                    auf einem der folgenden Plattformen mit mir in Kontakt. Ich freue mich auf Ihre Nachricht!
                 </p>
             </div>
         </div>
 
         <div class="d-flex justify-content-center flex-wrap my-3">
+            <div class="m-2"><a href="mailto:mail@sp-codes.de"><span
+                    class="fas fa-fw fa-4x fa-envelope"></span></a></div>
+            <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+                <img style="width: 64px; height: 64px; margin: 0 8px;" src="img/matrix.png" alt=""></a></div>
             <div class="m-2"><a rel="me" href="https://social.tchncs.de/@samuel_p"><span
                     class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
             <div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p"><span
@@ -39,8 +69,6 @@ eleventyNavigation:
                     class="fab fa-fw fa-4x fa-github"></span></a></div>
             <div class="m-2"><a href="https://hub.docker.com/u/samuelph"><span
                     class="fab fa-fw fa-4x fa-docker"></span></a></div>
-            <div class="m-2"><a href="mailto:mail@sp-codes.de"><span
-                    class="fas fa-fw fa-4x fa-envelope"></span></a></div>
         </div>
 
         <div class="d-flex justify-content-center mb-3">
@@ -58,4 +86,4 @@ eleventyNavigation:
             </div>
         </div>
     </div>
-</div>
+</div>