H2me Status-Übersicht

Eine interaktive Übersicht über den aktuellen Stand von h2m.art - was existiert, was in Arbeit ist, und wohin die Reise geht.

✅ Live auf h2m.art 🚧 Dashboard in Planung 🎨 YBY-Design

▼ Live & Funktioniert

Alle Seiten sind live auf h2m.art und voll funktionsfähig.

Landing Page

index.html

  • 9-Button Navigation (Yang/Bian/Yin Grid)
  • Representation Buttons (Style-Switcher)
  • Theme-Switcher (Dark/Light)

Yang Seite

page-yang.html

Energie, Aktivität, Projekte

Bian Seite

page-bian.html

Transformation, Prozesse, Entwicklung

Yin Seite

page-yin.html

Reflexion, Wissen, Output

Cytoscape Graph

page-cytoscape.html

Interaktive Graph-Visualisierung mit Cytoscape.js

Graph View

page-graph.html

Alternative Graph-Darstellung

FLSDGRM

page-flsdgrm.html

Spezielle Diagramm-Visualisierung

3D Model Viewer

page-3dmodel.html

Three.js 3D-Model-Viewer für GLB-Files

Dashboard

page-dashboard.html

4x4 Grid Dashboard (Yang/Bian/Yin/FLUUR)

Shared Components

  • Navigation: Konsistente Nav auf allen Seiten (shared-nav.css/js)
  • Mini-Graph: Accordion-Button (klappt nach oben auf)
  • Global Styles: Basis-Styling mit CSS Variables (shared-global.css)
  • Theme-System: Dark/Light Mode mit localStorage-Persistenz
  • Button-System: Zentrale .btn-base Klasse mit Yang/Bian/Yin Farben

▼ Angefangen aber unfertig

Dashboard-Integration

Häppchen 1/8 (12.5%)

Ziel: Dashboard mit Daten aus Obsidian/Nextcloud

Status: Konzept & Struktur geklärt (Häppchen 1)

  • Tech-Stack: Node.js Static Generator → HTML/CSS/JS
  • Datenquellen: Obsidian Files + Nextcloud APIs (Kalender, Mail)
  • Design: Yin/Yang/Bian-Stil, Mobile-first
  • Navigation: Bottom-Bar Tabs

Dokumentation: doc_dashboard_planung.md, doc_dashboard_roadmap.md

Geometrische Navigation PoC

PoC komplett (100%)

Ziel: 3D-Würfel Navigation zwischen Seiten

Status: Proof of Concept fertig, noch nicht integriert

  • Features: Auto-Rotation, Drag-Interaktion, Raycasting-Klick
  • Snap-Mechanik zu 90° Drehungen
  • Navigation zu allen 6 Seiten funktional

Nächster Schritt: Entscheidung zur Integration in Landing-Page

Refactoring & Tech Debt

Namenskonventionen:

  • Aktuell: page-*.html, shared-*.css (Hyphen)
  • Geplant: Schrittweise auf _ (Underscore) umstellen
  • Regel: Nur 1-2 Files pro Session (Fehleranfälligkeit)

Button-System:

  • ✅ Zentralisierung abgeschlossen (shared-global.css)
  • Weitere Vereinheitlichungen geplant

▼ Das große Bild - Inhaltliche Verbindungen

H2me im Gesamt-System

H2me ist Teil eines umfassenden persönlichen Datenmanagement-Systems mit 7 Farbkategorien, die verschiedene Lebensbereiche abdecken. H2me gehört zur ROT-Kategorie (Stefiprojekte) und bildet das kreative Herz des Systems.

Die 7 Farbkategorien

⚪ GRAU - Datenmanagement

Vault PKM, Raumkalender - Organisation & Struktur

→ Liefert Daten AN H2me (Reviews, Tasks, Logs)

🔴 ROT - Stefiprojekte

H2me, Präsentation, Szenen-Visualisierung, M-KA Website

→ H2me ist das kreative Herz hier

🟢 GRÜN - Making Money

Architektur (Burega, Böni Rohrer)

→ Tool-Skills für H2me-Visualisierungen

🟠 ORANGE - Freunde & Familie

WD40 Hausumbau

→ Brücke zwischen professionell & privat

🔵 BLAU - Haushalt

