mitchelljrpalmer/portfolio-website

Site Portfolio — Compétence de Maintenance

Ceci est le portfolio personnel de Mitchell Palmer : une reconstruction Next.js 16 (App Router) d'un ancien site Webflow. Le contenu réside sous forme de fichiers TypeScript/JSON/MDX dans src/content/ plutôt que dans un CMS. Lisez ceci avant d'effectuer des modifications pour respecter les conventions existantes plutôt que d'introduire de nouveaux motifs.

Modèle mental

src/content/    → DONNÉES      (quoi dire — modifiez ceci pour presque tout)
src/app/        → PAGES        (routage — un dossier = une URL, conventions App Router)
src/components/ → ÉLÉMENTS UI  (réutilisables — Header, Footer, ProjectCard, PhotoGallery, embeds MDX)
public/images/  → ressources statiques, organisées par section (site/, projects/, projects/hero/, photography/, icons/)

Si la tâche consiste à "ajouter/modifier du contenu" (un projet, un emploi, une ligne de biographie, une photo), elle concerne presque certainement uniquement src/content/. Ne touchez pas à src/app/ ou src/components/ pour des modifications de contenu pur.

Référence des fichiers de contenu

Fichier	Contrôle
src/content/site.ts	Nom, slogan, email, liens de navigation, liens sociaux
src/content/about.ts	Paragraphes de biographie, histoire "parcours", déclaration de mission, statut
src/content/experience.ts	Historique professionnel (experience[]), éducation, liste de compétences, cartes de services
src/content/photography.json	Tableau de { src, season, location, type } — les boutons de filtre sur /photography sont auto-générés à partir des valeurs qui apparaissent ici
src/content/projects.ts	Logique uniquement (lit les fichiers .mdx de projects/) — ne modifiez pas sauf pour changer la façon dont les projets sont chargés/triés
src/content/projects/*.mdx	Un fichier par projet. Frontmatter + corps Markdown/MDX. Le nom du fichier = slug d'URL.

Format du frontmatter des projets MDX

---
title: "Titre du Projet"
description: "1-2 phrases, affichées sur la carte + en haut de la page de détail."
image: "/images/projects/thumbnail.jpg"
heroImage: "/images/projects/hero/banner.jpg"   # optionnel, utilise `image` par défaut
featured: true                                    # s'affiche sur la page d'accueil
link: { label: "Dépôt GitHub", href: "https://..." }
skills: ["Compétence Un", "Compétence Deux"]
tools: ["Python", "PostgreSQL"]
# OU, pour les projets avec de nombreuses technologies, utilisez techGroups à la place de skills/tools :
techGroups:
  Langages et bibliothèques: ["Python", "pandas"]
  Méthodes statistiques: ["CUSUM", "Analyse Z-Score"]
---

Remarque : ProjectCard.tsx affiche project.tools ?? project.skills (tools a priorité si les deux existent). techGroups est mutuellement exclusif avec skills/tools dans l'affichage — la barre latérale de la page de détail affiche l'un ou l'autre, pas les deux.

Deux composants MDX personnalisés sont disponibles dans le corps de tout projet :

<DashboardEmbed src="https://votre-app.streamlit.app/" title="Mon Tableau de Bord" />
<PdfEmbed src="/chemin/vers/resume.pdf" />

Conventions de style

• Tailwind v4, variables CSS définies dans src/app/globals.css sous :root (par ex. --color-brand: #486161). Modifiez la palette là-bas, pas en codant en dur des valeurs hexadécimales dans les composants.
• Deux polices : --font-serif (Merriweather, titres) et --font-sans (Inter Tight, corps) — toutes deux chargées via next/font/google dans layout.tsx. Nécessite un accès Internet au moment de la construction — échouera dans des environnements hors ligne/sandboxés.
• La classe utilitaire .container-page gère une largeur maximale et un padding cohérents sur toutes les pages.

À NE PAS TOUCHER

• node_modules/ — ignoré par git, régénéré via npm install. Ne le remettez jamais dans git.
• AGENTS.md à la racine du dépôt — auto-régénéré par next dev, informe les agents IA sur les conventions spécifiques de cette version de Next.js. Ne modifiez pas à la main ; il sera écrasé.
• CLAUDE.md à la racine du dépôt — actuellement juste @AGENTS.md (une importation). Si vous ajoutez des instructions personnalisées permanentes, placez-les dans un nouveau fichier et référencez-le séparément, n'écrasez pas l'importation AGENTS.md.
• next-env.d.ts — auto-généré, ignoré par git.

Tâches courantes, référence rapide

Nouveau projet → miniature dans public/images/projects/ (+ bannière héro optionnelle) → nouveau fichier .mdx dans src/content/projects/ → terminé, aucun code de routage nécessaire.

Nouvelle photo → fichier dans public/images/photography/ → entrée correspondante dans photography.json.

Modifier biographie/mission → src/content/about.ts, modifications de chaînes simples.

Nouvelle entrée d'emploi → src/content/experience.ts, ajouter au début du tableau experience[] (affiché dans l'ordre du tableau, donc le plus récent en premier).

Modification de lien de navigation/social → src/content/site.ts.

Construction et vérification

npm install       # après avoir récupéré des modifications touchant package.json
npm run dev        # serveur de développement local, rechargement à chaud
npm run build       # construction de production — exécutez ceci avant de pousser des modifications structurelles
npm run lint        # vérification eslint

npm run build échouera sans accès Internet (récupération de Google Fonts) — ceci est attendu dans des environnements entièrement hors ligne et n'est pas un bogue de code.