Imaginalgo

English? Próximo

Mi sitio personal

Mi sitio web personal como aplicación web progresivo.

En 2017 por fin tomé la iniciativa de hacerme un sitio personal. La idea era crear un portal central donde comencé a lanzar mi branding personal. Decidí que para este sitio era esencial tener tres secciones: una autobiografía, una sección para mi CV y proyectos, y una última sección para mis artículos.

Últimamente ha querido implementar varios trucos nuevos de diseño; en particular, diseñar un sitio de página partida, y crear una aplicación web progresiva. Me fascinaba la posibilidad de hacer un sitio que tenía funciones de un app móvil, y además podría ser vista sin una conexión.

En 2016, la capacidad de implementar sitios web con certificados de criptografía SSL llegó a ser más fácil que nunca, con dos de mis maneras preferidas siendo CloudFlare y el distribuidor de certificados SSL gratis Let's Enncrypt. Esto me permitió construir un código JavaScript conocido como un Service Worker, que arranca en segundo plano y permite que un usuario que regresa al sitio tenga la oportunidad de "descargar" el sitio como se fuera un app móvil. Además, el código guarda en memoria cache todo el sitio, lo cual permite que el visitante lo navega aun cuando no haya conexión a internet!

La paleta de colores para el sitio fue algo difícil de definir, pero eventualmente encontré un color que no usé con mucha frecuencia (porque había utilizado muchos azules y verdes). Opté por el color #b14c3a, que es algo ni exactamente rojo ni precisamente naranja. De esto extrapolé una paleta tétrada del color principal y utilicé estos azules, verdes y cafés que se pueden apreciar en las secciones de Trabajo Y CV.

Con respecto al texto y tipografía elegí Source Sans Pro como la fuente de letras universal. Al fines de 2016 me interesaban más y más los temas de tipografía y texto en general, además del denominado estilo Swiss (o Internacional). Después de leer un artículo en el sitio web 24ways llamado CSS Writing Modes (en inglés) decidí orientar el título de cada sección en forma vertical. Los títulos son de color negro semi transparente, que adoptan sus colores del color del fondo.