Proyectos / Portafolio 2024

Un inventario limitado

El 2024 llegó con un desafío particular: aunque acumulaba varios años de experiencia, los proyectos personales que podía mostrar eran relativamente pocos. Gran parte de mi trabajo que alguna vez estuvo live había caído por falta de mantenimiento, y cuando quise reunir material para mi portafolio, el inventario resultó más escaso de lo que esperaba. Contaba con varios prototipos, pero solo un par de páginas funcionales que había desarrollado en los últimos meses.

Tenía mucho que decir y poco para mostrar, así que decidí hacer algo un tanto diferente: el portafolio no se centraría en mis proyectos, sino que contaría un poco de mi historia mientras demostraba algunas habilidades técnicas. Un storytelling recorrería así mi carrera, desde mis estudios hasta el desarrollo de aplicaciones, dejando espacio para futuros proyectos.

Referencias del diseño

Recorrí varias fuentes de inspiración, guardando capturas de otros portafolios y sitios web que me parecían geniales. Una de esas capturas era de un video de Programador X, donde analizaba el portafolio de Oluwadare Oluwaseyi: un diseño sobrio con fondo oscuro y letras grises enormes, muy atractivo. Lo interesante fue cómo el youtuber resaltaba detalles dibujando recuadros de colores con una aplicación propia de macOS. La combinación entre los rectángulos coloridos y el fondo neutro llamó poderosamente mi atención: allí se encontraba estilo que había estado buscando. Decidí entonces que recuadros con bordes multicolor enmarcarían algunas frases de mi storytelling.

Otra referencia importante fue la landing page de GitHub de ese momento, y su path que se dibujaba guiando al usuario a través de distintos puntos con transiciones fluidas. También me gustó mucho una animación que vi en un video del canal DesignCourse, donde una silueta roja se dibujaba en la pantalla al hacer scroll. Todas estas ideas se fusionaron en lo que se convertiría en mi Following Path: una línea de colores vibrantes que empezaría enmarcando mi nombre en el hero y luego recorrería mi trayectoria profesional.

Por último, las páginas de los productos de Apple fueron de gran inspiración. Aunque había muchos elementos que me gustaban, los callouts fueron de las cosas más simples, útiles y atractivas que pude haber emulado: párrafos descriptivos que flotan en el espacio y unas líneas que se aparecen con un efecto slide al entrar en el viewport.

El prototipo

Generalmente, cuando tengo a cargo el diseño y el desarrollo a la vez, no suelo hacer prototipos muy pulidos ni mucho menos en programas específicos para ello. Sin embargo, en este caso necesité prototipar muchísimo para tener un esquema de colores y un sistema de diseño bien claros. Illustrator es mi herramienta favorita, y me ofrece una versatilidad que otras como Figma o Adobe XD no me brindan. Luego, sigo diseñando mientras desarrollo, ya que hay aspectos que puedo probar mucho más fácilmente mediante el código.

Algo del resultado

Para el fondo quise simular la superficie de una tableta gráfica que se ilumina con la presencia del cursor. Lo logré mediante dos fondos superpuestos y una máscara circular que revela al fondo claro siguiendo las coordenadas del ratón.
Tras un desplazamiento horizontal, comienza el storytelling. Era importante que esta sección estuviera vacía más allá de la frase inicial, para focalizar en ella como si del epígrafe de un libro se tratase. El Following Path puede parecer una línea continua, pero se trata de pequeños segmentos interconectados que tienen posiciones bien definidas y porcentajes de avance según el scroll animados mediante Framer Motion.
En lugar de presentar todas las tecnologías juntas y clasificadas según mi nivel de experiencia, preferí mostrar cuáles fui utilizando en cada paso y no darles rangos sin sentido como “un 90% de JavaScript”.
Contaba con mucho material gráfico para alimentar este portafolio. Tuve que dosificarlo y elegir bien para que no se convirtiera en el portafolio de un diseñador per sé. Al final del recorrido, quería que el foco quedara puesto sobre mi rol de desarrollador.
Necesité de un esquema de colores muy bien pensado para lograr gradientes sin sobrecargar la vista de tonos distintos. Elegí dos colores por sección, siguiendo los siguientes criterios en orden de importancia: que combinaran con el contenido mostrado en el viewport en cada momento, que no fueran tan distintos a los colores de las tecnologías presentadas, y que complementaran el esquema general en secciones donde no hubiera una necesidad tan bien definida.

Algo del resultado

Para el fondo quise simular la superficie de una tableta gráfica que se ilumina con la presencia del cursor. Lo logré mediante dos fondos superpuestos y una máscara circular que revela al fondo claro siguiendo las coordenadas del ratón.

Tras un desplazamiento horizontal, comienza el storytelling. Era importante que esta sección estuviera vacía más allá de la frase inicial, para focalizar en ella como si del epígrafe de un libro se tratase. El Following Path puede parecer una línea continua, pero se trata de pequeños segmentos interconectados que tienen posiciones bien definidas y porcentajes de avance según el scroll animados mediante Framer Motion.

En lugar de presentar todas las tecnologías juntas y clasificadas según mi nivel de experiencia, preferí mostrar cuáles fui utilizando en cada paso y no darles rangos sin sentido como “un 90% de JavaScript”.

Contaba con mucho material gráfico para alimentar este portafolio. Tuve que dosificarlo y elegir bien para que no se convirtiera en el portafolio de un diseñador per sé. Al final del recorrido, quería que el foco quedara puesto sobre mi rol de desarrollador.

Necesité de un esquema de colores muy bien pensado para lograr gradientes sin sobrecargar la vista de tonos distintos. Elegí dos colores por sección, siguiendo los siguientes criterios en orden de importancia: que combinaran con el contenido mostrado en el viewport en cada momento, que no fueran tan distintos a los colores de las tecnologías presentadas, y que complementaran el esquema general en secciones donde no hubiera una necesidad tan bien definida.

Unas lindas palabras

Tras terminar mi portafolio, se lo envié al youtuber Midudev y esta fue su reacción: