d:I[24572,["/_next/static/chunks/2j2vjlukze4kg.js"],"default"] c:"You need to enable JavaScript to run this app." e:T863,

Relevante Fähigkeiten

Ich bin Experte für's Frontend, fühle mich aber auch im Backend pudelwohl. Meine Lösungen sind mit einem Auge für's Detail umgesetzt und besitzen eine nachhaltige Code-Basis. Meine persönlichen Stärken sind kreative Lösungen, Flexibilität und eine hohe Lernbereitschaft, aber ich muss aufpassen, dass ich mich in den Details verliere. Ich habe zusammen mit großen und kleinen Kunden schon zahllose Webprojekte erfolgreich umgesetzt und viele davon auch langfristig betreut.

FRONTEND █ █ █ █ █ █ █ █ █ █ 
BACKEND  █ █ █ █ █ █ █ ░ ░ ░

Im Laufe der Jahre habe ich die gesamte Bandbreite der Webentwicklung kennen lernen können – von der Konzeption, Kommunikation mit dem Kunden, Umsetzung im Team, Testing, SEO bis hin zur Analyse und Aufbereitung der Ergebnisse.

KI-Tools sind bei mir fester Teil des Werkzeugkastens: für Recherche, Refactorings und Boilerplate. Ich arbeite mit versionierten Projektregeln, kleinen überprüfbaren Schritten und einem gesunden Misstrauen – die Architektur-Entscheidungen und die Verantwortung für den Code bleiben bei mir.

Die Entwicklungsumgebung meiner Wahl ist Linux.

Level ⤑ Professional

Responsive UI/UX
HTML & (S)CSS
JavaScript (ES6) & TypeScript
React & Next.js
KI-gestützte Entwicklung (Cursor, Claude, Copilot)
PHP, SQL
Bereitstellung & Integration von APIs
Versionsverwaltung mit GIT
Wordpress & Statamic
Adobe Suite

Level ⤑ Skilled

Laravel, Symfony
Administration von Linux Systemen

Level ⤑ Aspirant

Python
C++

Klingt gut? Einfach mal Kontakt aufnehmen!

f:T900,

Berufserfahrung

Webdesign und -entwicklung war schon seit der Jugend meine Berufung. Nach meiner Ausbildung zum Mediengestalter habe ich bereits über 15 Jahre Erfahrungen bei mehreren mittelständischen Unternehmen gesammelt.

JOB        █ █ █ █ █ █ █ █ █ █ 
PASSION    █ █ █ █ █ ░ ░ ░ ░ ░
TRAINEE    █ █ █ ░ ░ ░ ░ ░ ░ ░

Web-Entwickler - SchleeGleixner GmbH (2023+)

Konzeption und Entwicklung von Web-Projekten
Kundenbetreuung und Projekt-Koordination

Vollzeit-Papa (2021-2022)

Product Co-Owner
Continuous Delivery Organizer

Web-Entwickler – Die Schittigs (2019-2020)

Konzeption und Entwicklung von Web-Projekten
Kundenbetreuung und Projekt-Koordination

Web-Entwickler – B2 Communications (2013-2019)

Konzeption, Gestaltung und Entwicklung von Web-Projekten
Koordination von externen Projekten und Freelancern
Konzeption und Gestaltung von digitalen Werbemitteln

Web-Designer & -Entwickler – CAPCom (2012-2013)

Konzeption, Gestaltung und Entwicklung von Web-Projekten
Kundenbetreuung

Web-Entwickler – Münzenversandhaus Reppa (2011-2012)

Weiterentwicklung, Pflege und Administration des Webshops
Gestaltung und Entwicklung von Web-Projekten
Konzeption und Gestaltung von digitalen Werbemitteln

Ausbildung

Fachhochschulreife - Fachrichtung Technik
Mediengestalter - Gestaltung & Technik (Werbeagentur Reppa)

Auszeichnungen

Abschlussprüfung - Landesbester (2011)

Könnte passen? Einfach mal Kontakt aufnehmen!

10:T632,

Was zum anfassen

Elektroniker

