Des petits conseils s'il vous plait ! =)

Bonjour à tous,
Je suis en reconversion professionnelle via le cnam (je suis en train de valider un certificat pro de développeur web).
J'ai réalisé (et pas tout à fait terminé) un site cv/portfolio il y a 5 mois (j'ai également réalisé le design). C'est le tout premier site que j'ai réalisé et j'ai conscience de certaines lacunes (problème de responsive surtout avec les fenêtres modales, les textes qui ne sont pas achevé aussi).
Mais j'aimerai avoir l'avis de professionnels (ou d'habitués du web). J'aimerai pouvoir trouver un travail comme dev front-end ou comme intégrateur web et ma formation étant à distance je n'ai pas vraiment l'occasion de discuter avec les prof (qui sont d'ailleurs parfois un peu déconnectés de la réalité - en tout cas c'est le ressenti que j'en ai) ou d'autres élèves.

J'ai également commencé à apprendre à manipuler le svg et j'ai réalisé, dans le cadre de mon stage, un plan interactif. Si vous avez des remarques/conseils à donner dessus je suis aussi preneuse ! =D

Site perso : http://estellepieragnolo.com/
Plan interactif : https://planinteractif.declic360.com/map1.html

Merci d'avance et bonne journée !

Bonjour.

J'ai regardé votre site perso sur un écran 17'' et 'Estelle Pieragnolo' est décalée sur la droite ce qui n'est probablement pas voulu puisque la ligne juste en-dessous 'future développeuse en recherche...' est coupée par le bord droit de mon écran.

(Aparté : je ne connais pas Bootstrap mais utiliser un système aussi complexe pour une mise en page aussi simple me parait inutilement compliqué et source de problèmes...)

Je trouve la page d'accueil assez 'pauvre' (dans un sens graphique), pas très engageante.

Ce que je ne comprends pas, c'est pourquoi il faut cliquer sur 'ce que je recherche', 'les détails de mes formations' au lieu d'avoir l'information directement... Qui va faire cet effort ?

La partie 'créativité' m'intéresse davantage mais on s'éloigne du 'web développement' et ça peut apporter de la confusion ce que vous voulez. (Ah, je n'arrive pas à fermer Birds, le curseur clignote entre la 'flèche' et la 'main'...)

Votre 'parcours des mondes' est intéressant mais je trouve dommage qu'il soit dépouillé d'un style personnel présent dans la partie Création de votre CV.

Voilà.

Merci beaucoup Zelena pour vos réponses.

Concernant le design c'est très instructif, je vais pouvoir retravailler dessus. Je n'avais jamais fais attention à ce décalage du titre pourtant mon écran est un 17", bon coup d'oeil ! =D

Pour le plan, je n'avais pas trop le choix concernant le style, c'était la demande de mon directeur de stage...

Encore merci !

Bonjour,

Les conseils de Zelena sont très pertinent !

C'est censé etre un CV de dev front mais à première vue ca ressemble presque plus a un site perso de dessinateur !

Le premier bloc est effectivement un peu vide et pas spécialement engageant. Sert toi de ta créativité ici pour faire une landing page sympa (pourquoi pas avec tes petites loutres ! Elles sont tellement cool !!!)

La formation Zelena a tout dit. C'est censé être LE gros point de ton site. Il faut clairement le mettre bien plus en avant et afficher toutes les infos sans a avoir à cliquer. C'est l'objet le plus important de ton site. Inspire toi sur google image.

La partie créativité est en effet un peu hors sujet si le site n'a de vocation d’être qu'un CV. Généralement on va plus trouver un Portfolio avec les travaux réalisés (principalement dans l'axe du boulot recherché).

+1 aussi pour Bootstrap qui est un peu overkill pour une page si simple (mais c'est aussi un bon point de savoir l'utiliser)

Mets aussi un effort sur la propreté du code (syntaxe, bonnes pratiques, architecture, minification, etc), si tu postule en dev Front c'est un des premiers truc qu'on va regarder aussi.

Je n'ai pas apporté grand chose de plus, surtout validé ce que Zelena avait déjà pointé du doigt !



Bon courage, ça va le faire
(et pense a changer le fait que tu cherche un stage si c'est déjà fait )

Merci _laurent !
J'ai voulu apprendre à utiliser Bootstrap car ça revient pas mal dans les compétences demandées dans les offres d'emploi mais je n'ai pas pris conscience que ce n'était pas vraiment adapté pour ce genre de site.

Aurais-tu des conseils de doc à me donner pour apprendre à avoir un code propre ? (je parcours souvent OpenClassroom, Codecademy et Grafikart mais je suis un peu perdue sur cette question).

Je me rends bien compte maintenant que je n'ai peut être pas assez réfléchi mon site, je vais en refaire un je pense =)

J'ai été regarder ton site, j'adore le background !!!
Encore merci! =)

La grille de bootstrap tu peux l'utiliser partout ce n'est pas un soucis.

Ttlp a écrit :
J'ai voulu apprendre à utiliser Bootstrap car ça revient pas mal dans les compétences demandées dans les offres d'emploi mais je n'ai pas pris conscience que ce n'était pas vraiment adapté pour ce genre de site.

Ah mais c'est très bien de le connaitre et de savoir l'utiliser.
C'est juste que ce sont de gros outils avec beaucoup de code (histoire de couvrir tout les cas). Du coup sur des sites très simples tu as plus de code mort qu'autre chose (performance et bonnes pratique) et l'apport d'une telle bibliothèque n'est pas ouf du coup (surtout si tu n'utilise pas de compo et que tu refait toi meme le CSS).
Meme combat que pour JQuery et autre.

Ttlp a écrit :
Aurais-tu des conseils de doc à me donner pour apprendre à avoir un code propre ? (je parcours souvent OpenClassroom, Codecademy et Grafikart mais je suis un peu perdue sur cette question).

J'en ai pas en tete non mais il faut coder pour devenir coderon !
Je n'ai pas regardé ton code donc je ne sais pas du tout si t'es dans les clou ou pas hein.

Ttlp a écrit :
Je me rends bien compte maintenant que je n'ai peut être pas assez réfléchi mon site, je vais en refaire un je pense =)

Yes j'aime bien repartir de zero aussi. Prépare bien le contenu et l'architecture à l'avance c'est super utile oui

Ttlp a écrit :
J'ai été regarder ton site, j'adore le background !!!

Hahaha merci il faudrait que je le mette à jour il commence à être assez vieux ^^'
Pour le bg il vient de Subtle Patterns ils sont particulièrement bien fait, j'en mets pas souvent mais je me fait des petits kiff ^^

Bonne continuation et n'hésite pas a nous tenir au jus de l'avancée

En tout cas merci beaucoup _laurent ton aide, ça va beaucoup m'aider à avancer ! =)

Je poste mon code, comme ça s'il y en a qui ont le courage de jeter un coup d’œil pour me dire ce qui ne va pas (je n'ai pas vraiment l'occasion d'être jugée sur la qualité de mon code avec mes cours, j'avais un projet à rendre avec une soutenance, le prof n'a pas du tout regardé mon code...)

<!DOCTYPE html>
<html>

	<head>
	
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="yes">


		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="formation.css" type="text/css"/>
		
		<script src="https://use.fontawesome.com/2bb44ffb9f.js"></script>			
		<script src="shrink/js/classie.js"></script>
		<script src="shrink/js/shrink.js"></script>

		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	
		<title> CV </title>
		
	</head>

	<body data-spy="scroll" data-target=".navbar">
	
		<div id="wrapper">
		
		
			<!--NAVBAR MENU-->
			<header>
				<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
					<div class="container-fluid">
					
						<div class="navbar-header">
						
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
							
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								
							</button>
							<a class="navbar-left" href="index.html"><img src="pictures/logoD.png" id="iconCv"></a>
						</div>
							
						<div class="collapse navbar-collapse">	
						
								<ul class="nav navbar-nav navbar-right list-inline col-lg-4" role="tablist">
									
									<li> <a href="#formation" style="color:#ffffff">Formation</a></li>
																		
									<li> <a href="#portfolio" style="color:#ffffff">Créativité</a></li>
									
									<li><a href="#contact" style="color:#ffffff">Contact</a></li>							
									
								</ul>					
						</div>
					</div>
				</nav>
			</header> <!-- end navbar -->
	
	
			<!-- INTRO -->
			<div id="intro">
				<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="row">
						<div class="hidden-sm hidden-xs text-center">
							<img src="pictures/intro.png" id="intro-img">
						</div><div class="col-sm-12 col-xs-12 hidden-lg hidden-md text-center">
							<img src="pictures/introMini.png" id="intro-img">
						</div>
					</div>	
				</div>
			</div> <!-- end intro -->
		
			<!--FORMATION-->
			
			<div id="formation">
				<div class="container">
					<div class="row">			
						<div class="col-xs-12 col-sm-8 col-sm-push-2 text-center">
							<img class="img-responsive" id="formation-img" src="pictures/formationTitle.png" alt="">
						</div>
						
						
							
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
							<div  class="img_identity" id="reconversion">
								<a href="#formationModalF1" class="portfolio-link" data-toggle="modal">
								<img class="col-xs-12 col-sm-4 img-responsive" src="pictures/reconversion.png"></a>
							</div>
											
							<div class="img_identity" id="formations">
								<a href="#formationModalF2" class="portfolio-link" data-toggle="modal">
								<img class="col-xs-12 col-sm-4 img-responsive" src="pictures/formations.png"></a>
							</div>
											
							<div class="img_identity" id="competence">
								<a href="#formationModalF3" class="portfolio-link" data-toggle="modal">
								<img class="col-xs-12 col-sm-4 img-responsive" src="pictures/competence.png"></a>
							</div>				
						</div>	
					</div>	
				</div>	
			</div> <!-- end formation -->
		
		
		
			<!--PORTFOLIO-->
			
			<section id="portfolio">
				<div class="container">
					<div class="row">
						<div class="col-lg-12 col-sm-8 col-sm-push-2 text-center">
							<img class="img-responsive" id="portfolio-img" src="pictures/portfolio copy.png"  alt="">
						   
						</div>
					</div>
				
				<!-- OTTERS -->
					<div class="row">
						<div class="col-sm-3 portfolio-item text-center">
							<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
								<div class="caption">
									<div class="caption-content">
										<i class="fa fa-search-plus fa-3x"></i>
									</div>
								</div>
								<img src="creativity/otters.jpg" class="img-responsive" alt="">
							</a>
						</div>
				
				<!-- BIRDS -->
						<div class="col-sm-3 portfolio-item text-center">
							<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
								<div class="caption">
									<div class="caption-content">
										<i class="fa fa-search-plus fa-3x"></i>
									</div>
								</div>
								<img src="creativity/birds.jpg" class="img-responsive" alt="">
							</a>
						</div>
						
				<!-- CLOUDS --> 
						<div class="col-sm-3 portfolio-item text-center">
							<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
								<div class="caption">
									<div class="caption-content">
										<i class="fa fa-search-plus fa-3x"></i>
									</div>
								</div>
								<img src="creativity/clouds.jpg" class="img-responsive" alt="">
							</a>
						</div>
						
				<!-- JAPAN -->		
						 <div class="col-sm-3 portfolio-item text-center">
							<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
								<div class="caption">
									<div class="caption-content">
										<i class="fa fa-search-plus fa-3x"></i>
									</div>
								</div>
								<img src="creativity/japan.jpg" class="img-responsive img-center" alt="">
							</a>
						</div>
					</div>
					
				
				<!-- FINDCAT -->

						<div class="row">
						 <div class="col-sm-3 portfolio-item text-center">
							<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
								<div class="caption">
									<div class="caption-content">
										<i class="fa fa-search-plus fa-3x"></i>
									</div>
								</div>
								<img src="creativity/findCat.jpg" class="img-responsive" alt="">
							</a>
						</div>	
						
				<!-- CLOUDY -->
						<div class="col-sm-3 portfolio-item text-center">
							<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
								<div class="caption">
									<div class="caption-content">
										<i class="fa fa-search-plus fa-3x"></i>
									</div>
								</div>
								<img src="creativity/cloudy.jpg" class="img-responsive" alt="">
							</a>
						</div>
						
				<!-- MARIO! -->		
						<div class="col-sm-3 portfolio-item text-center">
							<a href="#portfolioModal7" class="portfolio-link" data-toggle="modal">
								<div class="caption">
									<div class="caption-content">
										<i class="fa fa-search-plus fa-3x"></i>
									</div>
								</div>
								<img src="creativity/Mario!3.jpg" class="img-responsive" alt="">
							</a>
						</div>
						
				<!-- GERBILS -->		
						<div class="col-sm-3 portfolio-item text-center">
							<a href="#portfolioModal8" class="portfolio-link" data-toggle="modal">
								<div class="caption">
									<div class="caption-content">
										<i class="fa fa-search-plus fa-3x"></i>
									</div>
								</div>
								<img src="creativity/gerb.jpg" class="img-responsive" alt="">
							</a>
						</div>
					</div>	
				</div>		
				
			   
			</section>	<!-- end portfolio -->
			
			

			

			<!-- Contact Section -->
			<section id="contact">
				<div class="container">
					<div class="row">
						<div class="col-lg-12 col-sm-8 col-sm-push-2 text-center">
							<img class="img-responsive" id="formation-img" src="pictures/contact.png" alt="">
						</div>
					</div>
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2">
							<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
							<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
							<form name="sentMessage" id="contactForm" novalidate>
								<div class="row control-group">
									<div class="form-group col-xs-12 floating-label-form-group controls">
										<label>Name</label>
										<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
										<p class="help-block text-danger"></p>
									</div>
								</div>
								<div class="row control-group">
									<div class="form-group col-xs-12 floating-label-form-group controls">
										<label>Email Address</label>
										<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
										<p class="help-block text-danger"></p>
									</div>
								</div>
								<div class="row control-group">
									<div class="form-group col-xs-12 floating-label-form-group controls">
										<label>Phone Number</label>
										<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
										<p class="help-block text-danger"></p>
									</div>
								</div>
								<div class="row control-group">
									<div class="form-group col-xs-12 floating-label-form-group controls">
										<label>Message</label>
										<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
										<p class="help-block text-danger"></p>
									</div>
								</div>
								<br>
								<div id="success"></div>
								<div class="row">
									<div class="form-group col-xs-12">
										<button type="submit" class="btn btn-success btn-lg">Send</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</section> <!-- end contact -->

		
		
			<!--FOOTER-->
			
			<div class="footer">	
				<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="row text-center">
						<a href="#wrapper"> TOP </a>
						
						
					</div>
				</div>		
			</div>	<!-- /footer -->
		</div> <!-- end wrapper -->
		
		<!-- MODAL FORMATION -->
			
			
			<div class="formation-modal modal fade" id="formationModalF1" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="modal-content">
					<div class="container">
						<div class="row">
							<div class="modal-header">
								<h2 class="modal-title text-center">
									CE QUE JE VEUX : 
								</h2>
							</div>
							<div class="modal-body">
								<h4></br></br> Un stage de 3 mois ou plus  =D</br></br></h4>				
							</div>
							<div class="modal-footer">
								<div class="close-modal" data-dismiss="modal">
									<div class="lr">
										<div class="rl">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
			<div class="formation-modal modal fade" id="formationModalF2" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="modal-content col-xs-12">
					<div class="container">
						<div class="row">
							<div class="modal-header">
								<h2 class="modal-title text-center">
									MES FORMATIONS : 
								</h2>
							</div>
							<div class="modal-body">
								<h4> En cours : </h4>
									<p>CNAM - Certificat professionnel "Développeur de sites web". </br></br></br><p>
								<h4> Achevée : </h4>
									<p>RENNES 2 - Master recherche "Histoire et critique des arts"</p>
							</div>
							<div class="modal-footer">
								<div class="close-modal" data-dismiss="modal">
									<div class="lr">
										<div class="rl">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
			<div class="formation-modal modal fade" id="formationModalF3" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="modal-content">
					<div class="container">
						<div class="row">
							<div class="modal-header">
								<h2 class="modal-title text-center">
									COMPETENCES :
								</h2>
							</div>
							<div class="modal-body">
									<p> - Html / CSS / JS</br><p>
									<p> - Java</br><p>
									<p> - PHP</br><p>
									<p> - Bases de données / SQL</br><p>
									<p> - Réseaux et administration web (semestre en cours) </br></p>
									<p> - Web design (semestre en cours) </br></p>
									<p> - Bootstrap (autodidacte)
							</div>
							<div class="modal-footer">
								<div class="close-modal" data-dismiss="modal">
									<div class="lr">
										<div class="rl">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>	<!-- end modal formaiton -->
		
			<!-- MODAL WINDOW PORTFOLIO -->
				
			<!-- MODAL OTTERS -->
				<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-content">
						<div class="close-modal" data-dismiss="modal">
							<div class="lr">
								<div class="rl">
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-lg-offset-2">
									<div class="modal-body">
										<h2>OTTERS</br></h2>
										
										<img src="creativity/otters_full.jpg" class="img-responsive img-center" alt="">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> 
				
				
			<!-- MODAL BIRDS -->	
				<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-content">
						<div class="close-modal" data-dismiss="modal">
							<div class="lr">
								<div class="rl">
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-lg-offset-2">
									<div class="modal-body">
										<h2>BIRDS</br></h2>
										
										<img src="creativity/birds_full.jpg" class="img-responsive img-centered" alt="">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			

			<!-- MODAL CLOUDS -->
				<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-content">
						<div class="close-modal" data-dismiss="modal">
							<div class="lr">
								<div class="rl">
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-lg-offset-2">
									<div class="modal-body">
										<h2>CLOUDS</h2>
										<p> Some doodles...</br> </p>
										
										<img src="creativity/clouds_full.jpg" class="img-responsive img-centered" alt="">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			

			<!-- MODAL JAPAN -->
				<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-content">
						<div class="close-modal" data-dismiss="modal">
							<div class="lr">
								<div class="rl">
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-lg-offset-2">
									<div class="modal-body">
										<h2>JAPAN</h2>
										<p> Travel book about my journey in Japan </br></p>
										
										<img src="creativity/japan_full.jpg" class="img-responsive img-centered" alt="">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			

			<!-- MODAL FINDCAT -->
				<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-content">
						<div class="close-modal" data-dismiss="modal">
							<div class="lr">
								<div class="rl">
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-lg-offset-2">
									<div class="modal-body">
										<h2>FINDCAT</h2>
										<p> There's a cat hide among otters. Will you find it? </br> </p>
										
										<img src="creativity/findCat_full.jpg" class="img-responsive img-centered" alt="">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			
			<!-- MODAL CLOUDY -->
				<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-content">
						<div class="close-modal" data-dismiss="modal">
							<div class="lr">
								<div class="rl">
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-lg-offset-2">
									<div class="modal-body text-center">
										<h2>CLOUDY</h2>
										<p> Digital painting </br> </p>
										
										<img src="creativity/cloudy_full.jpg" class="img-responsive img-centered" alt="" id="cloudy">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>	
			

			<!-- MODAL MARIO! -->
				<div class="portfolio-modal modal fade" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-content">
						<div class="close-modal" data-dismiss="modal">
							<div class="lr">
								<div class="rl">
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-lg-offset-2">
									<div class="modal-body">
										
										<h2>MARIO!</h2>
										<audio controls="controls" preload="auto" ></br>
										<source src="marioTheme.mp3" type="audio/mp3" /></audio>
										<img src="creativity/Mario!3_full.jpg" class="img-responsive img-centered" alt="">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			

			<!-- MODAL GERBILS -->
				<div class="portfolio-modal modal fade" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-content">
						<div class="close-modal" data-dismiss="modal">
							<div class="lr">
								<div class="rl">
								</div>
							</div>
						</div>
						<div class="container">
							<div class="row">
								<div class="col-lg-8 col-lg-offset-2">
									<div class="modal-body">
										<h2>GERBILLES</h2>
										<p> Digital painting </br> </p>
										
										<img src="creativity/gerb_full.jpg" class="img-responsive img-centered" alt="">
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div> <!-- /modal portfolio -->
	
	
	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="bootstrap/js/jquery.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="bootstrap/js/jquery-3.1.0.min.js"></script>
		
		
		<!--VALIDATION CONTACT FORM -->		
		<script src="jqBootstrapValidation.js"></script>
		<script src="contact_me.js"></script>

	</body>
</html>
	

/*def du body*/
body{
	position:relative;
	overflow-x:hidden;
	overflow-y:scroll;
}

#wrapper{
	width:100%;
}

/*MENU*/

.navbar {
	background-color:#2b3c3e;
	padding: 25px 25px 25px 25px;
	font-family:tahoma;
	font-size:20px;
	
}


#iconCv{

	height:auto;
	width:auto;
	max-width:90px;
	max-height:90px;
	float: left;
	margin-left:90px;
	margin-top:-15px;
	margin-bottom:-13px;
}

