Bonjour,

Je suis actuellement en train d'essayer de me développer un site web CV / Portfolio sans être vraiment un bon développeur: https://raphaelherve.com

Pour l'instant cela donne à peu près ce que je recherche mais lorsque je passe sur grand écran, la partie gauche et la partie droite se rejoigne au centre et s'overlap. 

J'ai essayé de changer cela avec ce css: 

@media screen and (min-width: 992px) { /* Cible les écrans larges */
    .left-sidebar {
        max-width: 350px; 
    }
    .right-content {
        margin-left: 400px; 
    }
}

Mais cela n'aide malheureusement pas.

Que devrais-je faire pour résoudre ce problème? 

Je peux fournir + de parties du code si besoin.

Merci d'avance pour votre précieuse aide!

Bonjour

« lorsque je passe sur grand écran, la partie gauche et la partie droite se rejoigne au centre et s'overlap. »

Grand écran, ça veut dire quoi ? largeur de la fenêtre supérieure à 992px ?

En 1920 px de large, je ne vois aucun problème (essayé avec Firefox et Edge sur Windows 10).

PS Pour "overlap", il existe un expression française : se chevauchent.

Cordialement.

Il semblerait que ca comment à réellement se chevaucher à partir de 2600px de largeur, mais je trouve trop proche les 2 parties à partir de 1920px.

ChatGPT m'avait donné cela pour résoudre mais cela rend encore pire et je ne comprends pas pourquoi:

@media screen and (min-width: 2560px) {
    .left-sidebar {
        width: 20%; /* ou une valeur fixe qui convient mieux, comme 400px */
    }
    .right-content {
        margin-left: 22%; 

    }
}

Par ailleurs je suis preneur de tout conseil concernant le design global du site!

PS: merci pour le chevauche, je reviens d'un an et demi aux USA je perds un peu mes mots en francais haha

Bonjour,

la première chose, selon moi, c'est de virer le padding: 5% de la partie à gauche. Parce que sa valeur augmente avec la taille de la fenêtre. De manière générale, les pourcentages pour les marges et les paddings sont à éviter.

Ensuite, utiliser les vw dans les font-size, c'est chouette, mais sans clamp ou max, c'est un peu dangereux, ça fait que ton texte est illisible sur petit écran (regarde à 768px de large), et énorme sur grand écran. C'est ça, notamment, qui fait que le contenu de ta sidebar à gauche déborde joyeusement à mesure que tu augmentes la taille de la fenêtre.

Autres points :

• les titres doivent se suivre, sans sauter d'étape. Ton h1 ne peut pas être suivi d'un h3. Tu ne passes pas d'un chapitre à une sous-partie sans avoir une partie.
• les images ne sortent jamais sans leur attribut alt (merci à AbcAbc6 pour la formule ) : si elles sont importantes pour la compréhension de la page, mets un alt avec une description de ce qu'il y a dessus ; si elles sont simplement illustratives, un alt vide suffira. Ceci permet aux lecteurs d'écran de décrire l'image, ou de l'ignorer ; l'absence de alt fait que ces logiciels vont prononcer le nom de l'image, ce qui est au mieux inutile, au pire désagréable.
• ton lien vers LinkedIn est vide : mets un <title> dans ton SVG, un aria-label sur le lien, ou bien un texte caché, pour indiquer simplement "LinkedIn" et éviter le lien vide.

Bonjour,

Merci pour ces conseils, j'ai essayé de prendre tout en compte et cela rend effectivement meilleur: https://raphaelherve.com

Avez-vous d'autres conseils après ces changements?

Bien cordialement,

Le <title> dont je parlais doit être dans le <svg>, ou alors ne le mets pas, puisque tu as un texte visible dans ton lien vers LinkedIn, maintenant

Pour les titres, je parlais du h1 et du h3 mais c'est valable partout. Tu as des h4 et des h6 dispersés, et surtout, du contenu dedans qui n'a rien à faire là. Un titre n'est pas un paragraphe où tu racontes tout Pour les expériences, évite les h1 (on devrait en avoir un seul, le titre de la page), et ne met pas l'entièreté de chaque expérience dans un h6. Et comme ça, tu pourras utiliser ul et li pour lister les responsabilités que tu as eues.

Je t'invite à installer sur ton navigateur l'extension Wave, qui permet d'étudier la page et remonter ce genre d'erreurs : les titres, les images, les problèmes d'accessibilité…

Note : entre 768px et 1199px de large, le contenu de la page est très difficile lisible, je pense qu'il faut que tu te penches sur le sujet. Et sur petit écran, tu mets la sidebar au-dessus du contenu, c'est très bien, mais elle fait toujours 100vh de haut, c'est voulu ?

Bonjour,

J'ai encore essayé de tout prendre en compte et de modifier tout ça, j'espère que c'est mieux maintenant!

https://raphaelherve.com

Est-ce que cela fait assez professionnel pour publier sur linkedin et montrer aux recruteurs? Sachant que je ne cherche pas de poste en dev web évidemment c'est juste pour montrer ma motivation.

Tu n'as pas (encore) corrigé le <title> lié au SVG : je pense que tu peux carrément l'enlever. Je te proposais plusieurs options, mutuellement exclusives

Il reste un problème à exactement 1199px de large. C'est parce que tu as deux media queries, l'une avec max-width: 1199px et l'autre avec min-width: 1199px. Je vois que tu utilises Bootstrap : je suggère de te baser sur leurs points de rupture, ici 1200px. Regarde la doc : https://getbootstrap.com/docs/5.3/layout/breakpoints/, les media queries n'utilisent jamais la même valeur en min et en max, et c'est ça qui est important.

Un détail : évite le texte justifié, sur les écrans c'est rarement pertinent (parce que sur papier on maîtrise exactement ce que l'on imprime, là, non), et ça peut poser des problèmes de lecture, en créant des vides dans le texte.

Et pour ta dernière question : je pense que oui, c'est un site sobre, propre, utilisable dans toutes les situations (je viens de vérifier sur mon téléphone, c'est ok). Si c'est pour montrer tes expériences en tant qu'ingé et non en tant que dév web, c'est très suffisant