# Brain.md - Projekt-Wissensdatenbank ## Projektziel Eine eigene Fotografie-Portfolio-Website basierend auf dem Template von rampatra/photography. Keine 1:1 Kopie, sondern eine individuell angepasste Version mit eigenen Anspruechen. ## Besitzer & Kontakt - **Name**: Tom Misch - **Marke**: Mischkomposition - **Domain**: tom.mischlabs.de - **E-Mail**: tom@mischlabs.de - **Instagram**: @Mischkomposition - **GitHub Repo**: https://github.com/Kroonk/Photography.git - **Lokaler Pfad**: d:\Vibecoding\Website\Photography --- ## Technologie-Stack | Komponente | Technologie | |---|---| | Static Site Generator | **Jekyll** (Ruby-basiert) | | Templating | Liquid Templates | | Styling | SCSS -> kompiliertes CSS | | JS Libraries | jQuery, Poptrox (Lightbox), EXIF.js | | Build-Tool | Gulp (SCSS kompilieren, JS minifizieren, Bilder resizen) | | Hosting | **UGREEN NAS (Docker)** via nginx | | Containerisierung | Docker Multi-Stage (Jekyll Build + nginx) | | Fonts | FontAwesome, Google Fonts (Source Sans Pro) | | Paketmanager | npm (Node), Bundler (Ruby) | ## Projektstruktur ``` Photography/ ├── _config.yml # Zentrale Konfiguration (Titel, Social Links, EXIF etc.) ├── _layouts/ │ └── default.html # Basis-Layout (Head + Body + Scripts) ├── _includes/ │ ├── header.html # Bereich: CSS, Fonts, Google Analytics │ └── footer.html # Script-Einbindungen (jQuery, Poptrox, EXIF, Main) ├── index.html # Hauptseite: Header, Galerie-Grid, Footer/About ├── assets/ │ ├── css/ # Kompilierte CSS-Dateien (.min.css) │ ├── sass/ # SCSS Quelldateien │ │ ├── base/ # Reset, Typography, Page │ │ ├── components/ # Buttons, Forms, Icons, Panels, Poptrox │ │ ├── layout/ # Header, Footer, Main, Wrapper │ │ └── libs/ # Breakpoints, Mixins, Vars, Functions │ ├── js/ # JavaScript (jQuery, Poptrox, EXIF, Main) │ ├── fonts/ # FontAwesome Fonts │ └── webfonts/ # FA5 Webfonts ├── images/ │ ├── fulls/ # Vollaufloesung Bilder │ └── thumbs/ # Thumbnails (512px) ├── gulpfile.mjs # Build: SCSS->CSS, JS minify, Image resize ├── package.json # Node Dependencies ├── Gemfile # Ruby Dependencies (jekyll) └── CNAME # Custom Domain Config ``` ## Wie die Galerie funktioniert (Dynamisch) 1. **Bilder hochladen**: Fotos in Nextcloud-Ordner `Websitebilder` ablegen 2. **Volume-Mount**: Docker mountet den Nextcloud-Ordner als `/images/fulls/` (read-only) 3. **Thumbnails**: `entrypoint.sh` generiert automatisch 512px Thumbnails via ImageMagick 4. **Thumbnail-Check**: Alle 60 Sekunden prueft der Container auf neue Bilder 5. **nginx autoindex**: Liefert JSON-Liste aller Dateien in `/images/fulls/` 6. **JavaScript (main.js)**: Fetcht die JSON-Liste und baut dynamisch `
` Elemente 7. **Poptrox-Lightbox**: Klick oeffnet Vollbild + EXIF-Daten (clientseitig via exif.js) ### Nextcloud-Integration - **Nextcloud-Pfad**: `/volume1/nextcloud/data/Tom/files/Websitebilder` - **Mount im Container**: `/usr/share/nginx/html/images/fulls:ro` - **Thumbnails-Volume**: Docker-Volume `thumbs` (persistent) - **Workflow**: Bild in Nextcloud hochladen -> max. 60s warten -> Seite neu laden -> fertig ## Wichtige Konfiguration (_config.yml) - `baseurl`: URL der Website (leer fuer lokal) - `title`, `subtitle`, `author`: Seitentitel und Autor - `header.title/subtitle`: Header-Anzeige - `footer.name/bio/github`: Footer-Infos - `social_urls`: Links zu Social Media - `exif`: Welche EXIF-Tags angezeigt werden (Model, FNumber, ExposureTime, ISO) - `google_analytics`: Tracking-ID ## Build-Befehle | Befehl | Aktion | |---|---| | `bundle install` | Ruby Dependencies installieren | | `bundle exec jekyll serve` | Lokaler Dev-Server | | `npm install` | Node Dependencies installieren | | `gulp build` | SCSS kompilieren + JS minifizieren | | `gulp resize` | Bilder zu fulls (1024px) + thumbs (512px) | | `gulp` | Alles (build + resize) | ## Docker / NAS Hosting - **NAS**: UGREEN mit UGOS PRO - **Port**: 8090 (Port 80 ist belegt) - **Zugriff**: `http://NAS-IP:8090` -> spaeter `https://tom.mischlabs.de` - **Domain**: tom.mischlabs.de (Reverse Proxy auf NAS einrichten) ### Docker-Dateien - `Dockerfile` - Multi-Stage: Ruby/Jekyll baut Site -> nginx serviert statische Dateien - `docker-compose.yml` - Container-Definition, Port 8090:80, Nextcloud-Volume, auto-restart - `entrypoint.sh` - Thumbnail-Generierung + periodischer Check (alle 60s) - `nginx.conf` - Webserver-Config mit Caching und Sicherheit - `.dockerignore` - Haelt Build-Context klein (kein .git, node_modules etc.) ### Docker-Befehle | Befehl | Aktion | |---|---| | `docker compose up -d --build` | Container bauen und starten | | `docker compose down` | Container stoppen | | `docker compose logs -f` | Logs anzeigen | | `docker compose up -d --build --force-recreate` | Neu bauen nach Aenderungen | ### Deployment-Workflow 1. Aenderungen lokal machen (Bilder, Config, Design) 2. Git commit & push 3. Auf NAS: `git pull && docker compose up -d --build` 4. Fertig - Website aktualisiert ## Anpassungs-Roadmap (TODO - mit Besitzer besprechen) - [x] Titel, Subtitle, Autor anpassen (Mischkomposition / Tom Misch) - [x] Social Media Links aktualisieren (Instagram: @Mischkomposition) - [x] Sponsor-Bereich entfernen - [x] Kontaktformular auf tom@mischlabs.de konfiguriert - [x] Google Analytics vom Originalautor entfernt - [x] Custom Domain: tom.mischlabs.de eingetragen - [x] Nextcloud-Integration (Bilder aus Websitebilder-Ordner) - [x] Dynamische Galerie (JS statt Jekyll-Loop) - [x] Automatische Thumbnail-Generierung - [ ] Footer Bio-Text schreiben (optional) - [ ] Farbschema/Design anpassen - [ ] Eigene Kategorien/Alben erstellen (Feature-Erweiterung) --- *Letzte Aktualisierung: 2026-04-12*