` con enlaces separados (sitio, caso, código); las demás siguen siendo un enlace completo (`ProjectCard` en `components/Projects.tsx`, commit `94f0f6a`). Las pruebas de `tests/content.test.ts` añaden: misma estructura en los dos idiomas, ningún texto vacío, ids de proyectos iguales en ambos idiomas, enlaces solo `https`, y que existan las imágenes, íconos y PDF referenciados. ## Idiomas - Español en `/` y inglés en `/en/`: dos páginas estáticas con su propio título, descripción, canonical, `hreflang`, Open Graph, datos estructurados y texto de respaldo. - La URL decide el idioma (`useLocale`, `public/splash.js` y el build usan la misma regla). El botón cambia sin recargar y actualiza la dirección. - `portfolio/netlify.toml` redirige (302) `/` a `/en/`, `/migozz/` a `/en/migozz/`, `/aria/` a `/en/aria/`, `/devpanel/` a `/en/devpanel/` y `/portafolio/` a `/en/portafolio/` solo si el navegador pide inglés o tiene la cookie `nf_lang=en`. El botón de idioma fija esa cookie, que Netlify lee antes que el idioma del navegador. Los rastreadores no mandan idioma y reciben la versión en español. La regla de `/aria/` llegó en `574e51b` y la de `/devpanel/` en `90ff404` y la de `/portafolio/` en `433174c` (ver [dominio y SEO](dominio-y-seo.md)). ## Casos de estudio ### MIGOZZ `/migozz/` y `/en/migozz/` son una segunda entrada de Vite (`portfolio/migozz/index.html`, `src/migozz.tsx`, `src/MigozzPage.tsx`). Tiene portada animada, cifras públicas con su fuente, gráficas (`components/migozz/UserCharts.tsx`), flujo de uso (`Flow.tsx`), problema, funciones, cronología, capturas y el rol de Harol. Usa `motion` para las animaciones. Desde el commit `fc4b004` sigue la identidad actual de la marca: fondo blanco, morado como color principal y fucsia de acento, con contraste AA. - Las gráficas de usuarios solo aparecen con `visible: true` en `migozz-users.json`, para no mostrar cifras inventadas. - `shots` en `migozz.json` está vacío hoy, así que la sección de capturas no aparece. ### Plantilla compartida de los casos Desde el commit `90ff404`, ARIA y DevPanel usan la misma página, y desde `433174c` también el caso del portafolio: `src/CaseStudyPage.tsx`, con los tipos en `src/content/caseStudy.ts` (`CaseCopy`) y los estilos en `src/styles/case-study.css`. Antes eran `AriaPage.tsx` y `aria.css`. MIGOZZ sigue con su página propia. Cada caso tiene: | Pieza | ARIA | DevPanel | Portafolio | | :-- | :-- | :-- | :-- | | HTML (entrada de Vite) | `portfolio/aria/index.html` | `portfolio/devpanel/index.html` | `portfolio/portafolio/index.html` | | Entrada de React | `src/aria.tsx` | `src/devpanel.tsx` | `src/portafolio.tsx` | | Textos (es y en) | `src/content/data/aria.json` | `src/content/data/devpanel.json` | `src/content/data/portafolio.json` | | Carga y validación | `src/content/aria.ts` | `src/content/devpanel.ts` | `src/content/portafolio.ts` | | Textos SEO (`seo.json`) | `ariaPages` | `devpanelPages` | `portafolioPages` | Los textos de cada caso se editan en el admin. La entrada solo monta ``. El título de pestaña es el mismo de los resultados de búsqueda (`seo.json` → `ariaPages`, `devpanelPages` o `portafolioPages`). No usa `motion` ni pantalla de carga. Secciones de la plantilla, en orden: portada, cifras con su nota de contexto, problema y solución, capturas, la arquitectura como dos líneas de metro con su estación de transbordo, decisiones, lo que se rompió, la parte de Harol, lo que falta y el stack. Tres campos de `CaseCopy` son opcionales: - `links`: botones en la portada (etiqueta, enlace y nombre del evento de Umami). - `shotsTitle` y `shots`: capturas bajo `public/`; la plantilla usa también la variante `-480.webp` que está al lado. Sin capturas, la sección no aparece. - `teamNote`: quién hizo qué, cuando el proyecto fue de equipo. ARIA la tiene; DevPanel y Portafolio no. Agregar un caso nuevo exige también su entrada en la capa SEO (ver [dominio y SEO](dominio-y-seo.md)). ### ARIA `/aria/` y `/en/aria/` (commit `b9d13b1`). ARIA es un asistente de soporte SAP hecho en equipo para Arix Group. Sus dos líneas de metro son la consulta y la ingesta diaria. Su regla de contenido, recordada en el editor: solo cifras medidas y nada de IDs de AWS, URLs internas ni nombres del equipo. ### DevPanel `/devpanel/` y `/en/devpanel/` (commit `90ff404`). DevPanel es una app de escritorio de código abierto de Harol, para Windows: repos de GitHub, proyectos locales y herramientas en un panel con entrada por rostro. Su página tiene enlaces en la portada al código y a la descarga (eventos `devpanel-code` y `devpanel-download`), tres capturas (`shots/devpanel.webp`, `devpanel-lock.webp`, `devpanel-tools.webp`) y dos líneas de metro: instalación y uso diario. No tiene nota de equipo. Su regla de contenido: solo cifras que se puedan comprobar en el repositorio de DevPanel. Las capturas salen de las pruebas e2e del propio DevPanel, con datos de prueba (mensaje del commit `06a3e2b`). Están directamente en `portfolio/public/shots/`, cada una con su variante `-480.webp`. ### Portafolio `/portafolio/` y `/en/portafolio/` (commit `433174c`). Es el caso de estudio de este mismo sitio, tratado como producto: admin propio, workflows de GitHub Actions, Lighthouse y accesibilidad exigidos en cada cambio. Sus dos líneas de metro son «Cada cambio» y «Solo, sin tocarlo» (en inglés, «Every change» y «On its own»): lo que pasa con un commit y lo que corre programado. No tiene nota de equipo. Este repositorio es privado, pero desde `5795692` el código del sitio se lee en el espejo público `DevCat-HGS/hgsportafolio` (ver [CI/CD](ci-cd.md)). La portada del caso tiene dos botones: «Ver el código», hacia el espejo (evento `code-portafolio`), y «Leer la documentación técnica», hacia `https://docs.hgsportafolio.site` (evento `portafolio-docs`). El texto de respaldo sigue enlazando a la documentación y el JSON-LD suma el espejo en `sameAs`. El mismo commit cambió el bloque «Un admin con dos llaves» por «Un admin privado» (se entra con dos factores y su código no se publica) y quitó de «Lo que falta» el repositorio público, que ya existe. Su regla de contenido: solo cifras que se puedan comprobar en este repositorio o en su documentación. Las cifras del texto (número de workflows, de pruebas) se actualizan a mano en `portafolio.json`, `projects.json` y `seo.json`. Tiene tres capturas: `shots/portafolio.webp` (la portada), `portafolio-case.webp` (un caso de estudio) y `portafolio-docs.webp` (esta documentación), cada una con su variante `-480.webp`. Están directamente en `portfolio/public/shots/`, sin original en `images/`: son capturas del sitio local y de `docs.hgsportafolio.site`, y el repositorio no guarda el script que las tomó, así que al cambiar el diseño hay que rehacerlas a mano. ### Tarjeta de ARIA La tarjeta de ARIA en `projects.json` se corrigió el mismo día: dice S3 Vectors en vez de OpenSearch (que el proyecto no usó), cambia el resultado «Escalamiento humano incluido» (que no se construyó) por un tiempo de respuesta medido, describe la parte de Harol en el equipo y enlaza al caso con `case: "aria"`. OpenSearch también salió del stack del sitio (`stack.json`, el texto de `site.json` y su ícono) en el commit `8bbfdbf`. ## Sección Proyectos: propios y para clientes Desde el commit `e88c874` (2026-10-22), `src/components/Projects.tsx` divide la sección 05 en dos subsecciones, bajo el encabezado común (`selectedEyebrow`, `selectedTitle` y `selectedLead` en `site.json`; la introducción habla de dos productos propios y ocho proyectos para clientes e instituciones, y esas cifras se escriben a mano): | Subsección | Textos en `site.json` | Qué entra | Cómo se ve | | :-- | :-- | :-- | :-- | | Proyectos propios | `ownTitle` y `ownLead` | Los proyectos con `own: true`, en el orden de `projects.json` | Una franja oscura por proyecto (`OwnProject`). Si no hay ninguno, la subsección no aparece. | | Para clientes e instituciones | `clientTitle` | El resto | La cuadrícula de tarjetas (`ProjectCard`): los `featured` siempre y los demás tras «Ver más proyectos». | Antes DevPanel tenía, además de su tarjeta, una franja suelta después de Proyectos (`SideProject.tsx`, con sus textos en la clave `sideProject` de `site.json`). Ese componente y esa clave se borraron, así que DevPanel ya no sale dos veces. `downloadLabel` pasó a ser una clave de primer nivel de `site.json`. ### Franja de proyecto propio `OwnProject` (en `Projects.tsx`; estilos en `src/styles/own-project.css`, que antes se llamaba `side-project.css`) arma cada franja con los datos del proyecto en `projects.json`: - Etiqueta (`tag`), título (`title`) y descripción (`dek`). - Los puntos destacados (`points`), si los hay. - Botones: «Ver el caso completo» si hay `case`, «Ver código» si hay `code` y «Descargar para Windows» si hay `download`. - Las tecnologías (`stack`) y la captura (`shot`, con su variante `-480.webp`). La franja no muestra el campo `result`. Cada una lleva el id `own-`. En escritorio (desde 960 px) la segunda franja pone la captura a la izquierda, para que las dos no se lean como copias (comentario de `own-project.css`, regla `:nth-child(even)`). Las letras de línea de metro de las tarjetas se calculan solo sobre la lista de clientes: los proyectos propios no gastan letras y cada tarjeta conserva la suya al desplegar «Ver más». ### Altura estimada de la sección Las secciones usan `content-visibility` con un estimado de altura de 1600 px (`src/styles/layout.css`). Con las franjas, Proyectos mide mucho más: con ese estimado el contenido de abajo se corría al pintarse y axe medía Credenciales sobre una franja oscura que ya no estaba ahí, lo que daba un fallo de contraste en e2e. Por eso `#selected` tiene `contain-intrinsic-size: auto 4600px` en móvil y `auto 3500px` desde 960 px. Si se agregan más proyectos propios, hay que subir esos valores. ### DevPanel en Proyectos DevPanel entró a `projects.json` como proyecto destacado en `06a3e2b` (el mensaje del commit explica por qué: es el código público más sólido de Harol), con la captura `shots/devpanel.webp` y su código (`code`); su caso (`case: "devpanel"`) llegó en `90ff404`. Desde `e88c874` es el primero de la lista, con `own: true`, tres puntos por idioma y `download` hacia el release `installer`. Sale como la primera franja de «Proyectos propios», con los tres botones. ### El portafolio en Proyectos La entrada `portafolio` («Este portafolio» / «This portfolio») llegó en `433174c`, con la captura `shots/portafolio.webp` y `case: "portafolio"`. Desde `e88c874` va segunda, con `own: true` y tres puntos por idioma. No tiene `href` ni `download`; desde `5795692` tiene `code` hacia el espejo público, así que su franja muestra el caso y el código. Las cifras de sus puntos (número de workflows y de pruebas) se escriben a mano. ## Imágenes Los originales van en `portfolio/images//` y `npm run images` (`scripts/images.mjs`, con `sharp`) escribe los WebP en `public/`: | Carpeta de originales | Salida | | :-- | :-- | | `images/shots/` | `public/shots/.webp` (960 px) y `-480.webp` | | `images/credentials/` | `public/credentials/.webp` (1100 px), `thumb/.webp` (560) y `thumb/-360.webp` | | `images/migozz/` | `public/migozz/.webp` (780 px) | | `images/portrait/` | `public/portrait/.webp` (cuadrado, hasta 600 px) | Los certificados (fotos de celular) pasan antes por un filtro de mediana. Los presupuestos de peso están en `tests/assets.test.ts`. El build de Netlify corre `npm run images` antes de compilar, así una imagen subida desde el admin se sirve aunque el commit del workflow `Images` aún no haya llegado. `src/lib/asset.ts` arma rutas absolutas desde la raíz, porque la página en inglés vive un nivel más abajo. La tarjeta para compartir (`public/og.png`) se genera desde `scripts/og-template.html`. ## Formulario de contacto `ContactForm.tsx` envía JSON a `https://admin.hgsportafolio.site/api/contact` (`src/lib/endpoints.ts`). El portafolio no tiene funciones de Netlify propias: guardar el mensaje y enviar los correos lo hace el admin. Además de nombre, correo y mensaje, manda el idioma de la página, un campo trampa invisible (`website`) y el tiempo de llenado (`elapsed`). La CSP permite esa conexión (`seo/headers.ts`). ## Analítica Umami Cloud, sin cookies, por eso no hace falta aviso de consentimiento (comentario de `seo/headers.ts`). Está apagada mientras `VITE_UMAMI_WEBSITE_ID` esté vacía. Con un valor, el build agrega el script de `cloud.umami.is` con `data-domains` del dominio de producción, así los previews y `localhost` no cuentan (`vite.config.ts`), y la CSP abre los orígenes de Umami. Eventos que ya se registran (atributos `data-umami-event` y llamadas a `umami.track`): | Evento | Dónde | Cuándo | | :-- | :-- | :-- | | `cv-download` | `Socials.tsx` | Clic en descargar el CV. | | `social-` | `Socials.tsx` | Clic en una red social (nombre de la red en minúsculas). | | `project-` | `Projects.tsx` | Clic en un proyecto con enlace. | | `case-` | `Projects.tsx` | Clic en «Ver el caso completo» de una tarjeta o de una franja de proyecto propio (`case-devpanel`, `case-portafolio`). | | `code-` | `Projects.tsx` | Clic en «Ver código» de una tarjeta o de una franja (en DevPanel, `code-devpanel`). | | `-download` | `Projects.tsx` (franja `OwnProject`) | Clic en la descarga de un proyecto propio. Hoy solo `devpanel-download`. | | `code-devpanel`, `devpanel-download` | Portada del caso DevPanel (`devpanel.json` → `links`) | Clic en el código o en la descarga desde la página del caso. | | `code-portafolio`, `portafolio-docs` | Portada del caso Portafolio (`portafolio.json` → `links`) | Clic en «Ver el código» o en «Leer la documentación técnica». | | `migozz-play`, `migozz-appstore` | `Startup.tsx` | Clic en Google Play o App Store de MIGOZZ. | | `migozz-case` | `Startup.tsx` | Clic en el botón al caso de MIGOZZ. | | `contact` | `ContactForm.tsx` | Clic en enviar el formulario. | | `contact-sent` | `ContactForm.tsx` | El mensaje se envió bien (`window.umami.track`). | Desde `0ba3fdf` el código de DevPanel cuenta con un solo nombre, `code-devpanel`, en la franja y en la página del caso (antes la página mandaba `devpanel-code`). La descarga usa `devpanel-download` en los dos lugares. El resumen semanal sigue mostrando legible el nombre viejo, para las semanas anteriores. `umamiId()` (`seo/headers.ts`) extrae de la variable solo el UUID, así que un fragmento `