Currículum online
La importancia de tener un currículo en internet, comprende numerosos beneficios, desde llamar la atención de una forma original a RRHH, hasta facilitar tu búsqueda para el empleo que buscas gracias al posicionamiento del CV.
Realizado con HTML5, CSS3, JS, JQuery, Bootstrap, y con administrador para datos e imágenes programado con PHP.
Dividido en cinco partes, donde un botón nos permite gracias a la programación con JQuery ir mostrando paso a paso todos los elementos de nuestro currículum.
Vistas tarjeta de presentación y primera sección, de cinco, visible:


Vista responsive para smartphone, donde todos los elementos se muestran visibles para agilizar su lectura y por tanto se ocultan los botones. En tablet el efecto original se mantiene.

I Tarjeta de presentación: Imagen, nombre, apellido, puesto profesional y enlaces a perfiles profesionales.
II Datos personales: Texto descriptivo, localidad, email, teléfono, estudios e idiomas.
III Experiencia profesional anterior: Nombre de la compañía, fechas, descripción del puesto. pueden ponerse cuantas experiencias se desee, incluso ninguna.
IV Recomendaciones: En el ejemplo figuran dos, pero se pueden poner cuantos se desee, e incluso ninguno. Imagen, empresa, fechas, descripción del puesto, mail y teléfono de las personas que nos recomiendan.
V Formulario de contacto:
En el apartado técnico, todos los elementos están ocultos, con la class".hide + nombre de la sección". Por ejemplo: ".hidePresentation". Con el evento "Click" de JQuery y "slideToggle()", mostramos con efecto de deslizamiento la sección y al mismo tiempo ocultamos el botón con "hide()".
Cuenta con más detalles, como por ejemplo anclas con efecto "smooth", y una animación CSS en el primer botón.
Ejemplo botón 1:
//btnPlus show info $(".btnPlus-1").click(function(){ $(".hidePresentation").slideToggle(); $(".btnPlus-1").hide(); });
Efecto "smooth" a los elementos href con class ".anchor":
// Add smooth scrolling to a class="anchor" $("a.anchor").on("click", function(event) { if (this.hash !== "") { event.preventDefault(); var hash = this.hash; $("html, body").animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); } });
Animación primer botón: Donde modificamos su escala y le hacemos volver a su tamaño original en 1 segundo, una sola vez.
.btnPlus-1{ -webkit-animation: shake 1s; animation: shake 1s; }
@-webkit-keyframes shake{ 0% { -webkit-transform:rotateZ( 0deg); } 50% { -webkit-transform:rotateZ( 0deg) scale(.8); } 100%{ -webkit-transform:rotateZ( 0deg); } }
Conoce el Currículum online.
Mariano J.