Voici la documentation pour modifier ou mettre en ligne ton site.
Après avoir récupérer le projet sur GitHub, utilise cette commande à la racine du projet.
npm installPour lancer ton site en local, utilise cette commande à la racine du projet.
npm startTu peux visualiser le site sur ton localhost:3000.
Tu ne peux pas mettre ton site en ligne sur ton serveur comme ça. Tu dois faire build le site par React.
Utilise cette commande à la racine du projet.
npm run buildTu peux maintenant prendre tout ce qu'il y a dans le dossier build et le déposer dans le dossier de ton hébergeur qui est sûrement www.
Je te détail ici l'infrastructure du projet pour faciliter sa modification.
Tu as 6 dossiers principaux :
publicqui contient tes images, pdf, etc.Appqui contient ton application et le routeurcomponentsqui contient tout tes composantsiconsqui contient toutes tes icons en SVGpagesqui contient toutes tes pagesstylesqui contient toutes tes variables de Sass
Pour modifier l'URL de tes pages, tu vas devoir modifier le routeur qui se trouve dans le dossier src/App/Router.js.
Pour changer ou ajouter des images, tu dois les mettre directement dans le dossier public/images.
Par la suite, tu vas pouvoir les appeler dans ton code avec l'URL suivant : public/images/le-chemin-de-ton-image.
Concernant les polices, je les import dans le layout, pour que chaque page les import. Si tu es amené à vouloir les changer, il faudra mettre les nouvelles polices dans ce dossier : src/components/Layout/fonts et les import dans ce fichier : src/components/Layout/Layout.module.sass.
Pour modifier les couleurs, les polices ou encore les animations de ton site, c'est très simple. Tu as juste à les modifier dans le dossier src/styles
Je ne vais pas entrer dans les détails, mais utiliser les REM et plus pratique qu'utiliser les pixels, notamment dans le responsive et pour l'accessibilité.
La calcul pour passser de l'un à l'autre est un peu barbare et du coup, pour te faciliter la chose j'ai mis en Sass au niveau du html de toutes les pages font-size: 62.5%.
Ce qui signifie que maintenant dans tout ton site 1rem = 10px.
Je t'écris quelques exemples pour que tu comprennes un peu mieux :
0.5rem=5px2.4rem=24px5rem=50px0rem=0px1.1rem=11px
Pour utiliser plusieurs classe sur un élément, c'est un peu compliqué en React.
J'ai de mon côté utilisé le système de gabarits.
className={styles.my__class}className={`${styles.my__class} ${styles.my_second__class}`}Toutes les animations sont présentes dans le fichier src/styles/_animations.sass.
Pour changer le délai d'animation d'un élément, il faut le faire directement au niveau du fichier Sass de cet élément.
Il faut que tu cherches sa propriété animation-delay.
Concernant le SEO, je t'ai ajouté la dépendance Helmet qui te permet dans chacunes de tes pages, d'ajouter une description, un titre et tout autres éléments pouvant être présent dans le <head> d'une page.
Helmet va donc te permettre d'avoir une description et un titre différent par page.
Si je n'ai pas été clair ou que tu ne comprends pas quelque chose, tu peux me poser une question à tout moment.
De plus, je peux évidemment effectuer des changements sur ton site s'ils sont trop difficile à faire pour toi !