---
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"]
---

import Image from "@components/Image.astro"
import ImageSlider from "@components/ImageSlider.svelte"
import ImageGallery from "@components/ImageGallery.svelte"

<ImageGallery client:load/>

Seit 2019 veranstaltet meine WG eine Silvester Party. Dafür haben wir jedes Jahr ein besonderes Motto ausgewählt welches dann die Kostüme und die Dekoration bestimmt.
Ich hab die Parties immer zum Anlass genommen um mich einmal kreativ auszuleben und habe für jede Party mal einfachere mal komplexere Digital Einladungskarten gestaltet.

### 2019-2020: The 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"

<ImageSlider title="The Great Gatsby" client:load>
  <Image src={gg1} alt="Foto von unserem Buffet" />
  <Image src={gg2} alt="Foto von unserem Buffet" />
  <Image src={gg3} alt="Foto der Cocktail Party" />
  <Image src={gg4} alt="Foto der Gatsby Party" />
  <Image src={gg5} alt="Icons fürs Screendesign" />
</ImageSlider>

### [2022-2023: Harry Potter](https://s23.app.max-richter.dev)

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.

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 und der sprechende Hut" 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: Venezianischer Maskenball](https://s24.app.max-richter.dev)

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.

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="Venezianischer Maskenball" 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="Foto der Venezianischer Maskenball Party" />
</ImageSlider>

### [2024-2025: Everything is Fashion](https://s25.app.max-richter.dev)

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.

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="Foto der Fashion Party" />
</ImageSlider>

### 2025-2026: Okkult

Für die kommende Silvesterparty 2025-2026 planen wir ein "Okkult"-Thema, das eine mystische und geheimnisvolle Atmosphäre schaffen wird.

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="Okkult Party" />
  <Image src={occult2} alt="Okkult Party" />
  <Image src={occult3} alt="Okkult Party" />
  <Image src={occult4} alt="Okkult Party" />
</ImageSlider>
