implement about me section

content/de/_index.md

@@ -1,5 +1,3 @@
 ---
 title: Home
 ---
-
-Das ist ein Test

content/de/about.md

@@ -0,0 +1,14 @@
+---
+title: "Über mich"
+slug: "about"
+image: "/assets/about-me/about-me.jpg"
+---
+
+Hallo! Ich heisse Michi und interessiere mich für Smartphones, Computer, Elektromobilität (hauptsächlich Tesla) und weitere spannende Technik.
+
+- 19 Jahre alt
+- Informatiker Plattformentwicklung i.A.
+
+Meine Freizeit verbringe ich gerne am Computer. Dort programmiere ich entweder kleine Dinge für mich ([siehe GitHub](https://github.com/michivonah)), wie diese Website, oder hoste neue Software auf meiner Infrastruktur. Ebenfalls gehe ich gerne Spazieren und höre dabei Musik oder Podcasts zu. Zudem bin ich ein grosser Fan des Europa-Park und besuche diesen regelmässig. Um meinen Tag dort optimal zu gestalten, habe ich sogar einen Bot gebaut, welchen mich jeweils per Push-Benachrichtung auf mein Smartphone über die aktuellen Wartezeiten informiert ([hier die Details auf GitHub](https://github.com/michivonah/themepark-alerts)). Ausserdem fliege ich gerne mit meiner Drohne oder mache Fotos mit meinem Smartphone. Und manchmal backe ich auch einen Kuchen.
+
+Ansonsten bin ich ein Apple & Tesla Fan und mein Traum ist es einmal selbst einen Tesla zu besitzen. :)

content/en/_index.md

@@ -1,5 +1,3 @@
 ---
 title: Home
 ---
-
-Thats a test.

content/en/about.md

@@ -0,0 +1,14 @@
+---
+title: "About me"
+slug: "about"
+image: "/assets/about-me/about-me.jpg"
+---
+
+Hi! My name is Michi and I'm interested in smartphones, computers, e-mobility (mainly Tesla) and other exciting technology.
+
+- 19 years old
+- Trainee computer scientist (Informatiker Plattformentwicklung)
+
+I like to spend my free time at the computer. I either code little things for myself ([see GitHub](https://github.com/michivonah)), like this website, or host new software on my infrastructure. I also enjoy going for walks and listening to music or podcasts. I'm also a big fan of Europa-Park and visit it regularly. To optimise my day there, I even built a bot that informs me about the current waiting times via push notification on my smartphone ([here are the details on GitHub](https://github.com/michivonah/themepark-alerts)). I also like to fly my drone or take photos with my smartphone. And sometimes I bake a cake.
+
+Apart from that I am an Apple & Tesla fan and my dream is to own a Tesla myself one day. :)

layouts/_default/baseof.html

@@ -9,6 +9,8 @@
         {{ block "main" . }}
         {{ end }}
 
+        {{ partial "about.html" . }}
+
         {{ partial "projects.html" . }}
     </div>
 

layouts/partials/about.html

@@ -0,0 +1,13 @@
+<div id="about" class="about">
+    {{ with .Site.GetPage "about" }}
+    <div class="about-part">
+        {{ with .Params.image }}
+            <img src='{{ . | relURL }}' alt="" title="">
+        {{ end }}
+    </div>
+    <div class="about-part">
+        <h1>{{ .Title }}</h1>
+        <div>{{ .Content }}</div>
+    </div>
+    {{ end }}
+</div>

static/style.css

@@ -20,6 +20,7 @@ body{
     --font: "Source Sans 3", sans-serif;
     --baseRadius: 12px;
     --baseTransition: all 250ms;
+    --navSmallHeight: 66px;
 }
 
 /* CONTENT */
@@ -46,7 +47,7 @@ nav{
 }
 
 nav.small{
-    height: 66px;
+    height: var(--navSmallHeight);
     background: var(--primary);
 }
 
@@ -281,9 +282,60 @@ nav.small .nav-links a:last-child:hover{
     }
 }
 
+/* ABOUT */
+.about{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: stretch;
+    align-items: stretch;
+    padding: 20px;
+    scroll-margin-top: var(--navSmallHeight);
+}
+
+@media screen and (max-width:690px){
+    .about{
+        flex-direction: column;
+    }
+}
+
+.about-part{
+    width: calc(100% - 20px);
+    margin: 0 10px;
+    box-sizing: border-box;
+}
+
+.about img{
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: var(--baseRadius) solid var(--primary);
+    transition: var(--baseTransition);
+}
+
+@media (pointer: fine){
+    .about img:hover{
+        padding: 0px;
+    }
+}
+
+.about a{
+    color: var(--color);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--primary);
+    transition: var(--baseTransition);
+}
+
+.about a:hover{
+    background: var(--primary);
+}
+
 /* PROJECTS */
 .projects{
     text-align: center;
+    scroll-margin-top: calc(var(--navSmallHeight) + 20px);
 }
 
 .tag-filter{