diff --git a/src/components/Image.astro b/src/components/Image.astro index 946da3b..fd264ab 100644 --- a/src/components/Image.astro +++ b/src/components/Image.astro @@ -16,6 +16,7 @@ interface Props { async function checkImage(image: ImageMetadata) { const src = image.src; + if(!src) return false; try { if (src.startsWith("/@fs") || src.startsWith("/_astro")) return true; const res = await inferRemoteSize(src); @@ -28,6 +29,7 @@ async function checkImage(image: ImageMetadata) { return false; } catch (err) { console.log("Failed to fetch: ", src); + console.log(err) return false; } } diff --git a/src/components/ImageSlider.svelte b/src/components/ImageSlider.svelte index 0b9f649..fdfe9af 100644 --- a/src/components/ImageSlider.svelte +++ b/src/components/ImageSlider.svelte @@ -14,14 +14,13 @@ function show(img: HTMLPictureElement) { img.classList.add("active"); - const _img = img.querySelector("img"); + const _img = img.querySelector("img") || img; if (!_img) return; _img.addEventListener("load", () => { img.classList.remove("thumb-loading"); _img.style.opacity = "1"; }); - if (_img?.alt) altText = _img.alt; - else altText = ""; + altText = _img["alt"] ?? _img.getAttribute("alt") ?? ""; height = _img.getBoundingClientRect().height; setTimeout(() => { height = _img.getBoundingClientRect().height; @@ -58,25 +57,21 @@ class:title class:not-loaded={!loaded} class:loaded - style={`--height:${height}px`} -> + style={`--height:${height}px`}> {#if title}

{title}

+ class="overflow-hidden rounded-md bg-light gap-2 flex p-2 border border-light">
{/if} diff --git a/src/content/photos/picos-de-europa/images/20250527_125228.jpg b/src/content/photos/picos-de-europa/images/20250527_125228.jpg new file mode 100644 index 0000000..f4ba522 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/20250527_125228.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e2a26193329a249736238594828a96a0616f172135b6059e186c0a69873cdc03 +size 6083964 diff --git a/src/content/photos/picos-de-europa/images/20250528_164715.jpg b/src/content/photos/picos-de-europa/images/20250528_164715.jpg new file mode 100644 index 0000000..223f6a3 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/20250528_164715.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:116c20455706a697b5310dc3cbc2e270e01c5e404985bddefe00f59d69625899 +size 5459999 diff --git a/src/content/photos/picos-de-europa/images/IMG-20250531-WA0020.jpeg b/src/content/photos/picos-de-europa/images/IMG-20250531-WA0020.jpeg new file mode 100644 index 0000000..b4fcea8 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/IMG-20250531-WA0020.jpeg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c0900a2d84846c1fd612fe69228862445069d7cc0aad6e94e73c7c5872765c45 +size 1282918 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250527_100728883.jpg b/src/content/photos/picos-de-europa/images/PXL_20250527_100728883.jpg new file mode 100644 index 0000000..fa38de5 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250527_100728883.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:eb52913d7f4011463dcfb932ee3e9c2f65d741f2f1150765843986d053ec8eed +size 5045015 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250527_101057540.MP.jpg b/src/content/photos/picos-de-europa/images/PXL_20250527_101057540.MP.jpg new file mode 100644 index 0000000..b550938 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250527_101057540.MP.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c5cb638e49991ff5861683a6b973a6b01a71897d6dfc8f4d01dd04bdfe51dafb +size 6870354 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250528_121633744.MP.jpg b/src/content/photos/picos-de-europa/images/PXL_20250528_121633744.MP.jpg new file mode 100644 index 0000000..539c048 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250528_121633744.MP.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:155cdaf87001aca3afaf23ea551e8f30c79b3c984ce26915062a4bca16ad93dd +size 11644946 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250529_125633973_small_x265.mp4 b/src/content/photos/picos-de-europa/images/PXL_20250529_125633973_small_x265.mp4 new file mode 100644 index 0000000..35ffbc6 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250529_125633973_small_x265.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:35953c6c6c3009baa179d73492673f3ace4f2d21beb31005b0688b13fe1af236 +size 1007947 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250529_201559403.jpg b/src/content/photos/picos-de-europa/images/PXL_20250529_201559403.jpg new file mode 100644 index 0000000..e4599c5 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250529_201559403.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f389d023d2b4ba95422892b48440d877a2dc29015c716ea8115fb4a01c21a527 +size 2582796 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250530_082919731.jpg b/src/content/photos/picos-de-europa/images/PXL_20250530_082919731.jpg new file mode 100644 index 0000000..426cbe9 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250530_082919731.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4fc94b31174c77d2885ddce5131fe8519c312424347a4f0efcb43e6cd86619b7 +size 4621826 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250530_110041174.jpg b/src/content/photos/picos-de-europa/images/PXL_20250530_110041174.jpg new file mode 100644 index 0000000..4232461 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250530_110041174.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:19139d74d6bf76b34f07d9758ca81f1f8bed833b5407778234dea621154e2792 +size 4614981 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250530_135631186.MP.jpg b/src/content/photos/picos-de-europa/images/PXL_20250530_135631186.MP.jpg new file mode 100644 index 0000000..302d060 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250530_135631186.MP.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9ab6b99216b9a7385141da190c6cff95698c4627fc629275b3545814b227a135 +size 6444973 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250530_141432767.jpg b/src/content/photos/picos-de-europa/images/PXL_20250530_141432767.jpg new file mode 100644 index 0000000..a3c8f80 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250530_141432767.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3d11fee3c8e58cd750f244e5523f69d3bf72d8dc8fde0cd1cf8351783154ac2f +size 3541975 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250530_170114907.MP.jpg b/src/content/photos/picos-de-europa/images/PXL_20250530_170114907.MP.jpg new file mode 100644 index 0000000..afccbcd --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250530_170114907.MP.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2abce12328d382b8b1c7215c68b7f9642b997cecf4679bc26b56ff4d98287cd5 +size 8393462 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250530_195122211.jpg b/src/content/photos/picos-de-europa/images/PXL_20250530_195122211.jpg new file mode 100644 index 0000000..d960c70 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250530_195122211.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:67c2ed514b3330f0605e3c9928e52daf233db288a30f0a95e882da2378f573d1 +size 2285601 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250601_044050514_small_x265.mp4 b/src/content/photos/picos-de-europa/images/PXL_20250601_044050514_small_x265.mp4 new file mode 100644 index 0000000..8a37116 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250601_044050514_small_x265.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:56e320d326a74cc57cbebc46068a3204101b6ac34b84d020f864a469708241ff +size 4944009 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250601_082528934.jpg b/src/content/photos/picos-de-europa/images/PXL_20250601_082528934.jpg new file mode 100644 index 0000000..3a4eb54 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250601_082528934.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0d390ac79b7b38a44a963a259c7cb7a5a3bcd051f4ae601f0b0fb1e505ca8ed9 +size 3823913 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250601_095307910.jpg b/src/content/photos/picos-de-europa/images/PXL_20250601_095307910.jpg new file mode 100644 index 0000000..be60f5e --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250601_095307910.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c4bb003e13f729cd3aff64858e00e0081e69dd6796d26626a9f0d66681b6cfc6 +size 3986272 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250601_124002445.jpg b/src/content/photos/picos-de-europa/images/PXL_20250601_124002445.jpg new file mode 100644 index 0000000..5f3152e --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250601_124002445.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d2de5da148364d75e5fe12ff8c7d76fb5f0be4bec9b68e872a62cf14fc6aa198 +size 3817991 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250601_132646197.jpg b/src/content/photos/picos-de-europa/images/PXL_20250601_132646197.jpg new file mode 100644 index 0000000..425da76 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250601_132646197.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7de1d9310f44e8d31e86786e09fc943ee247cbd8d132898aec1c1e7986b7a2bd +size 2930172 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250601_132716155.jpg b/src/content/photos/picos-de-europa/images/PXL_20250601_132716155.jpg new file mode 100644 index 0000000..0fd0930 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250601_132716155.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:018c08c3f9de706a011420605548b0cd1c5c0cf23c8bbd780eccc13bd335239e +size 3354216 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250602_064221551.jpg b/src/content/photos/picos-de-europa/images/PXL_20250602_064221551.jpg new file mode 100644 index 0000000..c6e2ab7 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250602_064221551.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9594959379a66b45fdf62599b7ef498a6a2406efac7e59ff43d9a5af9b91128a +size 6029952 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250602_064236132_small_x265.mp4 b/src/content/photos/picos-de-europa/images/PXL_20250602_064236132_small_x265.mp4 new file mode 100644 index 0000000..297a597 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250602_064236132_small_x265.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:355c11ffd29f0feedc7ae621c2dfd06940be00a6c539c5b2e64505b4a441b314 +size 22387589 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250603_083830771.jpg b/src/content/photos/picos-de-europa/images/PXL_20250603_083830771.jpg new file mode 100644 index 0000000..7f46423 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250603_083830771.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b03b84222a5331b81f3c78d0ee2c4e36891f72e3b842f1260cfb51535dd1f66c +size 3007668 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250603_093606665.jpg b/src/content/photos/picos-de-europa/images/PXL_20250603_093606665.jpg new file mode 100644 index 0000000..e2a7084 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250603_093606665.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ab42ca35bfe2feb7240500a9258b0c7a11be4b5d2e129f5b0e2a409d25e628ad +size 4717607 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250603_194557406.jpg b/src/content/photos/picos-de-europa/images/PXL_20250603_194557406.jpg new file mode 100644 index 0000000..ac3e6bf --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250603_194557406.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d1ad75b3133a37744d8441674ab4e0ba6ad92ae961e9eedd3fb575a90150b678 +size 3324074 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250603_194635918.jpg b/src/content/photos/picos-de-europa/images/PXL_20250603_194635918.jpg new file mode 100644 index 0000000..cc29810 --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250603_194635918.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:54da562fbc011ce7cc36b8d9042a59563cffc4fa5a48b207b00e00f833a1db03 +size 3376084 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250603_194636284.jpg b/src/content/photos/picos-de-europa/images/PXL_20250603_194636284.jpg new file mode 100644 index 0000000..867dd7c --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250603_194636284.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e0823c04de5a883e88e58579a50ecd41716093bf12028c7d27e56f9b61c1b29a +size 4231748 diff --git a/src/content/photos/picos-de-europa/images/PXL_20250605_100650266.jpg b/src/content/photos/picos-de-europa/images/PXL_20250605_100650266.jpg new file mode 100644 index 0000000..dcba98b --- /dev/null +++ b/src/content/photos/picos-de-europa/images/PXL_20250605_100650266.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d0849e07b28d5865eb30482f075170071dc567839c3cf3a14db1c2f14305a732 +size 4754105 diff --git a/src/content/photos/picos-de-europa/index.en.mdx b/src/content/photos/picos-de-europa/index.en.mdx new file mode 100644 index 0000000..7a5e5f0 --- /dev/null +++ b/src/content/photos/picos-de-europa/index.en.mdx @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b8e5659131185af05c819c99d371a98dfec422449908c8be46992a1810088112 +size 2854 diff --git a/src/content/photos/picos-de-europa/index.mdx b/src/content/photos/picos-de-europa/index.mdx new file mode 100644 index 0000000..d47c5b6 --- /dev/null +++ b/src/content/photos/picos-de-europa/index.mdx @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:032a32cb72546ee8ce85f30dfcd1fb5199548f9dd0e7d81b8736c74a2b1dd096 +size 2954 diff --git a/src/content/projects/invoice/index.mdx b/src/content/projects/invoice/index.mdx index 1a40372..81b514c 100644 --- a/src/content/projects/invoice/index.mdx +++ b/src/content/projects/invoice/index.mdx @@ -22,8 +22,6 @@ import ImageSlider from '@components/ImageSlider.svelte' import Image from '@components/Image.astro' -# Einleitung - In meiner Freizeit übernehme ich gerne kleinere Aufträge und erledige Botengänge, Aufbauten und Abholungen für andere. Ein unvermeidlicher Bestandteil dieser Tätigkeiten ist das Erstellen von Rechnungen im PDF-Format. Anfangs habe ich mich dem manuellen Prozess hingegeben und die ersten Rechnungen in Figma erstellt. Doch wie es unter Programmierer*innen oft heißt: diff --git a/src/content/projects/karl/index.mdx b/src/content/projects/karl/index.mdx index 022011b..eda0974 100644 --- a/src/content/projects/karl/index.mdx +++ b/src/content/projects/karl/index.mdx @@ -26,8 +26,6 @@ import ImageGallery from "@components/ImageGallery.svelte" > K.A.R.L ist eine WebApp die einem dabei hilft 360Grad Panoramas in Sektionen einzuteilen, (Himmel, Boden, Bäume usw...) und dann den Anteil der einzelnen Sektionen am Gesamtbild festzustellen. -# Einleitung - Das Projekt ist aus der Zusammenarbeit mit zwei Freunden entstanden. Der eine steckt gerade mitten in der Konzeptionsphase seiner Bachelorarbeit (Geographie), die sich mit der Auswirkung von Vegetation auf das Stadtklima beschäftigt. Dazu hat er an verschiedenen Orten in Köln Albedo Messungen vorgenommen, also quasi "wieviel Licht kommt vom Himmel, und wieviel davon wird vom Boden reflektiert". Um diese Messungen in den richtigen Kontext zu setzen hat er von jedem Messort 360 Panoramas angelegt, diese sehen ungefähr so aus: Image of a crosswalk diff --git a/src/content/projects/plantarium/index.mdx b/src/content/projects/plantarium/index.mdx index 97794d6..3e6be15 100644 --- a/src/content/projects/plantarium/index.mdx +++ b/src/content/projects/plantarium/index.mdx @@ -10,8 +10,6 @@ draft: false toc: true --- -# Einführung - Plantarium ist die Schnittmenge zwischen zwei Dingen die ich sehr faszinierend finde, Pflanzen und 3D Modellierung. Es ist eine WebApp die es Nutzern ermöglicht Pflanzen zu erstellen und zu exportieren. Die User legen dabei über ein Node-System fest wie die Pflanze aussieht und Plantarium generiert daraus ein 3D Modell. diff --git a/src/content/projects/silvester/components/Mask.svelte b/src/content/projects/silvester/components/Mask.svelte new file mode 100644 index 0000000..bd0c81c --- /dev/null +++ b/src/content/projects/silvester/components/Mask.svelte @@ -0,0 +1,944 @@ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + diff --git a/src/content/projects/silvester/components/Mask.svg b/src/content/projects/silvester/components/Mask.svg new file mode 100644 index 0000000..a9614f0 --- /dev/null +++ b/src/content/projects/silvester/components/Mask.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/content/projects/silvester/components/mask.css b/src/content/projects/silvester/components/mask.css new file mode 100644 index 0000000..c6b1295 --- /dev/null +++ b/src/content/projects/silvester/components/mask.css @@ -0,0 +1,1996 @@ +#mask > * { + animation-timing-function: ease !important; + animation-fill-mode: forwards !important; + stroke-dashoffset: 0; +} + +#mask > path[id='Form 1']{ + stroke-dasharray: 158.54; + animation: form1; + stroke-width: 1px +} + +@keyframes form1 { + 0% { + stroke-dashoffset: 158.54; + } + 0% { + stroke-dashoffset: 158.54; + } + 40% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Form 3']{ + stroke-dasharray: 129.16; + animation: form3; + stroke-width: 1px +} + +@keyframes form3 { + 0% { + stroke-dashoffset: 129.16; + } + 0% { + stroke-dashoffset: 129.16; + } + 33% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Form 3 copy']{ + stroke-dasharray: 96.59; + animation: form3copy; + stroke-width: 1px +} + +@keyframes form3copy { + 0% { + stroke-dashoffset: 96.59; + } + 17% { + stroke-dashoffset: 96.59; + } + 42% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Form 3 copy_2']{ + stroke-dasharray: 81.17; + animation: form3copy_2; + stroke-width: 1px +} + +@keyframes form3copy_2 { + 0% { + stroke-dashoffset: 81.17; + } + 27% { + stroke-dashoffset: 81.17; + } + 47% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 1']{ + stroke-dasharray: 33.05; + animation: vector1; + stroke-width: 2px +} + +@keyframes vector1 { + 0% { + stroke-dashoffset: 33.05; + } + 2% { + stroke-dashoffset: 33.05; + } + 10% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 10']{ + stroke-dasharray: 136.67; + animation: vector10; + stroke-width: 2px +} + +@keyframes vector10 { + 0% { + stroke-dashoffset: 136.67; + } + 66% { + stroke-dashoffset: 136.67; + } + 101% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 100']{ + stroke-dasharray: 31.05; + animation: vector100; + stroke-width: 1px +} + +@keyframes vector100 { + 0% { + stroke-dashoffset: 31.05; + } + 60% { + stroke-dashoffset: 31.05; + } + 68% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 101']{ + stroke-dasharray: 33.88; + animation: vector101; + stroke-width: 1px +} + +@keyframes vector101 { + 0% { + stroke-dashoffset: 33.88; + } + 65% { + stroke-dashoffset: 33.88; + } + 73% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 102']{ + stroke-dasharray: 35.41; + animation: vector102; + stroke-width: 2px +} + +@keyframes vector102 { + 0% { + stroke-dashoffset: 35.41; + } + 70% { + stroke-dashoffset: 35.41; + } + 79% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 103']{ + stroke-dasharray: 58.09; + animation: vector103; + stroke-width: 2px +} + +@keyframes vector103 { + 0% { + stroke-dashoffset: 58.09; + } + 62% { + stroke-dashoffset: 58.09; + } + 77% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 104']{ + stroke-dasharray: 59.71; + animation: vector104; + stroke-width: 2px +} + +@keyframes vector104 { + 0% { + stroke-dashoffset: 59.71; + } + 66% { + stroke-dashoffset: 59.71; + } + 81% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 105']{ + stroke-dasharray: 58.25; + animation: vector105; + stroke-width: 2px +} + +@keyframes vector105 { + 0% { + stroke-dashoffset: 58.25; + } + 70% { + stroke-dashoffset: 58.25; + } + 85% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 106']{ + stroke-dasharray: 61.29; + animation: vector106; + stroke-width: 1px +} + +@keyframes vector106 { + 0% { + stroke-dashoffset: 61.29; + } + 74% { + stroke-dashoffset: 61.29; + } + 89% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 107']{ + stroke-dasharray: 15.7; + animation: vector107; + stroke-width: 2px +} + +@keyframes vector107 { + 0% { + stroke-dashoffset: 15.7; + } + 62% { + stroke-dashoffset: 15.7; + } + 66% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 108']{ + stroke-dasharray: 16.46; + animation: vector108; + stroke-width: 1px +} + +@keyframes vector108 { + 0% { + stroke-dashoffset: 16.46; + } + 67% { + stroke-dashoffset: 16.46; + } + 71% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 109']{ + stroke-dasharray: 18.41; + animation: vector109; + stroke-width: 1px +} + +@keyframes vector109 { + 0% { + stroke-dashoffset: 18.41; + } + 72% { + stroke-dashoffset: 18.41; + } + 77% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 11']{ + stroke-dasharray: 202.59; + animation: vector11; + stroke-width: 1px +} + +@keyframes vector11 { + 0% { + stroke-dashoffset: 202.59; + } + 11% { + stroke-dashoffset: 202.59; + } + 62% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 110']{ + stroke-dasharray: 30.24; + animation: vector110; + stroke-width: 2px +} + +@keyframes vector110 { + 0% { + stroke-dashoffset: 30.24; + } + 79% { + stroke-dashoffset: 30.24; + } + 87% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 111']{ + stroke-dasharray: 35.04; + animation: vector111; + stroke-width: 1px +} + +@keyframes vector111 { + 0% { + stroke-dashoffset: 35.04; + } + 61% { + stroke-dashoffset: 35.04; + } + 69% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 112']{ + stroke-dasharray: 16.490000000000002; + animation: vector112; + stroke-width: 1px +} + +@keyframes vector112 { + 0% { + stroke-dashoffset: 16.490000000000002; + } + 57% { + stroke-dashoffset: 16.490000000000002; + } + 61% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 12']{ + stroke-dasharray: 198.08; + animation: vector12; + stroke-width: 2px +} + +@keyframes vector12 { + 0% { + stroke-dashoffset: 198.08; + } + 11% { + stroke-dashoffset: 198.08; + } + 61% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 13']{ + stroke-dasharray: 133.25; + animation: vector13; + stroke-width: 1px +} + +@keyframes vector13 { + 0% { + stroke-dashoffset: 133.25; + } + 17% { + stroke-dashoffset: 133.25; + } + 51% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 14']{ + stroke-dasharray: 90.62; + animation: vector14; + stroke-width: 2px +} + +@keyframes vector14 { + 0% { + stroke-dashoffset: 90.62; + } + 28% { + stroke-dashoffset: 90.62; + } + 51% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 15']{ + stroke-dasharray: 118.96; + animation: vector15; + stroke-width: 2px +} + +@keyframes vector15 { + 0% { + stroke-dashoffset: 118.96; + } + 29% { + stroke-dashoffset: 118.96; + } + 59% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 16']{ + stroke-dasharray: 149.54; + animation: vector16; + stroke-width: 2px +} + +@keyframes vector16 { + 0% { + stroke-dashoffset: 149.54; + } + 29% { + stroke-dashoffset: 149.54; + } + 67% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 17']{ + stroke-dasharray: 160.18; + animation: vector17; + stroke-width: 1px +} + +@keyframes vector17 { + 0% { + stroke-dashoffset: 160.18; + } + 29% { + stroke-dashoffset: 160.18; + } + 69% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 18']{ + stroke-dasharray: 61.12; + animation: vector18; + stroke-width: 2px +} + +@keyframes vector18 { + 0% { + stroke-dashoffset: 61.12; + } + 29% { + stroke-dashoffset: 61.12; + } + 44% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 19']{ + stroke-dasharray: 14.29; + animation: vector19; + stroke-width: 2px +} + +@keyframes vector19 { + 0% { + stroke-dashoffset: 14.29; + } + 33% { + stroke-dashoffset: 14.29; + } + 37% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 2']{ + stroke-dasharray: 395.39; + animation: vector2; + stroke-width: 2px +} + +@keyframes vector2 { + 0% { + stroke-dashoffset: 395.39; + } + 7% { + stroke-dashoffset: 395.39; + } + 107% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 20']{ + stroke-dasharray: 20.5; + animation: vector20; + stroke-width: 2px +} + +@keyframes vector20 { + 0% { + stroke-dashoffset: 20.5; + } + 34% { + stroke-dashoffset: 20.5; + } + 39% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 21']{ + stroke-dasharray: 29.98; + animation: vector21; + stroke-width: 1px +} + +@keyframes vector21 { + 0% { + stroke-dashoffset: 29.98; + } + 36% { + stroke-dashoffset: 29.98; + } + 44% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 21_2']{ + stroke-dasharray: 37.42; + animation: vector21_2; + stroke-width: 1px +} + +@keyframes vector21_2 { + 0% { + stroke-dashoffset: 37.42; + } + 39% { + stroke-dashoffset: 37.42; + } + 48% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 22']{ + stroke-dasharray: 42.45; + animation: vector22; + stroke-width: 2px +} + +@keyframes vector22 { + 0% { + stroke-dashoffset: 42.45; + } + 39% { + stroke-dashoffset: 42.45; + } + 50% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 23']{ + stroke-dasharray: 47.87; + animation: vector23; + stroke-width: 1px +} + +@keyframes vector23 { + 0% { + stroke-dashoffset: 47.87; + } + 40% { + stroke-dashoffset: 47.87; + } + 52% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 24']{ + stroke-dasharray: 70.05; + animation: vector24; + stroke-width: 2px +} + +@keyframes vector24 { + 0% { + stroke-dashoffset: 70.05; + } + 41% { + stroke-dashoffset: 70.05; + } + 59% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 25']{ + stroke-dasharray: 89.58; + animation: vector25; + stroke-width: 2px +} + +@keyframes vector25 { + 0% { + stroke-dashoffset: 89.58; + } + 40% { + stroke-dashoffset: 89.58; + } + 62% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 26']{ + stroke-dasharray: 34.76; + animation: vector26; + stroke-width: 1px +} + +@keyframes vector26 { + 0% { + stroke-dashoffset: 34.76; + } + 53% { + stroke-dashoffset: 34.76; + } + 61% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 27']{ + stroke-dasharray: 29.64; + animation: vector27; + stroke-width: 2px +} + +@keyframes vector27 { + 0% { + stroke-dashoffset: 29.64; + } + 59% { + stroke-dashoffset: 29.64; + } + 67% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 28']{ + stroke-dasharray: 24.67; + animation: vector28; + stroke-width: 1px +} + +@keyframes vector28 { + 0% { + stroke-dashoffset: 24.67; + } + 27% { + stroke-dashoffset: 24.67; + } + 34% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 29']{ + stroke-dasharray: 36.42; + animation: vector29; + stroke-width: 1px +} + +@keyframes vector29 { + 0% { + stroke-dashoffset: 36.42; + } + 31% { + stroke-dashoffset: 36.42; + } + 40% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 3']{ + stroke-dasharray: 110.65; + animation: vector3; + stroke-width: 2px +} + +@keyframes vector3 { + 0% { + stroke-dashoffset: 110.65; + } + 9% { + stroke-dashoffset: 110.65; + } + 37% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 30']{ + stroke-dasharray: 44.04; + animation: vector30; + stroke-width: 2px +} + +@keyframes vector30 { + 0% { + stroke-dashoffset: 44.04; + } + 33% { + stroke-dashoffset: 44.04; + } + 44% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 31']{ + stroke-dasharray: 52.94; + animation: vector31; + stroke-width: 1px +} + +@keyframes vector31 { + 0% { + stroke-dashoffset: 52.94; + } + 36% { + stroke-dashoffset: 52.94; + } + 49% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 32']{ + stroke-dasharray: 56.58; + animation: vector32; + stroke-width: 2px +} + +@keyframes vector32 { + 0% { + stroke-dashoffset: 56.58; + } + 40% { + stroke-dashoffset: 56.58; + } + 54% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 33']{ + stroke-dasharray: 51.95; + animation: vector33; + stroke-width: 2px +} + +@keyframes vector33 { + 0% { + stroke-dashoffset: 51.95; + } + 44% { + stroke-dashoffset: 51.95; + } + 57% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 34']{ + stroke-dasharray: 56.58; + animation: vector34; + stroke-width: 2px +} + +@keyframes vector34 { + 0% { + stroke-dashoffset: 56.58; + } + 48% { + stroke-dashoffset: 56.58; + } + 62% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 35']{ + stroke-dasharray: 56.58; + animation: vector35; + stroke-width: 2px +} + +@keyframes vector35 { + 0% { + stroke-dashoffset: 56.58; + } + 53% { + stroke-dashoffset: 56.58; + } + 67% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 36']{ + stroke-dasharray: 81.64; + animation: vector36; + stroke-width: 1px +} + +@keyframes vector36 { + 0% { + stroke-dashoffset: 81.64; + } + 55% { + stroke-dashoffset: 81.64; + } + 76% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 37']{ + stroke-dasharray: 54.05; + animation: vector37; + stroke-width: 1px +} + +@keyframes vector37 { + 0% { + stroke-dashoffset: 54.05; + } + 57% { + stroke-dashoffset: 54.05; + } + 70% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 38']{ + stroke-dasharray: 56.62; + animation: vector38; + stroke-width: 2px +} + +@keyframes vector38 { + 0% { + stroke-dashoffset: 56.62; + } + 49% { + stroke-dashoffset: 56.62; + } + 64% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 39']{ + stroke-dasharray: 35.55; + animation: vector39; + stroke-width: 1px +} + +@keyframes vector39 { + 0% { + stroke-dashoffset: 35.55; + } + 46% { + stroke-dashoffset: 35.55; + } + 55% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 4']{ + stroke-dasharray: 367.96; + animation: vector4; + stroke-width: 2px +} + +@keyframes vector4 { + 0% { + stroke-dashoffset: 367.96; + } + 11% { + stroke-dashoffset: 367.96; + } + 104% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 40']{ + stroke-dasharray: 19.35; + animation: vector40; + stroke-width: 1px +} + +@keyframes vector40 { + 0% { + stroke-dashoffset: 19.35; + } + 40% { + stroke-dashoffset: 19.35; + } + 45% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 41']{ + stroke-dasharray: 16.82; + animation: vector41; + stroke-width: 1px +} + +@keyframes vector41 { + 0% { + stroke-dashoffset: 16.82; + } + 43% { + stroke-dashoffset: 16.82; + } + 47% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 42']{ + stroke-dasharray: 15.26; + animation: vector42; + stroke-width: 1px +} + +@keyframes vector42 { + 0% { + stroke-dashoffset: 15.26; + } + 46% { + stroke-dashoffset: 15.26; + } + 50% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 43']{ + stroke-dasharray: 17.72; + animation: vector43; + stroke-width: 2px +} + +@keyframes vector43 { + 0% { + stroke-dashoffset: 17.72; + } + 49% { + stroke-dashoffset: 17.72; + } + 53% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 44']{ + stroke-dasharray: 17.63; + animation: vector44; + stroke-width: 1px +} + +@keyframes vector44 { + 0% { + stroke-dashoffset: 17.63; + } + 31% { + stroke-dashoffset: 17.63; + } + 36% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 45']{ + stroke-dasharray: 15.24; + animation: vector45; + stroke-width: 2px +} + +@keyframes vector45 { + 0% { + stroke-dashoffset: 15.24; + } + 35% { + stroke-dashoffset: 15.24; + } + 39% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 46']{ + stroke-dasharray: 17.52; + animation: vector46; + stroke-width: 2px +} + +@keyframes vector46 { + 0% { + stroke-dashoffset: 17.52; + } + 38% { + stroke-dashoffset: 17.52; + } + 42% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 47']{ + stroke-dasharray: 23.88; + animation: vector47; + stroke-width: 2px +} + +@keyframes vector47 { + 0% { + stroke-dashoffset: 23.88; + } + 40% { + stroke-dashoffset: 23.88; + } + 46% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 48']{ + stroke-dasharray: 23.61; + animation: vector48; + stroke-width: 2px +} + +@keyframes vector48 { + 0% { + stroke-dashoffset: 23.61; + } + 44% { + stroke-dashoffset: 23.61; + } + 50% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 49']{ + stroke-dasharray: 20.47; + animation: vector49; + stroke-width: 2px +} + +@keyframes vector49 { + 0% { + stroke-dashoffset: 20.47; + } + 49% { + stroke-dashoffset: 20.47; + } + 54% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 5']{ + stroke-dasharray: 242.29; + animation: vector5; + stroke-width: 1px +} + +@keyframes vector5 { + 0% { + stroke-dashoffset: 242.29; + } + 11% { + stroke-dashoffset: 242.29; + } + 72% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 50']{ + stroke-dasharray: 17.3; + animation: vector50; + stroke-width: 1px +} + +@keyframes vector50 { + 0% { + stroke-dashoffset: 17.3; + } + 64% { + stroke-dashoffset: 17.3; + } + 68% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 51']{ + stroke-dasharray: 22.1; + animation: vector51; + stroke-width: 2px +} + +@keyframes vector51 { + 0% { + stroke-dashoffset: 22.1; + } + 28% { + stroke-dashoffset: 22.1; + } + 34% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 52']{ + stroke-dasharray: 24.26; + animation: vector52; + stroke-width: 2px +} + +@keyframes vector52 { + 0% { + stroke-dashoffset: 24.26; + } + 31% { + stroke-dashoffset: 24.26; + } + 37% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 53']{ + stroke-dasharray: 19.2; + animation: vector53; + stroke-width: 1px +} + +@keyframes vector53 { + 0% { + stroke-dashoffset: 19.2; + } + 33% { + stroke-dashoffset: 19.2; + } + 38% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 54']{ + stroke-dasharray: 14.5; + animation: vector54; + stroke-width: 1px +} + +@keyframes vector54 { + 0% { + stroke-dashoffset: 14.5; + } + 49% { + stroke-dashoffset: 14.5; + } + 52% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 55']{ + stroke-dasharray: 11.05; + animation: vector55; + stroke-width: 1px +} + +@keyframes vector55 { + 0% { + stroke-dashoffset: 11.05; + } + 47% { + stroke-dashoffset: 11.05; + } + 50% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 56']{ + stroke-dasharray: 8.07; + animation: vector56; + stroke-width: 2px +} + +@keyframes vector56 { + 0% { + stroke-dashoffset: 8.07; + } + 46% { + stroke-dashoffset: 8.07; + } + 47% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 57']{ + stroke-dasharray: 8.64; + animation: vector57; + stroke-width: 1px +} + +@keyframes vector57 { + 0% { + stroke-dashoffset: 8.64; + } + 44% { + stroke-dashoffset: 8.64; + } + 46% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 58']{ + stroke-dasharray: 7.71; + animation: vector58; + stroke-width: 2px +} + +@keyframes vector58 { + 0% { + stroke-dashoffset: 7.71; + } + 43% { + stroke-dashoffset: 7.71; + } + 45% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 59']{ + stroke-dasharray: 6.52; + animation: vector59; + stroke-width: 1px +} + +@keyframes vector59 { + 0% { + stroke-dashoffset: 6.52; + } + 42% { + stroke-dashoffset: 6.52; + } + 43% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 6']{ + stroke-dasharray: 159.9; + animation: vector6; + stroke-width: 1px +} + +@keyframes vector6 { + 0% { + stroke-dashoffset: 159.9; + } + 63% { + stroke-dashoffset: 159.9; + } + 104% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 60']{ + stroke-dasharray: 6.6; + animation: vector60; + stroke-width: 1px +} + +@keyframes vector60 { + 0% { + stroke-dashoffset: 6.6; + } + 40% { + stroke-dashoffset: 6.6; + } + 42% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 61']{ + stroke-dasharray: 16.92; + animation: vector61; + stroke-width: 2px +} + +@keyframes vector61 { + 0% { + stroke-dashoffset: 16.92; + } + 38% { + stroke-dashoffset: 16.92; + } + 42% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 62']{ + stroke-dasharray: 29.46; + animation: vector62; + stroke-width: 1px +} + +@keyframes vector62 { + 0% { + stroke-dashoffset: 29.46; + } + 39% { + stroke-dashoffset: 29.46; + } + 46% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 63']{ + stroke-dasharray: 36.38; + animation: vector63; + stroke-width: 1px +} + +@keyframes vector63 { + 0% { + stroke-dashoffset: 36.38; + } + 41% { + stroke-dashoffset: 36.38; + } + 50% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 64']{ + stroke-dasharray: 46.18; + animation: vector64; + stroke-width: 2px +} + +@keyframes vector64 { + 0% { + stroke-dashoffset: 46.18; + } + 43% { + stroke-dashoffset: 46.18; + } + 55% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 65']{ + stroke-dasharray: 41.42; + animation: vector65; + stroke-width: 1px +} + +@keyframes vector65 { + 0% { + stroke-dashoffset: 41.42; + } + 46% { + stroke-dashoffset: 41.42; + } + 57% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 66']{ + stroke-dasharray: 136.01; + animation: vector66; + stroke-width: 1px +} + +@keyframes vector66 { + 0% { + stroke-dashoffset: 136.01; + } + 64% { + stroke-dashoffset: 136.01; + } + 98% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 67']{ + stroke-dasharray: 25.81; + animation: vector67; + stroke-width: 2px +} + +@keyframes vector67 { + 0% { + stroke-dashoffset: 25.81; + } + 63% { + stroke-dashoffset: 25.81; + } + 69% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 68']{ + stroke-dasharray: 44.93; + animation: vector68; + stroke-width: 1px +} + +@keyframes vector68 { + 0% { + stroke-dashoffset: 44.93; + } + 66% { + stroke-dashoffset: 44.93; + } + 77% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 69']{ + stroke-dasharray: 34.68; + animation: vector69; + stroke-width: 1px +} + +@keyframes vector69 { + 0% { + stroke-dashoffset: 34.68; + } + 64% { + stroke-dashoffset: 34.68; + } + 73% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 7']{ + stroke-dasharray: 62.55; + animation: vector7; + stroke-width: 1px +} + +@keyframes vector7 { + 0% { + stroke-dashoffset: 62.55; + } + 64% { + stroke-dashoffset: 62.55; + } + 80% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 70']{ + stroke-dasharray: 11.14; + animation: vector70; + stroke-width: 1px +} + +@keyframes vector70 { + 0% { + stroke-dashoffset: 11.14; + } + 66% { + stroke-dashoffset: 11.14; + } + 69% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 71']{ + stroke-dasharray: 13.21; + animation: vector71; + stroke-width: 1px +} + +@keyframes vector71 { + 0% { + stroke-dashoffset: 13.21; + } + 68% { + stroke-dashoffset: 13.21; + } + 71% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 72']{ + stroke-dasharray: 16.64; + animation: vector72; + stroke-width: 2px +} + +@keyframes vector72 { + 0% { + stroke-dashoffset: 16.64; + } + 70% { + stroke-dashoffset: 16.64; + } + 74% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 73']{ + stroke-dasharray: 17.42; + animation: vector73; + stroke-width: 2px +} + +@keyframes vector73 { + 0% { + stroke-dashoffset: 17.42; + } + 72% { + stroke-dashoffset: 17.42; + } + 76% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 74']{ + stroke-dasharray: 15.41; + animation: vector74; + stroke-width: 2px +} + +@keyframes vector74 { + 0% { + stroke-dashoffset: 15.41; + } + 75% { + stroke-dashoffset: 15.41; + } + 79% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 75']{ + stroke-dasharray: 17.96; + animation: vector75; + stroke-width: 1px +} + +@keyframes vector75 { + 0% { + stroke-dashoffset: 17.96; + } + 77% { + stroke-dashoffset: 17.96; + } + 82% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 76']{ + stroke-dasharray: 16.94; + animation: vector76; + stroke-width: 1px +} + +@keyframes vector76 { + 0% { + stroke-dashoffset: 16.94; + } + 81% { + stroke-dashoffset: 16.94; + } + 85% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 77']{ + stroke-dasharray: 12.92; + animation: vector77; + stroke-width: 1px +} + +@keyframes vector77 { + 0% { + stroke-dashoffset: 12.92; + } + 84% { + stroke-dashoffset: 12.92; + } + 87% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 78']{ + stroke-dasharray: 9.84; + animation: vector78; + stroke-width: 1px +} + +@keyframes vector78 { + 0% { + stroke-dashoffset: 9.84; + } + 87% { + stroke-dashoffset: 9.84; + } + 90% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 79']{ + stroke-dasharray: 8.54; + animation: vector79; + stroke-width: 2px +} + +@keyframes vector79 { + 0% { + stroke-dashoffset: 8.54; + } + 90% { + stroke-dashoffset: 8.54; + } + 92% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 8']{ + stroke-dasharray: 145.77; + animation: vector8; + stroke-width: 1px +} + +@keyframes vector8 { + 0% { + stroke-dashoffset: 145.77; + } + 65% { + stroke-dashoffset: 145.77; + } + 102% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 80']{ + stroke-dasharray: 13.63; + animation: vector80; + stroke-width: 1px +} + +@keyframes vector80 { + 0% { + stroke-dashoffset: 13.63; + } + 62% { + stroke-dashoffset: 13.63; + } + 65% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 81']{ + stroke-dasharray: 30.47; + animation: vector81; + stroke-width: 1px +} + +@keyframes vector81 { + 0% { + stroke-dashoffset: 30.47; + } + 60% { + stroke-dashoffset: 30.47; + } + 67% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 82']{ + stroke-dasharray: 24.4; + animation: vector82; + stroke-width: 1px +} + +@keyframes vector82 { + 0% { + stroke-dashoffset: 24.4; + } + 41% { + stroke-dashoffset: 24.4; + } + 47% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 83']{ + stroke-dasharray: 16.53; + animation: vector83; + stroke-width: 1px +} + +@keyframes vector83 { + 0% { + stroke-dashoffset: 16.53; + } + 47% { + stroke-dashoffset: 16.53; + } + 51% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 84']{ + stroke-dasharray: 13.92; + animation: vector84; + stroke-width: 2px +} + +@keyframes vector84 { + 0% { + stroke-dashoffset: 13.92; + } + 51% { + stroke-dashoffset: 13.92; + } + 54% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 85']{ + stroke-dasharray: 19.64; + animation: vector85; + stroke-width: 2px +} + +@keyframes vector85 { + 0% { + stroke-dashoffset: 19.64; + } + 46% { + stroke-dashoffset: 19.64; + } + 50% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 86']{ + stroke-dasharray: 18.67; + animation: vector86; + stroke-width: 1px +} + +@keyframes vector86 { + 0% { + stroke-dashoffset: 18.67; + } + 49% { + stroke-dashoffset: 18.67; + } + 54% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 87']{ + stroke-dasharray: 20.46; + animation: vector87; + stroke-width: 1px +} + +@keyframes vector87 { + 0% { + stroke-dashoffset: 20.46; + } + 52% { + stroke-dashoffset: 20.46; + } + 58% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 88']{ + stroke-dasharray: 22.27; + animation: vector88; + stroke-width: 1px +} + +@keyframes vector88 { + 0% { + stroke-dashoffset: 22.27; + } + 53% { + stroke-dashoffset: 22.27; + } + 58% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 89']{ + stroke-dasharray: 22.07; + animation: vector89; + stroke-width: 2px +} + +@keyframes vector89 { + 0% { + stroke-dashoffset: 22.07; + } + 49% { + stroke-dashoffset: 22.07; + } + 55% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 9']{ + stroke-dasharray: 130.99; + animation: vector9; + stroke-width: 1px +} + +@keyframes vector9 { + 0% { + stroke-dashoffset: 130.99; + } + 66% { + stroke-dashoffset: 130.99; + } + 100% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 90']{ + stroke-dasharray: 31.41; + animation: vector90; + stroke-width: 1px +} + +@keyframes vector90 { + 0% { + stroke-dashoffset: 31.41; + } + 44% { + stroke-dashoffset: 31.41; + } + 52% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 91']{ + stroke-dasharray: 51.01; + animation: vector91; + stroke-width: 1px +} + +@keyframes vector91 { + 0% { + stroke-dashoffset: 51.01; + } + 57% { + stroke-dashoffset: 51.01; + } + 70% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 92']{ + stroke-dasharray: 79.57; + animation: vector92; + stroke-width: 2px +} + +@keyframes vector92 { + 0% { + stroke-dashoffset: 79.57; + } + 54% { + stroke-dashoffset: 79.57; + } + 74% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 93']{ + stroke-dasharray: 60.85; + animation: vector93; + stroke-width: 1px +} + +@keyframes vector93 { + 0% { + stroke-dashoffset: 60.85; + } + 75% { + stroke-dashoffset: 60.85; + } + 90% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 94']{ + stroke-dasharray: 191.99; + animation: vector94; + stroke-width: 1px +} + +@keyframes vector94 { + 0% { + stroke-dashoffset: 191.99; + } + 14% { + stroke-dashoffset: 191.99; + } + 62% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 95']{ + stroke-dasharray: 203.5; + animation: vector95; + stroke-width: 1px +} + +@keyframes vector95 { + 0% { + stroke-dashoffset: 203.5; + } + 17% { + stroke-dashoffset: 203.5; + } + 69% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 96']{ + stroke-dasharray: 166.39; + animation: vector96; + stroke-width: 2px +} + +@keyframes vector96 { + 0% { + stroke-dashoffset: 166.39; + } + 17% { + stroke-dashoffset: 166.39; + } + 59% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 97']{ + stroke-dasharray: 76.93; + animation: vector97; + stroke-width: 1px +} + +@keyframes vector97 { + 0% { + stroke-dashoffset: 76.93; + } + 37% { + stroke-dashoffset: 76.93; + } + 56% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 98']{ + stroke-dasharray: 63.12; + animation: vector98; + stroke-width: 2px +} + +@keyframes vector98 { + 0% { + stroke-dashoffset: 63.12; + } + 51% { + stroke-dashoffset: 63.12; + } + 66% { + stroke-dashoffset: 0; + } +} +#mask > path[id='Vector 99']{ + stroke-dasharray: 35.14; + animation: vector99; + stroke-width: 2px +} + +@keyframes vector99 { + 0% { + stroke-dashoffset: 35.14; + } + 55% { + stroke-dashoffset: 35.14; + } + 64% { + stroke-dashoffset: 0; + } +} + diff --git a/src/content/projects/silvester/images/eif-party-1.jpg b/src/content/projects/silvester/images/eif-party-1.jpg new file mode 100644 index 0000000..9be1d8e --- /dev/null +++ b/src/content/projects/silvester/images/eif-party-1.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0df4faabbe9801bb30507ede2bb89e7a5e34555cd0c6e73b4f7710b4e01b885b +size 1434673 diff --git a/src/content/projects/silvester/images/eif-video.mp4 b/src/content/projects/silvester/images/eif-video.mp4 new file mode 100644 index 0000000..b084fc3 Binary files /dev/null and b/src/content/projects/silvester/images/eif-video.mp4 differ diff --git a/src/content/projects/silvester/images/gg-2.jpg b/src/content/projects/silvester/images/gg-2.jpg new file mode 100644 index 0000000..2a575e9 --- /dev/null +++ b/src/content/projects/silvester/images/gg-2.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:58b033c666f0712d12439fcd668a8fd23c21abb0885e5cdaee35a97370f1522f +size 91098 diff --git a/src/content/projects/silvester/images/gg-icons.jpg b/src/content/projects/silvester/images/gg-icons.jpg new file mode 100644 index 0000000..68b5a18 --- /dev/null +++ b/src/content/projects/silvester/images/gg-icons.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:570dcc735e55d3aceb40eb18b059772c024451c870085f49675672e7463f134b +size 57593 diff --git a/src/content/projects/silvester/images/gg-party-1.jpg b/src/content/projects/silvester/images/gg-party-1.jpg new file mode 100644 index 0000000..619e275 --- /dev/null +++ b/src/content/projects/silvester/images/gg-party-1.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:793ec56c4b4506243d82339c72bd19e00928e36f1049a23f5d98893dc4ee4a74 +size 4863134 diff --git a/src/content/projects/silvester/images/gg-party-2.jpg b/src/content/projects/silvester/images/gg-party-2.jpg new file mode 100644 index 0000000..7c462a2 --- /dev/null +++ b/src/content/projects/silvester/images/gg-party-2.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:28408b7fd8938fe94d644b804e70e1b419fd7d34d74c3cfac956be8d9d22170c +size 3037254 diff --git a/src/content/projects/silvester/images/gg-party-3.jpg b/src/content/projects/silvester/images/gg-party-3.jpg new file mode 100644 index 0000000..205b81e --- /dev/null +++ b/src/content/projects/silvester/images/gg-party-3.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3482e5aab078a1ea3ed5210c14a80d8b344f77c35d6e8f8e068007cd1190b8a4 +size 4755534 diff --git a/src/content/projects/silvester/images/hp-8-points.png b/src/content/projects/silvester/images/hp-8-points.png new file mode 100644 index 0000000..4ef948d --- /dev/null +++ b/src/content/projects/silvester/images/hp-8-points.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:492bf3da262ef28cf291b72126e18c10d0c1e6ec6858f69c7dd64976b5957606 +size 1390934 diff --git a/src/content/projects/silvester/images/venice-1.jpg b/src/content/projects/silvester/images/venice-1.jpg new file mode 100644 index 0000000..b47494f --- /dev/null +++ b/src/content/projects/silvester/images/venice-1.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3ee98bdfec6baec5809eb0579ffe221cb489ce953e9887d08a52110f693e439d +size 4678007 diff --git a/src/content/projects/silvester/index.en.mdx b/src/content/projects/silvester/index.en.mdx new file mode 100644 index 0000000..f4d31fe --- /dev/null +++ b/src/content/projects/silvester/index.en.mdx @@ -0,0 +1,117 @@ +--- +date: 2025-10-25 +title: "New Year's Eve Parties" +draft: false +cover: ./images/cover.png +description: "An overview of our annual New Year's Eve parties, from Gatsby to Occult." +tags: ["event", "webdev", "party", "design"] +--- + +import Image from "@components/Image.astro" +import ImageSlider from "@components/ImageSlider.svelte" +import ImageGallery from "@components/ImageGallery.svelte" + + + +Since 2019, my flat-share has been hosting a New Year's Eve party. Every year, we chose a special theme that determined the costumes and decorations. +I always took the parties as an opportunity to be creative and designed digital invitation cards for each party, sometimes simpler, sometimes more complex. + +### 2019-2020: The Great Gatsby + +For the "The Great Gatsby" party, a visualizer was projected onto the wall with a beamer. Instead of a complex website, there was only a static invitation page, supplemented by printed invitation cards. The tech stack was rather unusual with MongoDB, ExpressJs and SocketIO. The frontend was quite complex, but was developed completely without a framework. The project escalated and a chat and a party management system were implemented. In addition, an extensive Google Sheet was created to track expenses, number of guests and paid contributions. + +import gg1 from "./images/gg-party-1.jpg" +import gg2 from "./images/gg-party-2.jpg" +import gg3 from "./images/gg-party-3.jpg" +import gg4 from "./images/gg-2.jpg" +import gg5 from "./images/gg-icons.jpg" + + + Photo of our buffet + Photo of our buffet + Photo of the cocktail party + Photo of the Gatsby party + Icons for the screen design + + +### [2022-2023: Harry Potter](https://s23.app.max-richter.dev) + +After no party could take place in recent years due to Covid, we decided on the motto "Harry Potter" as my flatmate is a big fan. This time there was a more complex invitation website with an animated WebGL "Talking Hat" that assigned a house to each guest. After registration, the guests were automatically stored in a Google Sheet. There was an admin interface where we could award points to the individual houses, and an interactive quiz that guests could play on the mobile website. The frontend was implemented with SvelteKit, tRPC, Prisma and SQLite. + +import hp1 from "./images/hp-1-start.png" +import hp2 from "./images/hp-2-start.png" +import hp3 from "./images/hp-3-need-name.png" +import hp4 from "./images/hp-4-which-house.png" +import hp5 from "./images/hp-5-select-house.png" +import hp6 from "./images/hp-6-attendance-probability.png" +import hp7 from "./images/hp-7-invitation-card.png" + + + Harry Potter Party Start + Harry Potter Party Start 2 + Harry Potter Party Need Name + Harry Potter Party Which House + Harry Potter Party Select House + Harry Potter Party Attendance Probability + Harry Potter Party Invitation Card + + +### [2023-2024: Venetian Masked Ball](https://s24.app.max-richter.dev) + +There was also an animated invitation website for the "Venetian Masked Ball". Guests could enter their name, from which a suitable title of nobility was then generated using an LLM. A portrait was then generated from the name and some information about their appearance, which was displayed in a kind of ancestral gallery. Technically, SvelteKit was used again, but this time with a PocketBase backend. + +import venice1 from "./images/venice-1-start.png" +import venice2 from "./images/venice-2-mask.png" +import venice3 from "./images/venice-3-invitation-test.png" +import venice4 from "./images/venice-4-generate-portrait.png" +import venice5 from "./images/venice-5-portrait.png" +import venice6 from "./images/venice-6-gallery.png" +import venice7 from "./images/venice-1.jpg" +import Mask from "./components/Mask.svelte" + + + Venice Party Start + Venice Party Mask + + + + Venice Party Invitation Test + Venice Party Generate Portrait + Venice Party Portrait + Venice Party Gallery + Photo of the Venetian Masked Ball Party + + +### [2024-2025: Everything is Fashion](https://s25.app.max-richter.dev) + +For "Everything is Fashion" there was again an animated invitation website, but without interactive elements at the party itself. In keeping with the theme "everything is fashion", I wanted to shoot a teaser that refers to physical materials. + +import eif1 from "./images/eif-party-1.jpg" +import eif2 from "./images/eif-video.mp4?url" +import videoUrl from "./images/eif-teaser.mp4?url" + + + + + + + Photo of the Fashion Party + + +### 2025-2026: Occult + +For the upcoming New Year's Eve party 2025-2026, we are planning an "Occult" theme that will create a mystical and mysterious atmosphere. + +import occult1 from "./images/occult-1.png" +import occult2 from "./images/occult-2.png" +import occult3 from "./images/occult-3.png" +import occult4 from "./images/occult-4.png" + + + Occult Party + Occult Party + Occult Party + Occult Party + diff --git a/src/content/projects/silvester/index.mdx b/src/content/projects/silvester/index.mdx index 44d7001..599c694 100644 --- a/src/content/projects/silvester/index.mdx +++ b/src/content/projects/silvester/index.mdx @@ -1,25 +1,15 @@ --- -date: 2025-10-21 -title: "Silvester-Partys: Eine Retrospektive" -draft: true +date: 2025-10-25 +title: Silvester-Partys +draft: false cover: ./images/cover.png description: "Eine Übersicht über unsere jährlichen Silvester-Partys, von Gatsby bis Okkult." tags: ["event", "webdev", "party", "design"] -icon: 🎉 --- import Image from "@components/Image.astro" import ImageSlider from "@components/ImageSlider.svelte" -import GatsbyPartyScreenshot from "./images/party-placeholder.jpg" -import GatsbyPartyPhoto from "./images/party-placeholder.jpg" -import HarryPotterPartyScreenshot from "./images/party-placeholder.jpg" -import HarryPotterPartyPhoto from "./images/party-placeholder.jpg" -import VenicePartyScreenshot from "./images/party-placeholder.jpg" -import VenicePartyPhoto from "./images/party-placeholder.jpg" -import FashionPartyScreenshot from "./images/party-placeholder.jpg" -import FashionPartyPhoto from "./images/party-placeholder.jpg" import ImageGallery from "@components/ImageGallery.svelte" -import videoUrl from "./images/eif-teaser.mp4?url" @@ -28,64 +18,100 @@ Ich hab die Parties immer zum Anlass genommen um mich einmal kreativ auszuleben ### 2019-2020: The Great Gatsby -Unsere erste Party stand unter dem Motto "Great Gatsby". +Für die "The Great Gatsby" Party wurde ein Visualizer mit einem Beamer an die Wand projiziert. Anstelle einer komplexen Website gab es nur eine statische Einladungsseite, ergänzt durch gedruckte Einladungskarten. Der Tech-Stack war mit MongoDB, ExpressJs und SocketIO eher ungewöhnlich. Das Frontend war recht komplex, wurde aber komplett ohne Framework entwickelt. Das Projekt eskalierte und es wurden ein Chat sowie ein Party-Management-System implementiert. Zusätzlich wurde ein umfangreiches Google Sheet erstellt, um Ausgaben, Gästeanzahl und bezahlte Beiträge zu verfolgen. + +import gg1 from "./images/gg-party-1.jpg" +import gg2 from "./images/gg-party-2.jpg" +import gg3 from "./images/gg-party-3.jpg" +import gg4 from "./images/gg-2.jpg" +import gg5 from "./images/gg-icons.jpg" - Screenshot der Gatsby Party Visualisierung - Foto der Gatsby Party + Foto von unserem Buffet + Foto von unserem Buffet + Foto der Cocktail Party + Foto der Gatsby Party + Icons fürs Screendesign -### 2022-2023: Harry Potter und der sprechende Hut +### [2022-2023: Harry Potter](https://s23.app.max-richter.dev) -Für den Jahreswechsel 2022-2023 verwandelte sich unsere Wohnung in die Große Halle von Hogwarts. Das Thema war Harry Potter, und wir hatten einen WebGL-basierten sprechenden Hut, der die Gäste interaktiv den Häusern zuordnete. Zusätzlich gab es ein interaktives Harry-Potter-Quiz auf unserer Webseite. Ein visuelles Display zeigte live den Punktestand der einzelnen Häuser an, wobei ein Admin Punkte in Echtzeit hinzufügen oder abziehen konnte. +Nachdem die letzten Jahre wegen Covid keine Party stattfinden konnte, entschieden wir uns für das Motto "Harry Potter", da meine Mitbewohnerin ein großer Fan ist. Diesmal gab es eine komplexere Einladungswebsite mit einem animierten WebGL "Talking Hat", der jedem Gast ein Haus zuordnete. Nach der Anmeldung wurden die Gäste automatisch in einem Google Sheet hinterlegt. Es gab ein Admin-Interface, in dem wir Punkte an die einzelnen Häuser vergeben konnten, und ein interaktives Quiz, das die Gäste auf der mobilen Website mitspielen konnten. Das Frontend wurde mit SvelteKit, tRPC, Prisma und SQLite umgesetzt. -Seit 2022 nutzen wir ein Google Sheet als Backend für die Partyorganisation. Jeder Gast gibt bei der Anmeldung eine Wahrscheinlichkeit (in Prozent von 0-100) an, wie wahrscheinlich er oder sie teilnehmen wird. Dies ermöglicht uns eine genauere Vorhersage der Gästezahl. +import hp1 from "./images/hp-1-start.png" +import hp2 from "./images/hp-2-start.png" +import hp3 from "./images/hp-3-need-name.png" +import hp4 from "./images/hp-4-which-house.png" +import hp5 from "./images/hp-5-select-house.png" +import hp6 from "./images/hp-6-attendance-probability.png" +import hp7 from "./images/hp-7-invitation-card.png" - Screenshot der Harry Potter Party Webseite - Foto der Harry Potter Party - Harry Potter Party Start - Harry Potter Party Start 2 - Harry Potter Party Need Name - Harry Potter Party Which House - Harry Potter Party Select House - Harry Potter Party Attendance Probability - Harry Potter Party Invitation Card + Harry Potter Party Start + Harry Potter Party Start 2 + Harry Potter Party Need Name + Harry Potter Party Which House + Harry Potter Party Select House + Harry Potter Party Attendance Probability + Harry Potter Party Invitation Card -### 2023-2024: Venezianischer Maskenball +### [2023-2024: Venezianischer Maskenball](https://s24.app.max-richter.dev) -Unsere Silvesterparty 2023-2024 entführte unsere Gäste nach Venedig zu einem opulenten Maskenball. Bei der Registrierung auf unserer Webseite erhielt jeder Gast einen einzigartigen Adelstitel und ein passendes Porträt, die dann in einer digitalen Galerie auf der Webseite ausgestellt wurden. +Auch für den "Venezianischen Maskenball" gab es wieder eine animierte Einladungswebsite. Die Gäste konnten ihren Namen eingeben, aus dem dann mittels eines LLM ein passender Adelstitel generiert wurde. Aus dem Namen und einigen Angaben zum Aussehen wurde anschließend ein Porträt generiert, das in einer Art Ahnengalerie angezeigt wurde. Technisch wurde wieder auf SvelteKit gesetzt, diesmal jedoch mit einem PocketBase-Backend. -**Organisation:** Auch hier kam unser Google Sheet Backend zum Einsatz, um die Gästeanmeldungen und Wahrscheinlichkeiten zu verwalten. +import venice1 from "./images/venice-1-start.png" +import venice2 from "./images/venice-2-mask.png" +import venice3 from "./images/venice-3-invitation-test.png" +import venice4 from "./images/venice-4-generate-portrait.png" +import venice5 from "./images/venice-5-portrait.png" +import venice6 from "./images/venice-6-gallery.png" +import venice7 from "./images/venice-1.jpg" +import Mask from "./components/Mask.svelte" - Screenshot der Venezianischer Maskenball Galerie - Foto der Venezianischer Maskenball Party - Venice Party Start - Venice Party Mask - Venice Party Invitation Test - Venice Party Generate Portrait - Venice Party Portrait - Venice Party Gallery + Venice Party Start + Venice Party Mask + + + + Venice Party Invitation Test + Venice Party Generate Portrait + Venice Party Portrait + Venice Party Gallery + Foto der Venezianischer Maskenball Party -### 2024-2025: Everything is Fashion +### [2024-2025: Everything is Fashion](https://s25.app.max-richter.dev) -Das Motto für 2024-2025 war "Everything is Fashion". Die Party begann mit einem animierten Intro, das die Gäste auf das modische Thema einstimmte. +Für "Everything is Fashion" gab es wieder eine animierte Einladungswebsite, allerdings ohne interaktive Elemente auf der Party selbst. Passend zum Thema "everything is fashion" wollte ich einen Teaser drehen, der sich auf physische Materialien bezieht. -