In meiner Freizeit baue ich gerne echte Dinge die man anfassen kann, vor allem Sensoren und Aktoren für mein Smart-Home System. Mit Lötkolben und 3D Drucker bewaffnet, verpasse ich dummen Dingen etwas Intelligenz. Auf fertige Lösungen, vor allem solche mit Cloud-Anbindung, verzichte ich weitestgehend. Als Zentrale dient mir ein Raspberry Pi (Spitzname "Castle"), verbunden wird das System mit Node-RED via WLAN und Zigbee. Die gemeinsame Sprache aller Geräte ist MQTT.

Ender 3 Most Valuable Player

IR Blaster IR-Fernbedienung mit versteckten Touch-Buttons

Heating Actuator In bester Gesellschaft: WiFi Heizungssteuerung

Heimwerker

Heimwerken und insbesondere Arbeiten mit Holz sind ebenfalls eine meiner Leidenschaften. Das Material vergibt Fehler, ist leicht in Form zu bringen und nachhaltig. Inzwischen mischt sich aber auch mein 3D Drucker in diese Projekte ein.

Loftnet Das einzige Wohnnetz in der Stadt

Pirate Ship Ahoi

Falls diese Arbeiten Sie überzeugen, könen Sie gerne auch deswegen Kontakt aufnehmen ;)

11:T143f,

Portfolio No.7

Stellar – Hervorragend. So sollte meine neue Website werden, inzwischen die Siebente. Meine Vorgaben waren simpel: ich will mich präsentieren, sie soll im Gedächtnis bleiben und meine Bewerbungen unterstützen. Die Website muss weder über Google gefunden werden, noch sich dem Massengeschmack anpassen. Zielgruppe sind alle, die bereits mit der Webentwicklung affin sind.

Was?

Konzept
Design
Code

Wie?

Next.js
p5.js
KI-Tools
Herzblut

Umsetzung

Nachdem ich die Website auf Papier grob konzipiert hatte, waren die Rahmenbedingungen abgesteckt: eine Single Page Application mit dynamischer Navigation sollte es werden, ohne Bruch in der Benutzerführung. Außerdem sollte es eine Mischung aus Bauhaus (Formen & Farben), Druck (der Mediengestalter lässt grüßen) und Weltraum werden. LoFi und minimaler Einsatz von Bildern. Die Inhalte können statisch sein, da sie sich nur selten ändern.

Sketch Nur zwei von vielen Seiten

Das Skelett der Website bildet Next.js mit dem App Router. Die Inhalte liegen als Markdown-Dateien im Projekt und werden zur Build-Zeit über remark in HTML übersetzt. Heraus fällt ein statischer Export, der ohne Node-Runtime auf jedem Webspace liegen darf – trotzdem bekommt jede Unterseite eine echte URL, statt eines Fragment-Bezeichners.

Die Animationen mit CSS umzusetzen wäre möglich gewesen, aber langweilig und wenig performant. Deshalb bin ich bei den Hintergründen bei p5.js gelandet. Da die üblichen React-Wrapper für p5.js entweder unmaintained sind oder React 19 nicht mögen, habe ich mir einen eigenen, schlanken Ersatz gebaut – inklusive korrektem Aufräumen von Instanzen und Event-Listenern, denn ein Speicherleck pro Seitenwechsel ist kein Feature.

Beim Design war die Herausforderung, aus der reduzierten Farben- und Form-Palette gute UX zu schmieden. Der Nutzer muss, trotz der ungewohnten Navigation, zu jeder Zeit wissen wie es weitergeht. Zudem durfte das Ergebnis nicht zu reduziert sein, um nicht dröge zu wirken. Hier kommen die Animationen und Halbton-Effekte ins Spiel.

Für beides musste ich dann tiefer ins Mathe-Buch schauen und die Performance im Auge behalten. Gerendert wird nur das, was sein muss, die Ergebnisse der Berechnungen werden soweit wie möglich zwischengespeichert. Als Lichtquelle dient der Mauszeiger – auf Mobilgeräten übernimmt das Gyroskop, sofern es der Browser hergibt.

Grundsätzlich gibt das DOM die Struktur der Seite vor, so kann der Browser die Positionierung der Elemente auf den verschiedenen Endgeräten dynamisch vorgeben. p5.js übernimmt aber die Darstellung vieler UI-Elemente und bietet so ein nahtloses, dynamisches Interface. Und das ohne auf die Flexibilität von React verzichten zu müssen.

KI im Werkzeugkasten

