Portfolio d'une développeuse front-end [+Graphiste+Vidéos+Photos]

Bonjour, bonsoir !

J'ai construit mon site avec Wordpress car il est plus simple d'y intégrer un formulaire de contact.

J'ai créé mon thème.

Mon site joue aussi avec les background fixe, scroll avec des photos que j'ai prise avec mon reflex (DSLR) pour rendre la navigation plus sympas.

www.cecile-melay.com/

Salut,

En consultant ton site sur mon iPad Mini, il y a une chose gênante : le menu s'ouvre tout seul lorsqu'on est tout en haut de la page ou qu'on la fait défiler vers le haut. Un menu susceptible d'être masqué sur des écrans plus étroits et repéré au moyen du fameux hamburger ne doit être ouvert ou fermé que sur action de l'utilisateur et être fermé par défaut. En outre, dans ce menu, il y a du contenu qui semble tronqué.

En ce qui concerne l'énumération de tes compétences, évite d'utiliser les pourcentages, notes ou étoiles, qui ne veulent rien dire dans l'absolu. Emploie plutôt des termes comme « notions », « bonne connaissance » ou « maîtrise ».

En ce qui concerne le lien vers la version dans l'autre langue, évite d'utiliser un drapeau en guise de lien (n'oublie jamais que bon nombre d'anglophones ne sont pas britanniques ) : utilise un lien textuel de type « English ».

Évite d'évoquer des sections qui ne sont pas encore disponibles, comme ton blog estampillé « prochainement » : c'est presque aussi amateur que l'affichage d'une page en construction.

Évite de mélanger anglais et français : les rubriques « Work » et « About », si leur intitulé convient parfaitement à une version en anglais, doivent être traduites par « Réalisations » et « À propos » dans la version en français.

Enfin, soigne ton orthographe : j'ai vu passer une « veille réguilière ».

À l'occasion, je passerai en revue la partie code.

En tout cas, je peux te dire que tu as très bien fait de te lancer dans la création de ton portfolio : c'est un très bon exercice pour quelqu'un qui, comme toi, manque d'expérience.

En ce qui concerne l'énumération de tes compétences, évite d'utiliser les pourcentages, notes ou étoiles, qui ne veulent rien dire dans l'absolu. Emploie plutôt des termes comme « notions », « bonne connaissance » ou « maîtrise ».

Tout à fait d'accord.

Tout d'abord, de telles indications comportent un paradoxe : comment évaluer quantitativement ce qu'on ne connait pas, et par opposition ce qu'on connait (puisque les deux évaluations dépendent l'une de l'autre). Pour prendre un exemple personnel, je pratique Photoshop, mais je suis totalement incapable d''estimer quelle "part" j'en connais et quelle part je n'en connais pas (sauf que ce que j'en maîtrise n'est pas énorme)

