miguelpv.dev

Resumen

miguelpv.dev es mi portafolio personal, y diseñé y construí cada parte de él — la maquetación, el apartado visual, las interacciones, las herramientas de build y el despliegue. Pero lo más útil que hace es servir de prueba: en lugar de describir cómo afronto un proyecto, puedo señalar la página que ya estás leyendo y dejar que ella defienda el argumento.

Así que este caso de estudio es menos un recorrido por funciones y más una explicación de las decisiones que hay detrás — para qué construyo, por qué y qué consigue realmente cada decisión.

Por qué construyo así

El stack es deliberadamente anticuado: HTML escrito a mano, un único archivo de CSS puro guiado por tokens de diseño, un pequeño archivo de JavaScript puro y ningún framework ni runtime enviado al navegador. No es nostalgia — cada decisión consigue algo concreto.

• Velocidad que llega a todo el mundo. Sin un framework que descargar, parsear e hidratar, la página se pinta casi al instante — lo mismo en un portátil de gama alta que en un móvil barato con mala conexión. Ser rápido no es una cifra de vanidad; es cuánta gente se queda, y cómo de bien posiciona la página.
• Durabilidad y control. Aquí nada se rompe cuando un framework saca una nueva versión mayor, y no hay un árbol de dependencias que mantener auditado y parcheado — una superficie mucho menor para bugs y para riesgos de cadena de suministro. Cada byte de la página está ahí porque lo puse yo.
• Privacidad sin asteriscos. Sin cookies, sin analíticas, sin rastreadores — así que no hay banner de consentimiento que añadir, mucho menos peso legal que cargar y ni una sola petición a terceros siguiendo al lector. Respeta a la visita y, como efecto secundario, es una razón más por la que la página es rápida.
• Utilizable por cualquiera. Landmarks semánticos, foco de teclado siempre visible, componentes compatibles con lectores de pantalla y respeto por el movimiento reducido hacen que nadie se quede fuera — que es sencillamente lo correcto, y resulta ser mejor para todos los usuarios y también para los buscadores.

No te fíes de mi palabra

Todo eso es fácil de decir y más difícil de demostrar, así que la prueba va integrada. Esta página saca un 100 limpio en Rendimiento, Accesibilidad, Buenas prácticas y SEO de Lighthouse — y no tienes que fiarte de una captura. Abre las herramientas de desarrollo de tu navegador y ejecuta Lighthouse sobre esta página tú mismo; mira la pestaña Red y no encontrarás ningún dominio de terceros, ningún píxel de rastreo, nada llamando a casa. Los estándares no son una afirmación en una diapositiva — se pueden verificar más o menos en lo que has tardado en leer este párrafo.

Y detrás de todo esto no hay ningún cliente ni ninguna fecha límite. Es simplemente el listón al que someto mi propio trabajo cuando nadie me obliga — que es la indicación más honesta del listón con el que trabajo, punto.

Bajo el capó

Para quien quiera el detalle de ingeniería, esto es lo que de verdad hay detrás de esas cifras:

• Fuentes autoalojadas, precargadas como woff2 y limitadas al rango Latin, para que el texto se renderice de inmediato sin petición de fuentes a terceros y sin saltos de maquetación.
• Imágenes responsive en AVIF/WebP con srcset y sizes ajustados, para que cada dispositivo descargue la imagen más pequeña suficiente.
• CSS y JS minificados con clean-css y Terser (que además elimina todas las llamadas console.*), servidos desde assets/min/*.
• JavaScript cargado con defer, con cada función inicializándose de forma diferida mediante un IntersectionObserver y degradando en silencio si faltan sus elementos.
• El fondo de lluvia matrix corre sobre un único canvas, está limitado por DPR y se desactiva por completo bajo prefers-reduced-motion.
• Dos locales mantenidos a mano, servidos como directorios estáticos hermanos, con un pequeño Cloudflare Worker en la raíz que negocia el Accept-Language y redirige a /en/ o /es/ — todo lo demás son activos estáticos en Cloudflare Pages, con URLs limpias y sin extensión.
• Cabeceras de seguridad (CSP, HSTS y más) declaradas en un archivo _headers, y un sitemap.xml con hreflang recíproco por página generado en el momento del despliegue.
• Un slider reutilizable que se inicializa de forma diferida al hacer scroll, admite diapositivas de vídeo, autogenera sus indicadores de puntos, se pausa al pasar el ratón o enfocar, anuncia los cambios a los lectores de pantalla y se maneja por completo con teclado. (Haz clic derecho en cualquier captura para abrir su original a resolución completa).

Estado

En producción, y lo estás viendo. Sigue creciendo — este caso de estudio y la sección de proyectos que enlaza a él son adiciones recientes — y lo trato menos como un artefacto terminado y más como el lugar donde sigo subiendo mi propio listón.