Portfolio Web Developpeur

Bonjour,

Je souhaite vous montrer mon portfolio, je l'ai hébergé sur un héberger gratuit le temps de faire tous les test. Et donc de régler les derniers petits détails.

J'ai volontairement laissé tout le code sans le minifier. Toutes remarques seront les bienvenue.

Sémantique, web design, etc...

Les liens de mes projets ne sont pas actifs ils renverrons vers différents sites comme CodePen ou encore Dribble. Il n'y a pas de page projet à proprement parlé.

Si vous pouvez avec votre commentaire, me laisser la résolution de votre machine ça serais le top.

Adresse de mon portfolio : http://debals.esy.es

J'ai besoin de ce portfolio pour trouver mon stage... C'est pour cela que j'aimerais qu'il soit le mieux possible.. Mais bon comme tout le monde je pense

Merci d'avance !

Hello,
Testé sur mon MBA 13 pouces et Chrome, résolution de 1440x900.
Pas grand chose à dire sur le graphisme
Deux alertes JS au chargement qui renvoient des valeurs numériques (ma résolution d'écran pour être précis ^^)… un petit test en cours ?
Petit souci avec l'icône picto permettant de fermer le menu une fois déplié : j'ai du cliquer 6 ou 7 fois pour arriver à le fermer. Il faudrait élargir un (gros) poil la zone cliquable si possible : )
Modifié par audrasjb (18 Jan 2016 - 23:49)

Bonjour,

Effectivement, quelques petits tests sont en cour haha.

Oui effectivement je me suis rendu compte qu'il fallait que j'agrandisse la zone cliquable. Même beaucoup l'agrandir. En tout cas merci beaucoup pour votre commentaire.

salut,
je te préviens je cherche toujours la petite bête
Pour moi le design est assez classique même s'il est bon. Je trouve personnellement incohérent de mettre ton portfolio et tes compétences sur toute la largeur de l'écran quand tu en utilises beaucoup moins pour les autres sections (perso je trouve ça gênant et moche surtout avec des résolutions élevées).
L'autre truc qui m'est tout de suite venu à l'esprit est que le site semble vide. Il n'y a pas grand chose à voir de prime abord.
Si non tu pourrais ajouter un formulaire de contact et une jolie carte Google en harmonie avec les couleurs choisies.
Une dernière chose serait peut être de mettre une font un peu plus atypique que la trop classique Arial.

Si non côté code, je te suggérerais de mettre un overflow:hidden sur #ligne1Skills pour qu'il n'y ait pas de barre horizontale qui apparaisse lors de l'animation.
Et surtout passer l'action du clique sur le parent de tes pictos (exemple) car comme déjà signalé, c'est extrêmement pénible (même chose pour le codepen dans ton portfolio).

Salut, les pourcentages sur tes compétences, ça signifie quoi ? sur quoi tu base ? des certifs ? ton propre "jugement" ?

Salut,

Pour les pourcentages je suis vraiment mitigé sur cette manière de présenter l'information. D'ailleurs quand je fais passer un entretien d'embauche et qu'on me présente des données sous cette forme je n'hésites pas à y aller :

