PORTFOLIO PERSONAL

Indagando en webs personales de desarrolladores y diseñadores, pude concretar un croquis inicial de cuál sería la estructura de la mía. Sintetizando los apartados en un Inicio, un muestrario de proyectos y trabajos, uno donde desarrollar el equivalente a un curriculum vitae y un pie de página donde volcar mi contacto y redes.

Una barra superior facilita la navegación entre apartados principales, la Página de Inicio también presenta invitaciones a ellos, mientras que tanto los artículos particulares de proyectos y el apartado Sobre Mí invitan a dirigirse al apartado Proyectos. Asegurando así la circulación fluida por toda la web y la visualización de lo importante: mi trabajo.

Comenzando a indagar en la interfaz de los juegos de pokemon de Gameboy Color, logré identificar múltiples características identitarias e intuitivas de desarrollar a través de CSS3.

Lo principal y muy icónico a apreciar resulta ser la tipografía, debido a su conformación cuadrada y trazo pixelado, característico de los juegos de la época. Accedí a los archivos .woff necesarios para montar en mi página a través de la fuente Pokemon Classic Regular, publicada en WebFontFree.com.

Otra característica muy identitaria son los marcos de borde negro doble, implementados para contener dialogos, menus y texto interactivo a lo largo de todo el desarrollo de interfaz. También son notorios los botones, carteles o casilleros conformados por texto sintético, con un fondo de alto contraste y un borde coloreado.

A su vez, en el menú de juego donde se hace presente la información de un pokemon puntual, se hacen presente varios elementos clave. La distribución superior expone la imagen del pokémon en cuestión, acompañada de información anclada a su derecha. Mientras que a la vez está separada con una línea negra de otra sección inferior, con otro contenido de fondo coloreado.

Teniendo ya ciertas bases estructurales y estéticas, el siguiente paso era articular una propuesta en Adobe Illustrator.

El doble reborde negro se sintetizo como un recurso a implementar en varios recuadros, por lo que en css3 desarrollé una clase de nombre “borde-blanco-negro”, para ser llamada desde html donde fuera pertinente. Así, en la página de Inicio, lo usé para resaltar bloques de información del fondo. Como en la barra superior de navegación, el botón de “conócelo” y los links de los tres artículos expuestos.

Los carteles de texto simple y encuadrados, se sintetizaron en botones nomenclados con un borde o relleno contrastante. Patrón distribuido a lo largo de toda la web, pero presente en los botones de la barra superior de navegación y en los bloques de los tres artículos resaltados.

La paleta cromática obtenida del apartado informativo de pokemon se implementó para dar identidad a la barra superior y al fondo del cuerpo principal del contenido, mientras que el rojo de los recuadros de los artículos se determinó tras desarrollar la estructura y estética del apartado de artículos.

Mientras que las separaciones de bloques informativos de líneas simples se aplicó en la descripción sencilla que invita al apartado Sobre Mi y en el footer. Junto a otros bloques presentes en otros apartados de la web.

Por último, la tipografía se implementó a estar presente en la totalidad de la web, implementando mayúsculas completas cuando se tratara de textos cortos. Sin embargo, debido a que la fuente está desarrollada para pantallas pequeñas, su legibilidad para párrafos extensos no resulta muy amigable, por lo que opté para esas instancias por la tipografía Segoe UI, la cual se asemeja a la Pokemon Classic y tiene una legibilidad estándar por ser una fuente convencional.

Necesitando una estructura para exponer mis proyectos, pensé en la pokédex, enciclopedia icónica donde se visualizan los pokemon presentes en el juego, la cual no es otra cosa que un muestrario en lista de artículos individuales.

De la pokédex en sí puede notarse que está subdividida en dos columnas. A la derecha se enlistan los nombres numerados, resaltando con un marco verde aquel que se está recorriendo. Mientras que la columna izquierda se comporta como un visualizador de contenido introductorio, a la vez dividido en dos bloques. El superior contiene la imagen del pokémon en cuestión, mientras que el inferior presenta texto con información. Puede apreciarse tambien como todos los bloques son de fondo negro, con borde blanco y el fondo de apartado es rojo. Y la forma en la que la imagen presenta cierto margen que lo separa del borde de su contenedor.

El artículo particular del pokémon en cuestión presenta su imagen hacia la izquierda, manteniéndola casi estática en su sitio al llegar desde la pokédex. Junto a información más puntual hacia la derecha, y un bloque inferior, separado por un borde rojo, con texto de mayor desarrollo.

