feat: add picos de europa post

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"
+
+<ImageGallery client:load/>
+
+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"
+
+<ImageSlider title="The Great Gatsby" client:load>
+  <Image src={gg1} alt="Photo of our buffet" />
+  <Image src={gg2} alt="Photo of our buffet" />
+  <Image src={gg3} alt="Photo of the cocktail party" />
+  <Image src={gg4} alt="Photo of the Gatsby party" />
+  <Image src={gg5} alt="Icons for the screen design" />
+</ImageSlider>
+
+### [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"
+
+<ImageSlider title="Harry Potter and the Talking Hat" client:load>
+  <Image src={hp1} alt="Harry Potter Party Start" />
+  <Image src={hp2} alt="Harry Potter Party Start 2" />
+  <Image src={hp3} alt="Harry Potter Party Need Name" />
+  <Image src={hp4} alt="Harry Potter Party Which House" />
+  <Image src={hp5} alt="Harry Potter Party Select House" />
+  <Image src={hp6} alt="Harry Potter Party Attendance Probability" />
+  <Image src={hp7} alt="Harry Potter Party Invitation Card" />
+</ImageSlider>
+
+### [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"
+
+<ImageSlider title="Venetian Masked Ball" client:load>
+  <Image src={venice1} alt="Venice Party Start" />
+  <Image src={venice2} alt="Venice Party Mask" />
+  <picture alt="Animiertes SVG Maske" description="asd">
+    <Mask client:load/>
+  </picture>
+  <Image src={venice3} alt="Venice Party Invitation Test" />
+  <Image src={venice4} alt="Venice Party Generate Portrait" />
+  <Image src={venice5} alt="Venice Party Portrait" />
+  <Image src={venice6} alt="Venice Party Gallery" />
+  <Image src={venice7} alt="Photo of the Venetian Masked Ball Party" />
+</ImageSlider>
+
+### [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"
+
+<ImageSlider title="Everything is Fashion" client:load>
+  <picture>
+    <video src={videoUrl} controls alt="Fashion Party Teaser Video" />
+  </picture>
+  <picture>
+    <video src={eif2} controls alt="Fashion Party Teaser Video" />
+  </picture>
+  <Image src={eif1} alt="Photo of the Fashion Party" />
+</ImageSlider>
+
+### 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"
+
+<ImageSlider title="Everything is Fashion" client:load>
+  <Image src={occult1} alt="Occult Party" />
+  <Image src={occult2} alt="Occult Party" />
+  <Image src={occult3} alt="Occult Party" />
+  <Image src={occult4} alt="Occult Party" />
+</ImageSlider>