Direkt zum Inhalt
Bewerbungsportfolio — Mediengestalter Digital · Frontend · Web

Simon van de Loo — Mediengestalter Digital & Webentwickler.

Autodidakt, Systemdenker. Ich gestalte und baue digitale Produkte — von responsiven Websites bis zu komplexen Web-Anwendungen. Als fetten Bonus obendrauf trainiere ich KI-Persönlichkeiten von Grund auf in offene Basismodelle — fünf eigenständige Finetunes auf selbst gebauten Datensätzen. Diese Seite selbst ist der Beweis.

Mediengestalter DigitalFrontend-EntwicklungWebentwicklungKI-Entwicklung (Bonus)

Clearwater Cay

Design-System-Showcase aus der IHK-Abschlussprüfung

Glassmorphism-Designsystem "Depth & Light": 76 Design-Token-Definitionen über drei Themes hinweg, sauber vom Content getrennt. Entstanden als praktisches Projekt meiner IHK-Abschlussprüfung Mediengestalter Digital und danach als eigenständige Demo neu aufgesetzt — Beleg für handwerkliches Design, nicht nur Code.

  • 76 Token-Definitionen über drei Themes, Mobile-First
  • Lightmode und WCAG-orientierter Hochkontrast-Modus
  • Eigenständiges Glassmorphism-System
  • Beste praktische Prüfung im Einzugsgebiet Koblenz, Abschluss sehr gut
HTMLCSSJavaScript
  • Startseite der Demo mit Split-Shot über und unter Wasser
  • Interaktive Karte der Bucht mit eingezeichneter Rundfahrt
  • Tourenübersicht mit aufklappbaren Detailbereichen
  • Dieselbe Seite im WCAG-Hochkontrast-Modus, gelb auf schwarz
  • Die Clearwater-Cay-Demo auf einem MacBook: Startseite mit Split-Shot
Demo öffnen ↗

VIDAhof e.V.

Vereinswebsite für einen Gnadenhof — live seit September 2026

Website für einen Tierschutzverein mit rund 130 geretteten Tieren an drei Standorten bei Kleve, anerkannter Lernort Tierschutz. Sie wirbt Patenschaften und Spenden ein und trägt eine Community: Joomla mit YOOtheme Pro, Mitgliederbereich mit Registrierung und Dashboard, Kunena-Forum, Spendenstrecke, Tierprofile. Das Projekt wurde bei meinem damaligen Arbeitgeber begonnen und dort nicht fertiggestellt — ich habe es übernommen und ehrenamtlich zu Ende gebracht. Die Bildaufbereitung lief dabei nicht von Hand, sondern über mein eigenes lokal laufendes Modell.

  • Bestandsprojekt übernommen: fremder Code, fremde Custom-Module weiterbetrieben
  • 148 Alt-Texte und die visuellen Tierbeschreibungen für das Steckbrief-Schema aus lokaler Bildanalyse — steht so auf der Seite
  • Bildausschnitte für über 200 Fotos: das Modell lieferte die Koordinaten, übernommen wurden sie unverändert
  • Mitgliederbereich mit Registrierung, News und Dashboard, dazu Forum-Integration
  • Für neue Unterseiten bewusst UIkit-HTML statt Page-Builder — dessen Seiten liegen als JSON in der Datenbank und sind entsprechend anfällig
  • Kontrastkorrektur der Farbpalette: Text stand vorher rosa auf rosa
JoomlaYOOtheme ProPHPMariaDBDocker
  • VIDAhof auf einem MacBook: Startseite mit dem Leitsatz „Für ein Leben in Würde. Für alle.“
  • VIDAhof: Tierübersicht mit Sortierung, Steckbriefen und Patenschafts-Fortschritt
  • VIDAhof: Steckbrief eines Tieres mit Datentabelle, Herkunft und Geschichte
Live ansehen ↗
Arbeitsweise

Dieselbe Aufgabe, zwei Jahre auseinander

Die Bildaufbereitung bei VIDAhof ist kein Sonderfall — es ist eine Aufgabe, die ich vorher schon einmal hatte. Nur ging sie damals anders aus, und der Unterschied ist der Grund, warum ich lokale Modelle überhaupt baue.

2024 — im Praktikum

Mehrere Tage von Hand

Ein kommunales Tourismusprojekt: Über 120 physische Ausstellungsstücke sollten ins Netz. Geliefert wurde, was in solchen Projekten üblich ist — Handyfotos in wechselnder Qualität und die Angaben verstreut über die E-Mails der Hersteller.

