← Zurück zur Homepage

Entwicklungsplan

Was bisher geschafft wurde, was als nächstes kommt, und was noch als Idee im Raum steht.

Gesamt-Fortschritt: –
Erledigt
In Arbeit
Geplant
Idee / Offen
Abgeschlossen Phase 1 — Fundament Grundstruktur & Interaktivität
✓
Projektstruktur anlegen
HTML, CSS, JS, Media-Ordner
Tech
✓
Vollbild-Schreibtisch-Bild
object-fit: cover — funktioniert auf allen Auflösungen
Design
✓
9 interaktive Hotspots
Pulsierender Gold-Effekt, Hover-Label, korrekte Positionierung bei allen Bildschirmgrößen
Tech
✓
Slide-in Panel
Glasmorphism, Icon, Titel, Beschreibung, Links. Schließbar via ×, ESC, Außenklick
Design
✓
Logo volle Breite
logo_hebold_de_f.png, mix-blend-mode: multiply, thront oben über der Homepage
Design
✓
Dokumentation
Changelog, Handbuch, What's New, Entwicklungsplan
Inhalt
In Arbeit Phase 2 — Inhalte & Feinschliff Echte Texte, echte Links
Hotspot-Positionen kalibrieren
Alle 9 Punkte exakt auf die Objekte setzen, ggf. bei neuem Startbild wiederholen
Design
Echte Inhalte in alle Panels
Platzhaltertexte und # ersetzen durch echte Beschreibungen und URLs
Inhalt
Favicon
Browser-Tab-Icon auf Basis des Logos erstellen
Design
Mobile Ansicht
Hotspot-Größen und Panel-Breite auf kleinen Screens optimieren
Tech
Ladeanimation
Kurzes Intro wenn das Startbild lädt — kein weißer Flash
Design
✓
Impressum & Datenschutzerklärung
Gesetzlich vorgeschriebene Seiten angelegt — Adresse noch eintragen
Inhalt
✓
Cookie-Hinweis
DSGVO-konformer Hinweis auf technisch notwendige Cookies
Design
✓
Favicon & robots.txt
SVG-Favicon (goldenes h), robots.txt sperrt api/, data/, config/
Tech
Adresse im Impressum eintragen
impressum.html und datenschutz.html mit echter Adresse vervollständigen
Inhalt
Google Fonts selbst hosten
Fonts lokal einbinden statt via Google CDN — verbessert Datenschutz und Ladezeit
Tech
Geplant Phase 3 — Erweiterte Features Mehr Tiefe & Interaktion
✓
Unterseiten für Hotspot-Inhalte
blog.html (öffentlich) und admin.html (geschützt) als erste Unterseiten. Bücher-Hotspot zeigt Blog-Vorschau direkt im Panel.
Tech
✓
Bild-Hover-Effekt
Spotlight-Effekt: Hover über Hotspot verdunkelt das Bild, nur der Bereich um das Objekt bleibt beleuchtet. Radius pro Objekt individuell konfigurierbar.
Design
✓
Kontaktformular
Im „Kontakt"-Panel direkt ausfüllbar, auch über Nav-Menü erreichbar. PHP-Mailversand mit Honeypot-Spamschutz.
Tech
✓
Admin-Panel: Blog-Editor
admin.html mit Quill WYSIWYG-Editor, Artikel-Liste, Entwurf/Veröffentlichen, Löschen. PHP-Backend (api/posts.php) speichert als JSON. Auth-geschützt, Ctrl+S zum Speichern.
Tech
Admin-Panel: Bild-Upload
Drag & Drop Upload für den Fotoblog. PHP skaliert Bilder automatisch (Original + Vorschau), speichert Titel, Datum, Beschreibung. Basis für fotos.hebold.de.
Tech
Tageslicht-Modus
Alternativbild oder CSS-Filter das sich an Tageszeit / System-Setting anpasst
Idee
Ambient-Sound
Optionales leises Hintergrundgeräusch (Schreibtischambiente, Regen, etc.)
Idee
Zukunft Phase 4 — Langfristig Ideen & Visionen
?
Saisonale Bildwechsel
Verschiedene Schreibtisch-Versionen je nach Jahreszeit oder Anlass
Idee
?
Easter Eggs
Versteckte Interaktionen auf dem Schreibtisch für aufmerksame Besucher
Idee
?
CMS-Anbindung
Panel-Inhalte über ein einfaches Backend pflegen statt direkt im JS
Tech
?
3D-Schreibtisch
Interaktive 3D-Szene statt statischem Foto — mit Three.js o.ä.
Idee
?
Fotoblog
Eigene Fotografie-Sektion — empfohlen als Subdomain fotos.hebold.de: gleiche Domain-Autorität, eigene Identität, eigenes Design. Vom Schreibtisch-Hotspot direkt verlinkbar.
Idee