.nav li{
	margin-top:-12px;
}

.navbar-custom .navbar-nav li.active a, .navbar-custom .navbar-nav li.active a:active, .navbar-custom .navbar-nav li.active a:focus, .navbar-custom .navbar-nav li.active a:hover {
    background:  rgba(139, 210, 206, 1) none repeat scroll 0 0;
    color: #fff;
	padding: 20px 20px 20px 20px;
	margin: -10px 0px -10px 0px;
} 

header.nav.a{
	transition: all 0.3s;
}


.collapse{
	margin-top:13px;
	color:#2b3c3e;
}
	
.navbar-collapse{
	height:auto;
	width:auto;
	max-height:50px;

}

@media (max-width: 768px) {
	
	.navbar{
		max-height:75px;
	}
	.navbar-toggle{
		margin-top:-6px;
	}
	.collapse ul{
		height:140px;
		background-color:#2b3c3e;
		overflow-y:hidden;
	}
	
	#iconCv{
		width:55px;
		height:55px;
		margin-left:0px;
	}
	.navbar-custom .navbar-nav {
		margin-top:-3px;
		margin-bottom:-5px;
	}
}

/*NAVBAR SHRINK*/
@media (min-width: 768px) {
	header {
		position: fixed;
		z-index: 999;
	}
	 
	header nav {
		display: inline-block;
	}
	header nav a {
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s; 
	}

	header.smaller.navbar{
		height:90px;

	}
	
	header.smaller nav a{
		line-height:0px; 
	}
	
	header.smaller.nav li {	
		margin-bottom:-5px;
		margin-top:-15px;
		
	}

	header #iconCv{
		transition: all 0.6s; 
	}

	header.smaller #iconCv{
		width:55px;
		height:55px;
		margin-left:20px;
		margin-top: -12px;
	}
}

