Portafolio: Cristal

Portafolio minimalista y glassmórfico construido con Next.js 15 App Router, TypeScript, Tailwind CSS y MDX

DEMO EN VIVO (V1) • [GITHUB: Código Privado]

Overview

• Rol: Creador Único, Diseñador UI/UX y Desarrollador Frontend
• Stack: Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4, Framer Motion, Radix UI, MDX, next-intl
• Resultado Clave: Puntuación PageSpeed Perfecta de 100/100/100/100 y Optimización SEO
• Resumen: Un portafolio de desarrollador generado estáticamente que demuestra una estética minimalista de alta gama, construido durante un período de búsqueda de prácticas de ingeniería frontend (durante el cual me uní con éxito a Trend Micro). Con primitivas de IU modulares, contenido localizado e interfaces glassmórficas totalmente responsivas.

The Problem

• Desafío: El desafío principal fue implementar un lenguaje visual cohesivo desde cero como desarrollador en las primeras etapas de su camino en el diseño. Siendo esta solo la segunda vez que diseñaba un sitio web de portafolio desde cero, encontrar el punto de partida adecuado, construir diseños equilibrados y garantizar una alta calidad estética sin utilizar plantillas preestablecidas resultó difícil.
• Audiencia: Reclutadores técnicos, líderes de ingeniería y equipos en empresas donde estaba solicitando oportunidades de prácticas en ese momento (como Trend Micro).
• Restricciones: Lograr una interfaz de usuario glassmórfica esmerilada consistente en múltiples navegadores móviles y de escritorio, manteniendo al mismo tiempo un tamaño de paquete de cliente inicial pequeño, páginas con diseño responsivo y cumpliendo con los estándares de accesibilidad.

Approach & Decisions

• Arquitectura: Next.js App Router para páginas con múltiples configuraciones locales. Se basa en React Server Components (RSC) para renderizar páginas estáticas de markdown (MDX), combinadas con Client Components solo donde son necesarios elementos interactivos (animaciones, dock, comandos).
• Decisiones Clave:
  • Empezando con Tailwind CSS 4: Se aprovecharon las versiones iniciales de Tailwind 4 para implementar variables CSS glassmórficas fluidas, filtros de fondo personalizados y gradientes de borde.
  • Primitivas de IU Modulares: Construcción de bloques de diseño reutilizables (ui/, motion-primitives/, dock/) para componer fácilmente diferentes vistas sin acumular deuda técnica.
  • next-intl para soporte multilingüe: Estructuración de la base de código para soportar la internacionalización en inglés y otras configuraciones locales de forma nativa.
• Trade-offs: Se eligió la generación estática con hidratación de componentes del lado del cliente en lugar del renderizado dinámico del servidor para optimizar los tiempos de carga, aunque limitó las interacciones de bases de datos dinámicas en tiempo real.
• Flujo de Datos: Las solicitudes de página se asignaron directamente a compilaciones estáticas de MDX envueltas en plantillas de diseño. Los estados del cliente se gestionaron a través de hooks de React para menús, alternancia de temas y modales.

Key Results & Impact

• Resultado: Una interfaz glassmórfica pulida y moderna que carga increíblemente rápido y se posiciona alto en los motores de búsqueda.
• Rendimiento de Lighthouse: Puntuación perfecta de 100 / 100 / 100 / 100 en PageSpeed Insights para móviles y computadoras de escritorio en Rendimiento, Accesibilidad, Buenas Prácticas y SEO.
• Contexto: Construido durante un período de búsqueda activa de prácticas, logrando finalmente un puesto en Trend Micro.
• Limitaciones de Optimización: Durante este proyecto V1, la optimización se limitó estrictamente a la Optimización de Motores de Búsqueda (SEO) estándar. Carecía por completo de paradigmas de optimización modernos como la Optimización de IA (AIO), la Optimización de Motores de Respuesta (AEO) y la Optimización de Motores Generativos (GEO), que se abordaron posteriormente en el diseño V2.
• Comparación: Este fue el diseño V1. Aunque era altamente eficiente, carecía de la interactividad de terminal personalizada, la física de 3D Canvas y el chatbot de IA activado por voz del diseño V2 (Portafolio: Cyberpunk).
• Impacto: Capacidad demostrada para ejecutar diseños de interfaz de usuario de alta fidelidad y construir bases de código React optimizadas para motores de búsqueda.

