Compare commits

..

11 Commits

Author SHA1 Message Date
078fbd70aa Updated to Shifu v1.0. 2025-03-09 21:31:31 +01:00
b41b35734f Improved mobile nav. 2024-08-09 14:15:59 +02:00
10c752e6e1 Removed burger.html. 2024-08-09 14:06:28 +02:00
7675311970 Improved mobile navigation. 2024-08-09 14:05:07 +02:00
Marvin Blum
9e4d8ac2bf Button font weight. 2024-06-12 21:43:00 +02:00
d9f065d060 Fixed responsive styling. 2024-05-30 10:59:03 +02:00
904bbd130a Added referrer to external links. 2024-05-29 14:30:33 +02:00
46859b3ed2 Typo. 2024-05-29 14:26:35 +02:00
c2c3b0000f Responsive. 2024-05-29 12:27:20 +02:00
e513fb67b5 About me. 2024-05-29 12:12:02 +02:00
82ea722a09 Finished blog. 2024-05-29 11:58:01 +02:00
30 changed files with 505 additions and 76 deletions

View File

@@ -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");
}
});
});

View File

@@ -10,13 +10,17 @@ $highlight: #c0d9f0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 2;
color: $textColor; color: $textColor;
@media screen and (max-width: 890px) {
font-size: 16px;
}
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0 0 160px 0;
} }
h1, h2 { h1, h2 {
@@ -26,12 +30,26 @@ h1, h2 {
a { a {
font-size: 32px; font-size: 32px;
@media screen and (max-width: 890px) {
font-size: 26px;
}
}
@media screen and (max-width: 890px) {
font-size: 26px;
margin: 0 0 20px 0;
} }
} }
h2 { h2 {
margin: 40px 0; margin: 40px 0;
font-size: 26px; font-size: 26px;
@media screen and (max-width: 890px) {
font-size: 20px;
margin: 20px 0;
}
} }
a { a {
@@ -44,7 +62,7 @@ a {
} }
} }
p { p, ul {
margin: 20px 0; margin: 20px 0;
} }
@@ -77,6 +95,14 @@ hr {
border-width: 0; border-width: 0;
} }
blockquote {
margin: 40px 0 40px 40px;
padding: 10px 20px;
border-width: 0 0 0 2px;
border-style: solid;
border-color: $highlight;
}
nav { nav {
padding: 80px 40px; padding: 80px 40px;
background: $highlight; background: $highlight;
@@ -93,6 +119,8 @@ nav {
gap: 20px; gap: 20px;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden;
transition: all .5s;
li { li {
list-style: none; list-style: none;
@@ -116,21 +144,67 @@ nav {
} }
} }
} }
@media screen and (max-width: 890px) {
gap: 10px;
}
@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;
}
} }
.contact { .contact {
display: inline-block; display: inline-block;
padding: 8px 16px; padding: 8px 16px;
border-radius: $borderRadius; border-radius: $borderRadius;
border: 2px solid $textColor; border: 3px solid $textColor;
color: $textColor; color: $textColor;
transition: all 0.3s; transition: all 0.3s;
font-weight: 600;
&:hover { &:hover {
background: $textColor; background: $textColor;
color: #fff; color: #fff;
} }
@media screen and (max-width: 890px) {
padding: 4px 8px;
}
} }
@media screen and (max-width: 890px) {
padding: 40px;
align-items: flex-start;
}
@media screen and (max-width: 420px) {
padding: 20px 0;
}
}
@media screen and (max-width: 890px) {
padding: 0;
}
@media screen and (max-width: 420px) {
padding: 0 20px;
} }
} }
@@ -138,6 +212,14 @@ section {
max-width: 1080px; max-width: 1080px;
margin: 80px auto 0 auto; margin: 80px auto 0 auto;
padding: 0 40px; padding: 0 40px;
@media screen and (max-width: 890px) {
margin: 40px auto 0 auto;
}
@media screen and (max-width: 420px) {
padding: 0 20px;
}
} }
footer { footer {
@@ -153,6 +235,10 @@ footer {
border-color: $lightGray; border-color: $lightGray;
padding: 40px 0; padding: 40px 0;
} }
@media screen and (max-width: 420px) {
padding: 0 20px;
}
} }
.intro { .intro {
@@ -178,6 +264,54 @@ footer {
max-height: 196px; max-height: 196px;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: $borderRadius; border-radius: $borderRadius;
@media screen and (max-width: 890px) {
max-width: 142px;
max-height: 142px;
}
@media screen and (max-width: 600px) {
margin: 0;
}
}
@media screen and (max-width: 600px) {
flex-direction: column;
align-items: flex-start;
}
}
@media screen and (max-width: 600px) {
padding: 0 40px 40px 40px;
}
@media screen and (max-width: 420px) {
padding: 0 20px 40px 20px;
}
}
.blog-entry {
margin-bottom: 0;
p {
margin: 0;
color: $linkColor;
}
h2 {
margin: 0;
}
a {
color: $textColor;
font-size: 26px;
&:hover {
color: $linkColor;
}
@media screen and (max-width: 890px) {
font-size: 20px;
} }
} }
} }

View File

@@ -9,6 +9,87 @@
"content": [ "content": [
{"ref": "head"}, {"ref": "head"},
{"ref": "nav"}, {"ref": "nav"},
{
"tpl": "text",
"data": {
"size": "h1"
},
"copy": {
"en": {
"headline": "Blog"
}
}
},
{
"tpl": "blog_entry",
"copy": {
"en": {
"date": "22. October 2020",
"headline": "My Experience With Vue 3 and Typescript So Far",
"link": "/blog/my-experience-with-vue-3-and-typescript-so-far-bZ1DQzJdjK"
}
}
},
{
"tpl": "blog_entry",
"copy": {
"en": {
"date": "28. August 2020",
"headline": "Testing Database Transactions in Go",
"link": "/blog/testing-database-transactions-in-go-jEaOGXravM"
}
}
},
{
"tpl": "blog_entry",
"copy": {
"en": {
"date": "7. July 2020",
"headline": "Wildcard SSL Certificates on Kubernetes Using ACME DNS",
"link": "/blog/wildcard-ssl-certificates-on-kubernetes-using-acme-dns-0odQzebaLO"
}
}
},
{
"tpl": "blog_entry",
"copy": {
"en": {
"date": "7. July 2020",
"headline": "Golang: Transforming IDs to a User-Friendly Representation in Web Applications",
"link": "/blog/golang-transforming-ids-to-a-user-friendly-representation-in-web-applications-OxdzmRZ1Bl"
}
}
},
{
"tpl": "blog_entry",
"copy": {
"en": {
"date": "3. July 2020",
"headline": "A Quick Update on Pirsch",
"link": "/blog/a-quick-update-on-pirsch-me1VJzz1Xy"
}
}
},
{
"tpl": "blog_entry",
"copy": {
"en": {
"date": "22. June 2020",
"headline": "Server-Side Tracking Without Cookies In Go",
"link": "/blog/server-side-tracking-without-cookies-in-go-OxdzmGZ1Bl"
}
}
},
{
"tpl": "blog_entry",
"copy": {
"en": {
"date": "14. June 2020",
"headline": "How I Built My Website Using Emvi as a Headless CMS",
"link": "/blog/how-i-built-my-website-using-emvi-as-a-headless-cms-RGaqOqK18w"
}
}
},
{"ref": "footer"}, {"ref": "footer"},
{"ref": "end"} {"ref": "end"}
] ]

View File

@@ -14,10 +14,25 @@
}, },
{ {
"tpl": "text", "tpl": "text",
"data": {
"size": "h2"
},
"copy": { "copy": {
"en": { "en": {
"headline": "TODO", "headline": "About",
"text": "<ul><li>About</li><li>Skills</li><li>Projects</li><li>Work Experience</li><li>Hire me!</li></ul>" "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>"
}
}
},
{
"tpl": "text",
"data": {
"size": "h2"
},
"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 a full stack developer</li><li>arvato systems GmbH as a Java developer</li><li>Some freelance work</li></ul>"
} }
} }
}, },

View File

@@ -9,6 +9,35 @@
"content": [ "content": [
{"ref": "head"}, {"ref": "head"},
{"ref": "nav"}, {"ref": "nav"},
{
"tpl": "text",
"data": {
"size": "h1"
},
"copy": {
"en": {
"headline": "Legal"
}
}
},
{
"tpl": "text",
"copy": {
"en": {
"headline": "According to §5 TMG",
"text": "<p>Marvin Blum<br />Schulbusch 29<br />33378 Rheda-Wiedenbrück, Germany<br />marvin@marvinblum.de</p>"
}
}
},
{
"tpl": "text",
"copy": {
"en": {
"headline": "Cookie Policy",
"text": "<p>This page does not use cookies.</p>"
}
}
},
{"ref": "footer"}, {"ref": "footer"},
{"ref": "end"} {"ref": "end"}
] ]

View File

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

View File

