Mein letzter Blogeintrag ist leider zu lange her - generell hatte ich kaum zu etwas Zeit, abends bin ich zu müde und will nur noch faul sein. Ehrlich, die Wochenenden fühlen sich viel zu kurz an.
Aber man höre und staune: Über das letzte Wochenende habe ich ein kleines Projekt gebaut! Genauer gesagt eine Landing Page zum aktuellen Anlass Halloween. Seit ich mich im Mai dieses Jahres bei dev.to registriert habe, geistere ich dort öfter mal herum - passende Wortwahl. Dort gab es mal wieder eine Challenge und dieses Mal habe ich auch etwas davon mitbekommen. Eine Frontend-Challenge und da wollte ich gleich mitmachen.
Mein Projekt
Zur Halloween Landing Page war einer meiner ersten Gedanken der, den ich dann auch umgesetzt habe: eine Website, die sich an Geister und andere Kreaturen der Nacht richtet. Die wollen ja schließlich auch ihren Spaß haben und freuen sich vielleicht schon das ganze Jahr darauf, als Kollektiv herumzuspuken. Ich dachte mir, mit dieser Idee würde ich etwas aus der Reihe tanzen weil eine „normale“ Halloween-Event-Seite wahrscheinlich der Standard sein würde. Ich betrachte Dinge ja immer gern aus unterschiedlichen Perspektiven und suche mir die heraus, die ich am interessantesten finde - wenn man mich lässt.
Auch was das Design angeht wollte ich ein wenig vom vermuteten Standard abweichen. Zwar habe ich auch ein Orange dabei (typisch …), aber ich habe mich für eine elegantere Schriftart entschieden und mir bei den Farben etwas mehr Spielraum gegeben. Es war mir auch wichtig mit Bildern und Ton zu arbeiten, um einen Hauch von Horror-Film-Stimmung zu wecken. Um das Ganze aufzulockern, bin ich mit einer Prise Humor an die Sache gegangen. Dabei hatte ich wahrscheinlich unbewusst im Hinterkopf, wie ich manche Horrorfilme nicht so richtig ernst nehmen kann. Die wenigsten finde ich gruselig, aber ich schaue sie trotzdem gern. Dieses Gefühl wollte ich ausdrücken.
Demo und Code
Bitte oben rechts in der Ecke den Website-Ton einschalten :)
GitHub Pages: Live Demo | Repo
Umsetzung
Da ich mir nur einen Tag für das Projekt an sich Zeit nehmen wollte, durfte es nicht allzu kompliziert werden. Ich habe mir ein paar andere Beiträge auf dev.to angeschaut und manche der Teilnehmenden haben offensichtlich sehr viel mehr Zeit investiert. Da sind ein paar beeindruckende Ergebnisse herausgekommen.
Die Seite ist mit den Frontend-Standards HTML, CSS und JavaScript gebaut. Keine Frameworks und kein Schnick-Schnack. Mir war dabei nur wichtig, ein paar Dinge zu probieren wie den Schalter für Ton and und Ton aus, ein Pop-Up und Sound-Effekte. Das lief eigentlich alles ganz entspannt und ganz ohne Jump Scares. Ich habe wahrscheinlich mindestens genauso lange dafür gebraucht, passende Bilder und passende Audio-Dateien zu finden, wie für den Code selbst.
Fazit und Persönliche Highlights
Ich mag meine Idee und finde, ich habe die Stimmung schon ganz gut hinbekommen. Diese zu erschaffen hat mir Spaß gemacht. Wenn ich mir mehr Zeit hätte nehmen können, hätte ich das ganze Ding am Liebsten zu Übungszwecken in React gebaut und mehr Komplexität eingebracht. Zum Beispiel ein paar funktionierende Links, die zu weiteren lustigen und schaurigen Inhalten führen - vielleicht ein verfluchter (ich denke an The Ring) KI-generierter B-Movie-Trailer, ein Bewertungssystem für Spukende und vieles mehr.
Übrigens gibt es eine DEV++-Mitgliedschaft zu gewinnen und ein Badge (Abzeichen) für die Teilnahme am Wettbewerb. Letzteres reicht mir, hier den ersten Platz zu gewinnen ist nicht das Ziel und mit - im Vergleich - so wenig betiebenem Aufwand auch nicht zu erwarten. Aber ich versuche, ein aktives Mitglied der Community zu sein und fleißig Badges zu sammeln. Tatsächlich wurde mir gerade heute der Trusted Member-Status verliehen. Ich muss gleich selbst erst mal nachsehen, was das genau bedeutet und welche Vorteile das bringt - aber klingt doch gut, oder?