Technical Deep Dive

• Detalles Destacados: Navegación de dock animada interactiva, efectos de vidrio esmerilado personalizados utilizando utilidades de fondo, menú de búsqueda de comandos CMD+K.
• Verificación: Construido y probado localmente usando next build y análisis de rendimiento en tiempo de ejecución con Lighthouse, Vercel Analytics y verificación manual del diseño en Safari, Chrome y Firefox.
• Optimizaciones: Generación de páginas estáticas (SSG) para todas las páginas MDX, carga diferida de componentes de cliente interactivos pesados y optimización de imágenes usando configuraciones estándar de imágenes de Next.js.
• Calidad del Código: Se aplicaron reglas estrictas de verificación de TypeScript, formato y linting.
• Enlaces: Revise las estructuras de carpetas de package.json y components/.

Reflections

• De manera diferente: Habría establecido un sistema de diseño o pautas visuales en Figma de antemano. Diseñar directamente en código siendo mi segunda vez creó múltiples ciclos de iteración de diseño antes de llegar a la estética glassmórfica cohesiva final.
• Éxitos: Puntuación perfecta de 100/100 en PageSpeed y entrega de una estética elegante y limpia de vidrio esmerilado.
• Lecciones: Un diseño minimalista parece simple pero requiere un espaciado preciso, jerarquía tipográfica y relleno para lucir profesional. La implementación de superficies glassmórficas también requiere alternativas cuidadosas de backdrop-filter para la compatibilidad de navegadores.

My Contributions

• Propiedad Absoluta: Diseñé, estructuré e implementé el 100% del proyecto desde cero, incluyendo el diseño de la interfaz de usuario, los sistemas de diseño, la estructura de los componentes, las animaciones y las configuraciones de localización.

Project Architecture

Esta aplicación utiliza un patrón estructurado de Next.js App Router configurado para la generación estática del lado del cliente.

• Estructura por Capas: Las configuraciones globales y los contenedores de diseño principales gestionan los proveedores de temas y el estilo base, mientras que los cargadores de MDX analizan los archivos raw markdown.
• Módulos de Funciones:
  • components/ui/ - Módulos de diseño y componentes visuales principales.
  • components/motion-primitives/ - Contenedores animados para transiciones suaves.
  • components/dock/ - Utilidad de navegación flotante personalizable.
• Gestión de Estado: Mantiene el estado del lado del cliente localizado dentro de contenedores individuales (por ejemplo, índices de elementos activos, visibilidad de superposición).

Mapeo de Rutas y Recursos

A diferencia de la arquitectura V2 (Cyberpunk), V1 es una versión ligera solo para el cliente:

• Lo que tiene:
  • Raíz Estática y Anclajes: Estructura de una sola página que utiliza enrutamiento por fragmentos (#home, #about, #featured-projects, #experience-education-certificates, #blog, #connect).
  • Metadatos y Descubrimiento: Archivos de manifiesto localizados (/site.webmanifest, /browserconfig.xml).
  • Paquetes de Hidratación Hidratados: Fragmentos estáticos de Next para el diseño, elementos de página y estados de carga diferida.
• Lo que le falta:
  • Sin APIs de Backend: Carece de endpoints de transmisión, rutas de música o manejadores de chatbot (/api/chat, /api/music).
  • Sin Integraciones de IA / Agentes: Carece por completo de endpoints del Protocolo de Contexto de Modelo (MCP) (/api/mcp) y esquemas de texto de descubrimiento de LLM (/llms.txt, /llms-full.txt).

Demo Preview

• Página de Inicio Glassmórfica: Paneles esmerilados, fondos de color sutiles y alineación tipográfica precisa.
• Navegación Dock Animada: Expansión suave de los iconos del dock basada en el movimiento del ratón y navegación a secciones específicas.
• Menú de Comandos (CMD+K): Menú superpuesto instantáneo para navegación directa a páginas y accesos directos.
• Enlace de la Demo en Vivo: El proyecto en vivo se puede ver en franzdomingov1.vercel.app.

Nota de Alojamiento:
El Portafolio Glass V1 está desplegado en Vercel y es accesible a través de los enlaces de demostración en vivo de arriba. Tenga en cuenta que el portafolio principal ha sido actualizado al diseño Cyberpunk (V2).