fixed alignment of titles

.gitea/workflows/deploy.yml

@@ -12,6 +12,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.x"
+
+      - name: Install dependencies
+        run: pip install pyyaml
+
+      - name: Build site
+        run: python build.py
+
       - name: Install rsync
         run: sudo apt-get update && sudo apt-get install -y rsync
 

.gitignore

@@ -0,0 +1,2 @@
+public/de
+public/en

build.py

@@ -2,8 +2,8 @@ import yaml
 import os
 
 LANG_LABELS = {
-    "en": "English",
+    "en": "english",
-    "de": "Deutsch",
+    "de": "deutsch",
 }
 
 with open("content.yaml", "r") as f:

content.yaml

@@ -1,6 +1,6 @@
 index:
   en:
-    page-title: "Personal Website"
+    page-title: "Marco's Homepage"
     introduction-heading: "Hi, I'm Marco"
     introduction-subheading: "and this is my website"
     about-paragraph: "I'm a software developer from Germany.<br>
@@ -17,7 +17,7 @@ index:
       Will this website win a beauty contest? No.<br>
       But at least there's a human behind it."
   de:
-    page-title: "Persönliche Webseite"
+    page-title: "Marco's Homepage"
     introduction-heading: "Hi, ich bin Marco"
     introduction-subheading: "und das ist meine Webseite"
     about-paragraph: "Ich bin Softwareentwickler aus Deutschland.<br>
@@ -33,3 +33,69 @@ index:
       und meine HTML und CSS Fähigkeiten aufzufrischen schadet auch nicht.<br>
       Wird diese Website einen Schönheitswettbewerb gewinnen? Nein.<br>
       Doch wenigstens ist sie handgemacht."
