# 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 - 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 | GitHub Pages (kostenlos) | | 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 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 `
` 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) | ## Anpassungs-Roadmap (TODO - mit Besitzer besprechen) - [ ] Eigene Bilder einpflegen - [ ] Titel, Subtitle, Autor anpassen - [ ] 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) --- *Letzte Aktualisierung: 2026-04-12*