Files

Kroonk c885d22346 Personalisierung: Mischkomposition by Tom Misch + Docker Setup

- 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>

2026-04-12 13:52:19 +02:00

5.1 KiB

Raw Blame History

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

Jekyll scannt images/fulls/ nach statischen Dateien
index.html iteriert mit {% for image in site.static_files %} ueber alle Bilder
Fuer jedes Bild wird ein <article class="thumb"> erstellt
Klick oeffnet Poptrox-Lightbox mit Vollbild + EXIF-Daten
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

Aenderungen lokal machen (Bilder, Config, Design)
Git commit & push
Auf NAS: git pull && docker compose up -d --build
Fertig - Website aktualisiert

Anpassungs-Roadmap (TODO - mit Besitzer besprechen)

Titel, Subtitle, Autor anpassen (Mischkomposition / Tom Misch)
Social Media Links aktualisieren (Instagram: @Mischkomposition)
Sponsor-Bereich entfernen
Kontaktformular auf tom@mischlabs.de konfiguriert
Google Analytics vom Originalautor entfernt
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

5.1 KiB Raw Blame History