Ensuite, de telles indications sont très tendance mais peuvent te desservir auprès d'un employeur potentiel. Un employeur qui n'a pas de connaissances techniques (et qui, comme d'habitude cherche dans candidats qui savent "tout") peut parfaitement décider que connaître WordPress (ou Photoshop) à 70% n'est pas suffisant, et ton CV risque d'être rejeté par rapport à celui d'un candidat qui aura écrit sur le sien "WordPress : excellente connaissance" ou "WordPress" tout court. Le but d'un CV est de fournir des informations permettant de décrocher un entretien d'embauche, pas de s'en faire exclure.

En ce qui concerne le lien vers la version dans l'autre langue, évite d'utiliser un drapeau en guise de lien (n'oublie jamais que bon nombre d'anglophones ne sont pas britanniques ) : utilise un lien textuel de type « English ».

Heu pas vraiment d'accord. De nombreux symboles ont une signification non motivée, purement conventionnelle. L' icône Enregistrer des logiciels est toujours une disquette, bien que la disquette ait pratiquement disparu. C''est aussi le cas des icônes de drapeaux utilisés comme symboles de langues. Je ne pense pas qu'aucun internaute voyant une icône de drapeau britannique s'attende, en cliquant sur celle-ci, à accéder à des textes exclusivement en British English, et une icône est plus immédiatement compréhensible qu'un énoncé textuel. Bien sûr, on peut aussi combiner texte et icône.
Modifié par thierry (10 Dec 2014 - 10:17)

thierry a écrit :
Heu pas vraiment d'accord. De nombreux symboles ont une signification non motivée, purement conventionnelle. L' icône Enregistrer des logiciels est toujours une disquette, bien que la disquette ait pratiquement disparu. C''est aussi le cas des icônes de drapeaux utilisés comme symboles de langues. Je ne pense pas qu'aucun internaute voyant une icône de drapeau britannique s'attende, en cliquant sur celle-ci, à accéder à des textes exclusivement en British English, et une icône est plus immédiatement compréhensible qu'un énoncé textuel. Bien sûr, on peut aussi combiner texte et icône.

Non, c'est une erreur courante, confondre la localisation (pays) avec la langue. C’est très différent et les drapeaux devraient être cantonnés à la localisation. Un site peut très bien offrir les deux: Des pays différents, et des langues différentes, avec parfois plusieurs langues par pays. Pareil que pour l'anglais, le français != la France. Et même l'inverse, tu peux être français et parler allemand, ou italien et parler allemand. De plus, utiliser les codes iso de langue, fr / en / de / etc. est une pratique très répandue et s'identifient donc très facilement.
De plus, c'est une pratique qui était très répandue il y a dix/quinze ans et qui est aujourd'hui presque abolie, avec raison.
Le drapeau risque aussi de déranger le locuteur de la langue qui n'est pas de la même origine que le drapeau. Pour être d'un pays dont les trois langues parlées ont pour drapeau celui d0un pays limitrophe, je peux vous dire que ceci est loin d'être négligeable. Et je ne parle même pas des cas plus délicats, comme certains irlandais avec l'Union Jack, ou certains américains ne reconnaissant pas le drapeau anglais (ça nous paraît évident mais ce n'est pas le cas de tout le monde!). Le texte est neutre, et compréhensible par tous les locuteurs.

http://www.w3.org/International/questions/qa-link-lang#flags

@Cecile_

Pour en revenir au sujet:

Le code:
– Pas de doctype, ni de balise <html>, la première balise est un <head>
– Une simple validation sur http://validator.w3.org, révèle pas mal d'erreurs, en plus de celle provoquée par la balise ci-dessus. Certaines erreurs font carrément peur:

<nav>
  <ul>
  <h6>Thèmes</h6>
  <a href=""><li>Programmation</li></a>
  <a href=""><li>Design</li></a>
  <a href=""><li>Nouvelles technologies</li></a>
  </ul>
 </nav>

Il y a des </br> un peu partout, des <a> dans des <a>
Là on doit être dans les alentours de HTML5 0%-20%, que pensera un recruteur?
– Les éléments de formulaire n'ont pas de <label>

Dans la CSS:

* {
transition: 0.3s all ease;
margin:0;
padding:0;
box-sizing: border-box;
moz-box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
font-size:16px;
color:#757474;
position:relative;
z-index:3;
}

C'est une très mauvais utilisation du sélecteur * que de lui attribuer couleurs, font, position:relative, z-index(??). Au passage «moz-box-sizing» ça n'existe pas. Utiliser ce sélecteur flingue toute l'utilité de la «cascade» des CSS.
Toutes les tailles de police sont en pixels.

Il y a pas mal de manquements assez graves, un recruteur qui cherche un développeur front-end risque pourtant fort d'aller inspecter un peu sous le capot.

kustolovic a écrit :
Il y a pas mal de manquements assez graves, un recruteur qui cherche un développeur front-end risque pourtant fort d'aller inspecter un peu sous le capot.

+100. C'est exactement la remarque que je me suis faite en allant voir "sous le capot" du site, surtout quand je lis : "Développeur front-end". En plus de débusquer un éventuel charlatan, la lecture du code permet d'estimer - en partie - un niveau de compétence.

PS : il y a deux links permettant d'afficher la favicon, ils font double emploi et échouent pourtant à afficher cette dernière :

<link rel="shortcut icon" href="http://www.cecile-melay.com/wp-content/themes/wpbootstrap/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.cecile-melay.com/wp-content/themes/wpbootstrap/favicon.ico"type="image/x-icon">

Notons que, pour le deuxième link, il manque un espace avant la déclaration type (celle-ci n'étant d'ailleurs pas obligatoire). Personnellement je supprimerais purement et simplement le dernier link pour ne garder que le premier.