[Amateur] Site CV - Portfolio

Hello,
Peut-être n'ai-je pas poster au bon endroit; quoique une bonne critique me fera du bien !

En fait, j'ai des soucis sur mon site dont les comportements ne sont pas super stables et diffèrent en fonction du navigateur.

Il s'agit d'un site personnel / CV sur One Page avec un scroll - jusque là ça passe ! => http://www.samanthaebrard.com

Je crois avoir été trop gourmande en javascript vu que je suis totalement débutante en la matière ! Bref, voilà les soucis rencontrés (je précise que je viens d'essayer de coder différemment le site sur plusieurs pages, sans le scroll, et les soucis rencontrés sont identiques) :

- Sur Firefox, l'onglet Parcours : La Timeline ne se charge que si l'on rafraîchit la page.
La console me dit : La page a été rechargée car la déclaration d'encodage de caractères du document HTML du cadre n'a pas été trouvée lors de l'analyse des 1024 premiers octets du fichier. La déclaration d'encodage de caractères doit être déplacée dans les 1024 premiers octets du fichier.
<meta charset="utf-8">
Alors que sur Chrome, la Timeline se charge directement et la console n'indique aucun souci.

- Sur Chrome, l'onglet Portfolio : dès qu'on passe sur une image en hover donc, la fenêtre de chrome devient transparente le temps d'une seconde puis réapparaît !! Alors que sur Firefox, le comportement est stable pour cette partie.

Espérant que vous pourrez m'aider en regardant mon code

Merci par avance,

a écrit :
Sur Chrome, l'onglet Portfolio : dès qu'on passe sur une image en hover donc, la fenêtre de chrome devient transparente le temps d'une seconde puis réapparaît !!

Je vois et je n'ai pas de solution à vous proposer... Mais vous n'êtes pas la seule : des gros sites comme CodePen rencontrent le même problème, et ceux-ci sont pourtant dédiés au codage web...

Je ne sais pas pour les autres, mais pour moi le site met un temps infini à se charger. Le poids des images est énorme. Sans doute vous avez voulu prévoir pour le Retina, mais là...

Je ne peux pas t'aider pour les problème cité. Par contre je n'ais pas de problème avec la timeline sous Firefox.

J'ai regarder vite fait... ça manque un peu de couleur... je trouve une peu fade mais tout de même propre visuellement parlant.

Niveau code... ce qui m'a sauté au yeux, c'est l'utilisation de balise "div" vide pour mettre des images. À évité. Y'a moyen de faire ce que tu cherche à faire, sans l'utilisation de d'une telle méthode. Très important surtout au niveau de ton logo, celui-ci devrait être directement dans ton code html avec un alt correctement identifier.

Bonjour,

Je trouve ce site plutôt efficace, joli et élégant. Très bien pour une Chef de Projet.

Une critique concernant votre logo initiales, les lettres ne sont pas très classes (ça ressemble trop à la "comic sans"). Soit choisir une plus jolie typo avec une astuce graphique simple, ou pourquoi pas écrire vous même au crayon et scanner ? Ou bien, façon pinceau, comme les soulignés et taches bleus qui ornent le site ?

Dans "Principaux outils", "IDE (Dreamweaver, Sublime Text...)" se place par dessus les ronds bleus. J'ai pour habitude d'afficher une page web sur 900 pixels de large même sur grand écran. Comme beaucoup d'internautes qui font plusieurs choses en même temps.

Une petite remarque typo :
"Formation
et Expérience"

éventuellement,

"Formation
& Expérience"

plutôt que,

"Formation &
Expérience"


Le filtre photoshop sur la photo est un peu violent et contrasté.

Le portfolio fonctionne correctement, juste la page qui "saute" une fraction de seconde quand je fais un premier zoom sur une vignette. Ensuite, quand l'ordinateur s'affiche, j'ai trop de blanc au dessus (la hauteur de l'écran). Le retour au portfolio fonctionne bien.

Ce qui a motivé mon message c'est ça : un gros bug d'affichage du menu qui s'affiche trop bas à l'ouverture du site (chrome, mac). Il se repositionne en haut quand on bouge la fenêtre, même en la réduisant (sauf si la largeur est insuffisante, alors il se remet trop bas).

http://img4.hostingpics.net/pics/846014Capturedcran20130717152453.png

http://img4.hostingpics.net/pics/471240Capturedcran20130717152621.png
Modifié par spongebrain (17 Jul 2013 - 16:07)

Bonjour,

Personnellement, j'aime beaucoup le côté visuel, très épurée, très classe. Ce que je n'aime pas du tout c'est la navigation, j'ai mis 10sec à trouver pourquoi je n'avais pas de réaction quand je cliquez sur "à propos", pour 10sec rare sont ceux qui passe autant de temps sans avoir une réaction quelconque ... Je pense que en ajoutant un changement du couleur du menu à chaque partie pourrait contrer en partie ce problème.

Mais je pense que le système de navigation est à repenser...

a écrit :
Je vois et je n'ai pas de solution à vous proposer... Mais vous n'êtes pas la seule : des gros sites comme CodePen rencontrent le même problème, et ceux-ci sont pourtant dédiés au codage web...

