Web/Portfolio Personal

Resumen

Portfolio personal en Astro 5 que impulsa el rendimiento web, la optimización SEO y una experiencia de usuario cuidada. El sitio agrupa artículos técnicos, proyectos personales y servicios profesionales, añadiendo un buscador instantáneo, un panel de métricas y un conjunto de componentes reutilizables. La arquitectura está pensada para ser rápida, accesible y fácil de mantener.

Contexto

Este proyecto es mi carta de presentación como arquitecto Salesforce y especialista en performance web. La web se despliega en Netlify a partir de una rama main protegida; el flujo de trabajo sigue DEV → STAGING → PROD, con revisión en staging mediante autenticación y pruebas automatizadas. El repo sigue SemVer y cada versión se documenta mediante notas de lanzamiento públicas. Las guías de marca se respetan en cada iteración, con modo oscuro por defecto y paleta Charcoal/Sand/Teal

Stack

• Astro 5 como framework principal, con rutas estáticas y colecciones de contenido tipadas.
• MDX para posts y páginas enriquecidas.
• TypeScript en todo el código.
• Tailwind CSS 4 y archivos de tokens CSS para colores y espaciados consistentes.
• Netlify para el despliegue (build, Edge Functions y Netlify Functions).
• Netlify Functions para formularios de contacto y recolección de RUM.
• Core Web Vitals y Real User Monitoring mediante script rum-core-web-vitals.ts y panel /metrics/rum.
• Playwright y Lighthouse CI para pruebas end‑to‑end y presupuestos de rendimiento.
• GitHub Actions con workflows segmentados para linting, typecheck, tests unitarios, e2e, Lighthouse y revisiones editoriales.

Resultados (v0.4.1)

• Diseño coherente con la guía de marca: tipografías, espaciados y color.
• UX de contenido: blog con etiquetas, página de tags y tarjetas legibles.
• Legal: Aviso legal, Privacidad, Cookies y Términos publicados.
• DevOps: STAGING con login, despliegues automáticos y PR previews.

Resultados (v0.1.1)

• Sitio navegable y rápido.
• Flujo de versiones automatizado (dev → rc → release).
• Base lista para escalar diseño y contenido.

Resultados (v1.0.10)

• Arquitectura escalable: migración a Astro v4 y adopción de content collections tipadas, con utilidades de contenido reutilizables.
• Diseño modular: nuevo sistema de diseño con tokens y componentes (Hero, ProjectCard, PostCard) que unifican la experiencia visual.
• Blog paginado: navegación organizada con páginas numeradas y páginas de etiquetas con slugificación coherente.
• SEO avanzado: meta canonical, OG/Twitter tags y JSON‑LD para posts; estructura de enlaces amigable y botón “Volver” para mejorar la navegación.
• Accesibilidad y UX: colores y contraste revisados, jerarquías de encabezados lógicas y navegación con teclado optimizada.

Resultados (v2.16.0)

• Cumplimiento y privacidad: implementación de un banner de cookies con gestión granular (analítica y marketing), integración de reCAPTCHA en formularios y actualización de políticas legales.
• Performance y pruebas: se añaden tests end‑to‑end con Playwright y presupuestos de rendimiento con Lighthouse CI en GitHub Actions, además de un script RUM para monitorizar Core Web Vitals en producción.
• UX y accesibilidad: nuevos componentes Callout, FolderTree y QuoteHighlight enriquecen el blog; mejor distribución del contenido y botón para configurar cookies desde el footer; mejoras de contraste y navegación.
• SEO y contenido: migración al dominio canónico adrianmariscal.es, actualización de metadatos y canonical; optimización de imágenes y autogeneración de enlaces en encabezados gracias a remark/rehype; reorganización de artículos y etiquetas.
• Arquitectura y DevOps: refactor de Edge Functions para login protegido en staging, variables de entorno seguras y adopción de GitHub Actions como pipeline principal.

Resultados (v3.55.6)

• Búsqueda instantánea: se añade un buscador en /search que indexa posts, proyectos y páginas, facilitando el acceso a contenidos.
• Nuevas páginas: se incorporan secciones de Sobre mí y Servicios que describen mi trayectoria y las soluciones que ofrezco.
• UI Kit modular: implementación de componentes accesibles (botones, tarjetas, badges, inputs, alertas) basados en tokens de diseño; mejora de consistencia y reusabilidad.
• Métricas RUM integradas: panel /metrics/rum para consultar Core Web Vitals y latencias reales; envío opcional a endpoint propio según preferencias de cookies.
• Flujo DevOps maduro: workflows separados en GitHub Actions para lint, typecheck, unit tests, pruebas e2e y auditorías de rendimiento; CI se ejecuta en ramas dev, staging y main:.
• Despliegue optimizado: configuración de Netlify con redirecciones SEO, cabeceras de seguridad, plugin Lighthouse y protección de staging mediante Edge Functions.
• Contenido ampliado: más de 25 artículos técnicos publicados en MDX, con imágenes localizadas y enlaces automáticos; mejora de SEO mediante meta tags, OG/Twitter y JSON‑LD.

Roadmap corto

• PWA y offline: habilitar capacidades de aplicación web progresiva, con caché de assets y carga sin conexión.
• Analítica avanzada: explorar integración con paneles de FinOps o dashboards para visualizar costes de nube y rendimiento.
• Pruebas de accesibilidad: ampliar la cobertura de a11y usando herramientas como Axe y automatizar informes en la CI.