andreknie.de
Personal homepage for Dr. Andre Knie. Built with Vite 8 + React 19, Express 5 backend, file-based CMS.
Quick Start
npm install
npm run dev # Frontend (port 5173)
npm run start:server # Backend (port 3003)
Content Management
Add content by creating files in content/:
| Directory | Format | What |
|---|---|---|
content/posts/ |
Markdown (.md) | Articles, LinkedIn posts |
content/kniepunkt/ |
Markdown (.md) | Kniepunkt column issues |
content/podcast/ |
YAML (.yaml) | Podcast episode metadata |
content/talks/ |
YAML (.yaml) | Talk/speaking metadata |
content/consulting/ |
YAML (.yaml) | Consulting examples |
content/resources/ |
YAML (.yaml) | Downloadable resources |
content/events/ |
YAML (.yaml) | Events and dates |
content/meta/profile.yaml |
YAML | Name, Rollen, Summary, Zielgruppen, Positionierung |
content/meta/about.yaml |
YAML | "Über mich"-Seite: Links, Stationen, Zertifizierungen, Persönliches |
Speaker CV: Wird über ein Anfrageformular auf der Über-mich-Seite angefordert (Name, E-Mail, Nachricht) und automatisch per Mail mit PDF-Anhang versandt. Lege die Datei unter
public/resources/speaker-cv-andre-knie.pdfab. |content/meta/stats.yaml| YAML | Key-Facts (Zahlen für Stats-Sektion) | |content/meta/testimonials.yaml| YAML | Kunden-Zitate für den Slider | |content/meta/logos.yaml| YAML | Logo-Liste für die Marquee (light/dark Band) | |content/meta/services.yaml| YAML | Leistungskategorien für Consulting-Seite | |content/meta/speaking.yaml| YAML | Speaking-Ausklappbereiche (Keynotes/Workshops/Panels): Überschrift + mögliche Themen | |content/meta/newsletter.yaml| YAML | Newsletter-Bereich im Footer: LinkedIn-Newsletter-Link + E-Mail-Anmeldung an/aus |
Wie du Content änderst
Testimonial hinzufügen: Öffne content/meta/testimonials.yaml, füge am Ende hinzu:
- quote: "Dein Zitat hier"
name: "Vorname Nachname"
role: "Rolle, Organisation"
Logo hinzufügen: Logo-Datei nach public/logos/ kopieren, dann in content/meta/logos.yaml:
# Unter "light:" für dunkle Logos, unter "dark:" für helle Logos
- name: "Firmenname"
src: "/logos/dateiname.svg"
Neuen Talk/Workshop: Neue Datei in content/talks/mein-talk.yaml:
id: mein-talk-2026
title: "Titel des Vortrags"
description: "Kurzbeschreibung"
format: keynote # oder: workshop, panel
target_audience: [mittelstand, executives]
tags: [ki, transformation]
visibility: primary # oder: secondary (nicht auf Homepage beworben)
events:
- name: "Event-Name"
date: 2026-01-15
location: "Ort"
Neuen Podcast-Episode: Neue Datei in content/podcast/ep-013-titel.yaml
Neue Kniepunkt-Ausgabe: Neue Datei in content/kniepunkt/040-titel.md mit Frontmatter
Visibility
Each content item has a visibility field:
primary(default) — featured on homepage, highlights, CTAssecondary— visible in archives but not actively promoted
Theming
All colors are in src/index.css under :root. Change --accent-color and related variables to retheme the entire site.
Deployment
npm run build # Build static site to dist/
docker compose up -d # Start backend
# Copy dist/ to /opt/andreknie/site/ on server
# Caddy serves static + proxies /api/* to Express
Tech Stack
- Vite 8 + React 19 (JSX)
- react-router-dom v7
- Express 5 (forms only)
- CSS custom properties (no Tailwind)
- Docker + Caddy
- File-based CMS (Markdown + YAML)