Die erste Fassung dieser Website war eine Create-React-App – ein Setup, das inzwischen in Rente gegangen ist. Die Migration nach Next.js habe ich gemeinsam mit einem KI-Agenten durchgezogen: Klassen-Komponenten zu Hooks, eigener p5-Wrapper, statischer Export samt Build-Pipeline für die Inhalte.

So arbeite ich mit KI:

Kontext schlägt Prompt. Projektregeln, Konventionen und Architektur-Entscheidungen liegen versioniert im Repository, damit das Werkzeug nicht rät.
Kleine, überprüfbare Schritte. Ein Thema pro Durchgang, danach Review und Test. Was ich nicht erklären kann, kommt nicht in den Commit.
Zweifel bleiben Pflicht. Halluzinierte APIs und plausibel aussehender Unsinn sind Alltag – deshalb wird gegen die Doku und den laufenden Build geprüft, nicht gegen das Bauchgefühl.
Die Verantwortung bleibt bei mir. KI beschleunigt Recherche, Refactorings und Boilerplate. Die Architektur, das Design und die Entscheidung, was gut genug ist, nicht.

Kurz: ein sehr schneller, sehr selbstbewusster Junior, der nie müde wird. Nützlich, wenn man ihn führt.

Fazit

Bin ich zufrieden mit dem Ergebnis? Ja*. Die Website ist in drei Wimpernschlägen geladen, stilistisch eigenständig und definitiv einzigartig. Habe ich noch viele weitere Ideen für die Zukunft? Klar**.

Wer sich dafür interessiert, kann sich gerne den Quellcode auf GitHub anschauen.

*noch

**deutlich mehr als Freizeit

12:Tde0,

Großer Fisch

Ich habe viele Projekte für Nintendo Europe umgesetzt, vor allem Microsites und Werbemittel. Der Kids Club war aber mein mit Abstand größtes Projekt, das ich federführend für diesen Kunden umgesetzt habe.

Ziel war es, eine Website zu entwickeln, auf der (vor allem) Kinder Inhalte konsumieren oder herunterladen konnten. Das sollte die Marke "Nintendo" in der Zielgruppe stärken und die Sichtbarkeit im Web erhöhen. Inhalte waren z. B. PDF zum Ausdrucken, eine YouTube-Show, aber auch Mini-Spiele.

Spoiler: Leider wurden die Inhalte inzwischen aus diversen Gründen in das "Mutterschiff" integriert und die Website ist nicht mehr erreichbar.

Was?

Technische Konzeption
Umsetzung

Wie?

Custom Framework

Front Page Startseite

Umsetzung

Bei der Umsetzung gab es strikte technische Vorgaben und diverse Sonderwünsche. Deshalb hatte ich mich entschieden ein eigenes, maßgeschneidertes Framework einzusetzen, das ohne Ballast daher kam und uns maximale Flexibilität ermöglichte. Die gesamte Struktur der Website war zudem relativ simpel.

Eine große Herausforderung waren die vielen verschiedenen Sprachversionen. Die Website musste zwölf Sprachen und mehrere lokalisierte Sprachvarianten bedienen (z. B. für die Schweiz: Deutsch, Französisch und Italienisch). Um das abzubilden, gab es ein "Cascading-Content-System" (CCM®) auf Basis von XML. Angefangen von der Master-Sprache wurde zuerst die allgemeine (z. B. "DE") und dann die spezialisierte Sprachversion (z. B. CH-DE) durchlaufen. Sollte für den jeweiligen Knoten, wie z. B. einen Titel, Bild oder Link, ein lokalisierter vorhanden sein, wurde er damit überschrieben. So konnte man nicht nur lokalisierte Texte, sondern auch Bilder, Dateien oder externe Links abdecken.

Um die Navigation zu beschleunigen, hatte ich mich entschieden auf AJAX zu setzen. Einmal auf der Seite angekommen, wurden alle weiteren Inhalte im Hintergrund über JavaScript nachgeladen. Der Vorteil war, abseits der besseren Nutzererfahrung, dass die übertragene Datenmenge um etwa zwei Drittel sank. Bei einem direkten Seitenaufruf bekam man aber weiterhin die komplette Website mit Header und Footer ausgeliefert.