@@ -87,7 +87,7 @@ var funcMap = template.FuncMap{
Blog 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. 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.

View File

@@ -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! This page uses [concrete](https://concrete.style/) for styling. Check it out!

View File

@@ -2,7 +2,7 @@
> _This post was originally published on Medium a while ago. I just added it to my blog for completeness._ > _This post was originally published on Medium a while ago. I just added it to my blog for completeness._
![https://api.emvi.com/api/v1/content/AIVEMz3CkZoRI7wunlVp.png](https://marvinblum.de/static/blog/OxdzmRZ1Bl/AIVEMz3CkZoRI7wunlVp.png) ![Gopher](/static/blog/hideid/gopher.png)
Most Golang web applications use persistency in some way or another. Usually, the connection between your application and the persistent layer is a technical identification value (ID), a number in most cases. IDs are useful to identify, connect and distinguish data records. Here is a typical example of a database model represented as a struct within Golang applications: Most Golang web applications use persistency in some way or another. Usually, the connection between your application and the persistent layer is a technical identification value (ID), a number in most cases. IDs are useful to identify, connect and distinguish data records. Here is a typical example of a database model represented as a struct within Golang applications:
@@ -185,17 +185,3 @@ type Customer struct {
And thats it! If you want to know more about how to implement this or just use it right away, you can visit the GitHub project, which implements all of the functionality Ive shown above. It uses HashIds, which Ive mentioned earlier, to transform the IDs to a nice and short hash representation. And thats it! If you want to know more about how to implement this or just use it right away, you can visit the GitHub project, which implements all of the functionality Ive shown above. It uses HashIds, which Ive mentioned earlier, to transform the IDs to a nice and short hash representation.
[
![](https://avatars0.githubusercontent.com/u/33937375?s=400&v=4)
emvi/hide
ID type with marshalling to/from hash to prevent sending IDs to clients. - emvi/hide
https://github.com/emvi/hide
](https://github.com/emvi/hide)

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

View File

@@ -20,14 +20,14 @@ Pirsch is German and refers to a special kind of hunt: _the hunter carefully an
I found this quite fitting for a tracking library that cannot be blocked by the visitor. Even though it sounds a little sneaky. Here is the Gopher for it created by [Daniel](https://github.com/Motorschpocht). I found this quite fitting for a tracking library that cannot be blocked by the visitor. Even though it sounds a little sneaky. Here is the Gopher for it created by [Daniel](https://github.com/Motorschpocht).
![https://api.emvi.com/api/v1/content/0wV4YBIYaCm9JiteSaa3.svg](https://marvinblum.de/static/blog/OxdzmGZ1Bl/0wV4YBIYaCm9JiteSaa3.svg) ![Gopher](/static/blog/servertracking/gopher.svg)
How Does It Work? How Does It Work?
----------------- -----------------
I will go over each step in more detail later, but here is a high-level overview of how Pirsch tracks visitors. I will go over each step in more detail later, but here is a high-level overview of how Pirsch tracks visitors.
![https://api.emvi.com/api/v1/content/xaISIoTt8WAsFYWchuX8.svg](https://marvinblum.de/static/blog/OxdzmGZ1Bl/xaISIoTt8WAsFYWchuX8.svg) ![Network Flow](/static/blog/servertracking/network.svg)
Once someone visits your website, the HTTP handler calls Pirsch to store a new hit and goes on with whatever it intends to do. Pirsch will do its best to filter out bots, calculate a fingerprint, and stores the page hit. You can analyze the data and generate statistics from it later. Once someone visits your website, the HTTP handler calls Pirsch to store a new hit and goes on with whatever it intends to do. Pirsch will do its best to filter out bots, calculate a fingerprint, and stores the page hit. You can analyze the data and generate statistics from it later.
@@ -89,7 +89,7 @@ Pirsch provides an _Analyzer_ that can be used to extract some basic statistics:
Most of these functions accept a filter to specify a time frame. The data can then be plotted like on my [tracking page](https://marvinblum.de/tracking). Most of these functions accept a filter to specify a time frame. The data can then be plotted like on my [tracking page](https://marvinblum.de/tracking).
![https://api.emvi.com/api/v1/content/QOeMcMKi8yS2p4WB2Xlu.png](https://marvinblum.de/static/blog/OxdzmGZ1Bl/QOeMcMKi8yS2p4WB2Xlu.png) ![Charts](/static/blog/servertracking/charts.png)
To reduce the amount of data that needs to be processed the hits get aggregated each night and hits are cleaned up afterward. To reduce the amount of data that needs to be processed the hits get aggregated each night and hits are cleaned up afterward.
@@ -111,4 +111,4 @@ Another disadvantage of server-side tracking depending on your use-case might be
Conclusion 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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 44 KiB

View File

@@ -0,0 +1,102 @@
<svg width="1244.51123" height="579.12561" xmlns="http://www.w3.org/2000/svg">
<desc/>
<g>
<title>background</title>
<rect fill="#ffffff" id="canvas_background" height="581.12561" width="1246.51123" y="-1" x="-1"/>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" fill="#000000" d="m1146.6,267.9c24.2,10.9 48,23.9 66.6,42.9c18.5,19 31.3,44.9 29.8,71.4c-1.3,23.7 -13.7,45.6 -29.7,63.1c-36.9,40.4 -91,60.2 -144.1,73.7c-114.4,29.1 -233,35.7 -350.9,42.3c-59.9,3.4 -119.8,6.7 -179.8,8.6c-53.6,1.7 -108,2.1 -159.9,-11.5c-21.9,-5.7 -44.8,-15.3 -56.1,-34.9c-6.3,-11 -8.2,-24.1 -8.3,-36.8c-0.6,-75.8 56.7,-140.4 120.5,-181.5c78.7,-50.7 172.5,-77.7 266.2,-76.7c-80.1,9.6 -161.5,23 -233.3,59.9c-71.8,37 -133.6,101.3 -148.9,180.6c-3.3,16.7 -4.2,35 3.9,49.9c9.2,17 28,26.2 46.3,32.3c53.8,17.8 111.7,17 168.4,15.1c50.6,-1.7 101.1,-4.1 151.7,-6.6c120.1,-6.1 240.8,-12.9 358.4,-38.4c64.3,-14 131.7,-36.4 171.9,-88.5c10,-13 18.1,-27.8 20.5,-44c3.9,-26.3 -7.9,-53.1 -26.1,-72.5c-18.2,-19.4 -42.1,-32.5 -66.3,-43.5c-52.2,-23.9 -107.8,-40.1 -164.6,-48.1c56.4,5.3 112,20 163.8,43.2"/>
<path id="svg_2" fill="#000000" d="m1131.9,355.4c-1.8,0.7 -4,0.7 -5.9,0c1.2,-2.3 3.8,-3.7 6.4,-3.6c0.9,1 0.6,2.8 -0.4,3.6"/>
<path id="svg_3" fill="#000000" d="m894,440.4c-0.4,-2 0.4,-4.7 2.4,-4.4c1.9,2.1 1.9,5.8 -0.2,7.9c-1.3,-0.6 -2.1,-2.1 -2.1,-3.5"/>
<path id="svg_4" fill="#000000" d="m247.4,430.7c2.7,0.5 4.7,3.3 4.2,5.9c-3.3,-1.6 -7.1,-2.3 -10.8,-1.9c0.4,-2.8 3.9,-4.8 6.5,-3.6"/>
<path id="svg_5" fill="#000000" d="m1130.6,360.6c0.9,3.8 0.1,8.1 -2.2,11.3c-0.6,0.8 -1.3,1.6 -2.2,1.9c0.1,-4.7 1.6,-9.4 4.4,-13.2"/>
<path id="svg_6" fill="#000000" d="m43.6,277.5c1.3,3 0.4,6.8 -2.1,8.9c-2.4,-5.2 -2.4,-11.4 -0.1,-16.7c1.7,2.2 2.6,4.9 2.6,7.7"/>
<path id="svg_7" fill="#000000" d="m683,340.3c-0.5,-3.3 0.4,-6.9 2.6,-9.5c2.1,5.2 1.4,11.5 -1.9,16.1c-1.4,-1.8 -1.9,-4.4 -1.2,-6.7"/>
<path id="svg_8" fill="#000000" d="m1036.7,370.7c-1.3,-2.5 0.6,-5.6 3.1,-6.9c2.4,-1.3 5.3,-1.5 8,-2.2c-0.4,3 -1.5,5.9 -3.3,8.3c-0.7,-0.7 -1.4,-1.4 -2.1,-2.1c-1.6,1.5 -3.6,2.5 -5.7,2.9"/>
<path id="svg_9" fill="#000000" d="m825.2,319.8c0.4,-5.1 1.1,-10.2 2,-15.2c0.2,-1.1 1.3,-1.9 2.4,-1.7c0.8,5.2 0.2,10.6 -1.7,15.5c-0.5,1.2 -2,2.4 -2.7,1.4"/>
<path id="svg_10" fill="#000000" d="m895.1,453.9c1.3,5.9 0.4,12.3 -2.3,17.7c-1,-6.7 -1.3,-13.5 -0.8,-20.3c1.3,-0.9 2.8,1 3.1,2.6"/>
<path id="svg_11" fill="#000000" d="m894.3,214.4c8,0.3 15.9,0.7 23.9,1c-7.9,1.4 -16.1,1 -23.9,-1"/>
<path id="svg_12" fill="#000000" d="m1112.8,366.3c0.9,3.5 0.1,7.4 -2.1,10.3c-2.1,-4.3 -2.6,-9.3 -1.4,-14c4.1,-2.4 9.6,-2.2 13.5,0.5c-3.3,1 -6.7,2.1 -10,3.2"/>
<path id="svg_13" fill="#000000" d="m1117,296.2c-0.8,4.7 -1.6,9.3 -2.3,14c-0.2,0.7 -0.3,1.4 -0.7,2c-0.7,0.8 -2,1.1 -3,0.5c0.8,-7.3 1.8,-14.6 3,-21.8c2.4,-0.8 3.4,2.9 3,5.3"/>
<path id="svg_14" fill="#000000" d="m1112,329.5c2.3,0.2 4.7,-0.4 6.6,-1.8c0.5,2.4 -0.9,5 -3.2,6c-2.2,1 -5.1,0.1 -6.5,-2c-1.5,-2.3 -1.1,-5.3 -0.5,-8c0.4,-2.5 2.3,-5.7 4.5,-4.6c-1,3.3 -1.4,6.9 -0.9,10.4"/>
<path id="svg_15" fill="#000000" d="m1068.9,376c-3,-2.3 -2.8,-7.4 -0.2,-10.2c2.6,-2.8 6.8,-3.6 10.6,-3.2c3.1,0.4 6.5,1.8 7.8,4.6c-2.4,1.4 -5.3,0.5 -8,-0.2c-2.6,-0.6 -6,-0.6 -7.4,1.7c-1.5,2.3 -0.4,6 -2.8,7.3"/>
<path id="svg_16" fill="#000000" d="m1132.6,372.3c-0.3,-3.5 1.1,-7.1 3.8,-9.1c2.8,-2.1 7,-2.2 9.6,0.1c2.6,2.3 2.9,6.8 0.3,9.1c-0.2,0.2 -0.5,0.4 -0.8,0.5c-1.4,0.3 -2.1,-1.7 -1.8,-3c0.4,-1.4 1,-3 0.1,-4.1c-4.4,0.5 -8.6,2.9 -11.2,6.5"/>
<path id="svg_17" fill="#000000" d="m99.9,278c-2,-3.1 -1.3,-7.5 0.9,-10.5c2.2,-3 5.6,-4.9 9.2,-6c1.3,-0.4 2.9,-0.7 4,0.1c1.2,0.8 1,3.1 -0.4,3.1c-6.9,0.3 -12.4,8 -10.5,14.6c-1,0.9 -2.5,-0.1 -3.2,-1.3"/>
<path id="svg_18" fill="#000000" d="m1030.6,375.5c-1.7,-3.3 -2.3,-7.1 -1.9,-10.8c-4,1.6 -7.3,4.8 -8.9,8.8c-1.6,-3.3 -0.8,-7.6 1.9,-10.1c2.7,-2.4 7,-2.9 10.1,-1.1c0.7,4.4 0.3,9 -1.2,13.2"/>
<path id="svg_19" fill="#000000" d="m58.1,270.6c-1.5,1.5 -3.3,2.6 -5.3,3.2c3.8,0.8 6.4,5.8 4.2,9.2c-2.2,3.3 -8.5,2.2 -9,-1.8c2.4,-0.2 4.7,-0.5 7,-0.8c-3.1,-2 -5.5,-5.3 -6.4,-8.9c3,-1.6 6.9,-3.1 9.5,-0.9"/>
<path id="svg_20" fill="#000000" d="m755.1,318.9c1.7,0 3.8,0.8 4,2.5c-4.9,-0.4 -9.9,1.9 -12.8,5.8c-2.9,4 -3.7,9.4 -1.9,14c-1.6,1.4 -3.9,-0.8 -4.5,-2.9c-2.5,-9.1 5.6,-19.6 15.2,-19.4"/>
<path id="svg_21" fill="#000000" d="m731.4,160.6c2.2,4.5 3.2,9.6 2.9,14.6c-4,-2 -6,-7.1 -4.4,-11.2c-4.5,2.7 -7.2,8 -6.7,13.2c-0.8,1 -2.4,0.5 -3,-0.5c-0.6,-1.1 -0.5,-2.4 -0.3,-3.6c0.4,-2.5 0.7,-5.1 1.1,-7.6c2.9,-2.6 6.5,-4.3 10.4,-4.9"/>
<path id="svg_22" fill="#000000" d="m815,326.4c2,1.1 2.4,4 1.5,6c-0.9,2.1 -2.9,3.6 -4.8,4.8c-2.5,1.4 -5.5,2.5 -8.2,1.5c-2.3,-2.3 -2.2,-6.4 -0.2,-9c1.9,-2.7 5.3,-4 8.6,-4c1.1,0 2.2,0.1 3.1,0.7m-10.3,9.2c2.2,0.3 4.6,-0.3 6.4,-1.7c1.6,-1.2 2.8,-2.9 3.8,-4.6c-4.3,-1.5 -9.5,1.8 -10.2,6.3"/>
<path id="svg_23" fill="#000000" d="m382.7,477.8c0.8,-1.3 1.8,-2.6 3.1,-3.4c3.6,-2.2 8.8,0.8 9.6,5c0.8,4.1 -1.9,8.4 -5.6,10.4c-1.4,0.8 -3.1,1.4 -4.7,1.1c-2.6,-0.5 -4.4,-3.1 -4.6,-5.7c-0.2,-2.6 0.9,-5.2 2.2,-7.4m1.2,8.8c4.3,0.2 8,-4.8 6.7,-8.9c-3.5,0.8 -6.3,4.1 -6.4,7.7"/>
<path id="svg_24" fill="#000000" d="m362.4,479.8c3.3,-3 7.5,-4.8 11.9,-5.2c3.6,5 2.5,11.8 1.2,17.9c-2.9,0.1 -4,-3.9 -3.4,-6.7c0.5,-2.9 1.4,-6.3 -0.8,-8.3c-2.5,3.5 -4.9,6.9 -7.4,10.3c-0.7,1 -1.8,2.1 -3,1.7c-1.2,-0.5 -1,-2.4 -0.6,-3.7c0.7,-2 1.4,-4 2.1,-6"/>
<path id="svg_25" fill="#000000" d="m690.7,338c-0.1,-7.7 0.5,-15.4 1.8,-23c0.7,-3.4 1.5,-7 3.8,-9.6c2,1.8 1.2,5 0.5,7.7c-2.9,10.6 -3.5,21.8 -1.8,32.7c-3.2,-0.4 -4.2,-4.6 -4.3,-7.8"/>
<path id="svg_26" fill="#000000" d="m701.3,179.3c-1.7,1 -2.8,-2 -2.5,-3.9c1.8,-11.9 3.5,-23.7 5.3,-35.5c0.8,-0.7 2.2,-0.1 2.7,0.9c0.4,1 0.3,2.1 0.1,3.2c-1.9,11.8 -3.7,23.6 -5.6,35.3"/>
<path id="svg_27" fill="#000000" d="m711.5,160.9c2.4,-0.9 5.2,1.3 5.9,3.8c0.6,2.6 -0.3,5.3 -1.3,7.7c-1.6,3.7 -5,7.8 -8.6,6.3c-2.6,-5 -2,-11.4 1.5,-15.8c0.7,-0.9 1.4,-1.7 2.5,-2m-2.3,15.2c3.5,-3.1 5.8,-7.5 6.5,-12.1c-5.4,0.6 -9,7.3 -6.5,12.1"/>
<path id="svg_28" fill="#000000" d="m859.9,427.4c1.1,-1.4 2.7,1 2.8,2.7c0.3,12.2 0.5,24.5 0.8,36.7c0,2.2 0.1,4.5 -0.9,6.5c-2.6,-3.9 -2.7,-8.8 -2.7,-13.5c0,-10.8 0,-21.6 0,-32.4"/>
<path id="svg_29" fill="#000000" d="m1031.6,326.3c-2.3,2 -6.3,0.3 -7.7,-2.5c-1.3,-2.7 -0.9,-6 -0.4,-9.1c0.7,-4.7 1.5,-9.5 2.2,-14.3c0.6,-4.1 1.3,-8.4 3.6,-11.8c1.7,1.5 1.5,4.2 1.1,6.5c-1.4,9.1 -2.7,18.1 -4.1,27.2c2.3,0.1 4.5,1.8 5.3,4"/>
<path id="svg_30" fill="#000000" d="m850.2,335.4c-2.7,-1.5 -5.5,-3.1 -7.1,-5.7c-1.6,-2.6 -1.5,-6.6 1.1,-8.3c1.5,-1 3.5,-0.9 5.4,-0.9c0.8,0.1 1.7,0.1 2.3,0.7c1.3,1.1 0.2,3.5 -1.4,4c-1.7,0.5 -3.4,-0.3 -5,-0.9c-1.2,1.7 0.5,4.1 2.3,5.2c1.9,1.1 4.2,1.9 5,3.8c1.1,2.5 -1,5.4 -3.5,6.2c-2.6,0.9 -5.3,0.3 -8,-0.3c-2,-0.5 -4.5,-1.6 -4.5,-3.6c4.5,-0.1 8.9,-0.2 13.4,-0.2"/>
<path id="svg_31" fill="#000000" d="m792.5,170.8c-1.7,-3.9 -2.8,-8.2 -3.4,-12.4c1.2,0.2 2.4,0.4 3.6,0.6c2.9,-8.9 12.5,-15.2 21.8,-14.2c0.2,1.1 0.3,2.2 0.5,3.3c-11.4,-0.6 -21.8,11 -20.1,22.3c-0.7,0.5 -1.6,0.6 -2.4,0.4"/>
<path id="svg_32" fill="#000000" d="m825.1,324.9c0.7,3.3 1.4,6.6 2.1,10c2.3,0.3 4.6,-0.5 6.3,-2c0.9,2.6 -1.4,5.6 -4.2,5.9c-2.8,0.2 -5.4,-1.9 -6.4,-4.5c-0.9,-2.6 -0.3,-5.6 1.1,-8.1c-2.6,-0.2 -5.1,-0.5 -7.6,-0.8c2,-2.9 5.6,-4.6 9.1,-4.5c4.1,-1 8.7,-0.3 12.2,2.1c-3.8,1.9 -8.3,2.6 -12.6,1.9"/>
<path id="svg_33" fill="#000000" d="m705.2,330.4c-1.7,0.8 -3.9,0.6 -5.4,-0.7c4.2,-0.4 6.6,-5.2 7.2,-9.4c0.7,-4.2 0.7,-8.9 3.2,-12.3c1.3,5.3 1.5,10.9 0.5,16.3c1.4,0.9 3,1.5 4.7,1.7c0.9,0.7 0.1,2.2 -1,2.6c-1.1,0.4 -2.3,0.2 -3.4,0.6c-5.6,1.9 -0.3,13.6 -6,15.1c-1,-4.6 -0.9,-9.4 0.2,-13.9"/>
<path id="svg_34" fill="#000000" d="m866.5,106.3c-2.8,-0.6 -5.7,-1.3 -8.6,-1.9c-2.5,-0.6 -5.3,-1.4 -6.2,-3.7c-1.4,-3.4 2.2,-6.6 5.3,-8.5c5.3,-3.1 10.6,-6.1 16.1,-8.9c2,1.1 -0.1,4 -2,5c-6,3.3 -11.9,6.6 -17.9,9.9c3.5,1.4 7,2.8 10.4,4.2c1.7,0.7 3.8,2.3 2.9,3.9"/>
<path id="svg_35" fill="#000000" d="m687.7,167.3c-0.9,5 -1.8,10.1 -2.7,15.2c-0.9,0.1 -1.9,0.3 -2.8,0.5c-1.3,-7.3 2.6,-14.3 3.5,-21.6c0.9,-7.4 -1.2,-15.3 1.5,-22.2c2.9,5.2 3.6,11.5 2.1,17.2c-0.4,1.7 1.1,3.4 2.8,3.8c1.7,0.4 3.4,-0.2 5.1,-0.7c0.7,0.7 0.9,1.8 0.5,2.8c-1.6,2.9 -7,0 -9.1,2.6c-0.5,0.6 -0.7,1.5 -0.9,2.4"/>
<path id="svg_36" fill="#000000" d="m128.8,133.5c-4.4,3.5 -8.7,7.1 -13.1,10.7c6.9,-0.3 14,2.2 19.1,6.8c-6.2,-0.9 -12.4,-1.8 -18.5,-2.7c-1.8,-0.3 -3.9,-0.8 -4.4,-2.5c-0.5,-1.7 0.8,-3.3 2,-4.4c5,-4.8 10.3,-9.2 16,-13c2,0.7 0.5,3.7 -1.1,5.1"/>
<path id="svg_37" fill="#000000" d="m933.3,329.7c-0.7,-0.5 -1.3,-1.4 -1.4,-2.3c6,-4.4 11.9,-8.8 17.8,-13.1c-5,-1.8 -10,-3.5 -15,-5.2c-0.9,-0.4 -1.9,-0.8 -2.4,-1.6c-0.5,-0.9 0,-2.3 1,-2.2c4.2,1 8.4,2 12.7,3c2.3,0.6 5.1,1.4 6,3.7c1.2,2.9 -1.3,5.9 -3.6,7.9c-4.6,3.8 -9.7,7.1 -15.1,9.8"/>
<path id="svg_38" fill="#000000" d="m730.8,332.3c-1.4,1.9 -2.8,3.8 -4.2,5.7c3.9,-1.7 8.3,-2.2 12.5,-1.3c-5.3,3.6 -11.5,5.8 -17.8,6.4c-2.9,0.2 -6.6,-0.5 -7.2,-3.4c-0.3,-1.3 0.3,-2.6 0.8,-3.8c1,-2.2 2.1,-4.5 3.9,-6.2c1.8,-1.6 4.6,-2.4 6.8,-1.2c1.2,0.7 2.6,2.1 3.8,1.3c0.4,0.8 0.9,1.7 1.4,2.5m-9.1,1c-1.4,0.8 -3,1.7 -3.3,3.3c-0.4,1.6 1.8,3.3 2.8,2.1c2.1,-2.1 4.1,-4.2 6.2,-6.2c-2,0.1 -4,0.2 -6,0.3"/>
<path id="svg_39" fill="#000000" d="m126.3,553.4c0.9,7.5 1.9,15.1 2.8,22.6c-3.3,-2.2 -5.3,-6.1 -5.3,-10.1c-1.1,-1.1 -2.2,1.3 -2.7,2.7c-1.3,3.5 -6.9,3 -9,-0.1c-2.1,-3.1 -1.7,-7.1 -1.2,-10.8c0.4,-2.4 2,-5.5 4.1,-4.5c-0.3,4.9 -0.2,9.9 0.3,14.8c3.2,-1.9 5.6,-4.9 6.8,-8.4c0.9,-2.5 1.6,-5.7 4.2,-6.2"/>
<path id="svg_40" fill="#000000" d="m598.8,109.6c2,-0.9 4.4,-2.4 4.1,-4.6c-5.7,-1.2 -11.1,-4.1 -15.4,-8.2c5.2,0 10.5,1.4 15,3.9c1.2,0.6 2.3,1.3 3,2.4c1.5,2.3 0.6,5.4 -1.2,7.4c-1.8,2 -4.4,3.1 -6.9,4.1c-3.6,1.5 -7.2,3 -10.8,4.5c-2.5,1 -6.3,1.3 -6.8,-1.3c6.3,-2.7 12.6,-5.5 19,-8.2"/>
<path id="svg_41" fill="#000000" d="m1088.5,396.5c-3.3,-1.2 -2.4,-6.1 -1.2,-9.4c2.1,-6.2 3,-12.8 2.5,-19.3c-0.2,-1.9 1.2,-4.8 2.6,-3.5c-1.5,1.9 -0.1,5.3 2.3,5.7c0.6,-3.1 5,-4.6 7.5,-2.7c2.6,1.9 2.8,6.1 0.7,8.4c-2.2,2.4 -6,2.8 -8.8,1.2c-1.8,6.5 -3.7,13.1 -5.6,19.6m9.9,-22.7c0.9,0.3 1.8,0.1 2.5,-0.4c-0.3,-1.7 -1.1,-3.4 -2.5,-4.6c-1.2,1.3 -2.1,2.9 -2.5,4.6c0.7,0.4 1.7,0.6 2.5,0.4"/>
<path id="svg_42" fill="#000000" d="m202.9,137.3c-7.2,3.6 -14.8,6.3 -22.7,8c-1.6,-1.3 0.7,-3.6 2.6,-4.3c6.3,-2.3 12.6,-4.6 18.9,-6.9c-6.8,-1.6 -13.7,-3.3 -20.5,-5c-1.7,-0.5 -3.9,-2 -2.9,-3.4c8.5,0.2 16.9,2.1 24.7,5.5c0,2 -0.1,4.1 -0.1,6.1"/>
<path id="svg_43" fill="#000000" d="m1157.7,342.4c1.8,4.8 1.8,10.2 -0.1,14.9c4.6,1.1 9.4,1.7 14.2,1.9c0.5,1.3 -0.9,2.7 -2.2,2.9c-1.4,0.2 -2.8,-0.4 -4.1,-0.7c-3,-0.7 -6.5,0.1 -8.6,2.4c-2.1,2.3 -2.4,6.1 -0.4,8.5c1.7,0 3.4,-1.1 4,-2.6c1.2,2.1 0.4,5.1 -1.8,6.3c-2.1,1.2 -5.1,0.3 -6.3,-1.8c-2,-3.6 1.4,-8.1 0.5,-12.1c-1.9,0.4 -3.9,-1.1 -4,-3c3.4,1 6,-3.2 6.4,-6.7c0.4,-3.4 0,-7.5 2.4,-10"/>
<path id="svg_44" fill="#000000" d="m525.7,468.3c0,-3.1 2.9,-5.2 5.6,-6.8c4.6,-2.6 9.4,-4.9 14.3,-6.9c2.1,-0.8 5.5,-0.8 5.6,1.4c-6.3,3 -12.6,5.9 -19,8.8c-2.5,1.2 -2,5.4 0.2,7.1c2.2,1.8 5.2,2.1 8,2.7c2.8,0.6 5.8,2 6.5,4.8c-6.2,0.5 -12.5,-1.4 -17.4,-5.1c-2,-1.5 -3.9,-3.5 -3.8,-6"/>
<path id="svg_45" fill="#000000" d="m979.1,443.6c-5,2.2 -10,4.5 -15.1,6.8c-1.9,0.8 -3.9,1.8 -4.9,3.6c-1.1,1.8 -0.4,4.7 1.6,5.1c4.5,1 8.9,1.9 13.4,2.9c2,0.4 4.6,1.7 3.9,3.7c-6.8,0.5 -13.8,-0.9 -19.9,-4c-1.5,-0.8 -3.1,-1.8 -3.7,-3.4c-1.4,-3.4 1.9,-6.7 5,-8.7c6,-3.7 12.3,-6.8 19,-9.1c0.2,1 0.5,2 0.7,3.1"/>
<path id="svg_46" fill="#000000" d="m193.6,483.7c5.6,2.1 11.1,4.2 16.7,6.3c2.4,0.9 5.4,3.1 4,5.3c-5.9,-1.5 -11.7,-3.2 -17.4,-5.2c-2.5,-0.8 -5.2,-2 -6,-4.5c-1.2,-3.5 2.1,-6.7 5.2,-8.7c4.3,-2.9 8.8,-5.5 13.5,-7.8c1.2,-0.6 2.5,-1.1 3.8,-0.8c1.3,0.3 2.3,2 1.4,3c-7.7,3 -14.8,7.2 -21.2,12.4"/>
<path id="svg_47" fill="#000000" d="m791.4,470.7c-2.3,1.5 -4.6,3 -7.2,3.6c-2.7,0.6 -5.7,0 -7.4,-2.1c-1.1,-1.4 -1.4,-3.2 -1.6,-4.9c-0.2,-4.1 1.1,-8.6 4.6,-10.6c3.6,-2.1 9.2,0.2 9.1,4.3c-2.4,-1.7 -6.1,-1.8 -8.3,0.1c-2.3,2 -2.9,5.8 -0.9,8.1c1.9,2.3 6.1,2.3 7.7,-0.2c2.8,-4.1 5.6,-8.1 8.4,-12.2c-1,6.7 -0.7,13.6 1,20.2c-3,-0.5 -5.4,-3.3 -5.4,-6.3"/>
<path id="svg_48" fill="#000000" d="m123,140.2c18.4,-1.6 36.8,-4 55.1,-6.9c3.5,-0.6 7.9,-1 10.1,1.9c-20,4.5 -40.4,7.1 -60.9,7.9c-2.1,0.1 -5,-1 -4.3,-2.9"/>
<path id="svg_49" fill="#000000" d="m936,314.4c2.4,-0.2 5.6,0.3 5.9,2.6c-20.3,2.6 -40.6,5.2 -60.8,7.8c-1,0.2 -2.1,0.3 -3,-0.2c-0.9,-0.5 -1.4,-1.9 -0.6,-2.6c0.3,-0.3 0.8,-0.4 1.3,-0.4c18.9,-3.2 38,-5.6 57.2,-7.2"/>
<path id="svg_50" fill="#000000" d="m106.5,570.5c-1.1,3.5 -4.1,6.4 -7.6,7.4c-2.3,0.7 -4.8,0.6 -7.1,-0.3c-5.4,-2 -8.5,-8.8 -6.5,-14.2c1.9,-5.5 8.6,-8.7 14.1,-6.9c5.5,1.9 8.8,8.5 7.1,14m-13.7,3.5c0.6,0.4 1.3,0.8 2.1,0.8c1.2,0.1 2.2,-0.6 3.2,-1.3c2.1,-1.5 4.2,-3.5 4.6,-6.1c0.8,-5 -6,-8.9 -10.2,-6.2c-4.2,2.8 -3.9,9.9 0.3,12.8"/>
<path id="svg_51" fill="#000000" d="m864.9,450.8c3.3,0.4 6.6,0.8 9.8,1.1c1.2,0.2 2.7,0.2 3.4,-0.7c0.6,-0.6 0.6,-1.5 0.6,-2.3c0.3,-8.6 0.5,-17.1 0.7,-25.6c1.1,-0.2 2.2,-0.4 3.2,-0.5c1.2,18.5 -0.3,37.3 -4.2,55.5c-2.2,-0.6 -2.4,-3.7 -2.1,-5.9c0.7,-5.3 1.4,-10.6 2,-15.9c-4.3,-0.8 -8.7,-1.6 -13,-2.5c-0.2,-1 -0.3,-2.1 -0.4,-3.2"/>
<path id="svg_52" fill="#000000" d="m983.2,223.7c-17.6,-2 -35.3,-4.1 -52.9,-6.1c-3.2,-0.4 -6.4,-0.7 -9.4,-1.5c20.9,0.2 41.9,2.7 62.3,7.6"/>
<path id="svg_53" fill="#000000" d="m732.1,203.7c0.4,4.4 0.3,8.8 0.3,13.2c-0.2,17.1 -0.4,34.1 -0.6,51.1c-0.1,2.8 -0.3,6.1 -2.4,8c-1.9,-5.1 -1.8,-10.7 -1.7,-16.2c0.5,-18.5 1,-37 1.5,-55.5c1,-0.2 1.9,-0.4 2.9,-0.6"/>
<path id="svg_54" fill="#000000" d="m19.3,255.9c4.1,7.4 5.6,16.2 4.4,24.6c2,1.1 3.9,-1.5 4.8,-3.6c2.8,-6.7 6.2,-13 10.4,-18.9c1.1,-1.6 3.7,-3.1 4.6,-1.4c-4,8.9 -8.6,17.4 -13.7,25.6c-1.5,2.5 -4.3,5.2 -6.7,3.6c-2.6,-9.7 -4.7,-19.5 -6.3,-29.4c0.7,-0.5 1.7,-0.7 2.5,-0.5"/>
<path id="svg_55" fill="#000000" d="m731.3,284.2c1.3,-6.1 4.1,-11.8 8.2,-16.5c1.3,0.8 0.9,2.9 0.4,4.4c-3.1,7.7 -6.2,15.5 -9.3,23.3c-0.1,0.4 -0.3,0.9 -0.7,1.2c-1.2,0.7 -2.4,-0.8 -2.9,-2.1c-4.3,-10.6 -8.6,-21.2 -12.9,-31.8c8.5,4.2 11.3,14.7 13.2,23.9c0.3,1.1 1.9,1.3 2.7,0.5c0.9,-0.7 1.1,-1.9 1.3,-2.9"/>
<path id="svg_56" fill="#000000" d="m1045.5,381.3c2,3 0.7,7.7 -2.6,9.3c-3.2,1.7 -7.6,0.1 -9.2,-3.2c-1.7,-3.3 -0.4,-7.6 2.2,-10.3c2.5,-2.8 6.1,-4.3 9.6,-5.5c3,-1 6.6,-2.7 6.5,-5.8c0,-2.6 1.8,-5.2 4.3,-5.8c2.5,-0.7 5.5,1 6,3.5c0.5,2.6 -1.8,5.4 -4.4,5.1c0.5,1.7 2.4,2.8 4.1,2.4c0.3,1.4 -1,2.6 -2.3,2.8c-1.4,0.3 -2.7,-0.1 -4,-0.5c-2.8,-0.6 -5.8,-0.6 -8.1,0.8c-2.4,1.5 -3.7,4.9 -2.1,7.2m-8.6,1.1c0,1 0,1.9 0,2.9c2,0.9 3.9,1.7 5.8,2.5c-0.4,-3.3 -0.8,-6.7 -1.2,-10c-2.2,0.6 -3.9,2.4 -4.6,4.6"/>
<path id="svg_57" fill="#000000" d="m762.4,134.7c1.5,1.6 1.2,4.1 0.7,6.2c-2.7,11.6 -8,22.6 -15.5,31.9c-2.1,2.6 -6.8,1.5 -8.4,-1.4c-1.6,-3 -0.6,-6.8 1.3,-9.5c1.3,-2 3.3,-3.7 5.7,-4.3c2.3,-0.5 5.1,0.5 6.2,2.6c3.3,-8.5 6.7,-17 10,-25.5m-17.6,34.5c3,-1.7 5,-5 5,-8.4c-4.7,-0.1 -8.8,5 -7.7,9.7c0.9,-0.4 1.9,-0.7 2.9,-1.1"/>
<path id="svg_58" fill="#000000" d="m1069.4,328c-3.4,-0.2 -6.4,-3 -6.8,-6.3c-2.7,3.4 -6.9,7.2 -10.8,5.3c-3,-1.5 -6.4,1.2 -9.7,1.3c-4.9,0 -8,-6.3 -6,-10.8c1.9,-4.5 7.1,-6.8 12,-6.8c-0.9,4.7 -9.5,5.6 -9,10.4c0.5,3.6 6,3.8 8.8,1.4c2.7,-2.4 4,-6.1 6.8,-8.4c-0.5,3.7 -1,7.4 -1.5,11.1c3.6,-3.1 7.2,-6.3 10.8,-9.4c1.8,4.1 3.6,8.1 5.4,12.2"/>
<path id="svg_59" fill="#000000" d="m87.8,534.3c1.7,1 0.9,3.5 0,5.2c-5.5,10.1 -11.1,20.2 -16.6,30.2c-2,3.8 -4.4,7.8 -8.4,9.4c1.5,-6.7 4.6,-13.1 9,-18.4c3.1,-3.8 0.8,-9.5 -1.6,-13.7c-2.5,-4.3 -5.2,-9.5 -2.8,-13.8c3.8,6 6.2,12.8 8.6,19.5c3.1,-6.7 7.1,-12.9 11.8,-18.4"/>
<path id="svg_60" fill="#000000" d="m72,265.5c0,-4.4 -0.1,-8.7 -0.1,-13.1c0.7,-1 2.5,-0.7 3.2,0.3c0.8,1 0.9,2.3 0.9,3.6c0.1,4.6 -0.1,9.2 -0.5,13.7c1.8,-0.3 3.7,-0.6 5.5,-1c4.9,-0.9 11.3,-1.1 13.6,3.3c1.7,3.5 -1,8.3 -4.8,8.6c-3.9,0.3 -7.3,-4.1 -6.1,-7.8c-3.3,-0.4 -7.2,0.3 -8.8,3.3c-1.5,2.9 1.9,7.4 4.7,5.7c0.9,2.4 -1.8,5.1 -4.4,4.7c-2.5,-0.3 -4.4,-2.9 -4.6,-5.4c-0.2,-2.6 0.8,-5.1 2.2,-7.4c-1.9,0 -3.7,-0.1 -5.5,-0.2c-0.3,4.1 -0.5,8.2 -0.8,12.3c-2,-3 -4.1,-6.3 -4.1,-9.9c0.1,-3.6 3.3,-7.3 6.8,-6.4c1.9,0.5 2.8,-2.3 2.8,-4.3"/>
<path id="svg_61" fill="#000000" d="m897.9,449.5c3.5,1.3 7.8,-1.4 8.2,-5.2c0.8,-8.4 2.7,-16.8 5.8,-24.8c2.1,0.9 2,4 1.5,6.3c-1.7,7.3 -3.3,14.6 -5,21.8c3.9,0.1 7.8,0.2 11.7,0.3c0.9,0 2.2,0.3 2.2,1.3c0,0.3 -0.2,0.5 -0.3,0.8c-1.7,2.6 -5.6,1.9 -8.7,1.6c-3,-0.3 -7.3,1.4 -6.5,4.4c0.6,2.4 -1.1,4.8 -1.1,7.3c0,2.8 2.4,5.4 5.2,5.6c2.7,0.1 5.4,-2.2 5.7,-5c1,-0.7 2.4,0.4 2.5,1.6c0,1.2 -0.8,2.2 -1.5,3.2c-1.4,1.6 -3,3.4 -5,4.1c-4.2,1.5 -8.8,-2.2 -9.9,-6.5c-1.2,-4.3 0.1,-8.8 1.4,-13.1c-2.6,0.6 -5.5,-1.1 -6.2,-3.7"/>
<path id="svg_62" fill="#000000" d="m203.5,482.8c1.2,-2.6 4.6,-3.3 7.5,-3.7c26.4,-3.1 52.9,-5.9 79.4,-8.2c2.3,-0.2 5.7,1.3 4.5,3.3c-27.3,2.8 -54.7,5.6 -82,8.5c-3.1,0.3 -6.3,0.6 -9.4,0.1"/>
<path id="svg_63" fill="#000000" d="m357.7,485.5c-3.6,-2.6 -8.3,-3.6 -12.7,-2.6c-3.3,0.7 -4.7,4.5 -5.9,7.7c-1.2,3.2 -3.8,6.8 -7.2,6c8.3,-16.9 16.5,-33.7 24.7,-50.6c0.7,0.7 1.4,1.5 2.1,2.3c-3.3,12 0.7,24.8 -1,37.2m-4.3,-6.7c1.2,-5.7 1,-11.7 -0.6,-17.4c-2.6,5.7 -5.1,11.4 -7.7,17.1c2.8,0.4 5.5,0.5 8.3,0.3"/>
<path id="svg_64" fill="#000000" d="m535.4,466.3c31.5,-5.6 63.5,-7.7 95.4,-6.2c1.9,0.1 4.4,0.9 4.1,2.8c-7.6,1.5 -15.4,1.1 -23.1,0.9c-23.1,-0.4 -46.2,1.4 -68.9,5.6c-3.1,0.6 -7.6,0 -7.5,-3.1"/>
<path id="svg_65" fill="#000000" d="m819.8,475.8c4.8,0.4 9.7,0.8 14.5,1.2c-3.3,2.3 -7.4,3.9 -11.3,3.1c-3.9,-0.8 -7.3,-4.9 -6.1,-8.8c5.6,-0.6 9.6,-7.5 7.3,-12.7c-3.8,6.8 -8.6,13 -14.2,18.4c-1.5,1.5 -4.2,1.1 -5.8,-0.3c-1.6,-1.4 -2.4,-3.5 -3,-5.5c-1.1,-4.2 -1.5,-8.5 -1.3,-12.8c0.3,-1 1.7,0 2.1,1c1.6,5 3.3,10.1 4.9,15.1c4,-4.6 7.9,-9.2 11.8,-13.8c2.1,-2.4 4.6,-5 7.8,-5c4.2,5.8 0.8,15.6 -6.2,17.4c-0.2,0.9 -0.3,1.8 -0.5,2.7"/>
<path id="svg_66" fill="#000000" d="m661.7,339.1c-0.1,-0.8 -0.2,-1.6 -0.7,-2.3c-1.1,-1.2 -2.9,-1.1 -4.6,-1.2c-1.6,0 -3.6,-1.1 -3.2,-2.6c2.6,-1.3 5.6,-1.7 8.4,-1.1c0.2,-4.4 0.4,-8.9 0.8,-13.3c-5.2,1.4 -10.6,2.2 -16,2.5c-0.2,-1 -0.4,-2 -0.6,-3.1c12.1,-2.9 24.3,-5.2 36.6,-6.9c2.5,-0.3 5.5,-0.4 6.9,1.6c-5.5,2.5 -11.6,3.8 -17.6,3.7c-3.1,-0.1 -5.5,2.7 -6.1,5.7c-0.6,2.9 0.2,6 1,8.9c3.8,-0.3 7.6,-0.7 11.3,-1c2,-0.1 5,1.1 3.9,2.8c-5.3,1.1 -10.7,2.2 -16,3.3c1.3,5 0.4,10.5 -2.4,14.8c-0.6,-3.9 -1.1,-7.9 -1.7,-11.8"/>
<path id="svg_67" fill="#000000" d="m783.5,305.3c4.3,-0.3 8.7,0.4 12.7,2.1c1.3,0.6 2.8,1.4 3.2,2.9c1.4,4.3 -7.3,6 -7.4,10.5c0,3.3 4.2,4.8 5.6,7.7c1.4,2.8 -0.4,6.3 -3,7.9c-2.6,1.6 -5.9,1.9 -8.9,2.1c-2,0.2 -4.1,0.3 -6,-0.5c-1.8,-0.8 -3.3,-2.9 -2.7,-4.8c2.6,-8.3 3.8,-17.1 3.5,-25.8c-0.1,-1.4 1.6,-2 3,-2.1m-2.4,29.1c4.9,1.4 10.4,0.1 14,-3.3c-2.2,-1.9 -4.5,-3.8 -5.8,-6.4c-1.4,-2.6 -1.5,-6.1 0.3,-8.3c1.8,-2.2 5.2,-2.8 6.6,-5.2c-3,-0.9 -6.1,-1.6 -9.2,-2.1c-0.5,-0.1 -1.1,-0.2 -1.5,0c-0.8,0.4 -1,1.4 -1.2,2.3c-1,7.7 -2.1,15.4 -3.2,23"/>
<path id="svg_68" fill="#000000" d="m778,165.1c0.3,-3.5 0.6,-6.9 0.8,-10.3c-4.4,2.2 -6.6,8.1 -4.7,12.7c4,1.7 9,0.8 12.1,-2.3c1.1,4 -4.2,7.1 -8.4,6.6c-4.2,-0.4 -8.2,-2.6 -12.4,-2c-2.2,0.4 -4.2,-1.5 -4.7,-3.7c-0.6,-2.1 0,-4.4 0.6,-6.5c2.5,-9.5 5.3,-18.9 8.3,-28.2c2.4,0.6 2.2,4.1 1.3,6.4c-2.1,6 -4.2,11.9 -6.3,17.8c-1.2,3.4 -2.3,7.4 -0.2,10.3c1.7,0 3.4,0 5.1,0c0.1,-4.1 1.5,-8 3.9,-11.2c0.9,-1.2 2,-2.3 3.4,-2.7c2.9,-0.6 5.5,2.5 5.4,5.5c-0.1,2.9 -2.1,5.5 -4.2,7.6"/>
<path id="svg_69" fill="#000000" d="m1121.8,313.9c2.1,0 4.3,0 6.3,-0.6c2.8,-1 5.1,-3.2 7.9,-4.3c2.8,-1.1 6.8,-0.6 7.8,2.3c0.5,1.7 -0.3,3.6 -1.3,5.1c-3.3,4.9 -9.4,7.7 -15.3,7.1c5,-3.7 9.9,-7.3 14.8,-10.9c-5,-0.8 -9.9,1.9 -14.3,4.5c-1.2,0.7 -2.5,1.5 -3.1,2.7c-1.6,2.8 0.9,6.4 3.8,7.5c3,1.1 6.3,0.6 9.5,0.7c3.2,0 6.7,1 8.2,3.9c-4.8,1.6 -10.1,0.5 -15,-0.8c-3.2,-0.8 -6.6,-1.8 -8.8,-4.3c-2.1,-2.6 -2.1,-7.1 0.9,-8.6c-4.6,-0.1 -9.2,-0.3 -13.8,-0.4c-2.8,-0.1 -6.6,-1.1 -6.5,-3.9c6.3,0 12.6,0 18.9,0"/>
<path id="svg_70" fill="#000000" d="m997.6,351.2c-1.6,1.6 -1.9,4.4 -0.6,6.3c1.2,1.9 3.9,2.7 6,1.8c4,-1.6 9.1,0.1 11.3,3.8c2.2,3.7 1.3,9 -2,11.7c-0.1,-3.8 -0.5,-7.7 -1.4,-11.4c-4.9,-1.2 -10.2,-0.9 -15,0.8c0.4,5.2 -0.4,10.4 -2.2,15.2c-2.3,-4.7 -2.4,-10.5 -0.3,-15.3c-3,-0.1 -6,-0.1 -9,-0.2c-0.5,0 -1,0 -1.5,-0.3c-1.7,-1 0,-3.8 1.9,-4c1.9,-0.3 3.8,0.7 5.8,0.4c3.3,-0.6 4.7,-5.6 2.2,-7.8c-3.7,-3.3 -9.7,1.1 -14.5,-0.3c-0.2,-1 -0.3,-2 -0.5,-2.9c10.7,-2.6 21.8,-3.6 32.9,-3.2c2.1,0.1 4.9,1 4.8,3.2c-4.1,-0.4 -8.2,-0.3 -12.2,0.1c-2.1,0.3 -4.2,0.7 -5.7,2.1"/>
<path id="svg_71" fill="#000000" d="m770.9,431.2c-3.4,0.1 -6.9,0.2 -10.1,1.5c-3.2,1.2 -6.1,3.8 -6.8,7.1c-1.1,6 4.6,10.7 9.2,14.7c3.4,3 6.5,6.5 7.9,10.9c1.4,4.3 0.7,9.5 -2.7,12.5c-2.6,2.4 -6.3,3 -9.8,3.4c-4.9,0.5 -11.4,-0.3 -12.6,-5.1c5.8,-0.3 11.9,3.7 17.2,1.2c4.9,-2.3 5.9,-9.2 3.7,-14c-2.3,-4.9 -6.8,-8.2 -11.2,-11.3c-5.6,-4 -7,-12.7 -3,-18.2c4,-5.5 12.8,-6.8 18.2,-2.7"/>
<path id="svg_72" fill="#000000" d="m1100.2,313.6c-2.4,5.9 -3.3,12.4 -2.5,18.6c-3.1,-1.4 -4.9,-5.2 -4.1,-8.6c-4.4,4.1 -10.6,6.2 -16.5,5.4c-3.9,-0.5 -4.3,-5.8 -3.8,-9.6c1.1,-7.3 2.2,-14.6 3.3,-22c0.5,-3.6 2,-8.2 5.7,-8.5c-2.9,12 -4.8,24.2 -5.6,36.6c2.3,0.8 4.1,-2.3 4.9,-4.7c1,-3.1 2.7,-6.1 5.5,-7.7c2.8,-1.6 6.9,-1.1 8.5,1.7c-5.6,0.4 -10.8,4.3 -12.6,9.6c1.7,1.1 3.8,-0.2 5.3,-1.4c4,-3.1 8,-6.2 11.9,-9.4"/>
<path id="svg_73" fill="#000000" d="m1055.7,65.5c3,5.9 2.8,13.2 -0.5,18.9c-3.3,5.7 -9.6,9.5 -16.2,9.8c-3.3,0.2 -6.7,-0.5 -9.3,-2.6c-3.3,-2.9 -4.5,-7.6 -4.2,-12c0.6,-9.4 7.8,-18.4 17.1,-20.2c3.3,-0.6 7,-0.3 9.8,1.8c1.4,1.1 2.5,2.6 3.3,4.3m-1.6,9.4c0.2,-3.4 -0.4,-7.1 -2.8,-9.5c-2.8,-2.8 -7.4,-3.1 -11,-1.6c-3.7,1.5 -6.4,4.5 -8.6,7.8c-1.9,2.8 -3.5,6.1 -3.2,9.5c0.5,6.6 8.4,10.8 14.7,8.9c6.3,-2 10.3,-8.5 10.9,-15.1"/>
<path id="svg_74" fill="#000000" d="m145.2,508.2c-9.5,-28.4 -21.6,-56 -36.1,-82.2c-1,-1.8 -0.7,-5.3 1.2,-4.6c17.8,30.4 31.9,63 42,96.7c-4,-1.4 -5.7,-5.9 -7.1,-9.9"/>
<path id="svg_75" fill="#000000" d="m949.2,92.6c-0.8,1.2 -2,1.9 -3.3,2.6c-6.5,3.7 -13.4,6.9 -20.4,9.5c-1,0 -1.6,-1.3 -1.3,-2.2c0.3,-1 1.3,-1.6 2.1,-2c4.8,-2.5 11.5,-2.7 13.9,-7.4c-25.8,2.4 -51.7,4.6 -77.7,6.7c-0.8,-1.1 -0.8,-2.6 -0.1,-3.7c22.5,-1.9 44.9,-3.8 67.4,-5.7c4.4,-0.4 9.3,-0.7 12.8,2c2.3,0.1 3.9,-2.8 2.8,-4.7c-0.9,-1.4 -2.7,-1.9 -4,-2.8c-1.4,-1 -2.2,-3.2 -0.8,-4.1c2.7,1 5.4,2.1 7.3,4.1c2,2 2.9,5.4 1.3,7.7"/>
<path id="svg_76" fill="#000000" d="m75.9,146.7c15.3,27.5 30.6,54.9 46,82.4c1.3,2.3 2.6,4.6 3.8,6.9c0.7,1.3 0.5,3.7 -0.8,3.2c-18.2,-28.5 -34.8,-57.9 -50,-88.1c-0.8,-1.7 -0.8,-4.5 1,-4.4"/>
<path id="svg_77" fill="#000000" d="m1055.4,405.1c0.7,14.8 0.4,29.7 -1,44.5c-0.1,1.3 -0.3,2.6 -1.1,3.6c-1.1,1.2 -3,1.3 -4.6,1.4c-23.6,0.4 -47.1,0.9 -70.6,1.4c-4.8,0.1 -9.7,0.2 -14.2,-1.4c-0.5,-1.3 1.4,-2 2.7,-2.1c26.8,-0.6 53.7,-1.2 80.5,-1.8c3.4,0 4.5,-4.6 4.5,-8c0.1,-10.5 0.2,-21 0.3,-31.5c0.1,-2.6 0.9,-6.1 3.5,-6.1"/>
<path id="svg_78" fill="#000000" d="m970.3,306.2c3.4,-9.7 11.2,-17.7 20.7,-21.2c2.4,-0.9 5,-1.5 7.3,-0.5c2.3,1 3.7,4.1 2.1,6.1c-3.8,-4.1 -10.6,-2.1 -15.1,1.2c-5.8,4.4 -10.1,10.7 -12.1,17.7c-0.8,2.8 -1.1,6 0.6,8.4c0.8,1 1.9,1.8 3.1,2.4c7.3,3.7 17.3,0.5 21.2,-6.7c1.3,-2.6 4.3,-4.2 7.2,-4c2.8,0.2 5.5,2.2 6.5,5c0.4,0.9 0.5,1.9 0.6,3c0.2,3.4 -0.7,6.8 -2.4,9.7c-0.8,-1.5 -1.6,-3 -2.4,-4.4c-2.4,0.6 -4.1,2.7 -6.1,4.2c-2,1.5 -5.1,2.3 -6.7,0.4c-4.6,-5.4 -13.9,-0.6 -20.2,-3.7c-6,-2.9 -6.5,-11.4 -4.3,-17.6m23.9,18.8c5.3,-0.7 10.2,-3.6 13.3,-7.9c0.7,-1 1,-2.8 -0.1,-3c-2.8,-1.4 -6.2,0.5 -8.1,3c-1.9,2.5 -2.9,5.6 -5.1,7.9"/>
<path id="svg_79" fill="#000000" d="m520.7,122c-9.1,-0.4 -18.2,-1.4 -27.2,-3.1c-0.2,-6.7 6,-11.8 11.6,-15.6c2.1,-1.5 4.8,-3 7.1,-1.9c-2.7,2.9 -5.5,5.8 -8.4,8.6c28.3,-1.8 56.7,-3.7 85,-5.6c2.2,-0.1 5.4,1.1 4.5,3.1c-20.2,1.9 -40.5,3.6 -60.8,4.9c-8.2,0.5 -16.4,1 -24.5,-0.1c-2.3,-0.3 -4.6,-0.7 -6.8,-0.2c-2.3,0.4 -4.5,1.9 -4.9,4.2c6,0.3 12.1,0.6 18.1,0.9c3.1,0.2 7.3,1.9 6.3,4.8"/>
<path id="svg_80" fill="#000000" d="m808.8,78.7c7.4,1.1 15.1,-0.1 21.9,-3.3c4.7,-2.2 9.4,-6.6 8.2,-11.6c-0.7,-2.9 -3.2,-4.9 -5.7,-6.4c-5.4,-3.4 -11.6,-5.4 -17.9,-5.9c-4.7,-0.3 -10.9,1.7 -10.7,6.3c1,19.5 0.7,39 -0.7,58.4c-2.4,-1.9 -2.6,-5.4 -2.6,-8.5c0,-16.7 -0.1,-33.5 -0.1,-50.2c0,-4.6 4.2,-8.3 8.7,-9.3c4.5,-1 9.1,0.1 13.6,1.3c4.1,1 8.3,2.2 11.9,4.6c3.6,2.3 6.5,6 6.9,10.3c0.6,5.5 -3.3,10.8 -8.1,13.6c-4.9,2.8 -10.6,3.6 -16.2,4.4c-3.7,0.5 -8.8,0 -9.2,-3.7"/>
<path id="svg_81" fill="#000000" d="m687.5,127.2c-1.2,0.9 -2.6,-0.8 -3,-2.2c-3,-9.4 -4.6,-19.3 -4.8,-29.2c-9.3,1.3 -18.5,2.6 -27.7,4c-2.6,0.4 -5.8,1.4 -5.9,4c-0.3,7.1 -0.7,14.1 -1,21.2c-0.1,2 -2,4.8 -3.3,3.3c0.6,-20.2 1.3,-40.4 1.9,-60.5c0.1,-3.4 0.3,-7.1 2.6,-9.6c0.7,12.7 0.9,25.4 0.8,38.1c10.6,-1.5 21.3,-3.1 32,-4.7c0.1,-10.1 0,-20.2 -0.3,-30.3c2.3,-1 3.7,2.6 3.7,5.1c-0.5,20.4 1.2,40.8 5,60.8"/>
<path id="svg_82" fill="#000000" d="m224.3,370.5c7.1,4.8 17.8,-4.2 24.9,0.7c-5.5,2.7 -11.5,4.3 -17.6,4.6c-3.2,0.2 -6.6,-0.1 -9.2,-1.8c-4.2,-2.9 -5.2,-8.6 -8.3,-12.6c-4.3,-5.5 -12.6,-7.1 -19.1,-4.3c-6.4,2.7 -10.9,9.1 -12.2,16c-0.8,3.9 0.7,9.4 4.7,9.1c20.2,-1.6 40.5,-1.7 60.8,-0.2c1.6,0.1 3.8,0.8 3.7,2.4c-1,1.3 -2.9,1.4 -4.5,1.4c-20,0 -39.9,0 -59.8,-0.1c-2,0 -4,0 -5.6,-1.1c-2.5,-1.7 -2.8,-5.3 -2.8,-8.3c-0.1,-7.1 -0.2,-14.1 -0.2,-21.2c-0.1,-2.6 0,-5.5 1.7,-7.6c4.6,2.6 -0.3,11.1 3.5,14.8c3.1,-6.2 9.7,-10.4 16.6,-10.6c6.9,-0.3 13.8,3.6 17.3,9.5c1.9,3.2 3,7.2 6.1,9.3"/>
<path id="svg_83" fill="#000000" d="m717.8,65.8c-1.3,0.1 -2.7,0.3 -3.6,1.3c-0.8,0.9 -0.9,2.2 -0.9,3.4c-0.6,14.9 -1.2,29.8 -1.8,44.7c-0.7,1 -2.5,0.6 -3.1,-0.5c-0.7,-1 -0.6,-2.3 -0.5,-3.6c0.8,-12.3 1.6,-24.7 2.5,-37.1c0.3,-4.5 -5.9,-6 -10.4,-5.4c-4.4,0.6 -10.1,1.2 -12.1,-2.8c32.7,-3.7 65.4,-7.4 98.2,-11.1c4.6,-0.5 9.8,-0.9 13.3,2.1c-11,1.4 -22.1,2.7 -33.1,4c2.2,17.5 2.6,35.1 1.2,52.7c-0.2,2.3 -2.3,5.5 -4,3.9c1.9,-18.4 1.7,-37.1 -0.6,-55.5c-15.1,1.2 -30.1,2.5 -45.1,3.9"/>
<path id="svg_84" fill="#000000" d="m11.6,245.8c32.8,-3.6 65.7,-7.2 98.5,-10.8c4,-0.5 8.8,-0.6 11.1,2.7c-36.8,4.4 -73.7,8.5 -110.6,12.3c-3.9,0.5 -9,0.1 -10.1,-3.7c-0.5,-1.5 0,-3.2 0.4,-4.8c9.3,-30.8 18.6,-61.7 27.8,-92.5c1.7,8.4 -0.8,17 -3.3,25.2c-6.8,22.6 -13.7,45.1 -20.5,67.7c-0.9,3 3.6,4.2 6.7,3.9"/>
<path id="svg_85" fill="#000000" d="m451,490.3c-1.9,-0.5 -3.7,-1.3 -5.7,-1.3c-2.7,0.1 -5.1,1.7 -7.5,2.8c-2.5,1.1 -5.8,1.5 -7.6,-0.4c-2.1,-2.2 -2.5,-7.1 -5.5,-6.5c4.4,-1.7 8.7,-3.3 13.1,-5c-3.4,-2.6 -8.5,-2.1 -12.2,0c-3.8,2.1 -6.6,5.6 -9.3,8.9c-6.9,8.7 -13.8,17.4 -20.8,26c-2,0 -1.5,-3.2 -0.3,-4.8c5.2,-7.4 10.7,-14.6 16.5,-21.6c-0.8,-2.6 -4.1,-4.1 -6.6,-2.9c-2.4,1.1 -5.4,-0.9 -6.2,-3.5c-0.8,-2.6 -0.1,-5.4 0.6,-8c1.7,-6.4 3.4,-12.9 5.1,-19.4c0.4,-1.2 1.1,-2.8 2.4,-2.7c1.7,0.1 1.8,2.5 1.4,4.2c-2.1,8 -4.2,16.1 -6.3,24.2c1.5,-0.9 2.9,-1.7 4.4,-2.6c1.2,2.3 2.4,4.7 4.6,6c2.2,1.3 5.6,1 6.7,-1.3c4,-8.5 17.4,-10.4 23.6,-3.3c1.6,1.7 4.5,0.4 6.2,-1.3c1.6,-1.6 3.7,-3.6 6,-2.9c1.4,4.3 -1.5,9.4 -5.8,10.5c3.5,1.2 7.3,2.4 11,1.6c3.6,-0.9 6.8,-4.8 5.5,-8.3c-1.7,-4.4 2.6,-9.3 7.3,-10.1c4.7,-0.7 9.3,1.3 13.6,3.2c-1.9,2.5 -5.7,2 -8.7,1.3c-3.1,-0.6 -7.2,-0.5 -8.3,2.5c-0.9,2.4 1,5 0.6,7.5c-0.2,1.9 -1.6,3.4 -3.2,4.5c-4.1,2.9 -9.6,4 -14.6,2.7m-16.2,-4.6c-1.8,-0.4 -3.7,1 -3.9,2.8c4.4,0.9 9.2,-0.6 12.3,-4c-2.6,-1.2 -5.9,-0.8 -8.2,1"/>
<path id="svg_86" fill="#000000" d="m206.3,426.6c0.3,-3.1 4.1,-4.9 7,-3.9c2.9,1 4.7,4 5.1,7c0.5,3.1 -0.2,6.1 -0.9,9.1c0.8,2.3 4.5,2 5.9,0c1.4,-2 1,-4.7 0.7,-7.1c-0.4,-2.4 -0.8,-4.8 -1.1,-7.2c-0.5,-3.3 -1,-6.8 0.6,-9.7c1.6,-2.9 6.1,-4.2 8.1,-1.6c0.8,6.2 1.5,12.5 2.2,18.8c0.3,2.3 0.1,5.3 -2.1,6c-1.4,-7.1 -2.3,-14.4 -2.9,-21.7c-0.9,-0.5 -1.9,-0.6 -2.9,-0.4c0,7.8 0.8,15.5 2.3,23.2c9.2,-1.2 18.5,-1.4 27.8,-0.8c0,1.7 -2.1,2.4 -3.8,2.6c-18.2,1.9 -36.4,3.9 -54.6,5.8c-3.1,0.3 -6.5,0.6 -9.1,-1.2c-3.5,-2.5 -3.8,-7.5 -3.7,-11.9c0.3,-9.6 0.5,-19.2 0.7,-28.9c0.1,-1.4 1.2,-3.6 2.4,-2.7c0.5,0.4 0.6,1 0.6,1.6c0.7,9 0.6,18.2 -0.3,27.2c-0.5,4.9 -0.6,11 3.7,13.2c0.4,-9.7 0.7,-19.5 1.1,-29.3c0,-1.8 0.2,-3.8 1.7,-4.8c1.7,-1.1 4.1,0 5.2,1.7c1,1.7 1,3.9 1,5.9c0,7.9 -0.1,15.9 -0.1,23.9c1.5,0.7 3.5,0.7 5,0c-0.1,-5 0,-9.9 0.4,-14.8m7.8,10.1c0.3,-4.4 0.3,-9.4 -2.9,-12.2c-1.4,5.1 -1.8,10.6 -1.2,15.9c0.8,0.9 2.4,0.6 3.1,-0.3c0.7,-1 0.9,-2.2 1,-3.4m-16,1.7c-0.2,-3.2 -0.4,-6.4 -0.5,-9.6c-2.8,4.2 -3.2,9.9 -1,14.5c1.3,-1.3 1.8,-3.2 1.3,-4.9m-3.2,-21c0.7,1.9 1.3,3.7 1.9,5.5c1.7,-2.7 1.9,-6.1 0.7,-9.1c-1.6,0.1 -2.8,2 -2.3,3.5"/>
<path id="svg_87" fill="#000000" d="m30.2,144.4c-5.7,-3.7 -10.4,-8.8 -14,-14.7c-7.3,-12.1 -9.4,-27.3 -5.6,-41c3.7,-13.6 13.2,-25.6 25.7,-32.3c4.5,-2.5 9.4,-4.3 14.5,-4.7c13.1,-1.2 25.8,6.8 33.8,17.3c13.5,17.4 15.9,43.4 3.7,61.7c-12.3,18.3 -39.5,25.6 -58.1,13.7m-6.4,-10c10.1,11.5 27.7,15.2 41.9,9.6c14.2,-5.6 24.4,-19.6 26.5,-34.7c2.1,-15.1 -3.5,-30.8 -13.9,-42c-4.7,-5.1 -10.7,-9.5 -17.5,-11.1c-13.4,-3.3 -27.3,4.5 -36.2,14.9c-5.2,6.1 -9.3,13.2 -11.1,20.9c-2.1,8.8 -1,18.1 1.8,26.7c1.9,5.7 4.6,11.2 8.5,15.7"/>
<path id="svg_88" fill="#000000" d="m679.9,496.8c-6.9,-1.5 -14.1,-4.1 -17.8,-10.1c-2.6,-4.3 -2.8,-9.7 -2.9,-14.7c-0.3,-12.4 -0.6,-24.8 -0.9,-37.2c-0.1,-3.7 -0.2,-7.4 1,-10.9c3.1,-9 13.3,-13.2 22.7,-14.8c8.5,-1.5 17.1,-1.9 25.7,-1c6,0.6 13.5,3.4 13.5,9.4c0.2,16.5 0.3,33 0.4,49.5c0.1,7.2 0,14.8 -3.8,21c-3.7,5.8 -10.5,9.3 -17.3,10.4c-6.9,1.1 -13.9,0 -20.6,-1.6m36.5,-29.3c0.9,2.4 -1.3,4.7 -3.5,6c-14.8,9.4 -35.8,7.4 -48.5,-4.5c-4.1,5.7 -1.7,14.2 3.6,18.8c5.3,4.6 12.6,6.1 19.6,6.8c5.1,0.6 10.3,0.8 15.2,-0.4c5,-1.3 9.8,-4.1 12.3,-8.6c2.1,-3.7 2.5,-8.1 2.7,-12.4c0.4,-7.5 0.3,-15 -0.2,-22.4c-0.5,1.7 -2.6,2.4 -4.4,2.8c-8.8,2.1 -17.7,4.2 -26.8,3.7c-9,-0.4 -18.2,-3.6 -24,-10.6c-0.4,8 -0.2,17.3 6.3,21.9c13.9,9.8 34.3,9.3 47.7,-1.1m-48.9,-20.4c5.9,5.5 14.5,6.7 22.6,6.5c8.5,-0.2 17,-1.7 25,-4.5c1,-0.3 2,-0.7 2.5,-1.5c0.6,-0.9 0.6,-2 0.6,-3.1c-0.4,-6.3 -0.7,-12.6 -1.1,-18.9c-12.3,4.2 -25.5,6 -38.5,5.3c-5.7,-0.3 -11.9,-1.4 -15.5,-5.8c-3.3,7.3 -1.5,16.6 4.4,22m-2.8,-23.2c15.8,4.6 33,4.2 48.4,-1.3c1.3,-0.4 2.7,-1 3.4,-2.1c1.2,-1.8 0.4,-4.3 -1.1,-5.7c-1.6,-1.4 -3.8,-1.9 -5.9,-2.3c-12.2,-2.2 -25,-1 -36.7,3.3c-3.8,1.4 -8.1,4 -8.1,8.1"/>
<path id="svg_89" fill="#000000" d="m145,521.3c-31.5,1.2 -63,2.4 -94.5,3.6c-2.2,0.1 -4.9,-0.1 -6,-1.9c-0.6,-1.2 -0.5,-2.6 -0.4,-3.9c3,-26.1 7.7,-52.1 14.2,-77.5c2.8,-10.9 5.3,-24.1 -2.6,-32c-14.4,-14.5 -11.1,-41.8 5.7,-53.4c16.8,-11.6 42.6,-5.9 53.8,11.1c11.3,17 7.3,42 -7.9,55.6c-11.5,10.3 -31.9,12.8 -41.1,0.4c-7.6,32.1 -13.8,64.6 -18.3,97.3c29.8,-1 59.6,-2.1 89.4,-3.2c3.2,-0.1 7.4,0.7 7.7,3.9m-56.5,-93.4c4.3,-0.5 8.4,-2.3 11.9,-4.7c10,-6.7 16.6,-18.1 17.5,-30c0.9,-12 -4,-24.2 -12.9,-32.3c-2,-1.9 -4.3,-3.5 -6.9,-4.6c-2.2,-0.9 -4.6,-1.3 -7,-1.6c-5.7,-0.7 -11.5,-1 -17.1,0.3c-8.1,1.9 -15.4,7.2 -19.7,14.4c-4.2,7.1 -5.4,16 -3.2,24.1c1.1,4.1 3,7.9 5.1,11.5c3.5,6.1 7.5,12 12.9,16.5c5.4,4.4 12.5,7.2 19.4,6.4"/>
<path id="svg_90" fill="#000000" d="m1030.2,17c-2.8,-4.2 -0.7,-10.3 3.3,-13.4c4,-3 9.4,-3.6 14.4,-3.6c4.8,0 8,5.3 8.5,10.1c0.6,4.8 -0.5,9.7 0.6,14.4c1.2,4.7 5.9,9.2 10.4,7.5c1.9,-0.7 3.3,-2.4 4.6,-4c5,-6.2 10,-12.3 15,-18.5c3.7,4.7 7.6,9.7 8.9,15.5c1.4,5.9 -0.3,12.9 -5.6,15.8c-3.7,2 -5.3,6.6 -5,10.8c1,12.3 15.6,19.4 27.8,17.6c5.8,2.4 4.1,11.7 -1,15.4c-5.2,3.6 -11.9,4.2 -17.4,7.3c-5.4,3.1 -9.1,11.4 -4.2,15.4c5.2,4.3 0,12.5 -5,16.9c-2.6,2.3 -6.8,4.5 -9.1,1.9c-3.2,-3.9 -9.4,-4.9 -13.6,-2.2c-4.3,2.6 -6.2,8.6 -4.1,13.2c1.1,2.5 -1.6,4.9 -4,6.2c-4.2,2.5 -8.7,5 -13.5,4.3c-4.8,-0.6 -9.1,-6.2 -6.6,-10.3c3.1,-5.2 -3.8,-11.8 -9.7,-10.5c-5.9,1.2 -9.7,7 -11.9,12.5c-4.2,-1.7 -8.6,-3.6 -11.5,-7c-3,-3.5 -4,-9 -1.1,-12.5c5.1,-6.2 1.3,-15.5 -2.7,-22.6c-1.2,-2.3 -3.8,-4.9 -6,-3.4c-3.9,2.8 -9.7,-0.7 -11,-5.3c-1.3,-4.6 0.3,-9.4 2,-13.9c0.7,-1.8 1.6,-3.8 3.5,-4.1c6.1,-0.7 11.6,-5.3 13.4,-11.2c1.8,-5.9 -0.2,-12.7 -4.8,-16.7c-2.6,-2.3 -0.3,-6.4 2,-9c5.1,-5.6 10.3,-11.2 15.4,-16.9c2.2,4.7 5.4,8.8 9.3,12c5.4,-1.9 11.9,-7.1 8.7,-11.7m23.9,117.9c0.5,-2.2 0.4,-4.4 0.9,-6.6c2.1,-10.3 18.3,-13.7 24.4,-5.1c5.2,-3.6 11,-10.2 7.3,-15.3c-3.9,-5.5 -2.5,-14.1 3.1,-17.9c3.6,-2.5 8.1,-2.9 12.3,-4.1c4.1,-1.1 8.6,-3.6 9.6,-7.8c1,-4.2 -4.2,-9.1 -7.6,-6.4c-4,3 -10,1.6 -13.6,-1.8c-3.7,-3.4 -5.4,-8.3 -6.9,-13.1c-2.3,-6.9 -3,-16.7 3.8,-19.2c3.9,-1.4 5.7,-6.2 5.1,-10.4c-0.6,-4.1 -3,-7.7 -5.4,-11.1c-4.4,3.3 -7.9,7.9 -10,13c-2.9,7.3 -13.7,8.9 -19.8,3.9c-6,-4.9 -7.2,-14.2 -4.3,-21.5c0.7,-1.9 -0.5,-4.1 -2.1,-5.4c-3.4,-2.9 -8.7,-3.2 -12.4,-0.7c-3.7,2.5 -5.4,7.5 -4.1,11.7c1.9,5.9 -1.9,13 -7.9,14.7c-5.9,1.7 -12.9,-2.4 -14.4,-8.4c-4.2,2.7 -8.5,5.6 -11,10c-2.4,4.3 -2.3,10.6 1.6,13.6c2.6,2 2,5.9 1.1,9c-1.2,4.6 -2.6,9.4 -5.5,13.1c-3,3.8 -8.1,6.3 -12.6,4.8c-0.2,5.7 -0.4,11.3 -0.6,17c3.7,-3.7 10.4,-2.5 14.2,1.1c3.8,3.6 5.4,8.9 6.6,14c1.7,7.2 2,16.4 -4.3,20.1c3.5,3 6.9,6 10.4,9c0.9,-8.2 10.2,-14.3 18.1,-11.9c7.8,2.5 12,12.8 8.1,20c6.3,2.4 14.3,-1.8 15.9,-8.3"/>
<path id="svg_91" fill="#000000" d="m387.1,52.7c9.2,-10.5 22.5,-17.4 36.4,-18.9c8,-0.9 16.7,0.1 23,5.3c8.3,6.9 9.8,19.8 5.8,30c-4.1,10.1 -12.5,17.8 -21.5,24c11.3,-0.6 23,0.4 33.3,5.2c10.2,4.8 18.9,14.1 20.7,25.4c2.7,17.3 -11.7,33.5 -28.1,39.6c-16.5,6.1 -34.6,4.8 -52.1,4.8c-43.4,-0.1 -86.3,7.9 -129.6,10.5c-8.1,0.5 -16.7,0.7 -23.7,-3.5c-7.9,-4.8 -11.7,-14.3 -13.9,-23.3c-2.6,-11.2 -3.4,-23.3 0.9,-33.9c4.3,-10.7 14.7,-19.4 26.1,-19c-6.3,-11.8 -10.3,-25.4 -8.6,-38.8c1.8,-13.4 10,-26.3 22.6,-31.2c12.6,-4.9 28.9,0.3 34.4,12.6c3.7,-13.2 13,-24.8 25.5,-30.2c12.5,-5.4 28,-3.9 38.6,4.6c10.6,8.6 15.3,24.2 10.2,36.8m-12.4,11.1c12.8,-9.1 13.6,-29.9 2.9,-41.3c-10.6,-11.4 -29.7,-12.8 -43,-4.6c-13.4,8.1 -20.8,24.1 -20.8,39.7c-1.5,-6.9 -3.2,-14.1 -7.9,-19.3c-8.8,-9.7 -25.7,-8.6 -35.3,0.4c-9.6,8.9 -12.4,23.3 -10.4,36.3c2,12.9 8.3,24.7 14.8,36.1c-4.3,-6 -12.6,-8.7 -19.6,-6.3c-8.1,2.8 -12.9,11.3 -14.9,19.7c-3.1,12.7 -1.3,26.5 4.9,38c2.5,4.6 5.9,9 10.6,11.1c4.8,2.1 11.2,1.2 14.1,-3.1c-1.3,3.3 4,4.9 7.5,4.5c46.9,-6.2 94.1,-9.9 141.4,-10.9c13.4,-0.3 27.2,-0.4 39.5,-5.7c12.4,-5.3 23,-17 22.5,-30.4c-0.6,-13.7 -12.5,-24.7 -25.6,-28.7c-13.1,-3.9 -27.1,-2.4 -40.7,-0.7c11.5,-6 23.5,-12.5 30.5,-23.5c7,-10.9 6.6,-27.7 -4.3,-34.7c-5.1,-3.3 -11.5,-3.9 -17.5,-3.1c-16.7,2.1 -30.4,14 -41.7,26.3c-2.2,2.4 -7.7,3.3 -7,0.2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 32 KiB

View File

@@ -1,26 +1,26 @@
**Published on 22. October 2020** **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. 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 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 Setup
----- -----
The best way to set up a new Vue 3 project is by installing and using the [vue-cli](https://cli.vuejs.org/). The best way to set up a new Vue 3 project is by installing and using the [vue-cli](https://cli.vuejs.org/).
![https://api.emvi.com/api/v1/content/bFvNeJItGTLLFoTNjriJ.png](https://marvinblum.de/static/blog/bZ1DQzJdjK/bFvNeJItGTLLFoTNjriJ.png) ![Setup](/static/blog/vue3/setup.png)
Run `vue create <name>` to set up a new project. Run `vue create <name>` to set up a new project.
This command will generate a new project inside the `test-app` directory and create the basic structure. Note that you will have to select Vue 3 and TypeScript from the `Manually select features` option at the beginning, as it is still marked as experimental. This command will generate a new project inside the `test-app` directory and create the basic structure. Note that you will have to select Vue 3 and TypeScript from the `Manually select features` option at the beginning, as it is still marked as experimental.
![https://api.emvi.com/api/v1/content/7hjDa1NJXZ8nBUIhVq38.png](https://marvinblum.de/static/blog/bZ1DQzJdjK/7hjDa1NJXZ8nBUIhVq38.png) ![Structure](/static/blog/vue3/structure.png)
Out-of-the-box project structure of a new Vue 3 project. Out-of-the-box project structure of a new Vue 3 project.
@@ -28,13 +28,13 @@ Nothing surprising so far, but what really astonished me was how well everything
The only changes I made were removing the `assets` folder and adding a command to the `package.json` to rebuild when something changed (build is still used for the production release). The only changes I made were removing the `assets` folder and adding a command to the `package.json` to rebuild when something changed (build is still used for the production release).
![https://api.emvi.com/api/v1/content/A9Qi6HaL2RiOq5PjopiG.png](https://marvinblum.de/static/blog/bZ1DQzJdjK/A9Qi6HaL2RiOq5PjopiG.png) ![Scripts](/static/blog/vue3/scripts.png)
A very lean `package.json`. A very lean `package.json`.
I use to embed my apps inside a custom Go server, to have control over configuration, headers, how files are served, easier deployment, and to add some functionality of course. By default, the `build` and `watch` commands will put the compiled files into the `dist` folder, present inside the root directory. The app itself is a subdirectory of the Go server. I use to embed my apps inside a custom Go server, to have control over configuration, headers, how files are served, easier deployment, and to add some functionality of course. By default, the `build` and `watch` commands will put the compiled files into the `dist` folder, present inside the root directory. The app itself is a subdirectory of the Go server.
![https://api.emvi.com/api/v1/content/kG2XljOM5Ej5DK0L5G4H.png](https://marvinblum.de/static/blog/bZ1DQzJdjK/kG2XljOM5Ej5DK0L5G4H.png) ![UI](/static/blog/vue3/ui.png)
Before, I just served the whole UI directory, but this time I had to select the directories under `dist` to make it work. Before, I just served the whole UI directory, but this time I had to select the directories under `dist` to make it work.
@@ -60,7 +60,7 @@ You might have heard about the Composition API already. It's a new way to define
I fell in love with it when I had to implement multiple dropdowns. Here is an example from Pirsch, when I built the menu and had to add four dropdowns, which are functionality-wise all the same. I fell in love with it when I had to implement multiple dropdowns. Here is an example from Pirsch, when I built the menu and had to add four dropdowns, which are functionality-wise all the same.
![https://api.emvi.com/api/v1/content/TOAAT58QxRrVJHQOJ55t.jpeg](https://marvinblum.de/static/blog/bZ1DQzJdjK/TOAAT58QxRrVJHQOJ55t.jpeg) ![Composition](/static/blog/vue3/composition.jpeg)
An early version of Pirsch's menu. An early version of Pirsch's menu.
@@ -213,7 +213,7 @@ Generics With Typescript
Another moment I felt pretty good about my choice using TypeScript, was when I had to implement lists. Lists are often used to display data that would otherwise be in a table. They usually consist of "cards" in my apps, showing what it is and some additional fields and buttons to edit or remove them from the list. Another moment I felt pretty good about my choice using TypeScript, was when I had to implement lists. Lists are often used to display data that would otherwise be in a table. They usually consist of "cards" in my apps, showing what it is and some additional fields and buttons to edit or remove them from the list.
![https://api.emvi.com/api/v1/content/dfW7HEb088pUlq6ZA9vp.png](https://marvinblum.de/static/blog/bZ1DQzJdjK/dfW7HEb088pUlq6ZA9vp.png) ![Access](/static/blog/vue3/access.png)
I know this doesn't look very nice at the moment... I know this doesn't look very nice at the moment...

BIN
static/blog/vue3/access.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/blog/vue3/setup.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/blog/vue3/ui.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

@@ -2,7 +2,7 @@
> _This post was originally published on Medium a while ago. I just added it to my blog for completeness._ > _This post was originally published on Medium a while ago. I just added it to my blog for completeness._
![https://api.emvi.com/api/v1/content/NrnkLU0381vIVXCWKMJJ.png](https://marvinblum.de/static/blog/0odQzebaLO/NrnkLU0381vIVXCWKMJJ.png) ![Comic](/static/blog/wildcardssl/comic.png)
Image by [CommitStrip](http://www.commitstrip.com/en/2016/06/13/the-end-of-an-expensive-era/). Image by [CommitStrip](http://www.commitstrip.com/en/2016/06/13/the-end-of-an-expensive-era/).

Binary file not shown.

After

Width:  |  Height:  |  Size: 456 KiB

View File

@@ -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:1.5;color:#0f0f0f}body{margin:0;padding:0}h1,h2{font-size:32px;margin:0 0 40px 0;font-weight:normal}h1 a,h2 a{font-size:32px}h2{margin:40px 0;font-size:26px}a{text-decoration:none;transition:all .3s;color:#717171}a:hover{color:#0f0f0f}p{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}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}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}section{max-width:1080px;margin:80px auto 0 auto;padding:0 40px}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}/*# 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 */

View File

@@ -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,gBACA,MAVW,QAaZ,KACC,SACA,UAGD,MACC,eACA,kBACA,mBAEA,UACC,eAIF,GACC,cACA,eAGD,EACC,qBACA,mBACA,MAnCW,QAqCX,QACC,MAvCU,QA2CZ,EACC,cAGD,IACC,cACA,cACA,iBAGD,IACC,cACA,iBACA,aACA,6BACA,mBACA,aAxDW,QAyDX,cA7Dc,IA8Dd,gBACA,eAGD,KACC,4CAGD,GACC,cACA,WACA,WAtEW,QAuEX,eAGD,IACC,kBACA,WA3EW,QA6EX,aACC,aACA,8BACA,mBACA,iBACA,cAEA,gBACC,aACA,SACA,SACA,UAEA,mBACC,gBACA,SACA,UAEA,qBACC,MAnGO,QAqGP,yBACC,KAtGM,QAuGN,mBAGD,2BACC,MA1GM,QA4GN,+BACC,KA7GK,QAoHV,sBACC,qBACA,iBACA,cAzHY,IA0HZ,yBACA,MA1HS,QA2HT,mBAEA,4BACC,WA9HQ,QA+HR,WAMJ,QACC,iBACA,wBACA,eAGD,OACC,iBACA,wBACA,eAEA,gBACC,iBACA,cACA,mBACA,uBACA,aAnJU,QAoJV,eAIF,OACC,WAxJW,QAyJX,eACA,yBACA,SAEA,eACC,iBACA,cACA,aACA,SACA,2BACA,mBAEA,kBACC,SAGD,mBACC,gBACA,iBACA,eACA,cAjLY","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"}

View File

@@ -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")})});})();

8
tpl/blog_entry.html Normal file
View File

@@ -0,0 +1,8 @@
<section class="blog-entry">
<article>
<p>{{copy .Page .Content "date"}}</p>
<h2>
<a href="{{copy .Page .Content "link"}}">{{copy .Page .Content "headline"}}</a>
</h2>
</article>
</section>

View File

@@ -1,6 +1,6 @@
<footer> <footer>
<div class="content"> <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>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> <p>This page does not use cookies. <a href="/legal">Legal</a></p>
</div> </div>

View File

@@ -1,6 +1,6 @@
<section class="intro"> <section class="intro">
<article> <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" /> <img src="/static/img/me.jpg" alt="Picture" />
</article> </article>
</section> </section>

View File

@@ -1,37 +1,40 @@
<nav> <nav>
<div class="content"> <div class="content">
<ul> <div style="display: flex;flex-direction: column;gap: 4px;">
<li> <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>
<a href="/">Home</a> <ul id="nav">
</li> <li>
<li> <a href="/">Home</a>
<a href="/blog">Blog</a> </li>
</li> <li>
<li> <a href="/blog">Blog</a>
<a href="https://github.com/Kugelschieber" target="_blank"> </li>
GitHub <li>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48"> <a href="https://github.com/Kugelschieber" target="_blank">
<path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path> GitHub
</svg> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48">
</a> <path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path>
</li> </svg>
<li> </a>
<a href="https://x.com/m5blum" target="_blank"> </li>
Twitter/X <li>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48"> <a href="https://x.com/m5blum" target="_blank">
<path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path> Twitter/X
</svg> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48">
</a> <path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path>
</li> </svg>
<li> </a>
<a href="https://social.anoxinon.de/@m5blum" target="_blank"> </li>
Mastodon <li>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48"> <a href="https://social.anoxinon.de/@m5blum" target="_blank">
<path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path> Mastodon
</svg> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="14" height="14" viewBox="0 0 48 48">
</a> <path d="M 40.960938 4.9804688 A 2.0002 2.0002 0 0 0 40.740234 5 L 28 5 A 2.0002 2.0002 0 1 0 28 9 L 36.171875 9 L 22.585938 22.585938 A 2.0002 2.0002 0 1 0 25.414062 25.414062 L 39 11.828125 L 39 20 A 2.0002 2.0002 0 1 0 43 20 L 43 7.2460938 A 2.0002 2.0002 0 0 0 40.960938 4.9804688 z M 12.5 8 C 8.3826878 8 5 11.382688 5 15.5 L 5 35.5 C 5 39.617312 8.3826878 43 12.5 43 L 32.5 43 C 36.617312 43 40 39.617312 40 35.5 L 40 26 A 2.0002 2.0002 0 1 0 36 26 L 36 35.5 C 36 37.446688 34.446688 39 32.5 39 L 12.5 39 C 10.553312 39 9 37.446688 9 35.5 L 9 15.5 C 9 13.553312 10.553312 12 12.5 12 L 22 12 A 2.0002 2.0002 0 1 0 22 8 L 12.5 8 z"></path>
</li> </svg>
</ul> </a>
</li>
</ul>
</div>
<div> <div>
<a href="mailto:marvin.blum@emvi.com" class="contact">Contact me</a> <a href="mailto:marvin.blum@emvi.com" class="contact">Contact me</a>
</div> </div>