Este proyecto nace como resultado de la evaluación al término del módulo 2 del curso "Full Stack Python", con el objetivo de mostrar las habilidades técnicas aprendidas creando una página web funcional y estéticamente agradable que, a su vez, sirva como vitrina para mostrar, brevemente, quien es el autor y sus proyectos.
La página web es responsiva, adaptándose a diferentes dispositivos, y cuenta con las siguientes secciones:
Home: la solución consiste de una sobria pero llamativa sección de "Inicio" o "Home", que posee una interfaz intuitiva, que organiza la información de navegación mostrando las demás secciones del sitio en la parte superior. Adicionalmente, al cambiar de tamaño para pantallas más pequeñas (responsiveness), el menu se colapsa, ofreciendo una alternativa de interfaz con un menú lateral. Se han agregado tooltips, a algunas etiquetas o textos para facilitar su comprensión, por ejemplo, sobre el ícono del menú lateral en pantallas pequeñas.
Información personal (Acerca): Se presenta un breve resumen sobre mi persona e intereses generales.
Credenciales: Esta sección presenta un carrusel de tarjetas (clase card de bootstrap), el visitante podrá desplazarse en la cinta, de izquierda a derecha o viceversa, utilizando botones de navegación. Cada tarjeta presenta información breve sobre la certificación o habilidad adquirida y un botón que dice "Verificar", que abre el link en la página ofcial para la comprobación.
Proyectos: La siguiente sección es una selección de proyectos (PORTAFOLIO) que representan un conjunto de habilidades a mostrar a los visitantes. La galería se redujo a proyectos destacados. La galería con miniaturas de los proyectos tiene unos efectos de "blur" u "opacamiento", que se activan al pasar el mouse por encima y conecta a los links del contenido en Github, o en los sitios donde se encuentran alojados. Los links sin contenido o cortados apuntan a una página de error 404.
Publicaciones: También se ha incluído una sección con publicaciones, donde se introducen distintos articulos y opiniones escritas por mi, sobre tecnologia y actualidad, ofreciendo al visitante "continuar leyéndolos", y se han agregado los links para leerlos en forma completa desde la fuente.
Timeline: Para concluir y escapando de la forma tradicional de presentar una hoja de vida, se concibió estructurar una "LINEA DE TIEMPO" y hacerlo más atractivo. Entonces, se presenta la información a través de un concepto gráfico con datos mínimos y, si el visitante desea explorar más, tiene la opción de cliquear el link de "Leer más...", y se abre un MODAL con un detalle más amplio. Para lograr esto, se buscó y adaptó una librería que mostraba noticias. Se ha dejado como ejemplo completo, sólo la primera entrada a la línea de tiempo, el resto de elementos, presentan "Lorem ipsum" en donde corresponde, dejando su llenado para otra versión.
Formulario de contacto: Se incluye un formulario de contacto con validación de campos usando scripts de javascript. Tambien se agregó un selector de objetivo del mail (despliega 3 opciones), pudiendo la persona definir si su correo es con propósitos informativos, para solicitar un presupuesto o, para reclamar por alguna situacion. Se integró el formulario con un servidor virtual de correo, y quedó 100% funcional, por lo que se, si el visitante deja un mensaje, este será recibido en la casilla de correo indicada en la web, que es parametrizable. La casilla está oculta con una key de correo. Se han agregado otros detalles como indicaciones para llegar con "Google Maps" y un mapa referencial de la oficina o domicilio.
Manejo de errores: Para manejar los links cortados, en aquellos casos que se han dejado intencionalmente en blanco, se ha implementado que muestre una página de error (error404.html), la página ofrece además, un botón "VOLVER", que devuelve al visitante al home o index de la página.
Para una mejor comprensión de la ubicación de los archivos y su lógica, se adjunta la siguiente estructura:
PD.: Puede haber pequeños cambios al momento de esta versión.
En la realización de este proyecto se han utilizado, principalmente, las siguiente herramientas y tecnologías
Si deseas contribuir a este proyecto, sigue estos pasos:
Visita el sitio: Portafolio de Jota Cordova, si te gusta...
Revisa la lista de cosas por hacer - Things to do (T2D): Ir al documento T2D, si crees que tienes algo que aportar...
Revisa la Guía de Estilo y Buenas Practicas del Proyecto: luego, si quieres mantenerte informado...
Solicita ser agregado como colaborador a TRELLO: Ir al tablero del Proyecto ahora sí, manos a la obra ....
Clona el repositorio:
git clone https://github.com/jcordovaj/jcordovaj.github.io.git
Sube tu request:
Finalmente, si te gusto el proyecto y has decidido participar, dame una estrella:
