Présentation de mes projets (2/4) : mon CV en ligne

Second billet de la série! Celui là porte sur un autre de mes projets : mon cv en ligne.

J’ai avant tout voulu m’amuser, être original et apprendre des technos. Cette réalisation m’a notamment permis de me familiariser avec le framework javascript jquery.

A l’heure où j’écris cet article je n’ai pas encore créé le contenu du site mais ça viendra vite et vous serez les premiers avertis :-p

• Le design : un ptit tour de photoshop et puis s’en va

Le design est assez simple aux couleurs un peu flashy. Pour le titre j’ai suivi ce petit tuto sur le site de babylon-design.

• L’intégration du design : css/html

Ici, j’ai fait des cadres avec bordures, angles arrondies et extensible en plus! Je ferais un article très prochainement sur ma manière de faire ce type de cadres stylés et extensibles.

• les petits effets javascript : utilisation du framework jquery
  

Alors l’effet que je voulais faire était simple : au passage de la souri sur un cadre celui ci s’agrandit (d’où les cadres extensibles ;-p). Au clic sur un des cadres celui ci prend toute la fenêtre, les deux autres passant en dessous.

Voici le code javascript basé sur jquery :
$(document).ready(function() {
$("#cadre_1, #cadre_2, #cadre_3").hide();
$("#cadre_1 ").show('slow');
$("#cadre_2 ").show('slow');
$("#cadre_3 ").show('slow');

$("#cadre_1").mouseover(function(){
$("#cadre_2").animate({width: 230,left:(parseInt(document.body.clientWidth/2)+5),top:250}, "fast"),
$("#B_violet").animate({height: 200}, "fast"),
$("#cadre_3").animate({width: 230,left:(parseInt(document.body.clientWidth/2)-235),top:440}, "fast"),
$("#B_bleu").animate({height: 200}, "fast"),
$("#cadre_1").animate({width: 370,left:(parseInt(document.body.clientWidth/2)-375),top:170}, "fast"),
$("#B_vert").animate({height: 220}, "fast")
});


$("#cadre_2").mouseover(function(){
$(this).animate({width: 290,left:(parseInt(document.body.clientWidth/2)+5),top:270}, "fast"),
$("#B_violet").animate({height: 290}, "fast"),
$("#cadre_1").animate({width: 300,left:(parseInt(document.body.clientWidth/2)-305),top:230}, "fast"),
$("#B_vert").animate({height: 130}, "fast"),
$("#cadre_3").animate({width: 230,left:(parseInt(document.body.clientWidth/2)-235),top:410}, "fast"),
$("#B_bleu").animate({height: 200}, "fast")
});

$("#cadre_3").mouseover(function(){
$("#cadre_1").animate({width: 300,left:(parseInt(document.body.clientWidth/2)-305),top:190}, "fast");
$("#B_vert").animate({height: 130}, "fast");
$("#cadre_2").animate({width: 230,left:(parseInt(document.body.clientWidth/2)+5),top:270}, "fast");
$("#B_violet").animate({height: 200}, "fast");
$("#cadre_3").animate({width: 290,left:(parseInt(document.body.clientWidth/2)-295),top:370}, "fast");
$("#B_bleu").animate({height: 290}, "fast")
});

$("#cadre_1").click(function(){
$("#cadre_2").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2+505),top:720}, "fast"),
$("#B_violet").animate({height: 100}, "fast"),
$("#titre_cadre_2").animate({marginTop: 20}, "fast"),
$("#cadre_3").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2),top:720}, "fast"),
$("#B_bleu").animate({height: 100}, "fast"),
$("#titre_cadre_3").animate({marginTop: 20}, "fast"),
$("#cadre_1").animate({width: 1000,left:(parseInt(document.body.clientWidth-1000)/2),top:170}, "fast"),
$("#B_vert").animate({height: 500}, "fast")
});

$("#cadre_2").click(function(){
$("#cadre_3").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2+495),top:720}, "fast"),
$("#B_bleu").animate({height: 100}, "fast"),
$("#titre_cadre_3").animate({marginTop: 20}, "fast"),
$("#cadre_1").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2),top:720}, "fast"),
$("#B_vert").animate({height: 100}, "fast"),
$("#titre_cadre_1").animate({marginTop: 20}, "fast"),
$("#cadre_2").animate({width: 1000,left:(parseInt(document.body.clientWidth-1000)/2),top:170}, "fast"),
$("#B_violet").animate({height: 500}, "fast")
});

$("#cadre_3").click(function(){
$("#cadre_1").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2+495),top:720}, "fast"),
$("#B_vert").animate({height: 100}, "fast"),
$("#titre_cadre_1").animate({marginTop: 20}, "fast"),
$("#cadre_2").animate({width: 495,left:(parseInt(document.body.clientWidth-1000)/2),top:720}, "fast"),
$("#B_violet").animate({height: 100}, "fast"),
$("#titre_cadre_2").animate({marginTop: 20}, "fast"),
$("#cadre_3").animate({width: 1000,left:(parseInt(document.body.clientWidth-1000)/2),top:170}, "fast"),
$("#B_bleu").animate({height: 500}, "fast")
});
});

Bien sur les sélécteurs CSS sont en rapport avec le source de ma page (allez sur mon cv en ligne avec firefox et faites ctrl+u).

La méthode show permet d’afficher les cadres progressivement au chargement de la page.

La méthode animate quand à elle permet de modifier les attributs de style d’un élément html de manière animée (en opposition avec ce que pourrais rendre un removeAttribute suivit d’un setAttribute). Il est possible de régler la vitesse de l’animation : dans mon cas j’ai tout mis en “fast” pour ne pas gêner la navigation.

Voila c’est fini pour mon cv! A bientôt pour de nouvelles aventures!