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>

.dockerignore

@@ -0,0 +1,10 @@
+_site/
+.git/
+.claude/
+node_modules/
+.sass-cache/
+.jekyll-metadata
+*.md
+!Gemfile
+docker-compose.yml
+.gitignore

Brain.md

@@ -4,9 +4,14 @@
 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
+## Besitzer & Kontakt
-- GitHub Repo: https://github.com/Kroonk/Photography.git
+- **Name**: Tom Misch
-- Lokaler Pfad: d:\Vibecoding\Website\Photography
+- **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
 
 ---
 
@@ -19,7 +24,8 @@ Keine 1:1 Kopie, sondern eine individuell angepasste Version mit eigenen Ansprue
 | Styling | SCSS -> kompiliertes CSS |
 | JS Libraries | jQuery, Poptrox (Lightbox), EXIF.js |
 | Build-Tool | Gulp (SCSS kompilieren, JS minifizieren, Bilder resizen) |
-| Hosting | GitHub Pages (kostenlos) |
+| 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) |
 
@@ -82,17 +88,44 @@ Photography/
 | `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
-- [ ] Titel, Subtitle, Autor anpassen
+- [ ] Footer Bio-Text schreiben (optional)
-- [ ] Social Media Links aktualisieren
-- [ ] Footer-Text personalisieren
 - [ ] Farbschema/Design anpassen
-- [ ] Sponsor-Bereich entfernen
-- [ ] Kontaktformular konfigurieren oder entfernen
-- [ ] Custom Domain einrichten (optional)
-- [ ] Google Analytics ID aendern oder entfernen
 - [ ] Eigene Kategorien/Alben erstellen (Feature-Erweiterung)
 
 ---

CNAME

@@ -1 +1 @@
-photography.rampatra.com
+tom.mischlabs.de

Dockerfile

@@ -0,0 +1,21 @@
+# === Build-Phase: Jekyll kompiliert die statische Website ===
+FROM ruby:3.2-alpine AS builder
+
+RUN apk add --no-cache build-base
+
+WORKDIR /site
+
+COPY Gemfile ./
+RUN bundle install
+
+COPY . .
+
+RUN bundle exec jekyll build
+
+# === Serve-Phase: nginx liefert nur die fertigen Dateien aus ===
+FROM nginx:alpine
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /site/_site /usr/share/nginx/html
+
+EXPOSE 80

Skill.md

@@ -44,7 +44,11 @@ Sage mir einen Befehl und ich fuehre den Skill aus.
 | `/save` | Aenderungen speichern | Git add + commit mit Nachricht |
 | `/push` | Zum Remote pushen | Aenderungen zu GitHub pushen |
 | `/status` | Git Status | Zeigt aktuellen Git-Status und Aenderungen |
-| `/deploy` | Website deployen | Build + Push fuer GitHub Pages Deployment |
+| `/deploy` | Website deployen | Build + Push + Docker rebuild auf NAS |
+| `/docker-build` | Docker Container bauen | `docker compose up -d --build` ausfuehren |
+| `/docker-stop` | Container stoppen | `docker compose down` |
+| `/docker-logs` | Container Logs | `docker compose logs -f` anzeigen |
+| `/docker-rebuild` | Komplett neu bauen | Container neu bauen und starten nach Aenderungen |
 
 ## Analyse & Info
 

_config.yml

@@ -1,30 +1,25 @@
 # Base configs
-baseurl: "https://photography.rampatra.com"
+baseurl: "https://tom.mischlabs.de"
-# baseurl: "" # Comment the above line and uncomment this to test the website locally
 image_fulls_loc: "/images/fulls"
 image_thumbs_loc: "/images/thumbs"
-google_analytics: "UA-46465113-2"
+# google_analytics: "" # Eigene ID hier eintragen wenn gewuenscht
 
 # UI configs
-title: "Photography by Ram Patra"
+title: "Tom Misch-komposition"
-subtitle: "See the world through my eyes!"
+subtitle: "Mischkomposition"
-author: "Ram Patra"
+author: "Tom Misch"
 header:
- title: "Photography"
+ title: "Mischkomposition"
- subtitle: "by Ram Patra"
+ subtitle: "by Tom Misch"
 footer:
- name: "Hey there, my name is Ram"
+ name: "Tom Misch"
- bio: "I am a software developer and a tech aficionado. Love making teeny tiny apps solving tiny problems in life and now learning photography."
+ bio: ""
- github: "Want a website like this for yourself for free? Just <a href=\"https://github.com/rampatra/photography\">fork this repo on github</a> ;)"
+ contact: "tom@mischlabs.de"
 web_design: "AJ"
 
 social_urls:
-  twitter: "https://www.twitter.com/rampatra_"
+  instagram: "https://www.instagram.com/Mischkomposition"
-  instagram: "https://www.instagram.com/ram_patra"
-  dribbble: "https://dribbble.com/rampatra"
-  linkedin: "https://in.linkedin.com/in/ram-patra"
-  github: "https://www.github.com/rampatra"
 
 # Configure which exif data to display
 # Tag is the actual exif tag, icon is a fontawesome icon. Use JSON notation without line breaks
-exif: '[{"tag": "Model", "icon": "fa fa-camera-retro"}, {"tag": "FNumber", "icon": "far fa-dot-circle"}, {"tag": "ExposureTime", "icon": "far fa-clock"}, {"tag": "ISOSpeedRatings", "icon": "fa fa-info-circle"}]'
+exif: '[{"tag": "Model", "icon": "fa fa-camera-retro"}, {"tag": "FNumber", "icon": "far fa-dot-circle"}, {"tag": "ExposureTime", "icon": "far fa-clock"}, {"tag": "ISOSpeedRatings", "icon": "fa fa-info-circle"}]'

docker-compose.yml

@@ -0,0 +1,7 @@
+services:
+  photography:
+    build: .
+    container_name: photography-website
+    ports:
+      - "8080:80"
+    restart: unless-stopped

index.html

@@ -36,23 +36,9 @@ layout: default
             <div>
                 <section>
                     <h2>{{ site.footer.name }}</h2>
+                    {% if site.footer.bio and site.footer.bio != "" %}
                     <p>{{ site.footer.bio }}</p>
-                    <p>{{ site.footer.github }}</p>
+                    {% endif %}
-                </section>
-                <section>
-                    <h2>Sponsor</h2>
-                    <div class="presentify">
-                        <div class="presentify-logo">
-                            <a href="https://presentifyapp.com">
-                                <img src="https://raw.githubusercontent.com/rampatra/assets/refs/heads/main/Presentify/Icons/icon_512.png"
-                                 alt="presentify-logo" />
-                            </a>
-                        </div>
-                        <div class="presentify-text">
-                            Turn your screen into a canvas when on video calls and articulate your thoughts better than
-                            ever with the <a href="https://presentifyapp.com">Presentify</a> app.
-                        </div>
-                    </div>
                 </section>
                 <section>
                     <h2>Follow me on ...</h2>
@@ -107,8 +93,8 @@ layout: default
             </div>
             <div>
                 <section>
-                    <h2>Get in touch</h2>
+                    <h2>Kontakt</h2>
-                    <form method="post" action="#">
+                    <form method="post" action="mailto:tom@mischlabs.de" enctype="text/plain">
                         <div class="fields">
                             <div class="field half">
                                 <input type="text" name="name" id="name" placeholder="Name" />
@@ -121,8 +107,8 @@ layout: default
                             </div>
                         </div>
                         <ul class="actions">
-                            <li><input type="submit" value="Send" class="primary" /></li>
+                            <li><input type="submit" value="Senden" class="primary" /></li>
-                            <li><input type="reset" value="Reset" /></li>
+                            <li><input type="reset" value="Zuruecksetzen" /></li>
                         </ul>
                     </form>
                 </section>

nginx.conf

@@ -0,0 +1,22 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Caching fuer Bilder und Assets
+    location ~* \.(jpg|jpeg|png|gif|svg|ico|css|js|woff|woff2|ttf|eot|otf)$ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # SPA-Fallback
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Sicherheit
+    location ~ /\. {
+        deny all;
+    }
+}

npmfile.js

@@ -1,3 +1,3 @@
 exports.printMsg = function() {
-    console.log("Visit http://photography.rampatra.com for a demo!");
+    console.log("Mischkomposition - Photography by Tom Misch");
-};
+};

package.json

@@ -1,30 +1,26 @@
 {
-  "name": "photography",
+  "name": "mischkomposition",
-  "version": "5.0.0",
+  "version": "1.0.0",
-  "description": "A jekyll website for photographer cum developer",
+  "description": "Mischkomposition - Photography Portfolio by Tom Misch",
   "main": "npmfile.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/rampatra/photography.git"
+    "url": "git+https://github.com/Kroonk/Photography.git"
   },
   "keywords": [
     "photography",
-    "jekyll",
-    "website",
-    "template",
-    "website template",
     "portfolio",
-    "portfolio website"
+    "mischkomposition"
   ],
-  "author": "Ram Patra",
+  "author": "Tom Misch",
   "license": "GPL-3.0",
   "bugs": {
-    "url": "https://github.com/rampatra/photography/issues"
+    "url": "https://github.com/Kroonk/Photography/issues"
   },
-  "homepage": "https://github.com/rampatra/photography#readme",
+  "homepage": "https://github.com/Kroonk/Photography#readme",
   "devDependencies": {
     "del": "^4.1.1",
     "gulp": "^4.0.2",