Currículum online

Currículum online / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

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:

Currículum Online

Currículum Online

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.

Currículum Online

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.

Escribe un comentario

Tu email no se hará visible