Updated to Shifu v1.0.

assets/js/main.js

@@ -1 +1,13 @@
-console.log("Hi!");
+console.log("Hi! Welcome to my website.");
+
+document.addEventListener("DOMContentLoaded", () => {
+    const nav = document.querySelector("#nav");
+
+    document.querySelector(".burger").addEventListener("click", () => {
+        if (nav.classList.contains("open")) {
+            nav.classList.remove("open");
+        } else {
+            nav.classList.add("open");
+        }
+    });
+});

assets/scss/main.scss

@@ -119,6 +119,8 @@ nav {
 			gap: 20px;
 			margin: 0;
 			padding: 0;
+			overflow: hidden;
+			transition: all .5s;
 
 			li {
 				list-style: none;
@@ -149,6 +151,22 @@ nav {
 
 			@media screen and (max-width: 580px) {
 				flex-direction: column;
+				max-height: 0;
+			}
+		}
+
+		.open {
+			max-height: 220px;
+		}
+
+		.burger {
+			display: none;
+			width: 42px;
+			height: 42px;
+			cursor: pointer;
+
+			@media screen and (max-width: 580px) {
+				display: inline;
 			}
 		}
 
@@ -156,9 +174,10 @@ nav {
 			display: inline-block;
 			padding: 8px 16px;
 			border-radius: $borderRadius;
-			border: 2px solid $textColor;
+			border: 3px solid $textColor;
 			color: $textColor;
 			transition: all 0.3s;
+			font-weight: 600;
 
 			&:hover {
 				background: $textColor;
@@ -172,13 +191,11 @@ nav {
 
 		@media screen and (max-width: 890px) {
 			padding: 40px;
+			align-items: flex-start;
 		}
 
 		@media screen and (max-width: 420px) {
 			padding: 20px 0;
-			flex-direction: column;
-			gap: 10px;
-			align-items: flex-start;
 		}
 	}
 
@@ -187,7 +204,7 @@ nav {
 	}
 
 	@media screen and (max-width: 420px) {
-		padding: 20px;
+		padding: 0 20px;
 	}
 }
 
@@ -218,6 +235,10 @@ footer {
 		border-color: $lightGray;
 		padding: 40px 0;
 	}
+
+	@media screen and (max-width: 420px) {
+		padding: 0 20px;
+	}
 }
 
 .intro {
@@ -265,7 +286,7 @@ footer {
 	}
 
 	@media screen and (max-width: 420px) {
-		padding: 0 20px 20px 20px;
+		padding: 0 20px 40px 20px;
 	}
 }
 

content/home.json

@@ -20,7 +20,7 @@
                 "copy": {
                     "en": {
                         "headline": "About",
-                        "text": "<p>I started programming in PHP when I was about 11 years old. Later, I studied computer science, started my own company, and worked for a variety of clients developing websites, custom software, and distributed systems. My current project, Pirsch Analytics (a privacy-friendly web analytics tool), sits at ~$100k ARR.</p><p>My skill set includes:</p><ul><li>Go (Golang), JavaScript, PHP, SQL, and a few others I don't use regularly</li><li>HTML, CSS, Sass, VueJs, Node, and other web technologies</li><li>Linux (local and on servers), Docker, Kubernetes, HashiCorp Nomad, Hetzner, and other cloud technologies</li></ul><p>If you're interested, I'm available for hire (use the <strong>Contact me</strong> button above or take a look at our <a href='https://emvi.com' target='_blank'>company website</a>).</p>"
+                        "text": "<p>I started programming in PHP when I was about 11 years old. Later, I studied computer science, started my own company, and worked for a variety of clients developing websites, custom software, and distributed systems. My current project, Pirsch Analytics (a privacy-friendly web analytics tool), sits at ~$100k ARR.</p><p>My skill set includes:</p><ul><li>Go (Golang), JavaScript, PHP, SQL, and a few others I don't use regularly</li><li>HTML, CSS, Sass, VueJs, Node, and other web technologies</li><li>Linux (local and on servers), Docker, Kubernetes, HashiCorp Nomad, Hetzner, and other cloud technologies</li></ul><p>If you're interested, I'm available for hire (use the <strong>Contact me</strong> button above or take a look at our <a href='https://emvi.com?ref=marvinblum.de' target='_blank'>company website</a>).</p>"
                     }
                 }
             },
@@ -32,7 +32,7 @@
                 "copy": {
                     "en": {
                         "headline": "Work Experience",
-                        "text": "<ul><li>Pirsch Co-founder of a privacy-preserving, open-source web analytics SaaS</li><li>Emvi Co-founder</li><li>skalar marketing as full stack developer</li><li>arvato systems GmbH as a Java developer</li><li>Some freelance work</li></ul>"
+                        "text": "<ul><li>Pirsch Co-founder of a privacy-preserving, open-source web analytics SaaS</li><li>Emvi Co-founder</li><li>skalar marketing as a full stack developer</li><li>arvato systems GmbH as a Java developer</li><li>Some freelance work</li></ul>"
                     }
                 }
             },

