Arriba hay algo que podría llamar los tramos de mi vida. Representan un lugar, su altitud y el
tiempo vivido allí.
Pudo
ser otra gráfica; esta surgió sin pensarlo mucho. Habla un tanto de mi, al
menos de mi
territorialidad.
Mi interes fue ganar habilidad para hacer gráficas vectoriales y animarlas. Notarán dos
animaciones, una hace crecer los tramos de izquierda a derecha. La
otra aplica para el espacio de convenciones ubicado justo a la derecha. Son pequeñas barras que crecen
y al final resultan ser los mismos tramos de la gráfica, más pequeños pero
exactamente proporcionales (ver de nuevo). Hechas con Adobe-XD y CSS Grid-Layout.
Es mi padre. Se fue hace treinta años de manera inesperada. En su homenaje realicé esta imagen vectorial
con Adobe-XD. Es la suma de 173 piezas pintadas con una paleta de grises.
Son infinitas las
opciones de animación ya que cada pieza se puede manipular individualmente. Clave la pseudo-clase
:nth-child(n) de Css para lograrla (repetir).
Aquí la misma imagen se interviene de nuevo con Css pero esta vez con
apoyo de líneas de código JavaScript.
Cada patrón de colores que emerge lo decide una
función que asigna aleatoriamente el color a cada pieza de un menú de doce colores.
Es difícil que un patrón de colores se repita.
Hablo de habilidades, no de experiencia. Por ahora. Mi experiencia es este sitio web que comparto en
GitHub. Si estás aquí es porque quizá logré ganar tu atención con los contenidos que rodean estas
líneas.
En la banda que contiene el logo, que suele llamarse el header, se ve el movimiento suave de la superficie
de un cuerpo de agua. Concepto aprendido de la plataforma Platzi. Agregué una que otra variante. Son imágenes
en formato png, muy anchas y de poca altura, hechas con Adobe-XD. Se mueven
más en sentido horizontal que vertical con ritmos de tiempo iguales pero en momentos distintos. Mi reto a futuro es mecer el logo cuando lo alcanza una ola.
La banda azul inferior contiene enlaces a redes sociales. Nada del otro mundo salvo una pequeñez:
al situar el ratón en cada ícono el relleno blanco pasa a amarillo. Es sencillo hacerlo con íconos
svg. Aquí lo interesante fue descubrir lo que se puede lograr con este formato. Fue la luz para ver mas allá (En proceso para funcione en un móvil).
Mi logo personal lo enmarca un aro. La forma en U es el ensamble de un gancho con un triángulo que
sugiere la letra A. Por esas cosas de la vida pude imaginar que el logo puede mutar muy fácil a una
cara feliz. Sencillo: borrar la parte superior del gancho, borrar el triángulo, y agregar un par de ojos.
Al flotar el ratón sobre el logo, este tenía que ponerse feliz y cambiar de color de fondo. Quería eso.
Quería ver al triangulo y el pedazo de gancho desapareciendo gradualmente y con elegancia. Logrado con JavaScript y sus métodos para agregar y remover clases a nodos Html.