Files

Kroonk 5434298c25 Initial commit: Photography portfolio based on rampatra/photography

- Jekyll-based photography portfolio template
- Added Brain.md (project knowledge base) and Skill.md (skill commands)
- Configured remote to Kroonk/Photography.git
- Added .claude/ to .gitignore

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

2026-04-12 13:14:44 +02:00

3.8 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

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

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

3.8 KiB Raw Blame History