Caso de estudio · Arquitectura de portfolio
Sistema SEO e i18n para portfolio
Una arquitectura de portfolio pensada para recruiters, motores de búsqueda, tecnologías de asistencia y crawlers de IA. El trabajo convirtió páginas localizadas, casos de estudio, schema, navegación y descubrimiento de contenido en un sistema estático coherente.
Prueba del proyecto
Mi rol
- Definí el modelo de contenido localizado, la estrategia de rutas, la estructura de enlaces internos y la jerarquía de información para recruiters.
- Escribí contenido rastreable para casos de estudio y alineé títulos, descripciones, encabezados, temas de servicio y cuerpos listos para schema.
- Mantuve una arquitectura static-first para que buscadores y tecnologías de asistencia lean el mismo HTML significativo que los usuarios.
Restricciones
- El sitio necesitaba UI consistente en inglés, español y árabe sin crear layouts separados por idioma.
- El contenido localizado debía ser suficientemente completo para indexar, no solo etiquetas traducidas alrededor de texto en inglés.
- La estabilidad de rendimiento y Lighthouse debía mantenerse mientras se añadían más contenido y páginas.
Decisiones clave
- Usé registros localizados tipados para que páginas, tarjetas, rutas y contenido de schema compartan una sola fuente de verdad.
- Enlacé cada caso desde inicio y desde el índice de trabajo para simplificar descubrimiento para usuarios y crawlers.
- Mejoré tipografía RTL y reglas de wrapping en lugar de ocultar contenido largo o reducir el detalle de prueba.
Contexto
Un portfolio debe hacer más que verse pulido. Tiene que ayudar a recruiters a entender el encaje rápidamente, ayudar a buscadores a descubrir cada página importante y permitir que los crawlers extraigan significado estructurado desde HTML estático.
La base existente ya usaba Astro y una capa sólida de metadatos, pero el sitio necesitaba más profundidad localizada, entradas más claras a casos de estudio, una jerarquía más útil para recruiters y relaciones rastreables entre inicio, proyectos, artículos y alternates de idioma.
Problema
Muchos portfolios fallan cuando tratan SEO, i18n, accesibilidad y rendimiento como listas separadas. El resultado puede validar técnicamente, pero sentirse superficial, difícil de navegar o inconsistente entre idiomas.
El reto era mejorar descubrimiento y credibilidad sin añadir JavaScript pesado, inestabilidad visual ni un modelo de UI distinto para cada idioma.
- Los recruiters necesitaban un camino más rápido desde el mensaje principal hasta pruebas, stack, experiencia y casos de estudio.
- Las páginas localizadas necesitaban estructura equivalente, no copias parciales con secciones mezcladas.
- Los casos de estudio necesitaban rol, restricciones, decisiones, resultados y servicios relacionados.
- Los buscadores necesitaban URLs canónicas, alternates, encabezados semánticos y datos estructurados.
Enfoque
La arquitectura se trató como un sistema de contenido, no como páginas separadas. Datos localizados y tipados alimentan tarjetas de inicio, índice de trabajo, rutas dinámicas de casos, metadatos y superficies estructuradas.
La implementación mantiene el contenido importante en HTML renderizado por servidor. El cambio de idioma, encabezados, enlaces, tarjetas y detalles de casos siguen siendo rastreables sin hidratación del cliente.
- Usé registros de contenido tipados para que cada idioma exponga el mismo modelo de página y prueba.
- Mantuve URLs predecibles para casos en inglés, español y árabe.
- Enlacé tarjetas de inicio e índices directamente a páginas de detalle para usuarios y crawlers.
- Usé secciones semánticas, listas, breadcrumbs y tabla de contenidos para facilitar el análisis.
Localización y decisiones RTL
La localización se trató como paridad completa de página, no solo como etiquetas traducidas. Las versiones en español y árabe reciben títulos, descripciones, resúmenes, paneles de prueba, resultados, próximos pasos, servicios y navegación localizados.
La tipografía árabe requiere reglas de espaciado distintas al contenido latino. Las reglas evitan tracking excesivo, preservan el orden lógico de lectura y permiten que términos técnicos largos se partan sin crear overflow horizontal.
- Localicé contenido visible, metadatos, etiquetas accesibles, breadcrumbs y CTA.
- Preservé un único sistema visual mientras se respetan `lang` y `dir`.
- Mantuve términos como Astro, TypeScript, SEO y Core Web Vitals legibles dentro del texto árabe.
- Usé enlaces estáticos y alternates de idioma en lugar de cambios de ruta solo por runtime.
Decisiones de rendimiento y SEO
El sistema prioriza render estático, datos tipados, enlaces internos predecibles y comportamiento mínimo en cliente. Esto mejora la fiabilidad del primer render y hace el sitio entendible para buscadores, herramientas de accesibilidad y crawlers sensibles al idioma.
El modelo de caso de estudio también permite datos estructurados más ricos porque cada página tiene encabezados, secciones, cuerpo de artículo, palabras clave, servicios relacionados y metadatos específicos de idioma.
- Mantuve el contenido de prueba profesional renderizado en el HTML inicial.
- Evité descubrimiento de contenido dependiente solo de JavaScript.
- Alineé títulos, descripciones, H1, secciones y JSON-LD con el mismo tema localizado.
- Mantuve estabilidad visual con espaciados, grids responsive y reglas de movimiento reducido.
Resultados de laboratorio en escritorio
Una prueba de navegación de escritorio con Lighthouse 13.4.1, realizada el 10 de septiembre de 2026, midió la página principal de producción en Chrome 152 con 100 en Rendimiento, Accesibilidad, Buenas prácticas, SEO y Navegación agéntica. Registró FCP de 0,4 segundos, LCP de 0,6 segundos, TBT de 0 milisegundos, CLS de 0 y Speed Index de 0,8 segundos.
La transferencia medida fue de 190 KiB y el tiempo de inicio de scripts se redondeó a 0,0 segundos. Son resultados de una sola prueba de laboratorio en escritorio, no datos de campo, y pueden variar según dispositivo, red, ubicación, estado del navegador y futuras versiones.
- Rendimiento: 100
- Accesibilidad: 100
- Buenas prácticas: 100
- SEO: 100
- Navegación agéntica: 100
- FCP: 0,4 s · LCP: 0,6 s · TBT: 0 ms · CLS: 0 · Speed Index: 0,8 s
- Transferencia: 190 KiB · Lighthouse 13.4.1 · Chrome 152
Resultados
- Un recorrido más claro para recruiters desde resumen inicial hasta pruebas, casos, experiencia y contacto.
- Seis páginas de caso de estudio rastreables por cada idioma soportado con un modelo consistente.
- Superficies SEO localizadas en títulos, descripciones, enlaces internos, datos estructurados y contenido.
- Una arquitectura mantenible donde futuros casos se agregan sin duplicar lógica de páginas.
Próximos pasos
- Agregar datos verificados de Search Console cuando exista suficiente información en producción.
- Publicar diagramas visuales del modelo de contenido y rutas cuando aporten valor a recruiters.
- Seguir ampliando casos con trabajo de producto e ingeniería medible.