Philipp Bartsch

Portfolio: Web development, Design

github icon

Coding

Maniac Mentions ist ein HTML5 und Javascript basiertes Point-n-Click Adventure alter Schule, daß vollständig im Browser lebt. Programm-Code und alle Assets sind auf Github hinterlegt.

Design

Als Freund der alten Point-n-Click Klassiker war es mir ein ganz besonderes Vergnügen, Szenenbilder und Assets in Pixel Optik zu erstellen.

@keyframes flickering { 1% {opacity: 0;} 2% {opacity: 1;} 10% {opacity: 0;} 15% {opacity: 0;} 16% {opacity: 1;} } .overlay { animation-name: flickering; animation-duration: 3s; animation-iteration-count: infinite; }
hallway hallway flicker light hallway no light
$('#light_switch').click(function() { $('.flickering_light').toggleClass('displayed'); $('.lighting').toggleClass('displayed'); });

character guitar guy

Gefreut hat es mich, dass die Stadtmarketing Halle (Saale) GmbH eines meiner Wimmelbilder (HiRes) als Postkarte zum Laternenfest 2018 veröffentlichte. Ein anderes Wimmelbild aus meiner Feder zeigt das Salzfest der Halloren.

#card { transition: 0.6s; transform-style: preserve-3d; } #card.flipped { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

Content-Management-Systeme sind die mächtigen Wurzeln eines inhaltsvollen Internetauftritts. Für ein responsives und ansprechendes Design ist oft der kleine Dreh an der richtigen Stellschraube ausschlaggebend.

Mit CSS3 sind hinreichend Möglichkeiten gegeben, um Inhalte modern und gefällig im WWW zu präsentieren. Alte Zöpfe gehören abgeschnitten.

postcard front
postcard back
var gridItem = document.getElementsByClassName('grid_item'); for (var i = 0; i < gridItem.length; i++) { gridItem[i].addEventListener('dragstart', drag, true); gridItem[i].addEventListener('drop', drop, true); } function drag(event) { event.dataTransfer.setData('text', event.target.id); } function drop(event) { try { event.preventDefault(); var data = event.dataTransfer.getData('text'); event.target.appendChild(document.getElementById(data)); } catch(error) { console.warn(error); } }

house tile

JavaScript und seine zahlreichen Bilbliotheken ist in Verbindung mit HTML5 das wichtigste Werkzeug in der webbasierten Frontend-Entwicklung. Drag'n'Drop-Anwendungen sind damit ein Leichtes.