/*INTRO*/

#intro{
	background-color:#8bd2ce;
	height:750px;
}

#intro-img{
	margin-top:280px;
	margin-left:20px;
}

@media (max-width: 768px) {
	#intro{
		height:520px;
	}
	#intro-img {
		margin-top: 150px;
	}
}


/* FORMATION SECTION */
#formation-img{
	margin-top:35px;
	margin-left:6px;
}

#formation{
	background-color:#fff;
	margin-bottom:100px;
}


/* PORTFOLIO */

#portfolio-img{
	margin-top:20px;
	margin-left:15px;
	width: 100%;
}

#portfolio{
	background-color:#2b3c3e;
	padding-bottom:40px;
}


#portfolio .portfolio-item .portfolio-link{
	display:inline-block;
	margin: 0 auto;
    max-width: 400px;
    position: relative;	
	margin-top:30px;
}


#portfolio .portfolio-item .portfolio-link .caption {
    background: rgba(139, 210, 206, 0.9) none repeat scroll 0 0;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease 0s;
    width: 100%;
}

#portfolio .portfolio-item .portfolio-link .caption:hover {
    opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
    color: #fff;
    font-size: 20px;
    height: 20px;
	margin-top:-12px;
    position: absolute;
    text-align: center;
	top:50%;
    width: 100%;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
    margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3, #portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
    margin: 0;
}
#portfolio * {
    z-index: 2;
}
* {
    box-sizing: border-box;
}



