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.