Alle Inhalte waren statisch und wurden entsprechend auch als statische Dateien exportiert. Zu jeder Seite gab es eine HTML-Datei für direkte Aufrufe und eine JSON-Datei für die AJAX-Aufrufe. Das trug zusätzlich dazu bei, die Serverlast und Antwortzeiten gering zu halten.

Die Mini-Spiele wurden größtenteils von externen Agenturen geliefert. Um eine abgeschlossene Umgebung zu schaffen, gab es die GameBox. Diese stellte diverse Standard-Methoden, wie z. B. den Start-Bildschirm oder die Schwierigkeitsauswahl bereit. So wurde ein homogenes Nutzererlebnis möglich, ohne dass jedes Mal das Rad neu erfunden (und übersetzt) werden musste.

Fazit

Das eigens dafür entwickelte System war flott, absolut sicher und flexibel. Sonderwünsche einzelner Nintendo Abteilungen konnten wir aufgrund der soliden Basis über mehrere Jahre hinweg sauber umsetzen.

13:T1342,

Daten für Alle

Wie viel Regen fiel letzten Monat? Wie viele Radfahrer passieren die Innenstadt? Wie hoch ist der UV-Index heute? Kommunen sitzen auf einem Berg an Open Data, der für Bürger meist unsichtbar bleibt. Das Smart Data Dashboard macht diese Daten sichtbar – live, verständlich und ohne Excel-Kenntnisse. Vorgestellt am Beispiel Marburg in Zahlen.

Was?

Konzept & Architektur
Frontend
Headless CMS
Datenimport
Kern-Plugins

Wie?

Next.js
Statamic (Laravel)
Apache ECharts
Python

Marburg in Zahlen Kategorie "Umwelt und Klima" mit Live-Daten

Umsetzung

Die Ausgangsbasis war das Open-Source-Projekt Klimadashboard Münster. Dort ist jede Kachel eine eigene Datei – schön für einen Prototyp, mühsam für jede weitere Stadt. Also habe ich das Prinzip umgedreht: der Inhalt bestimmt die Ansicht, nicht der Code. Kachel-Typen sind wiederverwendbare Layouts, die beliebig oft mit unterschiedlichen Datenquellen bestückt werden können. Redaktionen legen neue Kacheln, Seiten und Kategorien selbst an – ohne Entwickler, ohne Deployment.

Das Frontend ist eine Next.js-App mit einem Kachel-Raster und je einer Seite pro Kategorie. Die Diagramme entstehen mit Apache ECharts, das auch bei mehreren tausend Datenpunkten pro Kachel nicht ins Schwitzen kommt. Dazu kommen Volltextsuche über alle Kacheln, Mehrsprachigkeit, Screenreader-taugliche Alternativdarstellungen der Diagramme und ein PWA-Modus.

Das CMS ist ein flat-file Statamic auf Laravel – kein Datenbankserver, dafür versionierbare Inhalte im Git. Es liefert nicht nur Texte und Konfiguration, sondern normalisiert auch die hochgeladenen CSV-Datensätze: leere Spalten fliegen raus, Spaltenschemata werden geprüft, Quellenangaben hängen am Datensatz statt im Code.

Alles, was sich nicht minütlich ändert, wird beim Build in einen statischen Cache geschrieben. Nur echte Live-Daten – Wetter, UV-Index, Verkehrszähler – werden zur Laufzeit abgefragt, gebündelt über eigene Endpunkte, damit API-Keys und Rate-Limits serverseitig bleiben. Der Cache wird per Webhook aus dem CMS invalidiert. Ergebnis: eine Seite, die Live-Daten zeigt, aber wie eine statische Website ausgeliefert wird.

Für die historischen Datensätze gibt es Python-Importer, die die Rohdaten des Deutschen Wetterdienstes einlesen und zu auswertbaren Zeitreihen verdichten – Klimaindizes, Mittelwerte, Langzeitvergleiche. Denn ein Temperaturwert allein sagt wenig; interessant wird er im Vergleich zu vierzig Jahren Messreihe.

Kern-Plugins

Damit die Städte nicht auseinanderlaufen, steckt die Basis in Paketen, die ich entworfen und umgesetzt habe:

Statamic-Core-Addon – die serverseitige Hälfte: REST-Endpunkte für Inhalte, Kacheln, Navigation und Taxonomien, Konnektoren zu externen Datenquellen (DWD, Open-Meteo), CSV-Verarbeitung, eigene Fieldtypes und Layout-Vorschauen direkt im Control Panel.
React-Statamic-API – die Client-Hälfte als npm-Paket: typisierte Datenabfrage, Caching, Routing und die Basis-Komponenten der Kacheln. Ein Kachel-Typ implementiert nur noch seine Darstellung, alles andere kommt aus dem Paket.

Der Effekt ist der eigentliche Punkt: Ein Bugfix oder ein neues Feature passiert an einer Stelle und landet nach einem composer update in allen Installationen. Was stadtspezifisch bleibt, sind Inhalte, Farben und ein paar Sonder-Kacheln.

Mehrfach adaptiert

Das Dashboard läuft inzwischen in mehreren Kommunen – Marburg, Aschaffenburg, Frankfurt und Remscheid – jeweils mit eigenen Datenquellen, eigenem Corporate Design und eigenen Schwerpunkten. Jede Adaption hat die Basis geschärft: was zum zweiten Mal kopiert wurde, ist ins Kern-Plugin gewandert. Ein neues Projekt ist heute vor allem Konfiguration.

Fazit

Das spannendste an diesem Projekt ist nicht die Technik, sondern die Übersetzungsarbeit: von Rohdaten zu einer Aussage, die man in drei Sekunden versteht. Und die Erkenntnis, dass sich Wiederverwendbarkeit erst dann auszahlt, wenn man sie schon einmal falsch gemacht hat.

14:T73e,

Vielgestaltig

Hier sind noch einige meiner Arbeiten mit ein paar erklärenden Worten. Viele meiner Lieblings-Projekte sind leider inzwischen entweder nicht mehr verfügbar oder wurden zwischenzeitlich stark überarbeitet.

Aixterior

Contao, React
Programmierung & Responsive Design

Aixterior Catalogue Die Asset-Datenbank

Aixterior bietet 3D-Assets zum herunterladen an. Der Produkt-Filter ist sehr umfangreich und musste trotzdem im vollen Umfang auf allen Geräten angezeigt werden. Hier wurde von mir auch ein externer Zahlungsdienstleister eingebunden.

Website ↝

Marbach Elektronik

Contao
Programmierung & Responsive Design

Marbach Elektronik Homepage Die Startseite ist gleichzeitig auch das Menü

Die Website hat einen eher beschränkten Umfang, aber die Umsetzung des ungewöhnlichen Navigations-Konzepts für kleinere Bildschirme war eine Herausforderung.

Website ↝

Hensel Recycling

Wordpress
Programmierung & Responsive Design

Hensel Recycling Homepage Hensel Recycling Website

Dieses Projekt war sehr umfangreich. Eine Besonderheit war, dass es einen Ticker für die Edelmetallpreise gibt, der aus einer internen Tabelle gespeist wird.

Website ↝

2:["$","html",null,{"lang":"de","className":"fira_sans_c82a5809-module__PIXdkG__variable playfair_display_dd4dd48c-module__CEcH0q__variable fira_mono_1cbcedaf-module__w2jD4W__variable","children":["$","body",null,{"children":[["$","noscript",null,{"children":"You need to enable JavaScript to run this app."}],["$","div",null,{"className":"app","children":[["$","$Ld",null,{"content_html":{"identity":"

Hallo, ich bin Fabian!

Ich entwerfe und entwickle seit knapp drei Jahrzehnten mit großer Leidenschaft Websites, anfangs als Hobby, später im Beruf.

const me = {\n    'name': 'Fabian Prinz-Arnold',\n    'born': 1984,\n    'location': 'Aschaffenburg',\n    'profession': 'Fullstack Web Developer',\n    'email_address': 'fabian@prinz-arnold.de'\n}\n

Ich wohne mit meiner Familie in einem versteckten Winkel vom wunderschönen Aschaffenburg. Sollte Zeit übrig bleiben, hab ich entweder die Gitarre auf dem Schoss, ein Buch in der Hand oder es geht raus in die Natur. Außerdem koche ich leidenschaftlich gerne — man munkelt sogar, dass es schmeckt.

$\"Portrait\"$ \nEgo

\n","talents":"$e","cv":"$f","maker":"$10","stellar":"$11","nintendo":"$12","smart-data-dashboard":"$13","misc":"$14"}}],"$L15"]}]]}]}]

let me = new Webdev();