/*CONTACT FORM */

.floating-label-form-group {
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
    padding-bottom: 0.5em;
    position: relative;
}
.floating-label-form-group input, .floating-label-form-group textarea {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    box-shadow: none !important;
    font-size: 1.5em;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    resize: none;
    z-index: 1;
}
.floating-label-form-group label {
    display: block;
    font-size: 0.85em;
    line-height: 1.76471em;
    margin: 0;
    opacity: 0;
    position: relative;
    top: 2em;
    transition: top 0.3s ease 0s, opacity 0.3s ease 0s;
    vertical-align: baseline;
    z-index: 0;
}


.btn{
	background-color:#8bd2ce;
	overline:display;
}

.btn:hover{
	background-color:#4c868f;
	overline:display;
}

.btn:onclick{
	background-color:#8bd2ce;
}
/*FOOTER*/

.footer{
	height:150px;
	background-color:#2b3c3e;	
	padding-top: 60px;	
}

.footer a{
	text-decoration:none;
	color: #fff;
	font-size: 30px;	
}

@media (max-width: 768px) {
	.footer{
		height:120px;
		padding-top:45px;
	}
}


/* MODAL FORMATION */

.modal-backdrop.in{
	background-color:#2b3c3e;
	opacity:0.2;
}

.formation-modal .modal-content {
	background-clip: border-box;
	border-radius: 0;
	box-shadow:none;
	border-color:;
	border-left:none;
	border-top:none;
	-webkit-box-shadow: 10px 10px 5px 2px rgba(0,0,0,0.52);
	-moz-box-shadow: 10px 10px 5px 2px rgba(0,0,0,0.52);
	box-shadow: 10px 10px 5px 2px rgba(0,0,0,0.52);
	margin-top:97px;
	height: 440px;
	width: 40%;
	margin-left:30%;
	background-color:#2b3c3e ;
	color:#fff;
	font-family:DejaVu Sans;
}
	
