fill about page with content

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>

frontend/src/pages/about.njk

@@ -14,4 +14,40 @@
 {% endblock %}
 
 {% block content %}
+    <div>
+        <b>Hello there,</b><br>
+        <br>
+        my name is Tobias Erbshäußer and I'm programming now for roughly two decades.<br>
+        <br>
+        What started of with a small book about C programming has become a great activity that I'm practicing nearly
+        every day.<br>
+        <br>
+        Throughout the years I've tried many languages.
+        C was quickly replaced with the
+        <a href="https://www.autoitscript.com/site/autoit/" target="_blank" rel="noopener noreferrer">AutoIt scripting language</a>
+        which was simply more convenient for the first project:
+        A bot for <a href="https://www.guildwars.com/de/" target="_blank" rel="noopener noreferrer">Guild Wars</a> that
+        automated the consumption of liquor to get an ingame title.
+        I still remember the afternoons I spent with my best friend to fix all the little bugs the first version had.
+        Later, AutoIt was replaced by Pascal, then came Delphi/Lazarus and my horizon continued to expand.
+        I dipped my toe into text editor development, cheating software, DLL injections, databases and all kinds of
+        other stuff.
+        During my studies at the TU Darmstadt
+        <a href="https://racket-lang.org/" target="_blank" rel="noopener noreferrer">Racket</a> and Java joined the mix
+        - the former which I was never a fan of.
+        C++ also had its appearance along the way and all the "newer" languages such as Kotlin, C#, D, Nim and Rust.<br>
+        <br>
+        Today at my job, I'm mostly working on embedded projects using C, C++, Python and Bash scripts.
+        Sometimes I even have the chance to revitalize and broaden the little bit of Linux kernel knowledge I gained
+        during my Bachelor and Master thesis.<br>
+        <br>
+        Additionally, I've created and maintain the new
+        <a href="https://schanz-online.de/" target="_blank" rel="noopener noreferrer">SCHANZ Website</a> (a small bar
+        and event location) and the backend behind it.<br>
+        <br>
+        Aside from all the computer work, I hear a lot of music, play on my guitars, read books, swim or ride the bike.
+    </div>
+    <div class="me">
+        <img src="/assets/me.jpg" alt="An image of myself">
+    </div>
 {% endblock %}

frontend/src/styles/about.css

@@ -0,0 +1,32 @@
+main {
+    display: grid;
+    gap: calc(var(--large-padding) * 2);
+    grid-template-columns: 1fr 30rem;
+    grid-template-rows: 1fr;
+    text-align: justify;
+}
+
+img {
+    border-radius: 50%;
+    width: 100%;
+}
+
+@media (max-width: 780px) {
+    main {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+    }
+
+    .me {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 20rem;
+        grid-row: 1;
+        justify-items: center;
+    }
+
+    img {
+        height: 100%;
+        width: unset;
+    }
+}

frontend/src/styles/default.css

@@ -20,8 +20,8 @@ html {
 * {
     box-sizing: border-box;
     font-family: "Adwaita Sans", sans-serif;
-    font-size: 1.4rem;
-    line-height: 2rem;
+    font-size: 1.6rem;
+    line-height: 2.4rem;
     margin: 0;
     padding: 0;
 }

frontend/src/styles/main.css

@@ -28,15 +28,9 @@ body > div {
     max-width: 1440px;
 }
 
-tesoft-nav {
-    padding-bottom: var(--medium-padding);
-    position: sticky;
-    top: 0;
-}
-
 main {
     min-height: var(--full-content-height);
-    padding: 0 var(--small-padding);
+    padding: var(--medium-padding) var(--small-padding);
 }
 
 @media (max-width: 1440px) {