Frontend Developer in progress · UI · Motion – Emotion · Interactive Web

Janina Mergenthal

Gedanken werden sichtbar.. wenn man ihnen Raum gibt

Ich entwickle interaktive Webprojekte mit HTML, CSS und JavaScript – aktuell mit Fokus auf Animation und visuelle Systeme.

Arbeiten

Gedanken werden sichtbar – persönliche Website

Diese Seite ist mein erster bewusst gestalteter Webraum. Sie entstand während des Lernens - Schritt für Schritt, ohne fertige Vorlage. Der Fokus liegt auf Reduktion, Atmosphäre und Klarheit. Gestaltung und Code greifen ineinander und bilden einen gemeinsamen Prozess.

Technik: HTML, CSS, JavaScript, Canvas API, requestAnimationFrame, Netlify

Status: Version 1 - bewusst minimal, darf wachsen

Digitale Bestandsaufnahme – Hotel Check (Web-App MVP)

Eine einfache Web-Anwendung zur strukturierten Bestandsaufnahme von Hotelzimmern (Gebäude → Etage → Zimmer) mit auswertbarem Datenexport.

Technik: HTML, CSS, JavaScript, localStorage, CSV Export, Google Sheets, Netlify

Status: MVP (Version 1) - bewusst reduziert, ausbaufähig

Problem & Ziel

Bestandsaufnahmen wurden bisher manuell in Excel durchgeführt. Das war zeitaufwendig, fehleranfällig und im mobilen Einsatz unpraktisch.

Ziel war es, ein einfaches, mobil nutzbares Tool zu entwickeln, mit dem Mitarbeitende vor Ort schnell Zustände erfassen können.

Lösung (MVP)

  • Strukturierte Auswahl: Gebäude → Etage → Zimmer
  • Checklisten mit klaren Statusoptionen (OK, Defekt, Fehlt, N/A)
  • Offline-Nutzung durch lokale Speicherung
  • CSV-Export zur Auswertung in Google Sheets

Einblick in die Anwendung

Startansicht der Hotel-Check-Web-App
Start: Auswahl von Etage und Zimmer
Checkliste eines Hotelzimmers mit Status-Auswahl
Checkliste mit Status & Kommentaren
Übersicht gespeicherter Checks mit CSV-Export
Übersicht & CSV-Export

Umsetzung

Die Anwendung wurde bewusst ohne Frameworks umgesetzt, um Fokus auf Struktur, Nutzerführung und Verständlichkeit zu legen.

JavaScript steuert den Anwendungszustand und die Datenspeicherung, CSS sorgt für ein ruhiges, mobiles Layout.

Ergebnis & Ausblick

Das MVP ist funktionsfähig und wird bereits als realistische Grundlage für weitere Entwicklungen genutzt.

Denkbare Erweiterungen sind z. B. Rollen, Foto-Uploads oder Cloud-Synchronisation.

Scroll Motion Interface

Eine visuelle Studie zu Scroll-Interaktion und Timing. Bewegung strukturiert Inhalte und Wahrnehmung und schafft bewusste Übergänge.

Technik: HTML, CSS, JavaScript, Intersection Observer, requestAnimationFrame, Canvas API

Live: Projekt ansehen →

Status: Concept Study

Gedanken

Skizzen, Prozesse, Lernen

Ich entwickle bewusst gestaltete Web-Erlebnisse, die Klarheit, Atmosphäre und Emotion verbinden. Meine Projekte entstehen in einem kontinuierlichen Lerprozess, in dem Code und Design zusammenkommen.

Hier sammle ich Skizzen, Gedanken und Experimente - alles ist in Bewegung, wächst und darf sich entwickeln.

Heart Study

Canvas-Study zu Formbildung, Raster und Interaktion. Eine kleine Partikelstudie: Punkte sammeln sich zur Herzkontur und glühen kurz auf - bewusst ruhig, wie ein Zeichen.

Technik: Canvas API, requestAnimationFrame, Particle System

Hover / Click to start

Growing Lines Study

Canvas-Study zu emergenten Strukturen. Partikel bewegen sich frei und bilden ein wachsendes Netzwerk aus Linien. Interaktion verändert das System.

Technik: Canvas API, requestAnimationFrame, Particle System, Interaction

Hover / Click to start · Space: toggle lines · R: re-seed

Breathing Study

Canvas-Study zu Atem-Impulsen und Stille. Aus einem Kernpunkt entstehen sanfte Pulse: Ringe wachsen nach außen und lösen sich weich auf. Leichte Drift und Glow halten die Bewegung bewusst ruhig.

Technik: Canvas API, requestAnimationFrame, Procedural Ripple System

Hover / Click to start

Weitere kleine Studien und Interaktions-Experimente auf CodePen

Kontakt

Mail GitHub CodePen LinkedIn