.formation-modal .modal-header{
	width: 40%;	
	margin-left:6%;
}

.formation-modal .modal-header .modal-title{
	font-weight: bold;
	font-size:35px;
}


.formation-modal .modal-body p{
	margin-left: 80px;
	font-style:italic;
}

.formation-modal .modal-footer{
	width:40%;
	margin-left:6%;
}

.formation-modal .modal-footer .close-modal {
    background-color: transparent;
    cursor: pointer;
    position: absolute;
	margin-left:30%;
}

.formation-modal .modal-footer .close-modal:hover {
    opacity: 0.3;
}



	/* F1 FORMATION MODAL */
		
	#formationModalF1.formation-modal .modal-title{
		margin-top:15px;
		margin-bottom:0px;	
	}

	#formationModalF1.formation-modal .modal-body h4{
		margin-left: 150px;
		padding-top:40px;
	}
		
	#formationModalF1.formation-modal .modal-body {
		margin-bottom:80px;
	}

	#formationModalF1.formation-modal .modal-footer .close-modal .lr {
		background-color: #71a5ad;
		height: 55px;
		margin-left: 35px;
		transform: rotate(45deg);
		width: 1px;
		z-index: 1051;
		margin-top:4px;
	}

	#formationModalF1.formation-modal .modal-footer .close-modal .lr .rl {
		background-color: #71a5ad ;
		height: 55px;
		transform: rotate(90deg);
		width: 1px;
		z-index: 1052;
		margin-top:4px;
	}

	/* F2 FORMATION MODAL */
	
	#formationModalF2.formation-modal .modal-header{
		margin-left:5%;
	}

	#formationModalF2.formation-modal .modal-title{
		margin-top:15px;
		margin-bottom: 0px;	
	}

	#formationModalF2.formation-modal .modal-body {
		margin-bottom:20px;
	}

	#formationModalF2.formation-modal .modal-body h4{
		margin-left: 40px;
		padding-top:15px;
	}
	
	#formationModalF2.formation-modal .modal-footer{
		margin-left:5%;
	}
	#formationModalF2.formation-modal .modal-footer .close-modal .lr {
		background-color: #71a5ad;
		height: 55px;
		margin-left: 35px;
		transform: rotate(45deg);
		width: 1px;
		z-index: 1051;
		margin-top:4px;
	}

	#formationModalF2.formation-modal .modal-footer .close-modal .lr .rl {
		background-color: #71a5ad ;
		height: 55px;
		transform: rotate(90deg);
		width: 1px;
		z-index: 1052;
		margin-top:4px;
	}


	/* F3 FORMATION MODAL */
		
	#formationModalF3.formation-modal .modal-title{
		margin-top:15px;
		margin-bottom:0px;	
	}

	#formationModalF3.formation-modal .modal-body h4{
		margin-left: 40px;
		padding-top:0px;
	}
		
	#formationModalF3.formation-modal .modal-body {
		margin-bottom:0px;
	}

	#formationModalF3.formation-modal .modal-footer .close-modal .lr {
		background-color: #71a5ad;
		height: 55px;
		margin-left: 35px;
		transform: rotate(45deg);
		width: 1px;
		z-index: 1051;
		margin-top:4px;
	}

	#formationModalF3.formation-modal .modal-footer .close-modal .lr .rl {
		background-color: #71a5ad ;
		height: 55px;
		transform: rotate(90deg);
		width: 1px;
		z-index: 1052;
		margin-top:4px;
	}


	

	