Mi apartado de proyectos tomó esa distribución. Dos grandes columnas, la derecha con la lista de títulos, numerados como los son los pokémon de manera tan icónica, con un marco verde que se hace presente en el título que estás recorriendo. Y la izquierda dividida en dos bloques, el superior con la imagen del proyecto en cuestión, con un margen que le separa de su contenedor, y el inferior con una descripción introductoria. Posteriormente se agregó un botón con llamado a la acción de “Seguir leyendo”, para acceder al artículo y resolver la navegabilidad.

Para los artículos se resolvió un bloque de encabezado, con el patron de fondo negro y borde blanco, el cual contiene la imagen del articulo en cuestion a la izquierda e informacion detallada a la derecha, articulando la estructura presente tanto en la pokedex como en el apartado informativo de los pokemon que traes contigo (expuesto en el apartado “Desmenuzando el referente”). Este también conservaría los mismos márgenes y disposiciones que en el apartado de Proyectos, de donde uno llega, para que en la transición pareciera que todo se mantiene en su lugar.

Con el patron de contenedores blancos y de doble borde negro, generé bloques de contenido desarrollado, con titulos iniciales identitarios y lineas negras horizontales para subdivisiones internas.

Se estableció un bloque inicial centrado, el cual contendría un texto introductorio inicial sobre el artículo en cuestión y sus temáticas, junto a un botón inferior que dirigiría al proyecto o trabajo desarrollado en sí de ser necesario.

Los siguientes bloques de texto representan el desarrollo en sí del artículo, pero contemplando el acompañamiento de contenido visual adjunto a referenciar. Se desarrollaron dos propuestas sobre ello. Una extendiendo el texto en todo el ancho de la web, contemplando sus márgenes al noventa por ciento, para que el contenido visual se presente debajo, y otra en la que ambas se hacen presente en una misma línea, representando sus anchos particulares un cuarenta y cinco por ciento del total, dejando el diez por ciento restante como espacio libre entre ambos. Finalmente se optó por esta última alternativa para pantallas horizontales, y la primera para pantallas móviles o de resolución reducida.

Se finalizó con un botón que dirige de vuelta al apartado de proyectos, para dinamizar la navegabilidad en la web, estructurado con el patrón de texto sobre fondo contrastante y borde que se separe del fondo.

Para el apartado de Sobre Mi, se reformularon los patrones implementados en los artículos de proyectos particulares. Se conservó el bloque inicial de cabecera, con imagen e información general, además de un bloque de información introductoria.

Los siguientes bloques se resolvieron de manera semejante a los de desarrollo de los artículos de proyectos particulares, solo que extendiendo sus subdivisiones para anidar información agrupada por categorías, modificando cada línea interior de texto para establecer jerarquía visual y de lectura.

Los títulos principales de cada bloque informativo están establecidos con la etiqueta “h2”, la información sobre fechas con “span”, el titular de la subdivisión con “h3”, su subtítulo con “h4”, y el desarrollo descriptivo con “p”.

Para el bloque Experiencia, se dió formato a un botón que invite al apartado de proyectos, dando fluidez a la navegación por la web. Y para Educación, se hizo una subdivisión visual para la información de títulos de grado, para distinguirla de las demás currículas de formación. También se implementaron botones que ofrecen dirigirte a los certificados de cada cursada, los cuales están subidos en mi LinkedIn, propiciando la circulación por el resto de mis redes.

Siendo desarrollado con las funciones de Flexbox, junto a trabajar constantemente con proporciones, dimensiones porcentuales y bloques móviles de contenido, la web cuenta con una adaptabilidad firme y contundente, capaz de ser funcional y accesible en amplia variedad de pantallas.

Puede apreciarse en el siguiente display, configurado para tener un ancho máximo de 384 píxeles. Cabe resaltar que desde un dispositivo móvil, es muy probable que éste no funcione adecuadamente.

Ante la inquietud mostrar el desarrollo de esta misma web, pero sin saber qué poner en su imagen de portada identitaria, decidí jugar con la autorreferencialidad de “portfoliar mi portfolio”. Por lo que desarrollé, a través de capturas sucesivas de pantalla, una imagen que se mofa del hecho que la web se contenga a sí misma, a través del efecto visual de puesta en abismo, concepto que habla de la infinidad sucesiva, la eternidad recursiva, la autocontención fractal y blablá.