Finanzen, Ricardo, Kochen, Putzen, Alltag

→ Praktische Organisation

🟣 VIOLETT - Körper

Gesundheit, Training, Ernährung

→ Basis für Produktivität

🟡 GELB - Bierprojekte

Degustationen, BETO Gruppe, Beer Contest

→ Visualisierungs-Potenzial (Daten → H2me)

Content-Flow: Von den Daten zu H2me

Datenquellen

  • EntryPoint (Obsidian)
    • a_yang: Projekte, Tasks
    • b_bian: Logs, Prozesse
    • i_yin: Wissen, Wiki
  • Neuanfang (Nextcloud)
    • Kalender, Mail, Files
  • Externe (geplant)
    • Browser History, App Usage
↓

Verarbeitung

  • Static Generator (Node.js)
  • Parser (Obsidian Files)
  • API Clients (Nextcloud)
  • Aggregation Layer
↓

H2me Website (h2m.art)

  • Landing Page
  • Yang/Bian/Yin Seiten
  • Graph-Visualisierungen
  • 3D-Viewer
  • Dashboard (geplant)

Der Sinn aus meiner Perspektive

Leben mit einem hyperaktiven, hyperchaotischen, hyperstrukturierbedürftigen Hirn ist anstrengend. Ich muss viel mehr bewusst erledigen als Neurotypen. Es gibt Unmengen an Tips, Hinweisen und Anleitungen, die in relevanten Situationen nicht auffindbar sind.

H2me soll diese Tips auffindbar machen - ästhetisch ansprechend, in Netzwerk-Form, mit Visualisierungen die zeigen wie mein Kopf funktioniert. Denn alle Gedanken in meinem Kopf sind bewegt, niemals statisch.

▼ Vision & Geplantes

Nicht nur eine Website - Ein Ökosystem

H2me entwickelt sich von einer Website zu einem umfassenden Dashboard/Ökosystem-System für alle Lebensbereiche.

🎮 Multi-Mode Dashboard

  • Web: Switchbar zwischen Spiegel ↔ Gameish
  • Obsidian: Control Center + Spiegel
  • Separate Dashboards für verschiedene Aspekte

📊 3-Layer Architektur

  • Layer 1: Files (Markdown = Master für Content)
  • Layer 2: Aggregation (Scripts, App-DB)
  • Layer 3: Interfaces (Obsidian + Web)

🌐 Scope: ALLES

  • EntryPoint (Obsidian)
  • Neuanfang (Nextcloud)
  • Externe Daten (Browser, Apps, System Stats)

🌱 Organisches Wachstum

  • Experiment das groß werden kann oder klein bleiben darf
  • Timeline-Tracking in Obsidian
  • Roadmap die sich mit Nutzung entwickelt

Hierarchische Web-Struktur (in Planung)

Neue Namenskonvention für organische Navigation:

page_ya_e001_ac_taskuebersichten.html
     │   │     │  └─ Funktion: Aktionsseite
     │   │     └──── Ebene: e001 (Dashboard-Level)
     │   └────────── Richtung: ya (Yang)
     └────────────── Typ: page

style_ya_rr.css
      │   └─ rr = relativ real (Yang-Stil)
      └───── ya = Yang

style_bi_la.css
      │   └─ la = lineart (Bian-Stil)
      └───── bi = Bian

style_yi_wf.css
      │   └─ wf = wasserfarbe (Yin-Stil)
      └───── yi = Yin

Ebenen-System:

  • e0_: Home (Landing Page)
  • e1_: Richtung (Yang/Bian/Yin)
  • e2_: Aktion (Dashboards, Übersichten)
  • e3_: Content (Makros, Details)

Features in der Pipeline

  • ✨ Style-Switching basierend auf Navigation-Pfad
  • 🎨 Navigation als "Nebel-Bereiche" statt Buttons
  • 📱 Kalender mit Drag & Drop Blöcken
  • 🔍 Suche über Inhalte, Keywords, Verbindungen
  • 🗺️ Graph-View (ähnlich Obsidian, aber gestyled)
  • 🎬 Gamelike Navigation zwischen Pages (3D-Türen)
  • 🌐 Integration externer Websites (Feeds, Mail, Kalender)

▼ Tech-Info