/* PORTFOLIO MODAL */


.portfolio-modal .modal-content {   
	background-clip: border-box;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 100%;
    padding:;
	text-align:center;
	background-color:#2b3c3e;
	color:#fff;
	font-family: tahoma;
}


.portfolio-modal .modal-content h2{
	margin-top: 80px;
}
.portfolio-modal .close-modal {
    background-color: transparent;
    cursor: pointer;
    height: 75px;
    position: absolute;
    right: 25px;
    top: 25px;
    width: 75px;
}
.portfolio-modal .close-modal:hover {
    opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
    background-color: #71a5ad;
    height: 75px;
    margin-left: 35px;
    width: 1px;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	/* IE 9 */
	-webkit-transform: rotate(45deg);
	/* Safari and Chrome */
	z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
    background-color: #71a5ad ;
    height: 75px;
    width: 1px;
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	/* IE 9 */
	-webkit-transform: rotate(90deg);
	/* Safari and Chrome */
	z-index: 1052;
}
.portfolio-modal .modal-backdrop {
    display: none;
    opacity: 0;
}
.modal{
	background-color::#2b3c3e;
}

#portfolioModal6 img{
	padding-left: 90px;
}

#portfolioModal1 img{
	padding-left: 200px;
}

Merci d'avance à ceux qui prendront le temps de me lire

