From e32cf4f8f765cdd936537fdff7b6227130b9f040 Mon Sep 17 00:00:00 2001
From: Jonas Tobias Hopusch
Date: Sun, 6 Feb 2022 01:49:23 +0100
Subject: [PATCH 1/3] Begin work on personal about page
---
content/about/index.md | 19 +++++++++++++++++++
static/scripts/calcage.js | 9 +++++++++
2 files changed, 28 insertions(+)
create mode 100644 content/about/index.md
create mode 100644 static/scripts/calcage.js
diff --git a/content/about/index.md b/content/about/index.md
new file mode 100644
index 0000000..3aca9d0
--- /dev/null
+++ b/content/about/index.md
@@ -0,0 +1,19 @@
++++
+title = "About me / Über mich"
+description = "Here's where I introduce myself. Hier stelle ich mich selbst vor."
+date = "2022-02-06 00:00:00+01:00"
+draft = true
++++
+
+### Über mich
+
+Hallo,
+
+mein Name ist Jonas Hopusch, im Internet normalerweise bekannt als "jotoho".
+Ich bin x Jahre alt.
+
+-----
+
+### About me
+
+
diff --git a/static/scripts/calcage.js b/static/scripts/calcage.js
new file mode 100644
index 0000000..f64461a
--- /dev/null
+++ b/static/scripts/calcage.js
@@ -0,0 +1,9 @@
+(() => {
+ "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()
+ }
+})()
From e3a53737fcd201c255c4ac8d18679a24ddda3172 Mon Sep 17 00:00:00 2001
From: Jonas Tobias Hopusch
Date: Sun, 6 Feb 2022 03:03:19 +0100
Subject: [PATCH 2/3] Add division line between post metadata and content
---
static/css/general.css | 4 ++++
templates/page.html | 1 +
2 files changed, 5 insertions(+)
diff --git a/static/css/general.css b/static/css/general.css
index 4ab7c3c..522fdaa 100644
--- a/static/css/general.css
+++ b/static/css/general.css
@@ -114,6 +114,10 @@ td, th {
display: inline;
}
+#last-article-metadata {
+ margin-bottom: 1rem;
+}
+
@media (max-width: 20rem), (max-width: 300px) {
* {
word-wrap: break-word;
diff --git a/templates/page.html b/templates/page.html
index 0d88a20..f8315c1 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -25,5 +25,6 @@
>
{% endif %}
+
{{ page.content | safe }}
{% endblock content %}
From 931ac00e22ae99dc8c568824bbe4893fb8582e2c Mon Sep 17 00:00:00 2001
From: Jonas Tobias Hopusch
Date: Thu, 2 Mar 2023 02:53:19 +0100
Subject: [PATCH 3/3] 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 %}
-
+
-
-
+
{% block content %} {% endblock %}
-
+