dev_config.json

@@ -10,8 +10,7 @@
         "secure_cookies": false,
         "cookie_domain_name": "marvinblum.de"
     },
-    "content": {
+    "git": {
-        "provider": "git",
         "update_seconds": 30,
         "repository": "https://github.com/Kugelschieber/marvinblum.git"
     },

static/blog/emvi-blog.md

@@ -87,7 +87,7 @@ var funcMap = template.FuncMap{
 Blog
 ----
 
-[Emvi](https://emvi.com/) offers an API which allows anyone to use it as a headless CMS. The main advantage of it is, that I can use its editor to write my blog articles, upload images/files and don't need to worry about hosting my own CMS. Apart from that I'm using Emvi for note taking and documentation anyways, so I can stay on the same platform.
+[Emvi](https://emvi.com?ref=marvinblum.de) offers an API which allows anyone to use it as a headless CMS. The main advantage of it is, that I can use its editor to write my blog articles, upload images/files and don't need to worry about hosting my own CMS. Apart from that I'm using Emvi for note taking and documentation anyways, so I can stay on the same platform.
 
 To read articles, I make use of the [Go client library](https://github.com/emvi/api-go). It isn't complete yet, as Emvi is still in beta, but provides everything required to build a blog. On top of it I build my own type to cache articles and files and sort them into maps, which are rendered on my page later. You could just use the client to do all of that without caching, but to reduce latency and serve articles in case Emvi goes down for some reason, I thought that would be a good idea.
 

static/blog/go-db-transactions.md

@@ -36,7 +36,7 @@ I hope this helps you to prevent some nasty deadlock bugs. I found quite a few i
 
 * * *
 
-Would you like to see more? Read my blog articles on [Emvi](https://emvi.com/blog), my project page on [GitHub](https://github.com/Kugelschieber) or send me a [mail](mailto:marvin@marvinblum.de).
+Would you like to see more? Read my blog articles on [Emvi](https://emvi.com/blog?ref=marvinblum.de), my project page on [GitHub](https://github.com/Kugelschieber) or send me a [mail](mailto:marvin@marvinblum.de).
 
 This page uses [concrete](https://concrete.style/) for styling. Check it out!
 

static/blog/server-side-tracking.md

@@ -111,4 +111,4 @@ Another disadvantage of server-side tracking depending on your use-case might be
 Conclusion
 ----------
 
-Tracking on the server-side isn't too hard to archive and all in all, I think it's worth the effort. I hope you gained some insight into how you can use fingerprinting and Pirsch to your advantage. I will continue improving Pirsch and implement it into [Emvi](https://emvi.com/) and compare the output to Analytics. I might also add a user interface for Pirsch so that you can host it without integrating it into your application and without the need to generate the charts yourself. In case you would like to send me feedback, have a question, or would like to contribute you can contact me.
+Tracking on the server-side isn't too hard to archive and all in all, I think it's worth the effort. I hope you gained some insight into how you can use fingerprinting and Pirsch to your advantage. I will continue improving Pirsch and implement it into [Emvi](https://emvi.com?ref=marvinblum.de) and compare the output to Analytics. I might also add a user interface for Pirsch so that you can host it without integrating it into your application and without the need to generate the charts yourself. In case you would like to send me feedback, have a question, or would like to contribute you can contact me.

static/blog/vue3.md

@@ -1,13 +1,13 @@
 **Published on 22. October 2020**
 
-I recently started working on the user interface for [Pirsch](https://pirsch.io/) and was very happy to hear that Vue 3 [has been officially released](https://news.vuejs.org/issues/186) and marked production-ready. While most of the other core libraries, like vue-router and vuex, are still in beta, I didn't want to build upon Vue 2. Don't get me wrong, Vue 2 is a great framework and stable, but I wasn't satisfied with my approach to building frontends anymore.
+I recently started working on the user interface for [Pirsch](https://pirsch.io/?ref=marvinblum.de) and was very happy to hear that Vue 3 [has been officially released](https://news.vuejs.org/issues/186) and marked production-ready. While most of the other core libraries, like vue-router and vuex, are still in beta, I didn't want to build upon Vue 2. Don't get me wrong, Vue 2 is a great framework and stable, but I wasn't satisfied with my approach to building frontends anymore.
 
 This article is about the transition to a new project setup, my first steps in Vue 3, and the experiences I made using it together with TypeScript. I will provide code samples and highlight a few features I found useful and refreshing.
 
 Some Background
 ---------------
 
-I started learning Vue back when they made the transition from version 1 to 2 and I quickly built my own setup, ignoring the default way of setting up a project through the vue-cli. This time, however, I wanted to just use what's there and not wrap my head around setting up stuff like webpack. Additionally, I wanted to try out TypeScript, something I have shied away from for a long time, mostly because I believed it would add an additional layer of abstraction on top of vanilla JavaScript, which seemed unnecessary to me. And as we recently started developing a new product called [Pirsch](https://pirsch.io/), which has a fairly simple frontend, I took the opportunity to try out something new. As I'm a beginner with TypeScript, please let me know if you find anything odd or plain wrong.
+I started learning Vue back when they made the transition from version 1 to 2 and I quickly built my own setup, ignoring the default way of setting up a project through the vue-cli. This time, however, I wanted to just use what's there and not wrap my head around setting up stuff like webpack. Additionally, I wanted to try out TypeScript, something I have shied away from for a long time, mostly because I believed it would add an additional layer of abstraction on top of vanilla JavaScript, which seemed unnecessary to me. And as we recently started developing a new product called [Pirsch](https://pirsch.io/?ref=marvinblum.de), which has a fairly simple frontend, I took the opportunity to try out something new. As I'm a beginner with TypeScript, please let me know if you find anything odd or plain wrong.
 
 Setup
 -----

static/web/main.css

@@ -1 +1 @@
-@font-face{font-family:"Open Sans";font-style:italic;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Italic.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Bold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-BoldItalic.ttf") format("truetype")}*{box-sizing:border-box;font-family:"Open Sans",sans-serif;font-size:18px;line-height:2;color:#0f0f0f}@media screen and (max-width: 890px){*{font-size:16px}}body{margin:0;padding:0 0 160px 0}h1,h2{font-size:32px;margin:0 0 40px 0;font-weight:normal}h1 a,h2 a{font-size:32px}@media screen and (max-width: 890px){h1 a,h2 a{font-size:26px}}@media screen and (max-width: 890px){h1,h2{font-size:26px;margin:0 0 20px 0}}h2{margin:40px 0;font-size:26px}@media screen and (max-width: 890px){h2{font-size:20px;margin:20px 0}}a{text-decoration:none;transition:all .3s;color:#717171}a:hover{color:#0f0f0f}p,ul{margin:20px 0}img{display:block;max-width:80%;margin:40px auto}pre{max-width:80%;margin:40px auto;padding:20px;border-width:1px 1px 1px 2px;border-style:solid;border-color:#c0d9f0;border-radius:8px;overflow-x:auto;font-size:14px}code{font-family:"Courier New",Courier,monospace}hr{margin:40px 0;height:2px;background:#e6e6e6;border-width:0}blockquote{margin:40px 0 40px 40px;padding:10px 20px;border-width:0 0 0 2px;border-style:solid;border-color:#c0d9f0}nav{padding:80px 40px;background:#c0d9f0}nav .content{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto}nav .content ul{display:flex;gap:20px;margin:0;padding:0}nav .content ul li{list-style:none;margin:0;padding:0}nav .content ul li a{color:#0f0f0f}nav .content ul li a svg{fill:#0f0f0f;transition:all .3s}nav .content ul li a:hover{color:#717171}nav .content ul li a:hover svg{fill:#717171}@media screen and (max-width: 890px){nav .content ul{gap:10px}}@media screen and (max-width: 580px){nav .content ul{flex-direction:column}}nav .content .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:2px solid #0f0f0f;color:#0f0f0f;transition:all .3s}nav .content .contact:hover{background:#0f0f0f;color:#fff}@media screen and (max-width: 890px){nav .content .contact{padding:4px 8px}}@media screen and (max-width: 890px){nav .content{padding:40px}}@media screen and (max-width: 420px){nav .content{padding:20px 0;flex-direction:column;gap:10px;align-items:flex-start}}@media screen and (max-width: 890px){nav{padding:0}}@media screen and (max-width: 420px){nav{padding:20px}}section{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}@media screen and (max-width: 890px){section{margin:40px auto 0 auto}}@media screen and (max-width: 420px){section{padding:0 20px}}footer{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer .content{max-width:1000px;margin:0 auto;border-style:solid;border-width:2px 0 0 0;border-color:#e6e6e6;padding:40px 0}.intro{background:#c0d9f0;max-width:100%;padding:0 40px 80px 40px;margin:0}.intro article{max-width:1000px;margin:0 auto;display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:196px;max-height:196px;aspect-ratio:1;border-radius:8px}@media screen and (max-width: 890px){.intro article img{max-width:142px;max-height:142px}}@media screen and (max-width: 600px){.intro article img{margin:0}}@media screen and (max-width: 600px){.intro article{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 600px){.intro{padding:0 40px 40px 40px}}@media screen and (max-width: 420px){.intro{padding:0 20px 20px 20px}}.blog-entry{margin-bottom:0}.blog-entry p{margin:0;color:#717171}.blog-entry h2{margin:0}.blog-entry a{color:#0f0f0f;font-size:26px}.blog-entry a:hover{color:#717171}@media screen and (max-width: 890px){.blog-entry a{font-size:20px}}/*# sourceMappingURL=main.css.map */
+@font-face{font-family:"Open Sans";font-style:italic;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Italic.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:normal;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Regular.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:normal;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-Bold.ttf") format("truetype")}@font-face{font-family:"Open Sans";font-style:italic;font-weight:bold;font-stretch:100%;font-display:swap;src:url("../font/OpenSans-BoldItalic.ttf") format("truetype")}*{box-sizing:border-box;font-family:"Open Sans",sans-serif;font-size:18px;line-height:2;color:#0f0f0f}@media screen and (max-width: 890px){*{font-size:16px}}body{margin:0;padding:0 0 160px 0}h1,h2{font-size:32px;margin:0 0 40px 0;font-weight:normal}h1 a,h2 a{font-size:32px}@media screen and (max-width: 890px){h1 a,h2 a{font-size:26px}}@media screen and (max-width: 890px){h1,h2{font-size:26px;margin:0 0 20px 0}}h2{margin:40px 0;font-size:26px}@media screen and (max-width: 890px){h2{font-size:20px;margin:20px 0}}a{text-decoration:none;transition:all .3s;color:#717171}a:hover{color:#0f0f0f}p,ul{margin:20px 0}img{display:block;max-width:80%;margin:40px auto}pre{max-width:80%;margin:40px auto;padding:20px;border-width:1px 1px 1px 2px;border-style:solid;border-color:#c0d9f0;border-radius:8px;overflow-x:auto;font-size:14px}code{font-family:"Courier New",Courier,monospace}hr{margin:40px 0;height:2px;background:#e6e6e6;border-width:0}blockquote{margin:40px 0 40px 40px;padding:10px 20px;border-width:0 0 0 2px;border-style:solid;border-color:#c0d9f0}nav{padding:80px 40px;background:#c0d9f0}nav .content{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto}nav .content ul{display:flex;gap:20px;margin:0;padding:0;overflow:hidden;transition:all .5s}nav .content ul li{list-style:none;margin:0;padding:0}nav .content ul li a{color:#0f0f0f}nav .content ul li a svg{fill:#0f0f0f;transition:all .3s}nav .content ul li a:hover{color:#717171}nav .content ul li a:hover svg{fill:#717171}@media screen and (max-width: 890px){nav .content ul{gap:10px}}@media screen and (max-width: 580px){nav .content ul{flex-direction:column;max-height:0}}nav .content .open{max-height:220px}nav .content .burger{display:none;width:42px;height:42px;cursor:pointer}@media screen and (max-width: 580px){nav .content .burger{display:inline}}nav .content .contact{display:inline-block;padding:8px 16px;border-radius:8px;border:3px solid #0f0f0f;color:#0f0f0f;transition:all .3s;font-weight:600}nav .content .contact:hover{background:#0f0f0f;color:#fff}@media screen and (max-width: 890px){nav .content .contact{padding:4px 8px}}@media screen and (max-width: 890px){nav .content{padding:40px;align-items:flex-start}}@media screen and (max-width: 420px){nav .content{padding:20px 0}}@media screen and (max-width: 890px){nav{padding:0}}@media screen and (max-width: 420px){nav{padding:0 20px}}section{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}@media screen and (max-width: 890px){section{margin:40px auto 0 auto}}@media screen and (max-width: 420px){section{padding:0 20px}}footer{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}footer .content{max-width:1000px;margin:0 auto;border-style:solid;border-width:2px 0 0 0;border-color:#e6e6e6;padding:40px 0}@media screen and (max-width: 420px){footer{padding:0 20px}}.intro{background:#c0d9f0;max-width:100%;padding:0 40px 80px 40px;margin:0}.intro article{max-width:1000px;margin:0 auto;display:flex;gap:40px;justify-content:flex-start;align-items:center}.intro article h1{margin:0}.intro article img{max-width:196px;max-height:196px;aspect-ratio:1;border-radius:8px}@media screen and (max-width: 890px){.intro article img{max-width:142px;max-height:142px}}@media screen and (max-width: 600px){.intro article img{margin:0}}@media screen and (max-width: 600px){.intro article{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 600px){.intro{padding:0 40px 40px 40px}}@media screen and (max-width: 420px){.intro{padding:0 20px 40px 20px}}.blog-entry{margin-bottom:0}.blog-entry p{margin:0;color:#717171}.blog-entry h2{margin:0}.blog-entry a{color:#0f0f0f;font-size:26px}.blog-entry a:hover{color:#717171}@media screen and (max-width: 890px){.blog-entry a{font-size:20px}}/*# sourceMappingURL=main.css.map */

static/web/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../assets/scss/_font.scss","../../assets/scss/main.scss"],"names":[],"mappings":"AAAA,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,0DAGJ,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,2DAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,wDAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,8DCzBJ,EACC,sBACA,mCACA,eACA,cACA,MAVW,QAYX,qCAPD,EAQE,gBAIF,KACC,SACA,oBAGD,MACC,eACA,kBACA,mBAEA,UACC,eAEA,qCAHD,UAIE,gBAIF,qCAbD,MAcE,eACA,mBAIF,GACC,cACA,eAEA,qCAJD,GAKE,eACA,eAIF,EACC,qBACA,mBACA,MArDW,QAuDX,QACC,MAzDU,QA6DZ,KACC,cAGD,IACC,cACA,cACA,iBAGD,IACC,cACA,iBACA,aACA,6BACA,mBACA,aA1EW,QA2EX,cA/Ec,IAgFd,gBACA,eAGD,KACC,4CAGD,GACC,cACA,WACA,WAxFW,QAyFX,eAGD,WACC,wBACA,kBACA,uBACA,mBACA,aAhGW,QAmGZ,IACC,kBACA,WArGW,QAuGX,aACC,aACA,8BACA,mBACA,iBACA,cAEA,gBACC,aACA,SACA,SACA,UAEA,mBACC,gBACA,SACA,UAEA,qBACC,MA7HO,QA+HP,yBACC,KAhIM,QAiIN,mBAGD,2BACC,MApIM,QAsIN,+BACC,KAvIK,QA6IT,qCA7BD,gBA8BE,UAGD,qCAjCD,gBAkCE,uBAIF,sBACC,qBACA,iBACA,cA3JY,IA4JZ,yBACA,MA5JS,QA6JT,mBAEA,4BACC,WAhKQ,QAiKR,WAGD,qCAbD,sBAcE,iBAIF,qCA/DD,aAgEE,cAGD,qCAnED,aAoEE,eACA,sBACA,SACA,wBAIF,qCA/ED,IAgFE,WAGD,qCAnFD,IAoFE,cAIF,QACC,iBACA,wBACA,eAEA,qCALD,QAME,yBAGD,qCATD,QAUE,gBAIF,OACC,iBACA,wBACA,eAEA,gBACC,iBACA,cACA,mBACA,uBACA,aApNU,QAqNV,eAIF,OACC,WAzNW,QA0NX,eACA,yBACA,SAEA,eACC,iBACA,cACA,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAlPY,IAoPZ,qCAND,mBAOE,gBACA,kBAGD,qCAXD,mBAYE,UAIF,qCA5BD,eA6BE,sBACA,wBAIF,qCAxCD,OAyCE,0BAGD,qCA5CD,OA6CE,0BAIF,YACC,gBAEA,cACC,SACA,MAhRU,QAmRX,eACC,SAGD,cACC,MAzRU,QA0RV,eAEA,oBACC,MA5RS,QA+RV,qCARD,cASE","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../assets/scss/_font.scss","../../assets/scss/main.scss"],"names":[],"mappings":"AAAA,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,0DAGJ,WACI,wBACA,kBACA,mBACA,kBACA,kBACA,2DAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,wDAGJ,WACI,wBACA,kBACA,iBACA,kBACA,kBACA,8DCzBJ,EACC,sBACA,mCACA,eACA,cACA,MAVW,QAYX,qCAPD,EAQE,gBAIF,KACC,SACA,oBAGD,MACC,eACA,kBACA,mBAEA,UACC,eAEA,qCAHD,UAIE,gBAIF,qCAbD,MAcE,eACA,mBAIF,GACC,cACA,eAEA,qCAJD,GAKE,eACA,eAIF,EACC,qBACA,mBACA,MArDW,QAuDX,QACC,MAzDU,QA6DZ,KACC,cAGD,IACC,cACA,cACA,iBAGD,IACC,cACA,iBACA,aACA,6BACA,mBACA,aA1EW,QA2EX,cA/Ec,IAgFd,gBACA,eAGD,KACC,4CAGD,GACC,cACA,WACA,WAxFW,QAyFX,eAGD,WACC,wBACA,kBACA,uBACA,mBACA,aAhGW,QAmGZ,IACC,kBACA,WArGW,QAuGX,aACC,aACA,8BACA,mBACA,iBACA,cAEA,gBACC,aACA,SACA,SACA,UACA,gBACA,mBAEA,mBACC,gBACA,SACA,UAEA,qBACC,MA/HO,QAiIP,yBACC,KAlIM,QAmIN,mBAGD,2BACC,MAtIM,QAwIN,+BACC,KAzIK,QA+IT,qCA/BD,gBAgCE,UAGD,qCAnCD,gBAoCE,sBACA,cAIF,mBACC,iBAGD,qBACC,aACA,WACA,YACA,eAEA,qCAND,qBAOE,gBAIF,sBACC,qBACA,iBACA,cA7KY,IA8KZ,yBACA,MA9KS,QA+KT,mBACA,gBAEA,4BACC,WAnLQ,QAoLR,WAGD,qCAdD,sBAeE,iBAIF,qCAlFD,aAmFE,aACA,wBAGD,qCAvFD,aAwFE,gBAIF,qCAhGD,IAiGE,WAGD,qCApGD,IAqGE,gBAIF,QACC,iBACA,wBACA,eAEA,qCALD,QAME,yBAGD,qCATD,QAUE,gBAIF,OACC,iBACA,wBACA,eAEA,gBACC,iBACA,cACA,mBACA,uBACA,aArOU,QAsOV,eAGD,qCAdD,OAeE,gBAIF,OACC,WA9OW,QA+OX,eACA,yBACA,SAEA,eACC,iBACA,cACA,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAvQY,IAyQZ,qCAND,mBAOE,gBACA,kBAGD,qCAXD,mBAYE,UAIF,qCA5BD,eA6BE,sBACA,wBAIF,qCAxCD,OAyCE,0BAGD,qCA5CD,OA6CE,0BAIF,YACC,gBAEA,cACC,SACA,MArSU,QAwSX,eACC,SAGD,cACC,MA9SU,QA+SV,eAEA,oBACC,MAjTS,QAoTV,qCARD,cASE","file":"main.css"}

static/web/main.min.js

@@ -1 +1 @@
-(()=>{console.log("Hi!");})();
+(()=>{console.log("Hi! Welcome to my website.");document.addEventListener("DOMContentLoaded",()=>{let e=document.querySelector("#nav");document.querySelector(".burger").addEventListener("click",()=>{e.classList.contains("open")?e.classList.remove("open"):e.classList.add("open")})});})();

tpl/footer.html

@@ -1,6 +1,6 @@
 <footer>
     <div class="content">
-        <p>Looking for more? Read my blog articles on <a href="https://pirsch.io/blog" target="_blank">Pirsch Analytics</a> and <a href="https://emvi.com/blog" target="_blank">Emvi</a>!</p>
+        <p>Looking for more? Read my blog articles on <a href="https://pirsch.io/blog?ref=marvinblum.de" target="_blank">Pirsch Analytics</a> and <a href="https://emvi.com/blog?ref=marvinblum.de" target="_blank">Emvi</a>!</p>
         <p>If you have a business proposal for me, please use the <strong>Contact me</strong> button at the top.</p>
         <p>This page does not use cookies. <a href="/legal">Legal</a></p>
     </div>

tpl/intro.html

@@ -1,6 +1,6 @@
 <section class="intro">
     <article>
-        <h1>Hi, I'm Marvin, co-founder of <a href="https://pirsch.io" target="_blank">Pirsch Analytics</a> and <a href="https://emvi.com" target="_blank">Emvi</a>, software engineer, and open-source enthusiast.</h1>
+        <h1>Hi, I'm Marvin, co-founder of <a href="https://pirsch.io?ref=marvinblum.de" target="_blank">Pirsch Analytics</a> and <a href="https://emvi.com?ref=marvinblum.de" target="_blank">Emvi</a>, software engineer, and open-source enthusiast.</h1>
         <img src="/static/img/me.jpg" alt="Picture" />
     </article>
 </section>

tpl/nav.html

@@ -1,6 +1,8 @@
 <nav>
     <div class="content">
-        <ul>
+        <div style="display: flex;flex-direction: column;gap: 4px;">
+            <svg class="burger" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><g><g><circle cx="290.909" cy="104.727" r="11.636"/></g></g><g><g><circle cx="151.273" cy="104.727" r="11.636"/></g></g><g><g><circle cx="256" cy="151.273" r="11.636"/></g></g><g><g><circle cx="325.818" cy="151.273" r="11.636"/></g></g><g><g><circle cx="360.727" cy="104.727" r="11.636"/></g></g><g><g><circle cx="395.636" cy="151.273" r="11.636"/></g></g><g><g><circle cx="116.364" cy="151.273" r="11.636"/></g></g><g><g><circle cx="221.091" cy="104.727" r="11.636"/></g></g><g><g><circle cx="186.182" cy="151.273" r="11.636"/></g></g><g><g><path d="M256,11.636c-132.655,0-232.727,65.164-232.727,151.273v23.273c0,19.782,15.127,34.909,34.909,34.909h395.636c19.782,0,34.909-15.127,34.909-34.909v-23.273C488.727,76.8,388.655,11.636,256,11.636z M465.455,186.182c0,6.982-4.655,11.636-11.636,11.636H58.182c-6.982,0-11.636-4.655-11.636-11.636v-23.273c0-72.146,91.927-128,209.455-128s209.455,55.854,209.455,128V186.182z"/></g></g><g><g><path d="M477.091,244.364h-26.764c-15.127,0-30.255,5.818-40.727,17.455l-23.273,23.273c-13.964,13.964-36.073,13.964-48.873,0l-23.273-23.273c-10.473-10.473-25.6-17.455-40.727-17.455H34.909c-6.982,0-11.636,4.655-11.636,11.636c0,6.982,4.655,11.636,11.636,11.636h236.218c9.309,0,18.618,3.491,24.436,10.473l23.273,23.273c11.636,11.636,26.764,17.455,40.727,17.455c13.964,0,30.255-5.818,40.727-17.455l23.273-23.273c6.982-6.982,15.127-10.473,24.436-10.473h29.091c6.982,0,11.636-4.655,11.636-11.636C488.727,249.018,484.073,244.364,477.091,244.364z"/></g></g><g><g><path d="M453.818,384H58.182c-19.782,0-34.909,15.127-34.909,34.909v23.273c0,32.582,25.6,58.182,58.182,58.182h349.091c32.582,0,58.182-25.6,58.182-58.182v-23.273C488.727,399.127,473.6,384,453.818,384z M465.455,442.182c0,19.782-15.127,34.909-34.909,34.909H81.455c-19.782,0-34.909-15.127-34.909-34.909v-23.273c0-6.982,4.655-11.636,11.636-11.636h395.636c6.982,0,11.636,4.655,11.636,11.636V442.182z"/></g></g><g><g><path d="M477.091,290.909h-23.273c-6.982,0-11.636,4.655-11.636,11.636s4.655,11.636,11.636,11.636h23.273c6.982,0,11.636,4.655,11.636,11.636s-4.655,11.636-11.636,11.636H34.909c-6.982,0-11.636-4.655-11.636-11.636s4.655-11.636,11.636-11.636h232.727c6.982,0,11.636-4.655,11.636-11.636s-4.655-11.636-11.636-11.636H34.909C15.127,290.909,0,306.036,0,325.818c0,19.782,15.127,34.909,34.909,34.909h442.182c19.782,0,34.909-15.127,34.909-34.909C512,306.036,496.873,290.909,477.091,290.909z"/></g></g></svg>
+            <ul id="nav">
                 <li>
                     <a href="/">Home</a>
                 </li>
@@ -32,6 +34,7 @@
                     </a>
                 </li>
             </ul>
+        </div>
         <div>
             <a href="mailto:marvin.blum@emvi.com" class="contact">Contact me</a>
         </div>