Oula, pas besoin de tout poster ici ca prend une place de fou hahaha vu que ton site est en ligne on peut directement voir le code pas besoin de le mettre ici

Mais merci pour l'effort

Alors pour une premiere piste tu peux passer ton site dans les moulinettes suivantes :
- W3C Validator https://validator.w3.org/
- W3C CSS Validator https://jigsaw.w3.org/css-validator/
- Google Test my site https://testmysite.thinkwithgoogle.com/

Déjà avec tout ça tu aura plein de bonnes piste. Attention a ne pas tout prendre au pied de la lettre non plus, les règles sont parfois très très stricte, mais moins tu as d'erreur mieux c'est. En tout cas les erreurs doivent te faire investiguer pour savoir si tu fais délibérément ce choix ou si c'est une faute.
Je viens de regarder les résultats et effectivement tu as énormément de petits points d'amélioration. Pas compliqués mais à faire et a apprendre.
Et si jamais tu coinces sur un point, viens nous voir

Merci _laurent pour ces conseils. Effectivement il y a pas mal d'erreurs ...
J'ai commencé à réfléchir à mon nouveau site. J'ai réalisé une cv digital ce week-end et je pense que le design de mon site s'approchera de celui de mon cv digital (histoire de faire une petite continuité).
Si vous pouvez me donner votre avis dessus je suis également preneuse (histoire de faire les choses bien jusqu'au bout =D )
Merci d'avance !

ps: dsl pour la qualité mais le fichier ne peux pas dépasser les 300ko...
Modifié par Ttlp (05 Jun 2017 - 18:07)

Bonsoir.

Charmant, le design... de la fraîcheur, de la fantaisie.

Une petite réserve sur les 'rectangles ombres' de la partie 'Projets' : ils nuisent un peu à la lecture... plus que les 'ovales ombres' de la partie 'Formation - Expérience'.

À ce sujet, je ne suis pas sûre que 'Projets' soit le terme le plus adéquat, il s'agit plutôt de réalisations, ce ne sont plus des projets...

Dans l'ensemble, j'aime bien... mais moi je ne suis pas vraiment fan d'un marketing agressif et tapageur. Peut-être un peu trop sage quand même... D'un autre côté, on ne peut pas faire semblant d'être quelqu'un qu'on n'est pas... ça finit par se voir. Peut-être, ce serait sympa de mettre quelques points en valeur... pour casser cette mise en page très symétrique.

Ouha je trouve ça super frai et stylé !
En tout cas rien a voir avec la première version du site que j'ai vu, là c'est frai et vivant ! J'aime !

Salut, sympa le CV !

C'est du 100% handmade ou avec des emprunts ?

Merci Zelena pour les remarques, effectivement "projets" n'est pas trop adapté. Je n'avais pas fait attention avec les carrés mais c'est vrai qu'ils gênent la lecture =)

Merci _laurent! c'est sûr que ça change du design du site très sombre =D

Spongebrain c'est tout handmade, excepté le background (ça a bien occupé mon week-end d'ailleurs ^^ )

Salut!

Moi j'ai des remarques côté responsive.

Y'a des problème sur la fenêtre modale "Ce que je veux : un stage de 3 mois ". Tout le bas est en dehors de la fenêtre (y compris la crois pour fermer la popin)... En faite, toutes les petites fenêtres modales ^^

Pareils pour le menu, l'encadré de l'item est énorme (en small screen) ça crée un décalage.

De nouveau sur le small screen (ou medium également cette fois ci) sur les pages
http://estellepieragnolo.com/#wrapper on peut pas fermer via la croix... je ne vois pas (techniquement) pourquoi .

En medium screen (donc juste avant que le menu se mette en sandwich ) si on clic sur un item, on tombe sur le titre, mais celui ci est couper en deux, ou passe en dessous du menu.

Voila pour les petites remarques un peu chiantes
Modifié par JENCAL (06 Jun 2017 - 17:09)