Merge branch 'about-page' into master

content/about/index.md

@@ -0,0 +1,44 @@
++++
+title = "About me"
+description = "Here's where I introduce myself."
+date = "2022-02-06 00:00:00+01:00"
+updated = "2023-03-01T23:10:47+01:00"
+draft = true
++++
+
+Hello visitor,
+
+I am Jonas (Tobias) Hopusch, usually known online as by my username "jotoho".
+
+I am male, German, currently <span id="age-display">*javascript failed*</span> years old
+and a student of computer science at the [South Westphalia University of Applied
+Sciences](https://fh-swf.de) working towards earning a Bachelor degree.
+
+### Why I chose to work with computers
+
+### My Hobbies
+
+In my free time I usually watch videos on the Internet,
+read fiction stories online or on my eReader,
+play some videogames or
+learn about topics that interest me.
+
+When I don't need my ears for something else, I usually
+have music playing or listen to something else.
+
+I like to listen to multiple kinds of music
+that are very different to each other, so I have
+trouble concretely defining the genres I listen to.
+
+### My Desktop-PC
+
+|PC Part|Installed Component|
+|:-|:-:|
+|CPU|[AMD Ryzen 7 5800X (8 cores, 16 threads)](https://www.amd.com/en/products/cpu/amd-ryzen-7-5800x)|
+|Motherboard|[ASRock X570M Pro4](https://www.asrock.com/MB/AMD/X570M%20Pro4/)|
+|Graphics Card|[ASUS Dual Radeon RX 6750XT 12GB OC Edition](https://www.asus.com/motherboards-components/graphics-cards/dual/dual-rx6750xt-o12g/)|
+|Memory|20GiB (2*8G+4G) DDR4 2133MHz|
+|Monitors|2 1920x1080 32" 60Hz screens|
+|Storage|1TB SATA-SSD + 1TB SATA-HDD|
+
+<script style="display: none;" src="/scripts/calcage.js" defer></script>

static/css/general.css

@@ -4,23 +4,48 @@
     border: none;
     border-collapse: collapse;
     box-sizing: border-box;
+    overflow-wrap: anywhere;
 }
 
-body {
+html, body {
+    max-width: 100%;
+    overflow-x: clip;
+}
+
+#root {
     font-family: monospace;
-    max-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 100vh;
+}
+
+#root > * {
+    flex-grow: 0;
+    flex-shrink: 0;
 }
 
 header, footer {
     text-align: center;
 }
 
-header {
-    padding-bottom: 1rem;
+#header-title {
+    display: block;
+    padding: 0.5rem 0;
 }
 
 footer {
-    padding-top: 1rem;
+    padding-top: 0.5rem;
+}
+
+#header-delimiter {
+    padding-top: 0;
+    margin-top: 0;
+}
+
+#footer-delimiter {
+    padding-bottom: 0;
+    margin-bottom: 0;
 }
 
 .globalnav{
@@ -28,7 +53,8 @@ footer {
     flex-wrap: wrap;
     flex-direction: row;
     text-align: center;
-    gap: max(1px, 0.1rem);
+    gap: 2px;
+    height: max-content;
 }
 
 .globalnav-element {
@@ -38,8 +64,8 @@ footer {
     flex-basis: 0;
     flex-grow: 1;
     min-width: fit-content;
-    min-height: fit-content;
-    padding: 0.5rem 0;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
 }
 
 /* Code Blocks */
@@ -49,9 +75,8 @@ pre {
     margin-bottom: 1.5rem;
     margin-left: auto;
     margin-right: auto;
-    width: 100%;
-    max-width: max-content;
-    overflow-y: auto;
+    width: fit-content;
+    overflow-x: auto;
     line-break: strict;
 }
 
@@ -63,7 +88,8 @@ code {
 }
 
 p {
-    padding: 0.5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
 }
 
 article {
@@ -76,9 +102,14 @@ h2 {
 }
 
 #mainarticle {
-    width: max-content;
-    max-width: min(80rem, 100%);
+    width: fit-content;
+    max-width: min(100%, 60rem);
     margin: 0 auto;
+    flex-grow: 1;
+}
+
+#mainarticle h3 {
+    margin: 1rem 0;
 }
 
 li, ul, ol {
@@ -95,9 +126,13 @@ table {
     display: block;
     border-collapse: collapse;
     margin: 1rem auto;
-    width: max-content;
+    width: fit-content;
     max-width: 100%;
-    overflow-y: auto;
+    overflow-x: auto;
+}
+
+tr {
+    width: fit-content;
 }
 
 td, th {
@@ -114,10 +149,12 @@ td, th {
     display: inline;
 }
 
-@media (max-width: 20rem), (max-width: 300px) {
-    * {
-        word-wrap: break-word;
-    }
+#article-missinglicense {
+    font-size: small;
+}
+
+#last-article-metadata {
+    margin-bottom: 1rem;
 }
 
 @media (prefers-color-scheme: dark) {

static/scripts/calcage.js

@@ -0,0 +1,18 @@
+"use strict";
+
+{
+    // Month index must be two because counting begins at 0 (for January)
+    const myBirthDate = new Date(2001, 2, 29);
+    const today = new Date();
+
+    let yearsSinceBirth = today.getFullYear() - myBirthDate.getFullYear();
+
+    // Correct yearsSinceBirth if between New Year and my birthday
+    if (today.getMonth() < myBirthDate.getMonth())
+        yearsSinceBirth--;
+    else if (today.getMonth() == myBirthDate.getMonth()
+             && today.getDate() < myBirthDate.getDate())
+        yearsSinceBirth--;
+
+    document.getElementById('age-display').innerText = yearsSinceBirth.toString();
+}

static/scripts/updatecopyrightyear.js

@@ -0,0 +1,14 @@
+"use strict";
+
+{
+    const copyrightYearElement = document.getElementById("footer-copyrightyear");
+
+    if (copyrightYearElement) {
+        const currentYearAsStr = new Date().getFullYear().toString();
+
+        copyrightYearElement.innerText = currentYearAsStr;
+        copyrightYearElement.dateTime = currentYearAsStr;
+    }
+    else
+        console.error("Could not find the footer entry for the year of the copyright notice.");
+}

templates/base.html

@@ -20,49 +20,49 @@
         />
         <!--Mastodon account ownership verification-->
         <link rel="me" href="https://ruhr.social/@jotoho" />
+        <script defer src="/scripts/updatecopyrightyear.js"></script>
         <title>jotoho.de - A personal website</title>
         {% block metadata %} {% endblock %}
     </head>
-    <body>
+    <body id="root">
         <header>
-            <div>
-                <a href="{{ config.base_url }}"
-                    ><h1>jotoho.de - My personal website</h1></a
+            <a id="header-title"
+               href="{{ config.base_url }}">
+                <h1>jotoho.de - My personal website</h1>
+            </a>
+            <nav class="globalnav">
+                <!--<a class="globalnav-element" href="{{ get_url(path='@/blog/_index.md') }}"> Blog </a>-->
+                <a
+                    class="globalnav-element"
+                    href="{{ get_url(path='@/servers/index.md') }}"
                 >
-            </div>
+                    Servers
+                </a>
+                <a
+                    class="globalnav-element"
+                    href="{{ get_url(path='@/profiles/index.md') }}"
+                >
+                    Profiles
+                </a>
+            </nav>
         </header>
-        <nav class="globalnav">
-            <!--<a class="globalnav-element" href="{{ get_url(path='@/blog/_index.md') }}"> Blog </a>-->
-            <a
-                class="globalnav-element"
-                href="{{ get_url(path='@/servers/index.md') }}"
-            >
-                Servers
-            </a>
-            <a
-                class="globalnav-element"
-                href="{{ get_url(path='@/profiles/index.md') }}"
-            >
-                Profiles
-            </a>
-        </nav>
-        <hr />
+        <hr id="header-delimiter" />
 
         <article id="mainarticle">{% block content %} {% endblock %}</article>
 
-        <hr />
+        <hr id="footer-delimiter" />
         <footer>
             <p>
                 <!--{% set current_year = now() | date(format="%Y",
                 timezone="Europe/Berlin") %} -->
 
                 Copyright
-                <time datetime="{{ current_year }}">{{ current_year }}</time>
-                Jonas Tobias Hopusch (<a
-                    rel="noreferer"
-                    href="https://gitlab.com/jotoho"
-                    >@jotoho</a
-                >)
+                <time id="footer-copyrightyear"
+                      datetime="{{ current_year }}">
+                      {{ current_year }}
+                </time>
+                Jonas Tobias Hopusch (@jotoho)
+                <!--
                 <br />
                 Licensed under
                 <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/"
@@ -73,6 +73,7 @@
                         src="/images/copyright/cc-by-nc-nd-4.0-small.svg"
                 /></a>
                 (unless otherwise specified)
+                -->
             </p>
             <p>
                 <a href="https://gitea.jotoho.de/jotoho/my-website"
@@ -81,8 +82,9 @@
                 is being served using
                 <a rel="noreferer" href="https://caddyserver.com/">Caddy</a>
                 and was generated using
-                <a rel="noreferer" href="https://www.getzola.org/">Zola</a>. You
-                may contact me via
+                <a rel="noreferer" href="https://www.getzola.org/">Zola</a>.
+                <br />
+                You may contact me via
                 <a href="mailto:webmaster@jotoho.de">email</a>
                 regarding any issues with this website.
             </p>

templates/page.html

@@ -25,5 +25,37 @@
     >
 </p>
 {% endif %}
+{% if page.extra.author and page.extra.author != "" %}
+<p>
+    <em>
+        <strong>Author(s)</strong>:
+        {{page.extra.author}}
+    </em>
+</p>
+{% else %}
+<p>
+    <em>
+        <strong>Author</strong>:
+        Jonas Tobias Hopusch
+    </em>
+</p>
+{% endif %}
+{% if page.extra.license and page.extra.license != "" %}
+<p id="article-license">
+    <em>
+        <strong>Article is provided under the following license</strong>:
+        {{page.extra.license}}
+    </em>
+</p>
+{% else %}
+<p id="article-missinglicense">
+    <em>
+        This article is copyright-protected
+        and may not be used or replicated without permission.
+        (All rights reserved)
+    </em>
+</p>
+{% endif %}
+<hr id="last-article-metadata" />
 <div>{{ page.content | safe }}</div>
 {% endblock content %}