www.tompixel.de

Mein Blog wäre schon längst wieder online, wenn ich mich nicht ständig durch andere Projekte ablenken lassen würde. Letztes Jahr hatte ich beschlossen unter die Lets Player zu gehen. Das war ziemlich interessant und auch sehr lehrreich, aber mein Interesse war nicht von lange Dauer. Damit mein kleiner Ausflug nicht ganz in Vergessenheit gerät, habe ich dazu gleich eine Webseite gebastelt. www.tompixel.de ist heute offiziell an den Start gegangen.

Tom Pixel ist mein Youtube-Name und der Name bestimmt auch das Grundkonzept der Webseite. Die Übersicht baut sich aus überdimensionalen Pixeln zusammen, die jeweils in der Hauptfarbe der verlinkten Spiele eingefärbt sind. Die Hauptfarbe habe ich dabei jeweils aus einem Wallpaper des Spiels ermittelt. Dabei war das JavaScript-Tool Color Thief sehr hilfreich. Mit diesem kann man die dominanten Farben in Bildern ermitteln.

Besonderes Highlight ist dabei das SVG-Logo, welches dynamisch mit den Farben der in der Übersicht vertretenen Spiele eingefärbt wird. Über ein kurzes Timeout in der Färbe-Schleife, entsteht der Eindruck als würde sich das Logo quasi nach und nach aufbauen. Eventuell werde ich den Quellcode dazu nochmal irgendwo veröffentlichen. Den Effekt kann man sehr schön in folgender Demo sehen.

Die Webseite wurde übrigens mit Grav umgesetzt. Das Theme ist selbst designed und programmiert. Ein paar kleinere Widgets wie der fixe Header und die Daten-sparende Einbindung der Youtube-Videos habe ich in ES6 geschrieben. Ansonsten kommt die Seite mit sehr wenig JavaScript-Zauberei daher. Apropos Daten-sparend: Ich verzichte auf jegliches Tracking, deshalb werden auch keine Cookies gesetzt. Auch Youtube bekommt nur dann Wind von Deinem Besuch, wenn Du wirklich ein Video ansehen möchtest. Der beste Datenschutz ist immer noch Datenvermeidung.

Auf den Detailseiten seht ihr jeweils ein Teaserbild für das jeweilige Video. Die Einbindung des Videos erfolgt wie gesagt erst dann, wenn Ihr auch wirklich auf Play clickt. Zudem könnt Ihr hier zwischen den verschiedenen Videos durch schalten.

Natürlich ist die Webseite voll Responsive. In der mobilen Ansicht ist das Menü dementsprechend deutlich kompakter

Auch die Mobilansicht passt sich jeweils der Fenstergröße an und präsentiert entsprechend mehr oder weniger Kacheln.

Ich möchte hier nicht im Detail darauf eingehen, was mich dazu bewogen hat Lets Plays zu machen. Dies könnt Ihr direkt auf der Webseite von Tom Pixel nachlesen. Ob es weitere Videos geben wird, weiß ich derzeit noch nicht. Es war aber auf jeden Fall eine interessante Erfahrung und hat eine Menge Spaß gemacht. Lasst mich gerne wissen, was Ihr von der neuen Webseite und meinem kleinen Ausflug als Lets Player haltet.