# Rakku Webseite — VTuber & Cosplay Photography Dashboard Diese Version ist für Rakku als **VTuber / Creator** und gleichzeitig als **Cosplay-Photography-Portfolio** aufgebaut. Sie nutzt: - Node.js / Express - MongoDB Atlas - Dashboard-Login - Portfolio-Verwaltung - Uploads für Bilder, Logo, Hero-Bild und Favicon - Farbverwaltung für die Webseite - Linkverwaltung für Socials - eigener Hero-Bereich mit Discord-Button und Rakku-Modell als Browser-Overlay ## Enthaltene Rakku-Bilder Folgende Bilder liegen bereits im Paket: ```text public/assets/img/rakku-pfp.png public/assets/img/rakku-model.png public/assets/img/rakku-model-wide.png public/assets/img/rakku-model-alt.png public/assets/img/favicon.png public/assets/img/apple-touch-icon.png ``` Im Dashboard kannst du später eigene Bilder hochladen und die Pfade ersetzen. ## Wichtig zu Zugangsdaten Die Datei `.env` wird nicht mitgeliefert und sollte niemals öffentlich hochgeladen werden. Nutze `.env.example` als Vorlage. Da Zugangsdaten in einem Chat geteilt wurden, sollte das MongoDB-Passwort danach in MongoDB Atlas rotiert/geändert werden. ## Empfohlene Port-Struktur Wenn Apache bei dir öffentlich auf Port 8080 läuft: ```text Browser -> http://SERVER-IP:8080 -> Apache -> Node intern auf 3008 ``` Darum ist in `.env.example` standardmäßig `PORT=3008` eingetragen. ## Installation ### 1. Dateien nach /var/www/html kopieren ```bash cd /var/www/html unzip rakku-webseite-vtuber-photography-dashboard-v16.zip ``` Falls die ZIP einen Unterordner erstellt, den Inhalt daraus nach `/var/www/html` verschieben. ### 2. Node-Abhängigkeiten installieren ```bash cd /var/www/html npm install ``` ### 3. .env erstellen ```bash cp .env.example .env nano .env ``` Trage dort ein: ```env PORT=3008 MONGODB_URI=DEIN_MONGODB_ATLAS_LINK MONGODB_DB=rakkuWebsite ADMIN_USERNAME=rakku ADMIN_PASSWORD=EIN_SICHERES_PASSWORT SESSION_SECRET=EIN_LANGES_RANDOM_SECRET TRUST_PROXY=1 ``` ### 4. Rechte setzen ```bash cd /var/www/html/server sudo bash install-fix-rakku-rights.sh sudo WEB_ROOT=/var/www/html fix-rakku-rights ``` ### 5. Teststart ```bash cd /var/www/html npm start ``` Wenn alles passt, steht dort ungefähr: ```text [Rakku] MongoDB verbunden: rakkuWebsite [Rakku] Website läuft auf Port 3008 ``` Test intern: ```bash curl http://127.0.0.1:3008 ``` ## Als Systemdienst installieren ```bash cd /var/www/html sudo WEB_ROOT=/var/www/html bash deploy/install-rakku-service.sh sudo systemctl start rakku-website sudo systemctl status rakku-website --no-pager ``` Logs ansehen: ```bash journalctl -u rakku-website -f ``` ## Apache auf Port 8080 als Proxy nutzen Wenn deine Seite weiterhin über `http://SERVER-IP:8080` erreichbar sein soll: ```bash sudo a2enmod proxy proxy_http headers sudo cp /var/www/html/deploy/apache-rakku-8080-proxy.conf /etc/apache2/sites-available/rakku-8080.conf sudo a2ensite rakku-8080.conf sudo apache2ctl configtest sudo systemctl reload apache2 ``` Falls eine alte Apache-Config auf `/var/www/html` direkt zeigt, muss sie deaktiviert oder angepasst werden, damit Apache wirklich an Node weiterleitet. ## Dashboard Dashboard öffnen: ```text http://SERVER-IP:8080/dashboard/ ``` Login-Daten stehen in deiner `.env`: ```env ADMIN_USERNAME=... ADMIN_PASSWORD=... ``` ## Portfolio, Kontakt und Discord Die Startseite zeigt beim Portfolio nur noch einen kleinen Ausschnitt. Das vollständige Portfolio liegt auf einer eigenen Seite: ```text http://SERVER-IP:8080/portfolio ``` Auf der Startseite werden bevorzugt Einträge angezeigt, die im Dashboard als `Featured` markiert sind. Wenn keine Featured-Einträge vorhanden sind, werden automatisch die ersten drei sichtbaren Portfolio-Einträge genutzt. Der Kontaktbereich ist kein klassisches Formular mehr. Er nutzt Buttons für: ```text Instagram DM E-Mail schreiben via mailto Discord ``` Die Links kommen aus `Links -> Instagram`, `Links -> E-Mail` und `Links -> Discord`. Der E-Mail-Button öffnet direkt das Mail-Programm des Besuchers. ## Discord-Link im Hero setzen Im Dashboard findest du den Button unter: ```text Basis -> Hero -> Discord Button Link ``` Alternativ nutzt die Webseite automatisch den Link aus: ```text Links -> Discord ``` Der Discord-Button wird immer im Hero angezeigt. Wenn noch kein echter Discord-Link eingetragen ist, springt er erstmal zum Kontaktbereich. Den echten Invite-Link trägst du im Dashboard ein. ## Was im Dashboard bearbeitet werden kann - Seitentitel - Untertitel - Meta Beschreibung - Hero-Texte - Hero-Buttons inklusive Discord - VTuber-Bereich - About-Texte - Photography-Texte und Karten - Portfolio-Texte - Shooting-Ablauf-Texte - Kontakt-Texte - Footer - Farben - Logo URL - Favicon URL - Hero Avatar / PFP - Hero Charakterbild - Social Links - Portfolio-Einträge - Bild-Uploads ## Upload-Pfade Uploads landen in: ```text public/uploads/ ``` Nach einem Upload bekommst du z. B. diesen Pfad: ```text /uploads/mein-bild.png ``` Diesen Pfad kannst du dann bei Logo, Favicon, Hero-Bild oder Portfolio-Bild eintragen. ## v4 Hero-Anpassung Der Hero wurde als breites, geschlossenes Panel überarbeitet. Das Rakku-Modell sitzt jetzt seitlich im Hero-Visual und bleibt innerhalb der Hero-Fläche, statt aus dem Hero-Embed herauszuragen. Der Discord-Button bleibt im Hero sichtbar und nutzt den Dashboard-Link, sobald einer gesetzt ist. ## v5 Hero-Fix Diese Version nutzt ein gecropptes Rakku-Modell ohne riesige transparente Bildfläche. Dadurch sitzt das Modell sauber seitlich im Hero-Visual und ragt nicht mehr aus dem Hero-Bereich heraus. ## v6 Hero-Anpassung - Hero-Bereich steht wieder alleine mittig im ersten Viewport. - Nachfolgende Sektionen sind beim ersten Laden nicht direkt sichtbar. - Das Rakku-Modell sitzt nun sauber im rechten Hero-Visual und wird nicht mehr von der Profilkarte überdeckt. - Die restliche Seitenstruktur wurde nicht verändert. ## v7 Hero-Korrektur - Hero ist wieder kleiner und mittiger, eher wie ein geschlossenes NRC-artiges Panel. - Nachfolgende Sektionen sollen beim ersten Laden nicht direkt in den Vordergrund rutschen. - Das rechte Model-Embed wurde wieder mit den Profil-Infos ausgestattet. - Das Rakku-Modell bleibt im Embed und ragt nicht aus dem Panel heraus. - Nur der Hero-/Model-Part wurde angepasst. ## v8 Hinweis Der Hero-Bereich wurde angepasst: Das Modell ist nicht mehr im rechten Info-Embed, sondern liegt unten rechts als überlagerndes Hero-Model. Das rechte Embed bleibt als Creator-/Profil-Info bestehen. ## v9 Hero-Anpassung - Hero-Banner steht mittiger und eigenständiger im ersten sichtbaren Bereich. - Das nächste Segment wird weiter nach unten geschoben. - Unter dem Hero sitzt ein animierter Scroll-Hinweis mit Pfeilen. - Das rechte Hero-Info-Panel ist nicht mehr abgeschnitten. - Das Rakku-Modell sitzt unten rechts und verdeckt das Info-Panel nicht mehr stark. ## Version v11 - Hero-Banner wieder kompakter und mittiger gesetzt. - Rakku-Modell aus dem Hero-Banner entfernt. - Rakku-Modell als Viewport-Overlay unten links am Browserrand eingebaut. - Das Modell bleibt beim Scrollen am unteren linken Browserrand sichtbar und verdeckt das rechte Hero-Info-Panel nicht mehr. ## v14 Hinweis: Mehrere Bilder pro Portfolio-Post Portfolio-Einträge unterstützen jetzt mehrere Bilder pro Post. Im Dashboard unter **Portfolio** gibt es dafür: - **Cover-Bild URL / Pfad**: Hauptbild des Posts und Vorschaubild. - **Weitere Bilder / Galerie**: zusätzliche Bilder, jeweils eine URL pro Zeile. Beispiel: ```text /uploads/shooting-01.jpg /uploads/shooting-02.jpg /uploads/detail-01.jpg ``` Auf der öffentlichen Seite wird weiterhin eine saubere Portfolio-Karte angezeigt. Wenn ein Eintrag mehrere Bilder besitzt, erscheint ein kleiner Hinweis wie „3 Bilder“. Beim Anklicken öffnet sich eine Galerie-Ansicht mit Vor/Zurück-Navigation und kleinen Vorschaubildern. ## v17 Änderungen - Hero-Banner wurde im ersten Bildschirm etwas weiter nach unten gesetzt. - Der riesige Leerraum zwischen Hero/Scroll-Hinweis und dem nächsten Abschnitt wurde reduziert. - Hero-Titel und darunterliegende Texte/Buttons wurden bündiger ausgerichtet. - Kontaktbereich hat unten mehr Abstand, damit der Footer nicht zu dicht darunter sitzt. - Dashboard-/Frontend-JavaScript wurde per Syntaxcheck geprüft. ## v22 Änderungen - Footer-Rechtliches angepasst: - **Impressum** ist jetzt ein externer Link und wird über das Dashboard gepflegt. - **Datenschutzerklärung** ist als eigene Seite unter `/datenschutz/` erreichbar. - Die Datenschutzerklärung ist nicht im Header verlinkt, sondern nur im Footer. - Dashboard erweitert: - `Impressum externer Link` - `Datenschutz Titel` - `Datenschutz Stand` - `Datenschutzerklärung` Hinweis: Die Datenschutzerklärung ist eine vorbereitete Vorlage. Bitte mit deinen echten Angaben ergänzen und bei Bedarf rechtlich prüfen lassen. ## v24 - Hero-Banner auf der Startseite minimal höher gesetzt. - Twitch-Button im Hero ergänzt. Der Link kommt aus `heroTwitchLink` oder alternativ aus `Links → Twitch` im Dashboard. - Dashboard-Felder für Twitch-Button-Text und Twitch-Button-Link ergänzt. ## v25 Änderung - Hero-Buttons sind jetzt zweizeilig: Discord und Twitch oben, Portfolio und Shooting darunter. ## v26 Hinweis - Hero-Buttons sind jetzt fest als 2x2-Layout gesetzt: Discord + Twitch oben, Portfolio + Shooting darunter. ## SEO, Metadaten & Google Diese Version enthält erweiterte Metadaten für Google und Social Previews: - `title` und `description` pro Seite - Canonical-URLs - OpenGraph-Metadaten für Discord, Instagram/Threads, Facebook etc. - Twitter/X Card Metadaten - JSON-LD strukturierte Daten - `robots.txt` - `sitemap.xml` - `manifest.webmanifest` - Dashboard-Felder für Website-URL, Meta-Beschreibung, Keywords, Autor und Social-Preview-Bild Wichtig: Metadaten verbessern SEO und Vorschauen, aber **SSL selbst** kommt nicht aus HTML-Metadaten. Für SSL brauchst du HTTPS über Apache/Nginx, z. B. mit einem Zertifikat von Let's Encrypt. Trage danach im Dashboard bei `Website URL / Canonical` deine HTTPS-Domain ein, z. B. `https://rakku.de`. Prüfen kannst du danach: ```bash curl -I https://deine-domain.de curl https://deine-domain.de/robots.txt curl https://deine-domain.de/sitemap.xml ``` ## Version v29 Portfolio-Posts können jetzt direkt im Portfolio-Formular Bilder hochladen: - Cover-Bild direkt im Portfolio-Eintrag hochladen - mehrere Galerie-Bilder direkt im Portfolio-Eintrag hochladen - keine manuelle Bild-Link-Eingabe mehr nötig - bestehende Bilder werden als Vorschau angezeigt und können aus dem Post entfernt werden - pro Portfolio-Post können Model-Instagram-Links hinterlegt werden, zeilenweise als `@name` oder vollständiger Instagram-Link - pro Post kann optional ein Fotograf-Instagram-Link gesetzt werden; bleibt das Feld leer, nutzt die Webseite automatisch den Instagram-Link aus den Social-Links - öffentliche Portfolio-Karten und die Galerie/Lightbox zeigen passende Instagram-Buttons an Der allgemeine Upload-Bereich bleibt für Logo, Favicon oder sonstige Assets erhalten. Portfolio-Bilder sollten ab v29 direkt im Portfolio-Tab hochgeladen werden. ## Version v30 Portfolio-Kategorien können jetzt direkt im Dashboard verwaltet werden: - neue Kategorien im Portfolio-Tab anlegen - vorhandene Kategorien aus der Dropdown-Liste entfernen - Portfolio-Einträge wählen ihre Kategorie jetzt über ein Dropdown statt freier Texteingabe - bestehende Portfolio-Posts behalten ihre gespeicherte Kategorie, auch wenn die Kategorie später aus der Auswahl entfernt wird - öffentliche Portfolio-Filter nutzen die angelegten Kategorien zusätzlich zu bereits verwendeten Kategorien ## v32 Hinweis: Portfolio-Posts öffnen Galerie Portfolio-Karten sind jetzt sichtbar anklickbar. Beim Klick auf eine Karte, das Cover-Bild oder den Button „Galerie ansehen“ öffnet sich eine Galerie/Lightbox mit allen Bildern, die im Dashboard beim jeweiligen Portfolio-Post hochgeladen wurden. Instagram-Buttons in den Karten bleiben normale externe Links. ## v35 - Portfolio-Lightbox: lange Beschreibungen sind jetzt scrollbar. - Mobile Ansicht der Portfolio-Posts/Lightbox wurde verbessert. - Text, Buttons und Thumbnails bleiben im Lightbox-Feld. ## v36 – Gmail-Kontaktbutton Der Kontaktbereich zeigt bei eingetragener E-Mail-Adresse jetzt zwei Optionen: - **Mit Gmail schreiben**: öffnet Gmail im Browser mit Empfänger, Betreff und Textvorlage. - **Mail-App öffnen**: nutzt weiterhin `mailto:` für das Standard-Mailprogramm. Die E-Mail-Adresse, der Betreff und die Textvorlage können im Dashboard unter **Links** gepflegt werden. ## v40 – Portfolio-Lightbox überarbeitet Die geöffnete Portfolio-Ansicht wurde optisch aufgeräumt: - Desktop: Bildbereich links, Post-Infos rechts als eigenes Glas-Panel. - Titel, Beschreibung, Bildzähler und Instagram-Buttons sitzen sauber im rechten Panel. - Thumbnails liegen in einer eigenen Leiste unter dem Bildbereich. - Die Navigationspfeile liegen nicht mehr störend über dem gesamten Post. - Mobile Ansicht bleibt einspaltig und die Beschreibung bleibt scrollbar. ## v41 Hinweis Diese Version basiert wieder auf V40, übernimmt aber die Neon-Farben aus Style-Test C. Das Layout bleibt bewusst näher an V40. Zusätzlich wurde der Close-Button der Portfolio-Lightbox aus dem Post-Feld herausgeschoben, damit er nicht mehr über Inhalt oder Bildbereich liegt. ## TestRegment Style-Test Diese Version basiert auf v42, aber der öffentliche Webseiten-Style wurde testweise umgebaut: - weniger iOS-/Apple-Glassmorphism - weniger transparente Banner und Embeds - solidere Panels mit klareren Kanten - dunkler Creator-/Portfolio-Look mit Neon-Akzenten - Light Mode bleibt vorhanden, aber ebenfalls weniger glasig Die Funktionen aus v42 bleiben unverändert. ## TestRegment v3 Diese Version testet einen deutlich weniger glasigen Hero-/Panel-Stil: - kein mittlerer Trennstrich im Hero-Banner - solidere, dunkle Panels statt iOS-Glass - klarere Kanten und weniger Transparenz - „Weiter scrollen“ wieder weiß ## v44 - Header optisch neu sortiert und an den TestRegment-Style angepasst. - Navigation logisch umsortiert: VTuber, Über mich, Fotografie, Portfolio, Kontakt. - Abstände der normalen Inhaltssektionen vereinheitlicht; Hero und VTuber-Sektion bleiben unverändert. - Kontaktbereich oben/unten gleichmäßiger gepolstert. ## v47 - Portfolio-Lightbox optisch neu aufgeräumt. - Überlappende Kategorie-/Tag-Anzeige gefixt. - Überflüssigen „Bilder“-Schriftzug in der Thumbnail-Leiste entfernt. - Tags, Kategorie und Links sauberer beschriftet. ## v53 - Lightbox previous/next buttons repositioned to align with the image area. - Next button moved away from the info panel so it no longer cuts into the border/panel seam. - Navigation button style made slimmer and cleaner.