Pro Stück zwei Zuschnitte: die Totale mit Sockel und Plakette, die Nahaufnahme nur auf dem Objekt. Dazu die Angaben von Hand ins Schema übertragen, Alt-Text tippen, hochladen, nächstes Stück. Ich habe mehrere Tage daran gesessen — und das war reine Fleißarbeit, keine Gestaltung.

2026 — bei VIDAhof

Ein Stapellauf, dann Sichtung

Es sind exakt dieselben Handgriffe: Ausschnitt bestimmen, beschreiben, ins Schema bringen. Nur laufen sie inzwischen über mein eigenes Modell auf dem eigenen Rechner: als Stapel, über Nacht. Dazu kommt für jedes einzelne Tier eine visuelle Beschreibung, die so im Steckbrief steht.

  • 148Alt-Texte, unverändert übernommen
  • 200+Fotos mit maschinell bestimmtem Bildausschnitt
  • 0Bilder, die dafür den Rechner verlassen haben

Was bleibt, ist die Sichtung — und die ist die eigentliche Arbeit. Ein Vorschlag, der danebenliegt, fällt in Sekunden auf. Ihn von Anfang an selbst zu schreiben, dauert Minuten. Zweihundertmal.

Zur Einordnung: Das Tourismusprojekt habe ich damals nicht automatisiert — die Mittel dazu hatte ich nicht. Es ist ein Vergleich, keine zweite Fallstudie. Belegt ist der VIDAhof-Teil: Die Alt-Texte, Beschreibungen und Bildausschnitte stehen live auf der Seite. Der technische Hintergrund steht drüben bei openM!nded.

FeatherWorks Author

Schreibsoftware für Autoren mit lokaler KI

Rust/Tauri-Desktopanwendung für Autoren mit Fonta!ne, einem eingebetteten Gemma-4-E2B-Modell für Entity-Erkennung und Stilanalyse. Eigene Layout-Engine, InDesign-XML-Export, Spellcheck/LanguageTool-Integration. Alles läuft offline, das Manuskript verlässt nie die Festplatte.

  • Rust/Tauri-Desktop-App mit React/TypeScript-Frontend
  • Fonta!ne: lokales Gemma-4-E2B (Q6) für Entity-Extraktion & Lektorat
  • Eigene Layout-Engine + InDesign-Export
  • Offline-first, keine Cloud-Abhängigkeit
RustTauriReactTypeScript
  • FeatherWorks auf einem MacBook: Startseite mit Projektübersicht
  • FeatherWorks: Manuskript mit automatisch hervorgehobenen Entitäten
  • FeatherWorks: Satzvorschau mit Papierformat, Rändern und Typografie vor dem PDF-Export
Editor
Editor
Entity-Tracking
Entity-Tracking
Layout & Export
Layout & Export

A!ley

Bonus: Vollwertiger KI-Assistant, IDE & kreative Sandbox — kein API-Wrapper

Fünf eigene DoRA-Finetunes — A!ley Core, Tempest, Nitro, Code A!ley und Linting Hamster, aufgesetzt auf Gemma 4, Ministral 3 und Qwen-Coder, dazu MFLUX Z-Image-Turbo und ACE-Step 1.5 für Bild- und Musikgenerierung mit fester Stimme sowie PiperTTS. Eine durchgängige Persönlichkeit für Coding, Kreativität und Alltag — lokal auf Apple Silicon (MLX), Desktop-App (Tauri/Next.js) und PHP-Web-Portal mit Polling-Architektur.

  • Eigene Datensätze plus Präferenzoptimierung (ORPO/DPO) — nicht nur überwachtes Finetuning
  • Eigener Trainingsansatz (nCAI): die Persona ersetzt das Regelwerk
  • Idle Thinker: arbeitet weiter, wenn niemand schreibt — recherchiert, erzeugt, meldet sich
  • Eigenes RAG-Gedächtnis (LanceDB) über Gespräche und Projekte hinweg
  • Über 2.700 SVG-Kunstwerke direkt vom Sprachmodell, über 600 Songs — öffentlich einsehbar
  • Polling statt offenem Port: das Portal erreicht den Rechner, ohne ihn freizulegen
PythonMLXFlaskNext.jsTauriPHPMySQL
  • A!ley auf einem MacBook: generierter C++-Code im Chatverlauf
  • A!ley: abgeschlossene Bildgenerierung mit MFLUX
  • A!ley im Webportal auf dem iPhone
