Portafolio

Llevo bastante tiempo queriendo reactivar mi sitio web. Después de actualizar mi blog, decidí dedicarle unas cuantas horas a reconstruir el resto del sitio: https://ivansantander.com/.

Hace un tiempo había actualizado el repositorio y dejado un portafolio bastante básico, aunque seguía funcionando bajo un subdominio de Railway. Ayer finalmente configuré el DNS en Cloudflare para conectar el dominio principal. Tengo que renovarlo este mes y probablemente lo haga por un par de años; me gusta la idea de mantener todos mis proyectos públicos bajo mi propio nombre.

Lo que no tenía claro era la dirección que quería tomar con el nuevo diseño. Así que empecé a explorar referencias: revisé portafolios públicos, publicaciones en LinkedIn, proyectos en GitHub y, por supuesto, encontré la típica página generada por IA que hoy se repite una y otra vez. No creo que eso sea algo malo, pero era justamente lo que quería evitar.

Mi portafolio v0, por ejemplo, estaba construido alrededor de un elemento 3D que recorría toda la página mientras hacías scroll. Visualmente era interesante, pero también exageradamente pesado y difícil de controlar. Después evolucionó a una versión con un modelo 3D mucho más clásico y un pequeño easter egg en el footer que reproducía una canción de A$AP Rocky y modificaba algunos elementos de la aplicación.

Venía de hacer cosas diferentes, así que tampoco quería terminar con un portafolio genérico. Pero, al mismo tiempo, ya no quería seguir dependiendo de modelos 3D; hacían que la página fuera demasiado pesada y terminaban afectando más de lo que aportaban.

Con esa idea en mente entré a Awwwards y empecé a revisar las tendencias actuales. Encontré diseños con partículas orgánicas, animaciones fluidas y sutiles, interfaces bastante limpias y mucho movimiento, pero sin caer en excesos. Ahí fue cuando empecé a visualizar con más claridad el estilo que quería.

Hace bastante tiempo había experimentado con fondos inspirados en lámparas de lava, así que retomé esa idea y la adapté como elemento principal del fondo. Los colores también fueron un proceso. Probé varias paletas, incluyendo una basada en tonos morados, de la que salí corriendo bastante rápido. Al final terminé quedándome con un azul sobrio y moderno, que transmite justo la sensación que buscaba. Además, es uno de mis colores favoritos.

Para construir el sitio estoy usando principalmente la skill Hyperframes para ayudarme a obtener el resultado visual que tengo en mente. El desarrollo lo estoy haciendo junto con Claude utilizando Opus 5, aunque el proyecto en sí es un sitio estático (SSG) que se compila utilizando un pequeño framework que construí hace un tiempo como experimento y al que llamé mini-astro.

La idea de usar mi propio framework no era únicamente reutilizar código. También quería poner a prueba esa herramienta en un proyecto real y comprobar si realmente era capaz de generar un sitio rápido, simple y fácil de mantener. Hasta ahora el resultado me ha gustado bastante.

Otro de los objetivos de este proyecto es mejorar mi presencia en buscadores. Busqué mi nombre, Ivan Santander, en Google y prácticamente no aparezco, salvo por mi perfil de LinkedIn. Mi sitio web ni siquiera figura dentro de las primeras páginas, así que este proyecto también se ha convertido en un experimento de SEO.

Por ahora estoy intentando hacer las cosas bien desde el principio: etiquetas semánticas, metadatos completos, buena estructura, tiempos de carga bajos y todo lo que pueda facilitar que los buscadores indexen correctamente el contenido. Será interesante ver si en unos meses eso se refleja en los resultados.

En este momento ya tengo definida la base del diseño. Ahora mismo sigo explorando distintas opciones para el hero de la página y, una vez encuentre la dirección correcta, continuaré con el resto del contenido.

Seguramente en los próximos blogs iré compartiendo el avance del proyecto, las decisiones que vaya tomando y los resultados que obtenga. Por ahora me gusta bastante cómo va tomando forma.

El repositorio también es público por si alguien quiere echarle un vistazo o simplemente curiosear el código: https://github.com/ivansantander-hub/project-portfolio-v2022

Nota: el círculo que aparece actualmente en el hero es completamente temporal. Todavía estoy explorando qué elemento utilizar en esa parte de la página, así que seguramente cambiará varias veces antes de la versión final.