Projekt:
Website Design und Entwicklung

In diesem Projekt habe ich zusammen mit dem Youtube Content Creator BissjeTommy eine kleine Onepager Website gestaltet. Die Seite soll ein kleines Showcase seiner besten Youtube Moments sein und ihn als Creator vorstellen. Desweiteren wird eine Kontaktmöglichkeit und Links zu seinen Socials geben.

BissjeTommy Highlights

Mann im Anzug mit goldener Trophäe, darunter Kameramann mit Videokamera, daneben Titel „Youlius Award und Videography“.

Arbeiten mit Komponenten

Bei dieser Website habe ich zum ersten mal mit Webkomponenten in einem CMS gearbeitet. Beispiel hier Bild + Text Komponenten

Drei Karten mit Retro-Gaming-Setup, Play-Button-Schild und Vintage-Spielkonsole, jeweils mit Tags „Gaming“ und „Konsolen“.

"Card" Komponente nachgebaut

Meine erste eigene Nachbaute einer "Card" Komponente, die in diesem Beispiel als eine Übersicht für verschiedene Blogartikel dient.

Zwei YouTube-Shorts: Spielhülle „Donkey Kong Bananza“ und Unboxing einer Nintendo Switch 2.

<iframe> und embedded Elemente

Eine kleine Herausforderung war das Arbeiten mit iframe Elementen und diese jeweils im korrekten Format darstellen zu können.

Projektzusammenfassung

Im Rahmen dieses Projekts habe ich erstmals intensiv mit Webkomponenten innerhalb eines CMS gearbeitet und dabei unter anderem Bild- und Textmodule flexibel kombiniert. Besonders prägend war das eigenständige Nachbauen einer „Card“-Komponente, die als strukturierte Übersicht für verschiedene Blogartikel dient und mir einen tieferen Einblick in komponentenbasiertes Arbeiten ermöglichte. Eine kleinere Herausforderung stellte der Umgang mit <iframe>-Elementen und anderen eingebetteten Inhalten dar, insbesondere deren optimale Darstellung in unterschiedlichen Formatvorgaben. Parallel dazu plante ich das gesamte Website-Design in Figma, entwickelte mehrere Versionen und setzte Kundenwünsche nach regelmäßigen Abstimmungen präzise um. Die technische Umsetzung erfolgte in Visual Studio, inklusive der Projektorganisation und Dateiverwaltung. Dabei arbeitete ich mit Nunjucks-Templates, SCSS mit verschachtelten Strukturen sowie passenden JavaScript-Elementen, die ich gezielt an die Anforderungen der Seite anpasste. Zudem band ich einen YouTube-Live-Counter über die Google API ein und überführte das gesamte Projekt anschließend in das Statamic-CMS. Als letzter noch offener Schritt steht die Liveschaltung auf die reservierte Domain aus.

Herausforderungen und Lernerfolge

Roter YouTube-Playbutton auf schwarzem Hintergrund mit Text zu 4.790 Abonnenten.

  • Planen eines Website Design in Figma und Erstellen von verschiedenen Versionen

  • Absprachen mit dem Kunden und Änderungswünsche umsetzen

  • Projektanlage und Verwaltung der Dateien in Visual Studio Projektordnern

  • Arbeiten mit Nunjuks Dateien und SCSS und Nesting-Funktionen

  • Passende Javascript Elemente finden und auf das Projekt hin anpassen

  • Einbinden des Youtube Live Counters mittles Google API

  • Übertragen des Projekts in Statamic CMS

  • noch offen: Live Schaltung der Website auf die reservierte Domain

Projekte und Tätigkeiten

Brot mit Leberwurst und Radieschen vor Frühlingszwiebeln, Text „Qualität und Tradition aus der Pfalz“.

Cornelius Website

Ein Projekt zum Redesign der Website des Herstellers für Pfälzische Wurstspezialitäten, Cornelius.

zum Projekt
Hände tippen auf Laptop, darüber farbiger Code, unscharfer Hintergrund mit technischer Atmosphäre.

Webentwicklung

Arbeit an Webentwicklung zum Wiederverwenden auf Basis des Relume Figma Kit. Die Umsetzung wurde mit HTML, SCSS und Javacscript durchgeführt.

zum Projekt
Backsteinwand mit Schild „Barrierefreier Eingang“ und Rollstuhlsymbol.

Barrierefreiheit, UI & UX

Ein ausfürhlicher Blick auf Barrierefreiheit im Web und die WCAG des W3C (World Wide Web Consortium).

zum Projekt