Reworking some things and progress on the about me page

This commit is contained in:
Jonas Tobias Hopusch 2023-03-02 02:53:19 +01:00
parent e3a53737fc
commit 931ac00e22
Signed by: jotoho
GPG key ID: 913BDF1196DCF600
6 changed files with 184 additions and 70 deletions

View file

@ -1,19 +1,44 @@
+++ +++
title = "About me / Über mich" title = "About me"
description = "Here's where I introduce myself. Hier stelle ich mich selbst vor." description = "Here's where I introduce myself."
date = "2022-02-06 00:00:00+01:00" date = "2022-02-06 00:00:00+01:00"
updated = "2023-03-01T23:10:47+01:00"
draft = true draft = true
+++ +++
### Über mich Hello visitor,
Hallo, I am Jonas (Tobias) Hopusch, usually known online as by my username "jotoho".
mein Name ist Jonas Hopusch, im Internet normalerweise bekannt als "jotoho". I am male, German, currently <span id="age-display">*javascript failed*</span> years old
Ich bin <span class="age-display">x</span> Jahre alt. 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
### About me ### My Hobbies
<script style="display: none;" src="/scripts/calcage.js" async></script> 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>

View file

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

View file

@ -1,9 +1,18 @@
(() => { "use strict";
"use strict";
let ageElements = document.getElementsByClassName("age-display") {
for (let i = 0; i < ageElements.length; i++) { // Month index must be two because counting begins at 0 (for January)
ageElements[i].innerText = (Math.floor(((new Date()).getTime() - (new Date(2001, 3, 29)).getTime()) const myBirthDate = new Date(2001, 2, 29);
/ 1000 / 60 / 60 / 24 / 365)) const today = new Date();
.toString()
} 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();
}

View file

@ -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.");
}

View file

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

View file

@ -25,6 +25,37 @@
> >
</p> </p>
{% endif %} {% 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" /> <hr id="last-article-metadata" />
<div>{{ page.content | safe }}</div> <div>{{ page.content | safe }}</div>
{% endblock content %} {% endblock content %}