c885d22346
- Website umbenannt zu "Mischkomposition by Tom Misch" - Domain: tom.mischlabs.de - Kontakt: tom@mischlabs.de - Instagram: @Mischkomposition verlinkt - Sponsor-Bereich und Originalautor-Verweise entfernt - Google Analytics deaktiviert - Kontaktformular auf Deutsch und mit mailto - Docker Setup: Dockerfile, docker-compose.yml, nginx.conf fuer NAS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
134 lines
5.1 KiB
Markdown
134 lines
5.1 KiB
Markdown
# 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 # <head> 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
|
|
|
|
1. Jekyll scannt `images/fulls/` nach statischen Dateien
|
|
2. `index.html` iteriert mit `{% for image in site.static_files %}` ueber alle Bilder
|
|
3. Fuer jedes Bild wird ein `<article class="thumb">` erstellt
|
|
4. Klick oeffnet Poptrox-Lightbox mit Vollbild + EXIF-Daten
|
|
5. EXIF-Daten werden clientseitig via `exif.js` aus dem Bild gelesen
|
|
|
|
## 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**: 8080 (Port 80 ist belegt)
|
|
- **Zugriff**: `http://NAS-IP:8080` -> 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 8080:80, auto-restart
|
|
- `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
|
|
- [ ] Eigene Bilder einpflegen
|
|
- [ ] Footer Bio-Text schreiben (optional)
|
|
- [ ] Farbschema/Design anpassen
|
|
- [ ] Eigene Kategorien/Alben erstellen (Feature-Erweiterung)
|
|
|
|
---
|
|
|
|
*Letzte Aktualisierung: 2026-04-12*
|