From caca1c825e93ee203a203dd0e7a30d1fde356289 Mon Sep 17 00:00:00 2001 From: michivonah Date: Sat, 15 Mar 2025 21:03:11 +0100 Subject: [PATCH] implement age calculation + fix icons bug in english version --- content/de/about.md | 2 +- content/en/about.md | 2 +- layouts/shortcodes/age.html | 2 ++ .../akar-icons-fonts/src/css/akar-icons.css | 6 +++--- static/akar-icons-fonts/src/index.js | 2 +- static/main.js | 21 ++++++++++++++++++- static/style.css | 4 ++++ 7 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 layouts/shortcodes/age.html diff --git a/content/de/about.md b/content/de/about.md index 2b0c3ed..ffe17fb 100644 --- a/content/de/about.md +++ b/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. diff --git a/content/en/about.md b/content/en/about.md index 37b1636..63cc5ae 100644 --- a/content/en/about.md +++ b/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. diff --git a/layouts/shortcodes/age.html b/layouts/shortcodes/age.html new file mode 100644 index 0000000..bcf90ec --- /dev/null +++ b/layouts/shortcodes/age.html @@ -0,0 +1,2 @@ +{{- $birthdate := .Get 0 -}} + \ No newline at end of file diff --git a/static/akar-icons-fonts/src/css/akar-icons.css b/static/akar-icons-fonts/src/css/akar-icons.css index d8752ca..c93d20f 100644 --- a/static/akar-icons-fonts/src/css/akar-icons.css +++ b/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"), -url("../fonts/akar-icons.woff?1f3540771cfc5786c664ac6bc39123ba") format("woff"), -url("../fonts/akar-icons.svg?1f3540771cfc5786c664ac6bc39123ba#akar-icons") format("svg"); + src: url("/akar-icons-fonts/src/fonts/akar-icons.ttf?1f3540771cfc5786c664ac6bc39123ba") format("truetype"), +url("/akar-icons-fonts/src/fonts/akar-icons.woff?1f3540771cfc5786c664ac6bc39123ba") format("woff"), +url("/akar-icons-fonts/src/fonts/akar-icons.svg?1f3540771cfc5786c664ac6bc39123ba#akar-icons") format("svg"); } i[class^="ai-"]:before, i[class*=" ai-"]:before { diff --git a/static/akar-icons-fonts/src/index.js b/static/akar-icons-fonts/src/index.js index 0ec4113..cb72761 100644 --- a/static/akar-icons-fonts/src/index.js +++ b/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); \ No newline at end of file diff --git a/static/main.js b/static/main.js index 8ea7e36..f96a751 100644 --- a/static/main.js +++ b/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')); \ No newline at end of file + 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; + } \ No newline at end of file diff --git a/static/style.css b/static/style.css index fedad4d..eb9ff02 100644 --- a/static/style.css +++ b/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;