implement age calculation + fix icons bug in english version

content/de/about.md

@@ -6,7 +6,7 @@ image: "/assets/about-me/about-me.jpg"
 
 Hallo! Ich heisse Michi und interessiere mich für Smartphones, Computer, Elektromobilität (hauptsächlich Tesla) und weitere spannende Technik.
 
-- 19 Jahre alt
+- {{< age "16,09,2005" >}} Jahre alt
 - Informatiker Plattformentwicklung i.A.
 
 Meine Freizeit verbringe ich gerne am Computer. Dort programmiere ich entweder kleine Dinge für mich ([siehe GitHub](https://github.com/michivonah)), wie diese Website, oder hoste neue Software auf meiner Infrastruktur. Ebenfalls gehe ich gerne Spazieren und höre dabei Musik oder Podcasts zu. Zudem bin ich ein grosser Fan des Europa-Park und besuche diesen regelmässig. Um meinen Tag dort optimal zu gestalten, habe ich sogar einen Bot gebaut, welchen mich jeweils per Push-Benachrichtung auf mein Smartphone über die aktuellen Wartezeiten informiert ([hier die Details auf GitHub](https://github.com/michivonah/themepark-alerts)). Ausserdem fliege ich gerne mit meiner Drohne oder mache Fotos mit meinem Smartphone. Und manchmal backe ich auch einen Kuchen.

content/en/about.md

@@ -6,7 +6,7 @@ image: "/assets/about-me/about-me.jpg"
 
 Hi! My name is Michi and I'm interested in smartphones, computers, e-mobility (mainly Tesla) and other exciting technology.
 
-- 19 years old
+- {{< age "16,09,2005" >}} years old
 - Trainee computer scientist (Informatiker Plattformentwicklung)
 
 I like to spend my free time at the computer. I either code little things for myself ([see GitHub](https://github.com/michivonah)), like this website, or host new software on my infrastructure. I also enjoy going for walks and listening to music or podcasts. I'm also a big fan of Europa-Park and visit it regularly. To optimise my day there, I even built a bot that informs me about the current waiting times via push notification on my smartphone ([here are the details on GitHub](https://github.com/michivonah/themepark-alerts)). I also like to fly my drone or take photos with my smartphone. And sometimes I bake a cake.

layouts/shortcodes/age.html

@@ -0,0 +1,2 @@
+{{- $birthdate := .Get 0 -}}
+<var class="age" data-birthdate="{{ $birthdate }}"></var>

static/akar-icons-fonts/src/css/akar-icons.css

@@ -1,8 +1,8 @@
 @font-face {
     font-family: "akar-icons";
-    src: url("../fonts/akar-icons.ttf?1f3540771cfc5786c664ac6bc39123ba") format("truetype"),
+    src: url("/akar-icons-fonts/src/fonts/akar-icons.ttf?1f3540771cfc5786c664ac6bc39123ba") format("truetype"),
-url("../fonts/akar-icons.woff?1f3540771cfc5786c664ac6bc39123ba") format("woff"),
+url("/akar-icons-fonts/src/fonts/akar-icons.woff?1f3540771cfc5786c664ac6bc39123ba") format("woff"),
-url("../fonts/akar-icons.svg?1f3540771cfc5786c664ac6bc39123ba#akar-icons") format("svg");
+url("/akar-icons-fonts/src/fonts/akar-icons.svg?1f3540771cfc5786c664ac6bc39123ba#akar-icons") format("svg");
 }
 
 i[class^="ai-"]:before, i[class*=" ai-"]:before {

static/akar-icons-fonts/src/index.js

@@ -2,5 +2,5 @@ var head = document.getElementsByTagName("head")[0];
 var link = document.createElement("link");
 link.rel = "stylesheet";
 link.type = "text/css";
-link.href = "akar-icons-fonts/src/css/akar-icons.css";
+link.href = "/akar-icons-fonts/src/css/akar-icons.css";
 head.appendChild(link);

static/main.js

@@ -2,6 +2,7 @@
 document.addEventListener('DOMContentLoaded', function(){
     scrollTopVisibilityUpdate();
     updateNavStyle();
+    calculateAge(".age");
 });
 
 window.addEventListener('scroll', function(){
@@ -69,4 +70,22 @@ const observer = new IntersectionObserver(entries => {
     });
   });
   
-  observer.observe(document.querySelector('.contact-title-wrapper'));
+  observer.observe(document.querySelector('.contact-title-wrapper'));
+
+  // calculate age
+  function calculateAge(selector){
+    const obj = document.querySelector(selector);
+    const birthdate = obj.getAttribute("data-birthdate").split(",");
+    const birth = new Date(birthdate[2], birthdate[1] - 1, birthdate[0]);
+    const today = new Date();
+
+    let age = today.getFullYear() - birth.getFullYear();
+    const monthDiff = today.getMonth() - birth.getMonth();
+    const dayDiff = today.getDate() - birth.getDate();
+
+    if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
+        age--;
+    }
+
+    obj.textContent = age;
+  }

static/style.css

@@ -332,6 +332,10 @@ nav.small .nav-links a:last-child:hover{
     background: var(--primary);
 }
 
+.about var{
+    font-style: normal;
+}
+
 /* PROJECTS */
 .projects{
     text-align: center;