mitchelljrpalmer/portfolio-website

Sitio Portfolio — Skill de Mantenimiento

Este es el portfolio personal de Mitchell Palmer: una reconstrucción en Next.js 16 (App Router) de un sitio anterior en Webflow. El contenido vive como archivos TypeScript/JSON/MDX bajo src/content/ en lugar de un CMS. Lee esto antes de hacer cambios para que coincidas con las convenciones existentes en lugar de introducir nuevos patrones.

Modelo mental

src/content/    → DATOS        (qué decir — edita esto para casi todo)
src/app/        → PÁGINAS      (enrutamiento — una carpeta = una URL, convenciones de App Router)
src/components/ → PIEZAS DE UI (reutilizables — Header, Footer, ProjectCard, PhotoGallery, embebidos MDX)
public/images/  → activos estáticos, organizados por sección (site/, projects/, projects/hero/, photography/, icons/)

Si la tarea es "agregar/editar contenido" (un proyecto, un trabajo, una línea de biografía, una foto), casi con certeza solo toca src/content/. No toques src/app/ ni src/components/ para cambios de contenido puro.

Referencia de archivos de contenido

Archivo	Controla
src/content/site.ts	Nombre, eslogan, correo electrónico, enlaces de navegación, enlaces sociales
src/content/about.ts	Párrafos de biografía, historia "viaje", declaración de misión, estado
src/content/experience.ts	Historial laboral (experience[]), educación, lista de habilidades, tarjetas de servicios
src/content/photography.json	Array de { src, season, location, type } — los botones de filtro en /photography se generan automáticamente a partir de los valores que aparecen aquí
src/content/projects.ts	Solo lógica (lee archivos .mdx de projects/) — no edites a menos que cambies cómo se cargan/ordenan los proyectos
src/content/projects/*.mdx	Un archivo por proyecto. Frontmatter + cuerpo Markdown/MDX. Nombre de archivo = slug de URL

Forma del frontmatter de proyecto MDX

---
title: "Título del Proyecto"
description: "1-2 oraciones, mostradas en la tarjeta + en la parte superior de la página de detalle."
image: "/images/projects/thumbnail.jpg"
heroImage: "/images/projects/hero/banner.jpg"   # opcional, retrocede a `image`
featured: true                                    # se muestra en la página de inicio
link: { label: "Repositorio de GitHub", href: "https://..." }
skills: ["Habilidad Uno", "Habilidad Dos"]
tools: ["Python", "PostgreSQL"]
# O, para proyectos con muchas tecnologías, usa techGroups en lugar de skills/tools:
techGroups:
  Lenguajes y Bibliotecas: ["Python", "pandas"]
  Métodos Estadísticos: ["CUSUM", "Análisis Z-Score"]
---

Nota: ProjectCard.tsx muestra project.tools ?? project.skills (tools tiene prioridad si ambos existen). techGroups es mutuamente excluyente con skills/tools en la visualización — la barra lateral de la página de detalle muestra uno u otro, no ambos.

Dos componentes MDX personalizados están disponibles dentro de cualquier cuerpo de proyecto:

<DashboardEmbed src="https://your-app.streamlit.app/" title="Mi Dashboard" />
<PdfEmbed src="/path/to/summary.pdf" />

Convenciones de estilo

• Tailwind v4, variables CSS definidas en src/app/globals.css bajo :root (por ejemplo, --color-brand: #486161). Cambia la paleta allí, no codificando valores hex en componentes.
• Dos fuentes: --font-serif (Merriweather, encabezados) y --font-sans (Inter Tight, cuerpo) — ambas cargadas mediante next/font/google en layout.tsx. Requiere acceso a internet en tiempo de compilación — fallará en entornos offline/en entornos aislados.
• La clase de utilidad .container-page maneja el ancho máximo consistente y el padding en todas las páginas.

NO tocar

• node_modules/ — ignorado por git, regenerado mediante npm install. Nunca lo vuelvas a agregar a git.
• AGENTS.md en la raíz del repositorio — auto-regenerado por next dev, informa a los agentes de IA sobre las convenciones específicas de esta versión de Next.js. No lo edites a mano; será sobrescrito.
• CLAUDE.md en la raíz del repositorio — actualmente solo @AGENTS.md (una importación). Si necesitas agregar instrucciones personalizadas persistentes, ponlas en un nuevo archivo y refiérelo por separado, no sobrescribas la importación de AGENTS.md.
• next-env.d.ts — auto-generado, ignorado por git.

Tareas comunes, referencia rápida

Nuevo proyecto → miniatura en public/images/projects/ (+ banner hero opcional) → nuevo archivo .mdx en src/content/projects/ → listo, no se necesita código de enrutamiento.

Nueva foto → archivo en public/images/photography/ → entrada coincidente en photography.json.

Editar biografía/misión → src/content/about.ts, ediciones de cadenas simples.

Nueva entrada de trabajo → src/content/experience.ts, anteponer al array experience[] (se renderiza en orden de array, por lo tanto, el más reciente primero).

Cambio de enlace de navegación/social → src/content/site.ts.

Compilación y verificación

npm install       # después de aplicar cambios que tocan package.json
npm run dev        # servidor de desarrollo local, recarga en caliente
npm run build       # compilación de producción — ejecuta esto antes de enviar cambios estructurales
npm run lint        # verificación de eslint

npm run build fallará sin acceso a internet (obtención de Google Fonts) — esto es esperado en entornos completamente offline y no es un error de código.