Template de portfolio pour le BUT MMI

Ce template permet de construire un portfolio statique pré-formatté à partir de données texte et images. Il a été réalisé dans le cadre de la démarche portfolio des BUT MMI à l'IUT de Lannion.

Il utilise Vite, React et Tailwind.css

Démo

Voir la démo

Prérequis

L'usage de ce template nécessite Node.js, et un compte GitHub. Dans le tutoriel d'installation, GitHub Desktop et Visual Studio Code sont également utilisés. Il est fortement recommandé de suivre ce tutoriel (et d'utiliser les mêmes outils), à moins de savoir ce que l'on fait ;)

1. Installer Node.js en suivant ce lien (Attention : pour Windows, installer la version 21.7.3, ici)
2. Installer Git en suivant ce lien
3. Se créer un compte GitHub en suivant ce lien
4. Installer également GitHub Desktop en suivant ce lien et Visual Studio Code en suivant ce lien

Vocabulaire

1. un repository (ou dépôt) est l’élément le plus simple de GitHub. Il s’agit d’un endroit où vous pouvez stocker votre code, vos fichiers et l’historique de révision de chaque fichier. Les référentiels peuvent avoir plusieurs collaborateurs, et peuvent être publics ou privés.
2. Un fork permet d’apporter des modifications à un projet sans affecter le dépôt d’origine. Il s'agit d'un nouveau dépôt, personnel, mais encore lié au dépôt d'origine. Après avoir forké un dépôt, vous pouvez récupérer les mises à jour du dépôt d'origine pour garder votre fork à jour.

Installation

1. Faire un fork du projet de template (depuis cette page)

2. Puis cloner le repository depuis GitHub Desktop

3. Ouvrir le repository dans Visual Studio Code

4. Ouvrir un nouveau terminal

5. Installer le projet avec la commande npm install

6. Depuis le terminal la commande npm run dev lance un serveur local permettant de voir en direct les modifications apportées au template. Suivre le lien proposé pour ouvrir le site en local dans un navigateur.

7. Dans la suite, modifier le fichier settings.json pour y insérer vos informations. Les assets (image de portrait, illustrations des projets, icônes, CV téléchargeable) seront ajoutées dans le répertoire assets

Utilisation

Fichiers à modifier

Le contenu du site se modifie depuis le fichier settings.json dans le dossier src/data.

Toutes les images et icônes sont à placer dans le dossier assets/media.

Le CV téléchargeable est à placer dans le dossier assets/download

Comment modifier le contenu ?

1. Nommer correctement vos fichiers images (vignettes de vos projets et votre photo de portrait) et copiez-les dans le répertoire assets/media.

2. Modifier le contenu du fichier settings.json avec vos informations texte et les noms de vos fichiers d'assets (images et CV téléchargeable). Attention à bien conserver le format et ne modifier que les valeurs à droite des clés (bien garder le nom des clés en bleu)

3. Il est possible d'ajouter autant de formations, de centres d'intérêts, de projets, de compétences et de contacts que l'on souhaite. Il suffit à chaque fois de copier-coller la structure. Attention également à bien respecter le format en exemple.

4. Pour modifier la liste de compétences mises en oeuvre dans un projet et profiter du code couleur dans les badges, les compétences doivent être choisies parmi :

   • "Anglais"
   • "Marketing"
   • "Comm"
   • "Écriture multimédia"
   • "Réseaux sociaux"
   • "3D"
   • "Graphisme"
   • "Audiovisuel"
   • "UI/UX"
   • "Dev Web"
   • "Entrepreneuriat"
   • "Gestion de projet" (Si la compétence ajoutée ne fait pas partie de cette liste, elle aparaîtra en gris)

5. Tous les noms de fichiers écrits dans le fichier settings.json doivent correspondre au nom des fichiers placés dans le répertoirte assets

Enregistrement des modifications

Les modifications apportées au template doivent être régulièrement "enregistrées" (= commitées) en local puis poussées (push) sur le serveur depuis GitHub Desktop

1. A chaque modification des sources, GitHub Desktop propose de commiter les modifications. Entrer un commentaire (significatif !) puis cliquer sur Commit to main

2. Après une série de modifications importantes, cliquer sur Push origin pour pousser sur le serveur distant les modifications.

Déploiement vers une page github.io

1. Une fois toutes vos informations remplies, lancer la commande suivante dans un terminal : npm run deploy

2. Bravo ! Votre portfolio est déployé à l'adresse username.github.io/portfolio (où username est votre identifiant GitHub)

3. À chaque modification du template, après avoir pushé toutes les modifications depuis GitHub Desktop, il faudra relancer la commande de déploiement pour voir appraître les modifications (léger délai possible)