Live ansehen ↗
A!ley
A!ley
lokal · online
Willkommen zurück! Soll ich den Trainingslauf von gestern zusammenfassen?
Ja, kurz bitte — und danach weiter am Kapitel 4 Entwurf.
Erledigt. Kapitel 4 liegt schon offen im Author-Modus.
Nachricht an A!ley …➤
Start
Code
ailey_core.py
api/routes.py
components/Chat.tsx
rag/index.ts
1def warmup_greeting(user: str) -> str:
2 mood = load_mood(user)
3 context = rag.recall(user, limit=10)
4 return compose_greeting(mood, context)
> ailey run --watch
Code
Wissensverwaltung
Projekt
Projektnotiz: FeatherWorks Layout-Engine
Erinnerung
Vorliebe: kurze, direkte Antworten am Morgen
Fakten
Fakt: IHK-Prüfung 02.06., Mediengestalter Digital
CMS
DoRA-Finetuning
Epoch 3 / 4
Loss
Learning Rate
Training
Interaktionsdesign

Tap'r'Turn

A!leys mobiles Menü ist eine Telefon-Wählscheibe. Der Name sagt die Bedienung: Ein Loch antippen führt direkt zum Ziel — oder man dreht die Scheibe, bis das gewünschte Loch am Fingeranschlag rechts steht, und lässt los. Beides führt zum selben Ergebnis, und man muss keins von beidem gelernt haben.

Tippen oder drehen ↻

Hier läuft die Scheibe als Schaustück und navigiert nirgends hin. Das ist Absicht: Auf einer Bewerbungsseite darf Navigation nichts kosten — eine Demo darf man dagegen anfassen. Im echten Einsatz sind die Löcher Verweise und damit auch mit Tastatur und Screenreader erreichbar; das Drehen ist die Zugabe, nicht die Voraussetzung.

Referenzen

Echte Kundenprojekte

Simon van de Loo, am Laptop arbeitend
Über mich

Pfleger, Autor, Entwickler — in dieser Reihenfolge

Mein erster Rechner lief noch unter Windows 3.11 — gelernt habe ich daran vor allem, mit sperrigen Systemen zurechtzukommen. Programmiert habe ich erst ein paar Windows-Versionen später, über einen RPG Maker: Ich wollte Welten bauen und lernte dafür Ruby. Danach Python und der Webstack, Rust erst in der Umschulung. Beruflich lief es lange anders — zwölf Jahre Altenpflege, dann die Umschulung. Was aus der Zeit geblieben ist, sind ein langer Atem und die Gewohnheit, mir Themen so lange selbst anzueignen, bis ich sie wirklich verstehe.

Ausgebildet bin ich als Mediengestalter Digital (IHK) — abgeschlossen mit sehr gut, und mit der besten praktischen Prüfung im Einzugsgebiet Koblenz. Mein Kern ist die Kombination aus gestalterischem Fundament und Frontend-/Webentwicklung (React, Next.js, CSS-Design-Systeme): Ich denke Software nicht nur in Funktionen, sondern auch in Aussehen und Nutzererlebnis.

Nebenher bin ich mehrfach veröffentlichter Autor — Schwerpunkt Welten- und Figurenbau; hinter meinem Universum Martyria stehen seit 2015 über 600 Seiten Konzept mit Währungen, Kalendern und Zeitstrahl. Das klingt zunächst nach einem Hobby neben dem Beruf, ist aber genau die Fähigkeit, die meine KI-Arbeit trägt: Meine Trainingsdaten sind ausgeschriebene Charakterstudien, jede Reasoning-Spur von Hand verfasst. Wer Figuren schreiben kann, kann Personas bauen.

Dazu die technische Seite: LoRA- und DoRA-Finetuning, Präferenzoptimierung, RAG-Systeme, Inferenz auf Apple Silicon. Was mich daran reizt, ist die Spannweite — ich verstehe und kontrolliere den ganzen Weg, vom Modellgewicht bis zum UI-Pixel.

Skills

Frontend & Design

ReactNext.jsTypeScriptCSS/Design-SystemeWebdesign & CI

Backend & Systeme

PythonFlaskPHPRustMySQL

KI & Machine Learning

MLXLoRA/DoRA-FinetuningRAGHugging FacePyTorch

Desktop & Tools

TauriGitMonaco/Editor-Integration
Kontakt

Lust, zusammenzuarbeiten?

Ich freue mich über Anfragen für Festanstellungen, Projekte oder einfach einen fachlichen Austausch. Was ich außerhalb von Bewerbungen baue, steht auf openM!nded Labs — die Seite selbst ist übrigens auch von mir.