From 931ac00e22ae99dc8c568824bbe4893fb8582e2c Mon Sep 17 00:00:00 2001 From: Jonas Tobias Hopusch Date: Thu, 2 Mar 2023 02:53:19 +0100 Subject: [PATCH] Reworking some things and progress on the about me page --- content/about/index.md | 43 +++++++++++---- static/css/general.css | 77 +++++++++++++++++++-------- static/scripts/calcage.js | 27 ++++++---- static/scripts/updatecopyrightyear.js | 14 +++++ templates/base.html | 62 ++++++++++----------- templates/page.html | 31 +++++++++++ 6 files changed, 184 insertions(+), 70 deletions(-) create mode 100644 static/scripts/updatecopyrightyear.js diff --git a/content/about/index.md b/content/about/index.md index 3aca9d0..31c7ba6 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -1,19 +1,44 @@ +++ -title = "About me / Über mich" -description = "Here's where I introduce myself. Hier stelle ich mich selbst vor." +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 +++ -### Ü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". -Ich bin x Jahre alt. +I am male, German, currently *javascript failed* 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 -### About me +### 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| + + diff --git a/static/css/general.css b/static/css/general.css index 522fdaa..e6f4a61 100644 --- a/static/css/general.css +++ b/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,14 +149,12 @@ td, th { display: inline; } -#last-article-metadata { - margin-bottom: 1rem; +#article-missinglicense { + font-size: small; } -@media (max-width: 20rem), (max-width: 300px) { - * { - word-wrap: break-word; - } +#last-article-metadata { + margin-bottom: 1rem; } @media (prefers-color-scheme: dark) { diff --git a/static/scripts/calcage.js b/static/scripts/calcage.js index f64461a..db2dcf4 100644 --- a/static/scripts/calcage.js +++ b/static/scripts/calcage.js @@ -1,9 +1,18 @@ -(() => { - "use strict"; - let ageElements = document.getElementsByClassName("age-display") - for (let i = 0; i < ageElements.length; i++) { - ageElements[i].innerText = (Math.floor(((new Date()).getTime() - (new Date(2001, 3, 29)).getTime()) - / 1000 / 60 / 60 / 24 / 365)) - .toString() - } -})() +"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(); +} diff --git a/static/scripts/updatecopyrightyear.js b/static/scripts/updatecopyrightyear.js new file mode 100644 index 0000000..665ba76 --- /dev/null +++ b/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."); +} diff --git a/templates/base.html b/templates/base.html index 655e9ca..9237e49 100644 --- a/templates/base.html +++ b/templates/base.html @@ -20,49 +20,49 @@ /> + jotoho.de - A personal website {% block metadata %} {% endblock %} - +
-
-

jotoho.de - My personal website

 +

jotoho.de - My personal website

+ +
+ Servers + + + Profiles + +
- -
+
{% block content %} {% endblock %}
-
+