French Translation v1

README.md

@@ -22,3 +22,4 @@ Head over to [contribution guide](https://github.com/Roshanjossey/code-contribut
 <kbd>[<img title="Vietnam" alt="Vietnam" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/vn.svg" width="22">](docs/translations/vn/README.es.md)</kbd>
 <kbd>[<img title="Polish" alt="Polish" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/pl.svg" width="22">](docs/translations/pl/README.pl.md)</kbd>
 <kbd>[<img title="Russian" alt="Russian" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/ru.svg" width="22">](docs/translations/ru/README.ru.md)</kbd>
+<kbd>[<img title="Français" alt="Français" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/fr.svg" width="22">](docs/translations/fr/README.fr.md)</kbd>

contributors/OceanePez.html

@@ -0,0 +1,119 @@
+<article>
+  <h3>OceanePez</h3>
+  <p>A french developer who wants to contribute to open source projects.</p>
+  <h4>Programming languages I use</h4>
+  <section class="container">
+    <div class="badge" style="background-color: #f7df1e; color: black">
+      JavaScript
+    </div>
+    <div class="badge" style="background-color: #3874a4; color: white">
+      Python
+    </div>
+    <div class="badge" style="background-color: #007396; color: white">
+      Java
+    </div>
+    <div class="badge" style="background-color: #4479a1; color: white">SQL</div>
+    <div class="badge" style="background-color: #777bb4; color: white">PHP</div>
+    <div class="badge" style="background-color: #e34f26; color: white">
+      HTML5
+    </div>
+    <div class="badge" style="background-color: #1572b6; color: white">
+      CSS3
+    </div>
+    <div class="badge" style="background-color: #cd6799; color: white">
+      SASS
+    </div>
+    <div class="badge" style="background-color: #38b2ac; color: white">
+      TailwindCSS
+    </div>
+    <div class="badge" style="background-color: #563d7c; color: white">
+      Bootstrap
+    </div>
+    <div class="badge" style="background-color: #61dafb; color: black">
+      React
+    </div>
+    <div class="badge" style="background-color: #000000; color: white">
+      Markdown
+    </div>
+  </section>
+
+  <h4>Tools I use</h4>
+  <section class="container">
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/npm/npm-original-wordmark.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vercel/vercel-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/notion/notion-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/trello/trello-plain.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/figma/figma-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/canva/canva-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/illustrator/illustrator-plain.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/photoshop/photoshop-plain.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/aftereffects/aftereffects-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/premierepro/premierepro-plain.svg"
+    />
+  </section>
+</article>
+<style>
+  body {
+    font-family: sans-serif;
+  }
+  .article {
+    background-color: thistle;
+  }
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+  .badge {
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+  }
+  .icon {
+    width: 2rem;
+  }
+</style>

docs/translations/Translations.md

@@ -1,14 +1,15 @@
 # Translations
 
-|                                                              | Translated Link                             |
-| ------------------------------------------------------------ | ------------------------------------------- |
-| <img alt="日本語" title="日本語" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/jp.svg" width="22"> | [日本語](ja/README.ja.md)                   |
-| <img alt="Deutsch" title="Deutsch" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/de.svg" width="22"> | [Deutsch](de/README.de.md)                  |
+|                                                                                                                                                   | Translated Link                             |
+| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+| <img alt="日本語" title="日本語" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/jp.svg" width="22">                         | [日本語](ja/README.ja.md)                   |
+| <img alt="Deutsch" title="Deutsch" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/de.svg" width="22">                       | [Deutsch](de/README.de.md)                  |
 | <img alt="Português (Brasil)" title="Português (Brasil)" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/br.svg" width="22"> | [Português (Brasil)](pt_br/README.pt_br.md) |
-| <img alt="Bahasa Indonesia" title="Bahasa Indonesia" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/id.svg" width="22"> | [Bahasa Indonesia](id/README.id.md)         |
-| <img alt="中文" title="中文" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/cn.svg" width="22"> | [中文](cn/README.cn.md)                     |
-| <img alt="Türkiye" title="Türkiye" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/tr.svg" width="22"> | [Türkiye](tr/README.tr.md)  |
-| <img alt="Italiano" title="Italiano" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/it.svg" width="22"> | [Italiano](it/README.it.md)  |
-| <img alt="Spain" title="Spain" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/es.svg" width="22"> | [Spain](es/README.es.md)                    |
-| <img alt="العربية" title="العربية" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/sa.svg" width="22"> | [العربية](ar/README.ar.md)                  |
-| <img title="한국어" alt="한국어" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/kr.svg" width="22"> | [한국어](kr/README.kr.md)  |
+| <img alt="Bahasa Indonesia" title="Bahasa Indonesia" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/id.svg" width="22">     | [Bahasa Indonesia](id/README.id.md)         |
+| <img alt="中文" title="中文" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/cn.svg" width="22">                             | [中文](cn/README.cn.md)                     |
+| <img alt="Türkiye" title="Türkiye" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/tr.svg" width="22">                       | [Türkiye](tr/README.tr.md)                  |
+| <img alt="Italiano" title="Italiano" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/it.svg" width="22">                     | [Italiano](it/README.it.md)                 |
+| <img alt="Spain" title="Spain" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/es.svg" width="22">                           | [Spain](es/README.es.md)                    |
+| <img alt="العربية" title="العربية" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/sa.svg" width="22">                       | [العربية](ar/README.ar.md)                  |
+| <img title="한국어" alt="한국어" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/kr.svg" width="22">                         | [한국어](kr/README.kr.md)                   |
+| <img title="French" alt="French" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/fr.svg" width="22">                         | [French](fr/README.fr.md)                   |

docs/translations/fr/CONTRIBUTING.fr.md

@@ -0,0 +1,152 @@
+# Étapes pour contribuer
+
+<img align="right" width="300" src="https://firstcontributions.github.io/assets/Readme/fork.png" alt="fork le repository" />
+
+## Fork le repository en cliquant sur le bouton fork
+
+## Clone le repository "forké".
+
+Dans le repository que vous avez forké, cliquez sur le bouton code.
+Sélectionnez l'onglet SSH puis cliquez sur le bouton `copier dans le presse-papiers`.
+
+<img align="right" width="300" src="https://firstcontributions.github.io/assets/Readme/clone.png" alt="clone le repository" />
+
+Ouvrez un terminal et exécutez la commande `git clone`.
+
+```bash
+git clone "Url que vous avez copié"
+```
+
+> [!IMPORTANT]
+> Dans les étapes suivantes, lorsque vous voyez `<votre-pseudo-github>`, vous devez le remplacer par votre identifiant/pseudo GitHub.  
+> Par exemple, si votre identifiant/pseudo GitHub est `aaronsw`,  
+> `git switch -c add-<votre-pseudo-github>` devient `git switch -c add-aaronsw`  
+> `contributors/<votre-pseudo-github>.html` devient `contributors/aaronsw.html`
+
+<img align="right" width="300" src="https://firstcontributions.github.io/assets/Readme/copy-to-clipboard.png" alt="copiez l'URL dans le presse-papiers" />
+
+## Création de votre branche
+
+Allez dans le répertoire du dépôt si vous n'y êtes pas déjà.
+
+```bash
+cd code-contributions
+```
+
+Créez une branche avec la commande `git switch`.
+
+```bash
+git switch -c add-<votre-pseudo-github>
+```
+
+## Créez votre carte
+
+Vous pouvez ajouter votre carte en tant que fichier HTML dans le répertoire contributors.
+Créez un fichier avec votre nom d'utilisateur dans le répertoire contributors.
+
+Vous pouvez copier le modèle suivant pour commencer.
+(L'idéal est de faire une carte de présentation en anglais afin que tout le monde puisse la comprendre.)
+
+`contributors/<votre-pseudo-github>.html`
+
+```html
+<article>
+  <h3>Votre pseudo</h3>
+  <p>Votre résumé (Optionnel)</p>
+  <h4>
+    Programming languages I use (ou "Les langages de programmation que
+    j'utilise")
+  </h4>
+  <section class="container">
+    <div class="badge" style="background-color: #3874a4; color: white">
+      Python
+    </div>
+    <div class="badge" style="background-color: #f7df1e; color: black;">
+      JavaScript
+    </div>
+  </section>
+
+  <h4>Tools I use (ou "Les outils que j'utilise")</h4>
+  <section class="container">
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/bash/bash-original.svg"
+    />
+    <img
+      class="icon"
+      src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg"
+    />
+  </section>
+</article>
+<style>
+  body {
+    font-family: sans-serif;
+  }
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+  .badge {
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+  }
+  .icon {
+    width: 2rem;
+  }
+</style>
+```
+
+## Ajoutez votre carte à la liste des contributeurs
+
+Ajoutez le nom du fichier que vous avez créé dans le fichier `scripts/contributors.js`.
+
+`scripts/contributors.js`
+
+```js
+const contributorFiles = [
+  "<your-pseudo-github>.html", // Ajoutez votre nom de fichier ici
+  "roshanjossey.html",
+  "gokultp.html",
+];
+```
+
+## Observez vos modifications dans un navigateur web
+
+Vous pouvez voir vos modifications en ouvrant `index.html` dans un navigateur web.
+Vous devriez pouvoir voir la nouvelle carte que vous avez ajoutée dans les étapes précédentes.
+Vous pouvez voir vos modifications dans un navigateur web en ouvrant le fichier `index.html` dans le navigateur web.
+Vous devrez pouvoir voir la nouvelle carte que vous avez ajoutée dans les étapes précédentes.
+
+Vous pouvez continuer à apporter des modifications à votre carte et actualiser l'onglet du navigateur web pour voir ces modifications.
+
+## Commit vos modifications
+
+Tout d'abord, mettez vos modifications en scène avec la commande `git add`
+
+```bash
+git add contributors/<your-pseudo-github>.html
+```
+
+Maintenant, commitez vos modifications avec la commande `git commit`
+
+````bash
+git commit -m "add-<votre-pseudo-github>"
+
+## Push vos modifications sur GitHub
+
+```bash
+git push -u origin add-<votre-pseudo-github>
+````
+
+## Créez une Pull Request
+
+Si vous allez sur votre repository sur GitHub, vous verrez un bouton `Compare & pull request`. Cliquez sur ce bouton.
+
+<img style="float: right;" src="https://firstcontributions.github.io/assets/Readme/compare-and-pull.png" alt="create a pull request" />
+
+Maintenant, soumettez la pull request.
+
+<img style="float: right;" src="https://firstcontributions.github.io/assets/Readme/submit-pull-request.png" alt="submit pull request" />
+
+Vous recevrez un e-mail de notification une fois les modifications fusionnées.

docs/translations/fr/README.fr.md

@@ -0,0 +1,24 @@
+# code contributions
+
+C'est un projet pour vous entraîner à contribuer à des projets open source avec du code.
+Nous assumerons que vous avez déjà terminé le tutoriel sur [first contributions](https://github.com/firstcontributions/first-contributions)
+
+Allez sur [le guide de contribution](CONTRIBUTING.fr.md) pour commencer.
+
+#### _Read this in [other languages](docs/translations/Translations.md)._
+
+<kbd>[<img title="Deutsch" alt="Deutsch" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/de.svg" width="22">](../de/README.de.md)</kbd>
+<kbd>[<img title="Português (Brasil)" alt="Português (Brasil)" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/br.svg" width="22">](../pt_br/README.pt_br.md)</kbd>
+<kbd>[<img title="日本語" alt="日本語" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/jp.svg" width="22">](../ja/README.ja.md)</kbd>
+<kbd>[<img title="Bahasa Indonesia" alt="Bahasa Indonesia" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/id.svg" width="22">](../id/README.id.md)</kbd>
+<kbd>[<img title="中文" alt="中文" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/cn.svg" width="22">](../cn/README.cn.md)</kbd>
+<kbd>[<img title="Spain" alt="Spain" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/es.svg" width="22">](../es/README.es.md)</kbd>
+<kbd>[<img title="Türkiye" alt="Türkiye" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/tr.svg" width="22">](../tr/README.tr.md)</kbd>
+<kbd>[<img title="Farsi" alt="Farsi" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/ir.svg" width="22">](../fa/README.fa.md)</kbd>
+<kbd>[<img title="Italiano" alt="Italiano" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/it.svg" width="22">](../it/README.it.md)</kbd>
+<kbd>[<img title="العربية" alt="العربية" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/sa.svg" width="22">](../ar/README.ar.md)</kbd>
+<kbd>[<img title="한국어" alt="한국어" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/kr.svg" width="22">](../kr/README.kr.md)</kbd>
+<kbd>[<img title="Vietnam" alt="Vietnam" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/vn.svg" width="22">](../vn/README.es.md)</kbd>
+<kbd>[<img title="Polish" alt="Polish" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/pl.svg" width="22">](../pl/README.pl.md)</kbd>
+<kbd>[<img title="Russian" alt="Russian" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/ru.svg" width="22">](../ru/README.ru.md)</kbd>
+<kbd>[<img title="France" alt="France" src="https://cdn.statically.io/gh/hjnilsson/country-flags/master/svg/fr.svg" width="22">](../fr/README.fr.md)</kbd>