André Behr – Journalist & Writer Website

Übersicht

Portfolio-Website für André Behr, Journalist mit über 40 Jahren Erfahrung. Gebaut als JAMstack Site – schnell, sicher, wartungsarm.

Stack

Tool	Zweck	Warum
Astro 6	Static Site Generator	Schnell, modern, kein JS Overhead
Tailwind CSS v4	Styling	Utility-first, flexibel
DaisyUI v5	UI Components & Themes	Theme-Switching, saubere Komponenten
Sveltia CMS	Content Management	Modernes UI, GitHub OAuth, kein Server
Vercel	Hosting + OAuth Proxy	Auto-Deploy, schnell, offen
Web3Forms	Kontaktformular	Gratis, kein Backend nötig
GitHub	Versionierung	Single Source of Truth

Warum dieser Stack?

Sveltia CMS statt Decap/TinaCMS

• TinaCMS – primär für Next.js, Astro v6 nicht unterstützt
• Decap CMS – Netlify Identity hatte CORS Probleme, Git Gateway in Sveltia deprecated
• Sveltia CMS – modernes UI, GitHub OAuth direkt, Drop-in Ersatz für Decap

Vercel statt Netlify

• Netlify Identity hatte persistente CORS Probleme
• Vercel ist offener und flexibler
• GitHub OAuth Proxy als Vercel Function – sauber und kontrollierbar

Web3Forms statt Netlify Forms / Formspree

• Netlify Forms: Custom Redirect kostenpflichtig
• Formspree: 50 Submissions/Monat Limit
• Web3Forms: Gratis, unbegrenzt, einfache Integration

Architektur

GitHub (Single Source of Truth)
↓ git push
Vercel (Hosting + OAuth Proxy)
↓ auto-deploy
Astro (Static Site)
↓ content aus JSON
Sveltia CMS → GitHub Commit → Vercel Deploy
Web3Forms → Email an André

Separation of Concerns

Was	Wer	Wie
Struktur & Layout	Chris	Astro Pages + Components
Styling & Themes	Chris	Tailwind / DaisyUI global.css
Inhalte & Texte	André	Sveltia CMS im Browser
Referenzen & Media	André	Sveltia CMS
Versionierung	GitHub	Automatisch bei jeder Änderung

Lokale Entwicklung

# Dependencies installieren
npm install
# Entwicklungsserver starten
npm run dev
# Build testen
npm run build
npm run preview

Content Management – für André

Login:https://andi-cyan.vercel.app/admin/index.html

Was André selbst ändern kann:

• Homepage Text
• Über mich – Absätze hinzufügen/ändern/löschen
• Angebot – Leistungen hinzufügen/ändern/löschen
• Referenzen – Artikel, PDFs, Videos, Audio, Bilder
• Kontakt – Email, LinkedIn, Intro Text

Was Chris macht:

• Strukturelle Änderungen (neue Seiten, Navigation)
• Design Anpassungen (Themes, Layout)
• Technische Updates

Wichtig: Jede Änderung im CMS = automatischer GitHub Commit = automatisches Vercel Deploy

Deployment

git add .
git commit -m "Beschreibung"
git push
# → Vercel deployt automatisch in ~1 Minute

Environment Variables (Vercel)

GITHUB_CLIENT_ID = GitHub OAuth App Client ID
GITHUB_CLIENT_SECRET = GitHub OAuth App Client Secret
PUBLIC_WEB3FORMS_KEY = Web3Forms Access Key

GitHub OAuth Setup

OAuth App auf GitHub:

• Homepage URL:https://andi-cyan.vercel.app
• Callback URL:https://andi-cyan.vercel.app/api/auth/callback

Projektstruktur

/
├── api/
│ └── auth/
│ ├── index.js # GitHub OAuth redirect
│ └── callback.js # GitHub OAuth callback
├── content/
│ ├── home.json
│ ├── ueber.json
│ ├── angebot.json
│ ├── referenzen.json
│ └── kontakt.json
├── public/
│ ├── admin/
│ │ ├── index.html # Sveltia CMS
│ │ └── config.yml # CMS Konfiguration
│ ├── dokumente/
│ └── images/
└── src/
├── components/
│ ├── Header.astro
│ ├── IconAudio.astro
│ ├── IconBild.astro
│ ├── IconDownload.astro
│ ├── IconExternalLink.astro
│ └── IconVideo.astro
├── layouts/
│ └── Layout.astro
├── pages/
│ ├── index.astro
│ ├── ueber-mich.astro
│ ├── angebot.astro
│ ├── referenzen.astro
│ └── kontakt.astro
└── styles/
└── global.css

Themes

DaisyUI Themes wechselbar via Dropdown im Header. Aktives Theme: andre (custom, definiert in global.css)

Verfügbare Themes: andre, nord, corporate, dim, lemonade, sunset

Git Tags

Tag	Beschreibung
v0.1-pre-cms	Sauberer Stand vor CMS Integration
v0.2-pre-cleanup	Stand vor CSS Cleanup
v0.3-content-externalized	Alle Inhalte in JSON
v0.4-media-support	Video/Audio/Bild Support
v0.5-theme-switcher	DaisyUI Theme Switcher
v0.6-contact-form	Kontaktformular
v0.7-pre-sveltia	Stand vor Sveltia CMS
v1.0	Produktionsreifer Stand