mitchelljrpalmer/portfolio-website

Portfolio-Seite – Wartungs-Skill

Dies ist Mitchell Palmers persönliches Portfolio: ein Neubau der ehemaligen Webflow-Seite mit Next.js 16 (App Router). Der Inhalt liegt als einfache TypeScript/JSON/MDX-Dateien unter src/content/ statt in einem CMS. Lies dies, bevor du Änderungen vornimmst, damit du die bestehenden Konventionen einhältst und keine neuen Muster einführst.

Mentales Modell

src/content/    → DATEN       (was gesagt werden soll – für fast alles bearbeiten)
src/app/        → SEITEN      (Routing – ein Ordner = eine URL, App Router-Konventionen)
src/components/ → UI-TEILE    (wiederverwendbar – Header, Footer, ProjectCard, PhotoGallery, MDX-Einbettungen)
public/images/  → statische Assets, nach Bereich organisiert (site/, projects/, projects/hero/, photography/, icons/)

Wenn die Aufgabe darin besteht, Inhalte hinzuzufügen/zu bearbeiten (ein Projekt, ein Job, eine Biografiezeile, ein Foto), betrifft dies fast ausschließlich src/content/. Für reine Inhaltsänderungen src/app/ oder src/components/ nicht anfassen.

Referenz der Inhaltsdateien

Datei	Steuert
src/content/site.ts	Name, Tagline, E-Mail, Navigationslinks, Social-Media-Links
src/content/about.ts	Biografie-Absätze, "Werdegang"-Geschichte, Leitbild, Status
src/content/experience.ts	Berufserfahrung (experience[]), Ausbildung, Fähigkeitenliste, Leistungskarten
src/content/photography.json	Array von { src, season, location, type } – die Filterbuttons auf /photography werden automatisch aus den hier vorkommenden Werten generiert
src/content/projects.ts	Nur Logik (liest .mdx-Dateien aus projects/) – nicht bearbeiten, es sei denn, du änderst die Art, wie Projekte geladen/sortiert werden
src/content/projects/*.mdx	Eine Datei pro Projekt. Frontmatter + Markdown/MDX-Text. Dateiname = URL-Slug.

Frontmatter-Struktur für Projekt-MDX

---
title: "Projekt-Titel"
description: "1-2 Sätze, werden auf der Karte und oben auf der Detailseite angezeigt."
image: "/images/projects/thumbnail.jpg"
heroImage: "/images/projects/hero/banner.jpg"   # optional, fallback auf `image`
featured: true                                    # wird auf der Startseite angezeigt
link: { label: "GitHub Repository", href: "https://..." }
skills: ["Fähigkeit Eins", "Fähigkeit Zwei"]
tools: ["Python", "PostgreSQL"]
# ODER, für Projekte mit vielen Technologien, stattdessen techGroups verwenden:
techGroups:
  Sprachen & Bibliotheken: ["Python", "pandas"]
  Statistische Methoden: ["CUSUM", "Z-Score-Analyse"]
---

Hinweis: ProjectCard.tsx zeigt project.tools ?? project.skills an (tools hat Vorrang, falls beide vorhanden sind). techGroups schließt sich gegenseitig mit skills/tools in der Anzeige aus – die Seitenleiste der Detailseite zeigt entweder das eine oder das andere, nicht beides.

Zwei benutzerdefinierte MDX-Komponenten sind innerhalb jedes Projekttextkörpers verfügbar:

<DashboardEmbed src="https://your-app.streamlit.app/" title="Mein Dashboard" />
<PdfEmbed src="/pfad/zu/zusammenfassung.pdf" />

Styling-Konventionen

• Tailwind v4, CSS-Variablen definiert in src/app/globals.css unter :root (z.B. --color-brand: #486161). Ändere die Palette dort, nicht durch hartcodierte Hex-Werte in Komponenten.
• Zwei Schriftarten: --font-serif (Merriweather, Überschriften) und --font-sans (Inter Tight, Fließtext) – beide geladen über next/font/google in layout.tsx. Erfordert Internetzugriff zur Build-Zeit – schlägt in offline/sandboxed-Umgebungen fehl.
• Die .container-page-Utility-Klasse sorgt für konsistente max-width + padding auf allen Seiten.

Nicht anfassen

• node_modules/ – gitignoriert, wird via npm install neu generiert. Niemals wieder zu git hinzufügen.
• AGENTS.md im Repository-Stammverzeichnis – wird automatisch von next dev neu generiert, informiert KI-Agenten über die spezifischen Konventionen dieser Next.js-Version. Nicht von Hand bearbeiten; es wird überschrieben.
• CLAUDE.md im Repository-Stammverzeichnis – enthält derzeit nur @AGENTS.md (einen Import). Wenn du dauerhafte benutzerdefinierte Anweisungen hinzufügen möchtest, lege sie in einer neuen Datei ab und referenziere sie separat, überschreibe nicht den AGENTS.md-Import.
• next-env.d.ts – automatisch generiert, gitignoriert.

Häufige Aufgaben, Kurzreferenz

Neues Projekt → Thumbnail in public/images/projects/ (+ optionales Hero-Banner) → neue .mdx-Datei in src/content/projects/ → fertig, kein Routing-Code erforderlich.

Neues Foto → Datei in public/images/photography/ → passender Eintrag in photography.json.

Biografie/Leitbild bearbeiten → src/content/about.ts, einfache String-Änderungen.

Neuer Berufseintrag → src/content/experience.ts, dem experience[]-Array voranstellen (wird in Array-Reihenfolge gerendert, also neueste zuerst).

Navigations-/Social-Media-Link ändern → src/content/site.ts.

Build & Überprüfung

npm install       # nach dem Pull von Änderungen, die package.json betreffen
npm run dev        # lokaler Entwicklungsserver, Hot Reload
npm run build       # Produktions-Build – vor dem Pushen struktureller Änderungen ausführen
npm run lint        # ESLint-Prüfung

npm run build wird ohne Internetzugriff fehlschlagen (Google Fonts-Abruf) – dies ist in vollständig offline Umgebungen zu erwarten und kein Code-Fehler.