Visión general

jaime-gaming.com es el sitio personal de Jaime Gaming, publicado con Cloudflare Pages. La documentación que estás leyendo es una sección suya, en /docs/: comparte dominio, repositorio, despliegue, cabecera y pie, y hereda su estética —paleta, tipografías, animaciones y estructura de componentes—.

Qué incluye

• Diseño oscuro adaptable a móvil, con perfil en directo, tarjetas visuales y animaciones; respeta la preferencia de movimiento reducido.
• Interfaz en español e inglés.
• Lista de repositorios públicos de la cuenta jaime-gaming, incluidos los forks. No se muestran repositorios de organizaciones. Los datos se actualizan cada diez minutos.
• Página de detalle por repositorio, con enlaces al proyecto y lectura de su README cuando está disponible.
• Calendario de contribuciones diario, navegable con teclado y seleccionable con toque.
• Estado y actividad de Discord mediante Lanyard.
• Blog generado desde Markdown. El build también elimina las páginas de posts que ya no tienen fuente.

Estructura

content/                    # Fuentes editables
  home.fragment.html        # Secciones de inicio
  projects.fragment.html    # Listado de proyectos
  contact.fragment.html     # Contacto compartido entre inicio y /contact/
  404.fragment.html         # Página de error y detalle de proyectos
  blog/*.md                 # Posts en Markdown
scripts/
  layout.mjs                # Plantilla HTML compartida
  build.mjs                 # Genera páginas estáticas y limpia posts obsoletos
assets/css/style.css        # Estilos
assets/js/i18n.js           # Textos ES/EN
assets/js/main.js           # Sincronización, calendario y presencia
index.html, projects/, blog/, contact/   # Páginas generadas; no editar a mano

La regla importante: content/ y scripts/ se editan; el resto se genera. Las páginas index.html, projects/, blog/ y contact/ se sobrescriben en cada build.

La paleta que hereda esta documentación

Todo el sistema de diseño vive en assets/css/style.css, en las variables de :root:

:root {
  color-scheme: dark;
  --bg: #0d100d;
  --surface: #151915;
  --surface-raised: #1d231c;
  --text: #edf0e8;
  --text-dim: #adb5a7;
  --text-faint: #8b9584;
  --accent: #c8eb85;
  --border: #30382c;
  --font: "DM Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", var(--font);
  --font-mono: "IBM Plex Mono", monospace;
  --maxw: 1040px;
  --nav-height: 72px;
}

Las tres tipografías tienen un papel fijo:

El sistema de movimiento

Todas las animaciones están dentro de @media (prefers-reduced-motion: no-preference) y hay un bloque reduce que las desactiva todas:

@media (prefers-reduced-motion: no-preference) {
  a, button { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
  .reveal.in-view { animation: reveal-in 400ms ease both; }
  .hero__typed::after { animation: caret 1s steps(2, start) infinite; }
  @keyframes reveal-in { from { transform: translateY(6px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

El revelado por scroll lo hace un IntersectionObserver con umbral 0.08, que añade .in-view una sola vez y deja de observar el elemento.

Cómo se relaciona con esta documentación

La documentación ya no es un sitio aparte. Vive en el mismo repositorio, se genera en el mismo build y se publica bajo el mismo dominio; lo que conserva es su generador propio, porque una guía necesita sidebar, índice lateral y buscador que una portada no tiene.

El conmutador de idioma funciona igual en las dos zonas: la preferencia se guarda en la misma clave lang de localStorage, así que el idioma elegido en la portada se mantiene al entrar en /docs/ y al revés.

Licencia

El código del sitio se publica bajo licencia ISC, declarada en su package.json. El repositorio no incluye un fichero LICENSE propio: los únicos textos de licencia que trae son los de las librerías de terceros que se agrupan en assets/vendor/ (Marked, DOMPurify, Lucide y Simple Icons), y esas conservan las suyas.

Seguir leyendo en el repositorio

Esta guía resume y ordena. Esto es lo que hay en el repositorio, con sus tamaños reales, por si quieres ir a la fuente.

Recorrido de la guía

• Build y preview — generar el sitio, servirlo en local y las comprobaciones.
• Editar el contenido — añadir un post y cambiar textos de la interfaz.
• Los dos idiomas — el diccionario, los atributos, el conmutador y el retecleo.
• Arquitectura del sitio — datos de GitHub, calendario, Lanyard, READMEs y SEO.