Case Study

Thirty-Three Portfolio .

Identidad visual y ecosistema digital diseñado para destacar en el sector tech mediante estética minimalista y alto rendimiento.

psychology

El Desafío

Como desarrollador y diseñador Full Stack, mi objetivo era crear una plataforma que no fuera solo un listado de trabajos, sino una extensión de mi identidad técnica. Necesitaba un sitio que resolviera tres problemas clave:

  1. check_circleVelocidad extrema: Carga instantánea de proyectos con contenido dinámico.
  2. check_circleEstética Diferenciada: Alejarme del diseño genérico de "portfolio de programador" para adoptar una línea visual inspirada en interfaces de alto rendimiento (High-End Interfaces).
  3. check_circleGestión de Contenido: Un sistema que me permitiera publicar nuevos casos de estudio en segundos usando Markdown.
grid_view

Interface Gallery

build_circle

La Solución

Desarrollé una arquitectura basada en Next.js 14 aprovechando los Server Components para reducir el bundle de JavaScript en el cliente. La identidad visual se construyó sobre un sistema de diseño propio basado en una paleta de negros profundos y verdes neón, optimizando la legibilidad y el impacto visual.

Características Clave

  • check_circleArquitectura Basada en MDX: Implementé un motor de contenido que transforma archivos locales de Markdown en páginas de alta fidelidad, permitiendo una separación clara entre datos y presentación.
  • check_circleExperiencia de Usuario (UX): Diseñé animaciones de entrada suaves con Framer Motion que guían el ojo del usuario sin sacrificar la velocidad de navegación.
  • check_circleIdentidad "Thirty-Three": Creación de un lenguaje visual coherente, desde el scrollbar personalizado hasta los micro-detalles en las fronteras de los componentes.
build_circle

Resultado Final

El portafolio no es solo una vitrina, es una herramienta de conversión optimizada. Las métricas de rendimiento validan la arquitectura elegida:

trophy

Los Resultados

100/100Google Lighthouse Score
< 0.5sInteractive Load Time
A+Performance & SEO Grade

"El diseño no es lo que ves, sino cómo funciona. Este portafolio es la prueba de que el código limpio y el diseño disruptivo pueden convivir en un mismo espacio."

build_circle

Stack Tecnológico

Elegí Next.js por su capacidad de pre-renderizado estático y Tailwind CSS para un control granular de la interfaz. La combinación de ambos me permitió crear un sitio que se siente vivo, rápido y profesional.