Este repo es privado y existe solo para documentar cómo mantener el sitio público (GitHub Pages) sin mezclar documentación interna.

• index.html: home del portafolio. Solo carga CSS/JS y renderiza todo con JavaScript.
• css/:
  • styles.css: estilos principales del sitio
  • reading.css: estilos para lectura de artículos (también aplica al home en algunas secciones)
• js/:
  • content.js: “base de datos” local (proyectos, videos, textos ES/EN, etc.) en window.CONTENT
  • app.js: render + interacción del home (tema, modo, idioma, filtros, contacto)
  • article.js: render de articulo.html (carga Markdown, lo convierte a HTML)
• posts/:
  • index.json: índice/lista de artículos (se usa en el home)
  • articulos/*.md: contenido real de artículos en Markdown por idioma
    • patrón: posts/articulos/<slug>.es.md y posts/articulos/<slug>.en.md
• img/: imágenes del sitio (ej: img/project/*.webp)

• index.html carga:
  • js/content.js → define window.CONTENT
  • js/app.js → lee window.CONTENT, intenta sobrescribir CONTENT.articles con posts/index.json, y renderiza todo dentro de #app
• articulo.html carga js/article.js → lee ?slug=...&lang=... → descarga el .md correspondiente en posts/articulos/ → lo renderiza.

Un artículo tiene 2 partes:

• A) El índice (posts/index.json) para que aparezca en el listado del home
• B) El contenido (posts/articulos/<slug>.<lang>.md)

1. Abre posts/index.json.
2. Agrega un objeto al inicio del array (para que salga primero como “último artículo”).
3. Campos recomendados:
   • slug: identificador único (sin espacios). Ej: "mi-nuevo-articulo"
   • date: "YYYY-MM-DD"
   • tags: array de strings
   • type: "data" o "dev" o "mix" (consistencia visual)
   • available: ["es"] o ["es","en"]
   • title: { "es": "...", "en": "..." }
   • excerpt: { "es": "...", "en": "..." }

Ejemplo:

{
  "slug": "mi-nuevo-articulo",
  "date": "2026-04-25",
  "tags": ["Datos", "Python"],
  "type": "data",
  "available": ["es", "en"],
  "title": { "es": "Título ES", "en": "Title EN" },
  "excerpt": { "es": "Resumen ES", "en": "Excerpt EN" }
}

1. Crea el archivo:
   • Español: posts/articulos/mi-nuevo-articulo.es.md
   • Inglés (opcional): posts/articulos/mi-nuevo-articulo.en.md
2. Estructura recomendada: front-matter + contenido.

Plantilla mínima:

---
title: Título del artículo
excerpt: Una frase corta (opcional)
readingTime: 6 min
---

## Subtítulo

Texto…

- Lista
- Lista

Notas:

• El parser de Markdown de js/article.js soporta lo que usamos: títulos #..####, listas, blockquote, links, negrita, itálica, inline code y bloques code.

Abre:

• articulo.html?slug=mi-nuevo-articulo&lang=es
• articulo.html?slug=mi-nuevo-articulo&lang=en (si existe EN)

Los proyectos viven en js/content.js dentro de window.CONTENT.projects.

Cada proyecto recomendado:

• id: string único
• type: "data" | "dev" | "mix"
• size: "sm" | "md" | "lg" (cambia el tamaño de la tarjeta)
• img: ruta tipo "img/project/mi-proyecto.webp" o null
• title: {es,en}
• desc: {es,en}
• tools: ["Python","SQL",...]

Pasos:

1. Sube la imagen (si aplica) a img/project/ (ideal: .webp).
2. Agrega el objeto al array projects.
3. Revisa en el sitio y usa filtros (Todos/Datos/Dev/Mixto).

Los videos viven en js/content.js dentro de window.CONTENT.videos.

Campos típicos:

• id: ID de YouTube (ej: "dQw4w9WgXcQ")
• external: { channel, url } (si quieres atribución/canal)
• duration: string (puede ser "—")
• date: "YYYY-MM-DD"
• type: "data" | "dev" | "mix"
• title: {es,en}
• description: {es,en}

Pasos:

1. Agrega un objeto al inicio del array videos para que sea el “último video”.
2. Verifica que el thumbnail carga: el home usa https://i.ytimg.com/vi/<id>/hqdefault.jpg.

Los textos UI (menú, títulos, descripciones) están en:

• js/content.js → window.CONTENT.copy.es y window.CONTENT.copy.en

Pasos:

1. Edita el string en ES y su equivalente EN.
2. Prueba cambiando el idioma con el selector “ES/EN” del header.

Carpeta: contact-worker/

Sirve para recibir mensajes del formulario del sitio sin exponer tu email:

• El frontend hace POST al Worker (URL definida en index.html como window.CONTACT_WORKER_URL).
• El Worker crea un Issue en un repo privado (inbox).

Variables secretas del Worker (Cloudflare):

• GH_TOKEN, GH_OWNER, GH_REPO, ALLOW_ORIGIN

Regla de oro:

• Nunca poner tokens en el repo público.

• Existe index.html en la raíz.
• Rutas correctas:
  • css/styles.css, css/reading.css
  • js/app.js, js/content.js, js/article.js
• Artículos:
  • posts/index.json válido (JSON bien formado)
  • Archivos .md existen para cada slug
• No se suben archivos sensibles:
  • ZIPs personales, backups, .env, tokens

1. Cambia archivos (artículos/proyectos/videos).
2. Prueba local.
3. Commit + push al repo público.
4. GitHub Pages despliega automáticamente.