+
+music:
+  en:
+    page-title: "Marco's music taste"
+    music-heading: "my taste in music"
+    lang-short: en
+    music-paragraph: "I mostly listen to metal, more specifically djent, progressive, death, black and core.
+      Outside of metal I like post-hardcore, post-rock, shoegaze, (german) indie pop and some songs from lots of other genres.
+      On this page I'll list some Bands, Albums and Songs that I like, as well as display some music stats."
+    djent-paragraph: "Even though djent is a subgenre of progressive metal, I need to mention it here. Not only do I listen to it the most,
+      but I also think the distinction is clear enough to list it as a seperate genres.
+      Djent is definitely my favourite. Bands that play in this style are so diverse and the discography of most of my favourites are a goldmine.
+      The big three are some of my all-time favourite bands. Periphery, Tesseract and Meshuggah relased more excellent music in the past 1-3 decades than you can listen to.
+      Meshuggah have been consistent with their style for over 30 years. Tesseract always had a great mix of sensual, melancholic and heavy. 
+      Periphery stayed true to their roots and their roots are 'doing whatever they wanna do'. Especially because of Periphery's diverse discography, listening to them never gets boring.
+      They have an album for every day of the week, no matter the mood.
+      <br>Other bands I need to mention are VOLA, Vildhjarta, The Contortionist and Karmanjakah. All with their very unique style."
+    metalcore-paragraph: >-
+      I had a bit of a weird relationship with metalcore over the years. Some of the first
+      bands I listened to made metalcore. As a teenager I almost exclusively listened to
+      Bring Me The Horizon, Atreyu and Escape the Fate. That changed in 2015, when Bring
+      Me The Horizon released their "That's the Spirit" and Atreyu their "Long Live". 
+      At the time I found them terrible and it devasted me to a point I started searching for other music.
+      I grew to love Melodic Deathmetal instead and left Metalcore behind.<br>
+      All changed when I discovered ERRA in 2022 and later Invent Animate.
+      This new 'era' of Metalcore suited me well. The genre developed over the years just like my taste.
+      ERRA's high energy and djent-infused riffs immediately hooked me and Invent Animate soon grew to be one of my all-time favourites.
+    invent-animate-paragraph: >-
+      The first song I listened to of them was Cloud Cascade. After finishing an ERRA-album the song automatically played after and I knew this was my new obsession.
+      Melodic, unique and melacholic riffs, paired with passionate vocals and that breakdown...
+      I binged their discography the same week and their album "Greyview" became one of my all-time favourites.
+      Invent Animate supported ERRA during their 2023 Europe-tour and I hate to say that Invent Animate stole the show from ERRA.
+      When they released their album "heavener", I couldn't believe how good it was. I had it on repeat for the following weeks and still listen to it regularly.
+
+  de:
+    music-heading: "mein Musikgeschmack"
+    page-title: "Marco's musikgeschmack"
+    lang-short: de
+    music-paragraph: "I mostly listen to metal, more specifically djent, progressive, death, black and core.
+      Outside of metal I like post-hardcore, post-rock, shoegaze, (german) indie pop and some songs from lots of other genres.
+      On this page I'll list some Bands, Albums and Songs that I like, as well as display some music stats."
+    djent-paragraph: "Even though djent is a subgenre of progressive metal, I need to mention it here. Not only do I listen to it the most,
+      but I also think the distinction is clear enough to list it as a seperate genres.
+      Djent is definitely my favourite. Bands that play in this style are so diverse and the discography of most of my favourites are a goldmine.
+      The big three are some of my all-time favourite bands. Periphery, Tesseract and Meshuggah relased more excellent music in the past 1-3 decades than you can listen to.
+      Meshuggah have been consistent with their style for over 30 years. Tesseract always had a great mix of sensual, melancholic and heavy. 
+      Periphery stayed true to their roots and their roots are 'doing whatever they wanna do'. Especially because of Periphery's diverse discography, listening to them never gets boring.
+      They have an album for every day of the week, no matter the mood.
+      Other bands I need to mention are VOLA, Vildhjarta, The Contortionist and Karmanjakah. All with their very unique style."
+    metalcore-paragraph: >-
+      I had a bit of a weird relationship with metalcore over the years. Some of the first
+      bands I listened to made metalcore. As a teenager I almost exclusively listened to
+      Bring Me The Horizon, Atreyu and Escape the Fate. That changed in 2015, when Bring
+      Me The Horizon released their "That's the Spirit" and Atreyu their "Long Live". 
+      At the time I found them terrible and it devasted me to a point I started searching for other music.
+      I grew to love Melodic Deathmetal instead and left Metalcore behind.<br>
+      All changed when I discovered ERRA in 2022 and later Invent Animate.
+      This new 'era' of Metalcore suited me well. The genre developed over the years just like my taste.
+      ERRA's high energy and djent-infused riffs immediately hooked me and Invent Animate soon grew to be one of my all-time favourites.
+    invent-animate-paragraph: >-
+      The first song I listened to of them was Cloud Cascade. After finishing an ERRA-album the song automatically played after and I knew this was my new obsession.
+      Melodic, unique and melacholic riffs, paired with passionate vocals and that breakdown...
+      I binged their discography the same week and their album "Greyview" became one of my all-time favourites.
+      Invent Animate supported ERRA during their 2023 Europe-tour and I hate to say that Invent Animate stole the show from ERRA.
+      When they released their album "heavener", I couldn't believe how good it was. I had it on repeat for the following weeks and still listen to it regularly.
+      

public/de/index.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-
-<head>
-    <meta name="robots" content="noindex nofollow">
-    <link rel="stylesheet" href="../styles.css">
-    <title>Persönliche Webseite</title>
-</head>
-
-<body>
-    <nav>
-        <a class="navbar" href="../en/index.html">English</a>
-    </nav>
-    <div id="navbar-outer">
-        <div id="navbar">
-            <a href="#about">About</a>
-            <a href="#why">Why</a>
-        </div>
-    </div>
-    <header id="about">
-        <h1>Hi, ich bin Marco</h1>
-        <p>und das ist meine Webseite</p>
-    </header>
-    <p>Ich bin Softwareentwickler aus Deutschland.<br> Zu meinen Hobbys gehören Bouldern, Gaming, Wandern und Kochen.<br> Ich interessiere mich für Musik (vor allem Metal), Konzertbesuche, FOSS-Projekte und Datenhoheit.<br> Menschen, die feste Ideale und eigene Meinungen haben, schätze ich am meisten! Ich würde mich freuen, deine zu hören.<br> Auf dieser Seite werde ich alles posten, was mir gerade durch den Kopf geht, und es wird keine feste Struktur geben, also habt bitte etwas Nachsicht.</p>
-    <h2 id="why">Wieso?</h2>
-    <p>In Zeiten von KI-'Slop' bewirkt ein wenig meschlichkeit sehr viel.<br> Ich lese gerne blogs und posts die von Menschen geschrieben werden, also wollte ich meinen eigenen schreiben.<br> Suchmaschinen wie Kagi, die einen das 'small-web' durchsuchen lassen, werden immer populärer. Die kreativen Websites von anderen Leuten zu sehen hat mich ebenso inspiriert<br> und meine HTML und CSS Fähigkeiten aufzufrischen schadet auch nicht.<br> Wird diese Website einen Schönheitswettbewerb gewinnen? Nein.<br> Doch wenigstens ist sie handgemacht.</p>
-</body>
-
-</html>