Je ne sais pas pour les autres, mais pour moi le site met un temps infini à se charger. Le poids des images est énorme. Sans doute vous avez voulu prévoir pour le Retina, mais là...

Merci Olivier de tes/vos remarques. C'est en effet bizarre que ce genre de soucis persistent avec Chrome. Dans un sens cela me rassure que je ne sois pas la seule ! Dans l'autre, va falloir que je réfléchisse à coder différemment le portfolio.

Pour ce qui est des photos, à part celle de l'intro que j'ai voulu garder en très grand format pour que le background prenne bien 100% sur tous les types d'écrans, les autres photos et/ou images sont optimisées et ne pèsent pas grand chose... Etonnant que le chargement fût long pour toi/vous, car je n'ai pas eu de mauvais retours à ce niveau.

Merci d'avoir pris le temps de consulter mon site et d'en poster un commentaire. J'apprécie
Modifié par samw (18 Jul 2013 - 17:29)

spongebrain a écrit :
Bonjour,

Je trouve ce site plutôt efficace, joli et élégant. Très bien pour une Chef de Projet.

Une critique concernant votre logo initiales, les lettres ne sont pas très classes (ça ressemble trop à la &quot;comic sans&quot;). Soit choisir une plus jolie typo avec une astuce graphique simple, ou pourquoi pas écrire vous même au crayon et scanner ? Ou bien, façon pinceau, comme les soulignés et taches bleus qui ornent le site ?

Dans &quot;Principaux outils&quot;, &quot;IDE (Dreamweaver, Sublime Text...)&quot; se place par dessus les ronds bleus. J'ai pour habitude d'afficher une page web sur 900 pixels de large même sur grand écran. Comme beaucoup d'internautes qui font plusieurs choses en même temps.

Une petite remarque typo :
&quot;Formation
et Expérience&quot;

éventuellement,

&quot;Formation
&amp; Expérience&quot;

plutôt que,

&quot;Formation &amp;
Expérience&quot;


Le filtre photoshop sur la photo est un peu violent et contrasté.

Le portfolio fonctionne correctement, juste la page qui &quot;saute&quot; une fraction de seconde quand je fais un premier zoom sur une vignette. Ensuite, quand l'ordinateur s'affiche, j'ai trop de blanc au dessus (la hauteur de l'écran). Le retour au portfolio fonctionne bien.

Ce qui a motivé mon message c'est ça : un gros bug d'affichage du menu qui s'affiche trop bas à l'ouverture du site (chrome, mac). Il se repositionne en haut quand on bouge la fenêtre, même en la réduisant (sauf si la largeur est insuffisante, alors il se remet trop bas).

http://img4.hostingpics.net/pics/846014Capturedcran20130717152453.png

http://img4.hostingpics.net/pics/471240Capturedcran20130717152621.png

Merci Spongebrain pour tous ces commentaires constructifs. Bien vu le Formation & Expérience... Pour ce qui est du filtre photo violet, je pense que tu parles de mon portrait dans parcours ? Oui, ce n'est pas un filtre, juste un effet crayon de Photo Booth ! Je te l'accorde, le rendu est assez pitoyable, et je dois me faire tirer le portrait pronto !

Pour le reste, les pages intérieures du Portfolio et le Menu, oui, tu as raison, je n'ai pas encore finaliser les Media Queries pour ajuster l'affichage en fonction des dimensions de l'écran et ça aussi, faut que je m'y mette rapidement car ça fait mal aux yeux

Merci de tes avis.

mini-truc a écrit :
Bonjour,

Personnellement, j'aime beaucoup le côté visuel, très épurée, très classe. Ce que je n'aime pas du tout c'est la navigation, j'ai mis 10sec à trouver pourquoi je n'avais pas de réaction quand je cliquez sur &quot;à propos&quot;, pour 10sec rare sont ceux qui passe autant de temps sans avoir une réaction quelconque ... Je pense que en ajoutant un changement du couleur du menu à chaque partie pourrait contrer en partie ce problème.

Mais je pense que le système de navigation est à repenser...

Merci mini-truc de tes commentaires bien appréciés.
Tu as raison, au départ je pensais ne pas mettre d'à propos puis je me suis perdu dans un script pour faire changer la couleur du menu au scroll de chaque page et me suis dit qu'il fallait donc mettre la home dans le menu pour calculer chaque ancre, bref, bref bref, c'est effectivement à revoir aussi !

P.... me reste plein de boulot !!!
Et toujours pas de correction à mes bugs !!!
Mais merci encore car cela me fait terriblement avancer.

Je faisait aussi allusion à ceci:

<div class="headingbox padding-comp">
			<h1 class="heading">Compétences</h1>
			<div class="ligne"></div>
		</div>

La div ligne rien que pour afficher une image? mettre le h1 dans une div rien que pour lui assigner une padding-top?

Ceci est beaucoup plus propre et tout aussi efficace:

<h1 class="heading">Compétences</h1>

Et le css:

h1.heading {
    background: url("../img/ligne.svg") no-repeat 50% 100%;
    color: #222222;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 0.025em;
    padding: 160px 0 25px;
    text-transform: uppercase;
}

EDIT: en fait, on a un cas de divite ici... beaucoup de div inutile!
Modifié par juliesunset (18 Jul 2013 - 18:31)