Descripción del Proyecto

Este portfolio representa mi compromiso con construir experiencias web rápidas, accesibles y bien elaboradas. Cada decisión, desde el stack tecnológico hasta la interacción más pequeña, fue tomada pensando en el rendimiento y la experiencia del usuario.

El sitio sirve como vitrina de mi trabajo, blog técnico donde comparto insights sobre desarrollo web, y una sección de recursos útiles para otros desarrolladores.

Rendimiento Primero

Construido con optimización agresiva de rendimiento como principio fundamental:

Core Web Vitals (Diciembre 2025)

• LCP: ~184ms (objetivo: <2.5s) ✅
• FCP: ~271ms (objetivo: <1.8s) ✅
• CLS: 0.00 (objetivo: <0.1) ✅
• TTFB: ~48ms ✅
• Lighthouse Performance: 97/100 desktop, 87/100 mobile

Técnicas de Optimización

• CSS crítico inline: Estilos esenciales cargan inmediatamente (~2KB)
• Precarga de fuentes: Solo 3 variantes críticas (Inter 400/600/700)
• Optimización de imágenes: WebP/AVIF con lazy loading y priority hints
• Consolidación de sprites SVG: 99.3% de reducción en assets de íconos
• Compresión: Brotli y gzip en todos los assets

Estándares de Accesibilidad

Cumplimiento WCAG 2.1 Nivel AA verificado con Lighthouse y axe-core:

• Estructura HTML semántica
• Navegación por teclado para todos los elementos interactivos
• Contenido optimizado para lectores de pantalla
• Ratios de contraste de color suficientes
• Indicadores de foco visibles
• Skip links para contenido principal
• Score de accesibilidad: 97/100

Características Principales

Blog Técnico

15+ posts organizados en series temáticas:

• Sistema de series con navegación entre posts relacionados
• Comentarios integrados via Giscus (GitHub Discussions)
• Syntax highlighting con Expressive Code
• Table of contents automático
• Tiempo de lectura estimado

Paleta de Comandos

Navegación rápida via Ctrl+K con búsqueda fuzzy:

• Búsqueda instantánea con Fuse.js
• Acceso rápido a páginas, posts y proyectos
• Atajos de teclado para acciones comunes
• Diseño inspirado en VS Code/Raycast

Sección Goodies

Recursos útiles para desarrolladores:

• CSS Tricks: Efectos y técnicas CSS interesantes
• Snippets: Código reutilizable organizado por categoría
• Links Útiles: Recursos curados de desarrollo web
• Herramientas: Utilidades y generadores

Galería de Proyectos

Showcase interactivo de proyectos:

• Carrusel con Embla Carousel
• Lightbox para ver imágenes en detalle
• Métricas de proyecto (commits, líneas de código, tiempo)
• Stack rationale explicando decisiones técnicas

Soporte Bilingüe

Localización completa en inglés y español:

• Cambio de idioma fluido sin recargar
• URLs localizadas (/es/..., /en/...)
• Contenido traducido (no auto-traducido)

Modo Oscuro

Tema oscuro optimizado:

• Respeta preferencias del sistema
• Persiste elección del usuario
• Transición suave entre temas
• Temas de Giscus sincronizados

Progressive Web App

Instalable como aplicación:

• Web manifest completo
• Service worker para offline básico
• Iconos optimizados para todas las plataformas

Arquitectura Técnica

Stack Principal

• Astro 5: SSG con Islands Architecture
• React 19: Componentes interactivos (carruseles, formularios, lightbox)
• TypeScript: Type safety completo
• Tailwind CSS: Utility-first con tema personalizado
• Vercel: Edge deployment con CDN global

Testing

Suite de testing comprehensiva:

• Vitest: Tests unitarios y de componentes
• Playwright: E2E y visual regression tests
• axe-core: Tests de accesibilidad automatizados
• Lighthouse CI: Performance budgets en CI

Calidad de Código

• Biome: Linting y formatting rápido
• Husky + lint-staged: Pre-commit hooks
• Commitlint: Commits convencionales
• TypeScript strict mode: Sin any implícitos

Gestión de Contenido

Astro Content Collections para contenido type-safe:

• Posts de blog con frontmatter validado
• Proyectos con métricas y metadata
• Testimonios
• Snippets y CSS tricks
• Links útiles categorizados

Diseño Responsive

Mobile-first con breakpoints optimizados:

• Móviles: 320px+
• Tablets: 768px+
• Escritorios: 1024px+
• Pantallas grandes: 1440px+

SEO y Social

• Structured data (JSON-LD) para proyectos, posts y persona
• Open Graph y Twitter cards dinámicas
• Sitemap XML automático
• Canonical URLs
• robots.txt optimizado

Open Source

Todo el código es open source, sirviendo como implementación de referencia para portfolios Astro modernos con foco en rendimiento, accesibilidad y buenas prácticas.