Add Docker setup for containerized deployment

- Dockerfile with nginx:alpine for minimal image size
- docker-compose.yml with container name "mischlabs" on port 8085
- nginx.conf with static asset caching and security headers
- Updated Brain.md with deployment documentation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -4,3 +4,4 @@ Thumbs.db
 *.swo
 *~
 .vscode/
+.claude/

Brain.md

@@ -1,13 +1,14 @@
 # Brain.md - Projekt mischlabs.de Landing Page
 
 ## Projektziel
-Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt.
+Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt. Laeuft als Docker-Container und wird ueber Git auto-deployed.
 
 ## Status
 - [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
-- [x] Dienste-Liste vom Screenshot erfasst
+- [x] Dienste-Liste vom Screenshot erfasst (8 Services)
 - [x] Landing Page Design und Implementierung (index.html + style.css)
-- [ ] Erster Commit + Push
+- [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
+- [ ] Erster Push zum Remote
 
 ## Dienste-Uebersicht (8 Stueck)
 | # | Subdomain | Beschreibung | Farbe/Accent |
@@ -22,26 +23,43 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
 | 8 | docs.mischlabs.de | Dokumentation | #06b6d4 (Cyan) |
 
 ## Technische Entscheidungen
-- **Reines HTML + CSS** (kein Framework, kein JS noetig) - maximale Performance
+- **Reines HTML + CSS** (kein Framework, kein JS) - maximale Performance, minimales Docker-Image
+- **nginx:alpine** als Base-Image - extrem leichtgewichtig (~5MB)
 - **Google Fonts (Inter)** fuer moderne Typografie
-- **Inline SVG Icons** - keine externen Icon-Libraries noetig, kein zusaetzlicher HTTP-Request
+- **Inline SVG Icons** - keine externen Dependencies
 - **CSS Grid** mit `auto-fill` + `minmax(240px, 1fr)` fuer responsives Layout
-- **Dark Theme** mit subtilen Glow-Effekten im Hintergrund
+- **Dark Theme** mit subtilen Glow-Effekten
-- **Card-Hover-Effekte**: translateY, Box-Shadow, radial-gradient Spotlight
+- **Staggered Animations**: Kacheln faden nacheinander ein
-- **Staggered Animations**: Kacheln faden nacheinander ein (fadeInUp)
+
-- **Responsive Breakpoints**: 768px (2 Spalten), 480px (1 Spalte)
+## Docker-Setup
+- **Container-Name**: `mischlabs`
+- **Base-Image**: `nginx:alpine`
+- **Port-Mapping**: `8085:80` (anpassbar in docker-compose.yml)
+- **Restart-Policy**: `unless-stopped`
+- **Auto-Update**: Container wird ueber Git-Repo-Aenderungen neu gebaut
+- **nginx.conf**: Caching fuer Static Assets (7 Tage), Security-Headers
 
 ## Dateistruktur
 ```
 mischlabs/
-  index.html    - Haupt-HTML mit allen 8 Service-Kacheln
+  index.html          - Haupt-HTML mit allen 8 Service-Kacheln
-  style.css     - Komplettes Styling (Dark Theme, Grid, Animationen)
+  style.css           - Komplettes Styling (Dark Theme, Grid, Animationen)
-  Brain.md      - Dieses Dokument
+  Dockerfile          - nginx:alpine mit kopierten Static Files
+  docker-compose.yml  - Container-Definition (Name: mischlabs, Port 8085)
+  nginx.conf          - Server-Konfiguration, Caching, Security-Headers
+  .gitignore          - Git-Ausschluesse
+  Brain.md            - Dieses Dokument (KI-Uebergabe)
 ```
 
+## Deployment-Workflow
+1. Code aendern und committen
+2. Push zu git.mischlabs.de
+3. Auf dem Server: `git pull && docker compose up -d --build`
+   (oder per Webhook/CI automatisiert)
+
 ## Erkenntnisse & Notizen
-- Daten stammen aus Caddy/Reverse-Proxy-Konfiguration (Screenshot)
 - Alle Dienste laufen auf 192.168.178.88 mit verschiedenen Ports
-- Oeffentlich erreichbar ueber *.mischlabs.de Subdomains
+- Oeffentlich erreichbar ueber *.mischlabs.de Subdomains (Reverse Proxy)
+- Port 8085 gewaehlt da gaengige Ports (80, 8080, 8090) bereits belegt
 - Kein JavaScript noetig - pure CSS reicht fuer alle Effekte
-- `color-mix()` CSS-Funktion fuer dynamische Icon-Hintergruende basierend auf Accent-Farbe
+- `color-mix()` CSS-Funktion fuer dynamische Icon-Hintergruende

Dockerfile

@@ -0,0 +1,7 @@
+FROM nginx:alpine
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY index.html /usr/share/nginx/html/
+COPY style.css /usr/share/nginx/html/
+
+EXPOSE 80

docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  mischlabs:
+    build: .
+    container_name: mischlabs
+    restart: unless-stopped
+    ports:
+      - "8085:80"

nginx.conf

@@ -0,0 +1,22 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
+        expires 7d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+}