Tu connais HTML à 100% ? tu peux me dire à quoi sert les balises <bdi> & <bdo> (où n'importe quel truc pas trop utilisé). De même pour boostrap, ça veux dire quoi connaitre à 95% bootstrap ? Si je te demande de construire une navbar de tête tu sauras le faire ?!

A titre d'exemple je fais du CSS depuis au moins 6 ans et je suis (très) loiiiiiiiiiiin de 80%.

Quelques feedbacks sur le site :
- je vois que tu as écris du texte en majuscule, ça va pas super bien donner dans les résultats de Google, si tu veux afficher du texte en majuscule il faut passer par CSS;
- tu n’as pas de balise meta description, très important pour le référencement;
- les images décoratives doivent effectivement avoir un attribut alt, mais vide (cercleVisage.png, chat.png …);
- Arial donne juste un côté super impersonnel à ton site, à l’heure où on peut utiliser n’importe quelle typo c’est dommage de se limiter à Arial;
- le hover sur la partie mywork est beaucoup trop lent, ça donne une impression d’interface pas très réactive.
- ton menu repasse sous la dernière section, cela le rend inaccessible en bas de page;
- icone réseau social : ici par contre tu n’as pas mentionné de alt, du coup tu as des liens sans aucune valeur sémantique, pas top. Le hover est carrément étrange, tout cela peut (doit) se faire en CSS, pourquoi un simple remplacement d’image ? du coup tu ne peux pas mettre de transition, cela crée une incohérence car tout le reste fonctionne avec des transitions.
- le menu est pas super bien gérer, j’arrive difficilement à le refermer et quand je l’ouvre toute la page est bloquée.
- tu peux mettre tes appels de script en bas de page, c’est une bonne pratique, ça évite de bloquer le rendu de la page. Maintenant à voir si ça n’a pas évolué de ce côté.
- ta hiérachie de titre est pas top non plus, si tu utilises cet outils tu verras de quoi je parle : https://gsnedders.html5.org/outliner

En espérant t’avoir fournis quelques pistes de réflexion

d'où ma question... j'ai le même avis que toi Gili sur le coté pourcentage, je pense que "c'est la mode".

Bonjour,

Tout d'abord, je tiens à dire que je trouve ce site moderne et bien balancé, malgré le débuggage qui s'impose.

Le noir et blanc est à la mode, les grands visuels et l'harmonie des couleurs avec ce saumon/blanc/gris et petite pointe de bleu sont très chics. La silhouette vous met en scène de façon élégante et pro. Ça fonctionne bien graphiquement. Franchement, ça pourrait être le site d'un graphiste. Pour un développeur, c'est un gros atout que d'avoir du goût et de pouvoir gérer aussi le design front-end. Si le template est bien de vous (je n'ai pas été scruter le code)? Sur le fond, la base me semble bonne, bravo pour le travail accompli !

Peu de texte, donc d'avantage de chances d'être lu. Les pictos sont modernes et bien choisis. Peut être décoller les pictos des liens sociaux dans le footer ?

Pour les réglages et le débuggage, voici ce que j'ai noté :

• Sur mon ordi (chrome/mac/OS X snow léopard), l'affichage commence par des bugs avec des boîtes de dialogue qui s'affichent sur fond blanc.
D'abord celle-ci :
http://img15.hostingpics.net/pics/961781Capturedecran20160119a193753.png
Puis celle-ci :
http://img15.hostingpics.net/pics/815737Capturedecran20160119a193838.png

J'ai aussi des boîtes de dialogue sur iPad, mais avec le code 1536, puis 2048.
La résolution des écrans ?

Ensuite, ce n'est pas terminé puisque mon navigateur m'indique que le site est en anglais et me demande si je souhaite le traduire. Pour un développeur, la moindre des choses aurait été que cela se fasse de façon plus fluide et transparente, avec une détection automatique de la langue et la bonne version du site, en français ou en anglais. Votre travail sera appréhendé à la fois sur ce que vous présentez et sur la façon dont vous gérez la présentation.

• L'idée du grand texte sur le visuel est une bonne idée. Attention de bien tester le positionnement sur différents écrans. Moi, sur mon moniteur, le texte tombe en plein sur la tête, ce qui est plutôt gênant :

http://img15.hostingpics.net/pics/711979Capturedecran20160119a195257.png

Je n'ai pas fait de capture pour l'iPad (iPad air), mais là c'est la photo qui pose problème. La photo est trop grande. Du coup, je n'ai que la partie haute de la photo qui est visible dans le cadrage, soit un bout du plafond. La silhouette placée plus bas, n'est tout simplement pas visible.

• Pour les 4 cases qui incluent les réalisations, les liens semblent fonctionner correctement sur mon ordi. Très bonne idée de renvoyer à un site spécialisé dans la démonstration du code ou sur la page twitter, ça fait pro en montrant à la fois votre veille et vos compétences.
Par contre, quand je clique sur le rond (SOON), j'ai a nouveau des fenêtres de dialogue qui m'affichent 1680 puis 1050, avant de recharger la page. Donc, ça ne fonctionne pas.

Je n'ai pas testé sur smartphone.

• Concernant le débat de présenter ses compétences sous forme de pourcentages ou pas, ça plais à certains, moins à d'autre. Une fois j'avais rencontré un responsable d'agence qui m'avais demandé de m'auto évaluer entre 1 et 5 étoiles sur des compétences techniques… J'avais trouvé ça limite…
Pour débloquer un peu le truc, vous pouvez la jouer avec une touche d'humour. Par exemple, au lieu d'indiquer 100% en HTML (pas certain que ça existe), mettez 99%. Idem pour les autres compétences avec des appréciations façon "promo" avec des 59% et des 79%. Vous pouvez aussi mettre une compétence qui n'a rien à voir avec le reste. Comme la pâtisserie ou la gymnastique ? En fait, cela pourrait mettre en avant vos qualités sociales… Quitte à regrouper certaines fonctions non centrales ? Les idées sont lancées, à vous de voir.


Conclusion, un site qui a du potentiel et pourra donner une excellente impression quand les bugs seront réglés. Si un petit bug peut passer sur le site d'un graphiste, ça peut être rédhibitoire pour un développeur. Mais bon, le site est actuellement en cours de développement et je ne doute pas que ceux-ci vont être solutionnés.

Encore bravo, le plus dur a été réalisé !
En attendant la suite ?

PS : trop bien les New Balance !
Modifié par spongebrain (19 Jan 2016 - 20:55)

Bonjour tout le monde je vais essayer de répondre à tout le monde est surtout a toutes vos remarques :

Zelalsan :

Je pense changer ma section home et ma section about car je suis de ton avis je trouve ça carrément vide et à y réfléchir moche du coup...

Le site est effectivement peu remplis, mais quoi mettre d'autre dans un portfolio ? plus de projet ?
Le formulaire est prévu je suis entrain de faire ça.. La google map j'ai essayé de le faire j'ai pas trouvé ça top...

Tu as totalement raison, comme d'autre qui ont commenté j'avais pas pensé à ma font qui est j'avoue pas très originale... Pour le picto donc, de la crois je pense que j'ai réglé le soucis.

Je vais regarder demain pour la ligne1skills.

En tout cas merci beaucoup !

JENCAL :

Bonjour, merci tout d'abord de participer au débat.

Alors sur quoi je me suis basé ? Mes différents partiels, les commentaires de mes professeurs... C'est vrai je pense que j'ai mal évalué peut être et donc revoir à la baisse les pourcentages. Certains de mes professeurs mon conseillé de mettre des pourcentage. Car ils me demande souvent de nous auto-évalué.. Et j'ai aussi fait ça car actuellement comme vous l'avez souligné, c'est la mode et je trouvé sympas le concept.

Gili :

Tout d'abord merci pour vos nombreux conseils.

Je vais essayer de répondre à tous les points :

- Effectivement vu sous cet angle haha je ne suis pas à 100% en html comme je l'ai mis au dessus je vais voir ce que je vais faire pour ces pourcentages.

- Merci pour le conseil je vais m'occuper de transformer les minuscules en majuscules en css

- La meta-description je l'ai pas mise sur cette version, il faudra effectivement que je la mette

- Comme vous l'avez dit pas très personnel le arial, je vais essayer de remédier à ça.

- Je vais augmenter la rapidité sur le hover de mes travaux

- je n'ai pas compris pour mon menu, peux tu m'expliquer plus en détail ... ???

- j'ai effectivement oublié les ait sur les réseaux sociaux.. et je n'ai pas compris sur le hover j'ai essayé avec les "sprites" j'ai pas trouvé ça top.. peut être que j'en est fait une mauvaise pratique

- C'est volontaire je bloque le scroll, parce que je trouve que ce menu ne va pas avec un scroll je vais peut être le repenser

Merci pour ces nombreuses pistes de réflexions, merci encore

spongebrain :

Bonjour, est merci pour tous ces compliments.

Oui le design est entièrement de moi, aucun template de pris. C'est aussi pour me faire la main sur le front end.

Pour vos remarques :

- Normal que c'est deux alert apparaissent c'est tout simplement pour effectuer des réglages c'est provisoire. C'est juste en phase de test .

- Je vais voir du côté de la détection de langue

- je vais surement enlevé la photo dans le home est faire quelque chose d'autre..

- Sur le clic du soon normal j'ai pas encore mis le lien vers mon travail ça renvoie sur rien pour le moment vu que je suis encore en phase de test c'est pas très gênant.

- Trés trés très bonne idée sur la compétence qui n'a rien à voir je vais surement la mettre en application !

Merci beaucoup pour vos commentaire et votre encouragement ! je reviendrais vers vous spongebrain quand mon site sera finalisé totalement !

Ps : J'adore les new balance haha !

Encore merci pour tous vos commentaires, vos conseils et vos encouragements !!

debalsjeremy a écrit :
je n'ai pas compris pour mon menu, peux tu m'expliquer plus en détail ... ???

Sur les petites résolutions, si on scroll tout en bas de ta page et que l’on ouvre ton menu, il passe en dessous du bloc blanc « say hello ». Et vu que je ne sais pas le fermer et que tu as bloqué le scroll je ne sais plus rien faire dans la page et je suis obligé de refresh.

debalsjeremy a écrit :
j'ai effectivement oublié les ait sur les réseaux sociaux.. et je n'ai pas compris sur le hover j'ai essayé avec les "sprites" j'ai pas trouvé ça top.. peut être que j'en est fait une mauvaise pratique

Non un sprite ce n’est pas ça. Un sprite c’est une image qui contient plusieurs images misent les unes à côté des autres, et en CSS (pas besoin de Javascript comme tu l’as fais) tu changes le background-position au :hover. Toi tu as fais une série d’images que tu viens remplacer en JS, du coup tu perds la première utilité des sprites, la performance (le but étant de n’avoir qu’une requête HTTP pour plusieurs images) (http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html).

A côté de cela je disais surtout qu’il n’y avait pas d’utilité d’utiliser des sprites dans ce cas de figure. Car tout peut se faire en CSS, surtout si c’est juste pour changer la couleur de fond. Sauf qu’avec les sprites tu ne peux pas faire de transition sur le background, du coup c’est moins intéressent. Une bonne pratique pour ce genre d’élément ce sont les polices d’icônes ( http://www.alsacreations.com/tuto/lire/1547-police-font-icone-vectorielle-webdesign.html http://fortawesome.github.io/Font-Awesome/icons/)

debalsjeremy a écrit :
C'est volontaire je bloque le scroll, parce que je trouve que ce menu ne va pas avec un scroll je vais peut être le repenser

Bof mais ok. Dans ce cas, il faudrait le rendre un peu plus utilisable. La croix n’est vraiment pas accessible, je n’arrive pas à cliquer dessus, et quand je vois comment elle est construite je comprend un peu mieux. Utilises les polices d’icones pour ça aussi. Englobe ton icône dans un <button> plutôt qu’un <div> cliquable. Un boutton sémantiquement parlant sert à ce genre d’action, pas un div.

Tu pourrais aussi faire en sorte que lorsque l’on clique à l’extérieur du menu celui-ci se ferme. Tu pourrais également lier l’action de le fermer à la touche ESC.

J’ai vu autre chose au passage, c’est ton utilisation massive d’ID et pas de class. Conventionnellement on utilise (presque?) que des class en CSS. Beaucoup plus pratique pour et l’évolutivité du site. Je vais pas te faire l’apologie des class mais je te conseil fortement cet article http://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html . Les ID on les préfèrera pour les traitements Javascript par exemple.

Gill :

Oui j'ai compris le principe de sprite. J'ai du mal le gérer alors psk j'ai bien mis deux image sur la même et avec le hover changer la position de mon background...

Merci du conseil pour les polices d'icônes, je vais voir ça !

Je vais aussi régler le problème de la croix, avec tes conseils. Oui j'avais pensé à faire pas mal de raccourci avec le clavier je l'ai est mis en commentaire sur le js je sais pas si tu à vu. Il faut encore que je trouve comment avertir le visiteur qu'il y à une navigation à l'aide du clavier.

Oui j'ai tendance à mettre beaucoup d'ID en pensant déjà a une possible utilisation dans le js. Je revois souvent mon code juste avant de le mettre en ligne pour regrouper certaines choses. C'est une mauvaise habitude qu'il faut que je règle très vite. Dans les prochains jour je vais essayer de réorganiser ça...

Deux petites questions les balises <p> puis-je, les remplacer par <article> ? A quoi sert une balise figure, est-ce que je peux m'en servir pour englober les images ?

Merci encore pour le temps que tu m'accorde.

Ps : je commence à faire les changement petit à petit sur le site.
Modifié par debalsjeremy (21 Jan 2016 - 19:07)

debalsjeremy a écrit :
JENCAL :

Bonjour, merci tout d'abord de participer au débat.

Alors sur quoi je me suis basé ? Mes différents partiels, les commentaires de mes professeurs... C'est vrai je pense que j'ai mal évalué peut être et donc revoir à la baisse les pourcentages. Certains de mes professeurs mon conseillé de mettre des pourcentage. Car ils me demande souvent de nous auto-évalué.. Et j'ai aussi fait ça car actuellement comme vous l'avez souligné, c'est la mode et je trouvé sympas le concept.

OK c'est pas toi qui a choisi tout seul, tu as quand même des gens derrière qui t'on poussé à faire ça (en gros).
____

J'aime beaucoup ta remarque @spongebrain

<< Concernant le débat de présenter ses compétences sous forme de pourcentages ou pas, ça plais à certains, moins à d'autre. Une fois j'avais rencontré un responsable d'agence qui m'avais demandé de m'auto évaluer entre 1 et 5 étoiles sur des compétences techniques… J'avais trouvé ça limite…
Pour débloquer un peu le truc, vous pouvez la jouer avec une touche d'humour. Par exemple, au lieu d'indiquer 100% en HTML (pas certain que ça existe), mettez 99%. [...] >>
___

Je me pose une autre question, est-ce une bonne idée de mettre le mail à découvert ? dans un paragraphe ? est-ce que cela ne va améliorer le spam via robot ? c'est la mode également des captcha

c'est vrai que c'est dommage de ne plus pouvoir naviguer avec le menu ouvert.

- Niveau JS/Jquery, tu sais que tu peux utiliser

$( window ).width();

ou

$( document ).width();

au lieu du calcul avec window.devicePixelRatio
pour infos aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si tu glissez la fenêtre entre deux écrans à densités de pixels différentes).

- Pourquoi ne gère tu pas le responsive des rectangles skills avec les mediaqueries ? (ou le hover des picto social network)
- L'idée de naviguer avec les lettres c'est sympas, mais comment l'utilisateur peut le savoir ? à moins que cela ne te soit réserver pour une question de rapidité..

Bonjour,
voici une petite remarque sur la taille des polices ou de leur conteneur. Je pense que tu pourrais augmenter un peux la taille des police ou réduire la largeur de leur conteneur afin d'améliorer la lecture, dans mon cas j'essaye de faire en sorte qu'il y ait 8 à 10 mots par ligne...
Ma résolution 1920*1080
Bonne continuation

Bonjour,

debalsjeremy a écrit :
JENCAL :
Certains de mes professeurs mon conseillé de mettre des pourcentage. Car ils me demande souvent de nous auto-évalué.. Et j'ai aussi fait ça car actuellement comme vous l'avez souligné, c'est la mode et je trouvé sympas le concept.

Par curiosité, dans quelle école étudies-tu ?

Un étudiant par définition est un apprenant, et moins l'apprenant a d'expérience moins il est humble et surtout moins il est en capacité d'avoir du recul sur son propre travail / ses compétences, cela vient avec les années de travail et surtout la curiosité et la remise en question continue...

Combien de fois j'ai croisé durant ma scolarité des gens qui développaient de manière tout à fait sommaire, (alarmant quand on voit le diplôme qu'ils préparaient) s'ériger en expert sur bon nombre de technologies, ou ne serait-ce qu'une seule dont ils connaissaient tout juste les rudiments (programmation impérative pour le php, mise en page à deux colonnes CSS... lol ou encore expert sur un framework JAVA...).

Cette philosophie de l'auto-évaluation est pour moi une mode d'essayer d'imiter le système éducatif américain sans en saisir les fondements et surtout pour faire "hype" et attirer plein de gentils étudiants et donc engraisser les écoles...

C'est le nouveau fléau de certaines écoles du numérique français, ils veulent tous faire modernes et copier une culture américaine qui n'est pas la notre car ils voient que là-bas les taux d'insertion est meilleur et surtout le rapport qualité / prix des développeurs est correct (sauf qu'en France, on veut juste la qualité mais pas payer, mais les écoles misent sur le facteur qualité).

Certaines y parviennent, mais dieu sait que beaucoup utilisent cette carotte pour te vendre des cours en autoformation et autres "do it yourself", qui on est d'accord ne sont pas le rôle d'une école. Aider à la réussite c'est leur rôle, dire "on vous regarde faire par contre on prend votre argent.. MAIS.... vous aurez un diplôme ! Mais vous ne saurez rien faire, mais bon comme nous vous vous en foutez hein ?"

Beaucoup d'étudiants sont d'ailleurs complices de ce système en les laissant imposer cette culture sans remettre en cause le programme car c'est plus facile pour obtenir le diplôme, mais ça c'est une autre histoire...
Modifié par ohweb (14 Mar 2016 - 10:44)