public/en/index.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta name="robots" content="noindex nofollow">
-    <link rel="stylesheet" href="../styles.css">
-    <title>Personal Website</title>
-</head>
-
-<body>
-    <nav>
-        <a class="navbar" href="../de/index.html">Deutsch</a>
-    </nav>
-    <div id="navbar-outer">
-        <div id="navbar">
-            <a href="#about">About</a>
-            <a href="#why">Why</a>
-        </div>
-    </div>
-    <header id="about">
-        <h1>Hi, I'm Marco</h1>
-        <p>and this is my website</p>
-    </header>
-    <p>I'm a software developer from Germany.<br> My hobbies include bouldering, gaming, hiking and cooking.<br> I'm interested in music (mostly metal), visiting concerts, FOSS-Projects and Data-Sovereignty.<br> People I value the most are those with firm ideals and own opinions! I'd love to hear yours.<br> On this page I'll post whatever is on my mind and it will have no structure, so bear with me.</p>
-    <h2 id="why">Why?</h2>
-    <p>In times of AI-slop, a little humanity goes a long way.<br> I love reading blogs and posts made by humans, so I decided to create my own.<br> Search-engines like Kagi, that allow you to search the 'small web', grow more popular.<br> Seeing other people's creative websites inspired me as well and on top of that:<br> I'm refreshing some HTML and CSS skills!<br> Will this website win a beauty contest? No.<br> But at least there's a human behind it.</p>
-</body>
-
-</html>

public/styles.css

@@ -1,18 +1,58 @@
-body {
+@font-face {
-  text-align: center;
+  font-family: ubuntuSansMono;
-  background-color: #222222;
+  src: url(fonts/UbuntuSansMono-VariableFont_wght.ttf);
 }
 
-h1, h2, h3, h4, h5, p {
+@font-face {
+  font-family: comicMono;
+  src: url(fonts/ComicMono.ttf);
+}
+
+
+body {
+  text-align: center;
+  background-color: #221826;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  font-family: ubuntuSansMono;
   color: #DDDDEE
 }
 
 a {
   color: #DD7FB6;
+  font-family: ubuntuSansMono;
   text-decoration: none
 }
 
 #navbar {
+  position: sticky;
+  top: 0;
+  overflow: hidden;
+  display: block;
+}
+
+#navbar a {
+  padding: 5px;
+  display: inline-block;
+  font-size: larger;
+}
+
+#language {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  float: right;
+  padding: 15px;
+  font-size: larger;
+}
+
+#sidebar {
   position: fixed;
   top: 0;
   right: 0;
@@ -20,17 +60,86 @@ a {
   flex-direction: column;
   display: flex;
   float: right;
+  padding: 15px;
 }
 
-#navbar a {
+#sidebar a {
   float: right;
   display: block;
   text-align: end;
   padding: 5px;
   text-decoration: none;
+  font-size: larger;
 }
 
-#navbar a:hover {
+a:hover {
   color: #D0A7DF
 }
 
+iframe {
+  border: none;
+}
+
+iframe.nowplaying {
+  width: 400px;
+  height: 170px;
+
+}
+
+div.nowplaying {
+  position: fixed;
+  bottom: 15px;
+  left: 15px;
+}
+
+div.audiocard {
+  background-color: #51324A;
+  display: inline-flex;
+  text-align: left;
+  padding: 15px;
+  border-radius: 15px;
+  height: fit-content;
+}
+
+div.audiocard-floating-left {
+  margin: 0 20px 20px 0;
+  float: left;
+}
+
+div.audiocard-floating-right {
+  margin: 0 0 20px 20px;
+  float: right;
+}
+
+div.audioinner {
+  padding-left: 15px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+img.albumcoversmall {
+  height: 100px;
+  width: 100px;
+  border-radius: 12px;;
+}
+
+div.audioinner a,
+p {
+  margin: 5px;
+}
+
+iframe.bandcamptracksmall {
+  border: 0;
+  width: 400px;
+  height: 42px
+}
+
+/*colors:
+#221826
+#51324A
+#804C6E
+#DD7FB6
+#D0A7DF
+#DDDDEE
+*/

template-index.html

@@ -8,12 +8,16 @@
 </head>
 
 <body>
-    <nav>
+    <div id="language">
         {{language-switcher}}
-    </nav>
+    </div>
     <div id="navbar">
-            <a href="#about">About</a>
+        <a href="index.html">home</a>
-            <a href="#why">Why</a>
+        <a href="music.html">music</a>
+    </div>
+    <div id="sidebar">
+        <a href="#about">about</a>
+        <a href="#why">why</a>
     </div>
     <header id="about">
         <h1>{{introduction-heading}}</h1>

template-music.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="{{lang}}">
+
+<head>
+    <meta name="robots" content="noindex nofollow">
+    <link rel="stylesheet" href="../styles.css">
+    <title>{{page-title}}</title>
+</head>
+
+<body>
+    <div id="language">
+        {{language-switcher}}
+    </div>
+
+    <div id="navbar">
+        <a href="index.html">home</a>
+        <a href="music.html">music</a>
+    </div>
+    <div class="nowplaying">
+        <iframe class="nowplaying" title="last.fm now playing widget"
+            src="https://lastfm-embed.vercel.app/api/currently-playing?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6"></iframe>
+    </div>
+
+    <header id="about">
+        <h1>{{music-heading}}</h1>
+        <p>{{music-paragraph}}</p>
+    </header>
+
+    <h2 id="djent">djent</h2>
+
+    <div style="display: flex;">
+        <div class="audiocard audiocard-floating-left">
+            <img class="albumcoversmall"
+                src="https://archive.org/download/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321-28191981668_thumb250.jpg"
+                alt="Album cover of Periphery's Juggernaut: Alpha">
+            <div class="audioinner">
+                <p>Periphery - Rainbow Gravity</p>
+                <a href="https://sumerianrecords.bandcamp.com/album/juggernaut-alpha">Juggernaut: Alpha</a>
+                <audio controls>
+                    <source src="../music/Periphery - Juggernnaut Alpha.mp3" type="audio/mpeg">
+                    Your browser does not support the audio element.
+                </audio>
+            </div>
+        </div>
+
+        <p>{{djent-paragraph}}</p>
+
+    </div>
+
+    <h2 id="metalcore">metalcore</h2>
+
+    <div style="display: flex;">
+        <p>{{metalcore-paragraph}}</p>
+
+        <div class="audiocard audiocard-floating-right">
+            <img class="albumcoversmall"
+                src="https://archive.org/download/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054-26050116040_thumb250.jpg"
+                alt="Album cover of Invent Animate's Greyview">
+            <div class="audioinner">
+                <p>Invent Animate - Cloud Cascade</p>
+                <a href="https://inventanimate.bandcamp.com/album/greyview">Greyview</a>
+                <audio controls>
+                    <source src="../music/Invent Animate - Cloud Cascade.mp3" type="audio/mpeg">
+                    Your browser does not support the audio element.
+                </audio>
+            </div>
+        </div>
+    </div>
+
+    <h3>invent animate</h3>
+
+    <p>{{invent-animate-paragraph}}</p>
+
+    <h2 id="progressive">progressive metal</h2>
+
+    <div class="audiocard">
+        <img class="albumcoversmall"
+            src="https://archive.org/download/mbid-dcb6d817-0f33-4faa-8720-fb720396a0a8/mbid-dcb6d817-0f33-4faa-8720-fb720396a0a8-14429420393_thumb250.jpg"
+            alt="Album cover of Fallujah's Dreamless">
+        <div class="audioinner">
+            <p>Fallujah - Dreamless</p>
+            <a href="https://fallujah.bandcamp.com/album/dreamless">Dreamless</a>
+            <audio controls>
+                <source src="../music/Fallujah - Dreamless.mp3" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>
+    </div>
+
+    <h2 id="stats">some music stats</h2>
+
+    <iframe width="550" height="650" title="last.fm top songs 7 days"
+        src="https://lastfm-embed.vercel.app/api/top-tracks?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=7day&layout=vertical&rows=0&columns=2"></iframe>
+    <iframe width="550" height="650" title="last.fm top artists last month"
+        src="https://lastfm-embed.vercel.app/api/top-artists?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=1month&layout=vertical&rows=6&columns=2&usePlaceholderImage=false"></iframe>
+    <iframe width="500" title="last.fm top artists last month"
+        src="https://lastfm-embed.vercel.app/api/stats?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&numberFormat=periods"></iframe>
+</body>
+
+</html>