update translation documentation

README.md

@@ -4,9 +4,8 @@
 
 ![Build & Deploy](https://github.com/AmruthPillai/Reactive-Resume/workflows/Build%20&%20Deploy/badge.svg)
 ![Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)
-![GitHub last commit](https://img.shields.io/github/last-commit/AmruthPillai/Reactive-Resume)
+![Localization](https://badges.crowdin.net/reactive-resume/localized.svg)
 ![GitHub](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume)
-![Uptime Robot status](https://img.shields.io/uptimerobot/status/m784631082-7c9a2e95377145a9cbaadc18)
 
 #### A Free and Open-Source Resume Builder That Respects Your Privacy
 

docs/README.md

@@ -10,9 +10,8 @@ title: Home
 
 ![Build & Deploy](https://github.com/AmruthPillai/Reactive-Resume/workflows/Build%20&%20Deploy/badge.svg)
 ![Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)
-![GitHub last commit](https://img.shields.io/github/last-commit/AmruthPillai/Reactive-Resume)
+![Localization](https://badges.crowdin.net/reactive-resume/localized.svg)
 ![GitHub](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume)
-![Uptime Robot status](https://img.shields.io/uptimerobot/status/m784631082-7c9a2e95377145a9cbaadc18)
 
 Welcome to the front page of **Reactive Resume**, a free and open-source Resume Builder web app that focuses on one thing, **Privacy**. And also few other important features such as minimalistic UI/UX, customizability, portability, regularly updated templates, etc. But the important thing is that, your personal data is yours alone.
 

docs/contributing/README.md

@@ -30,7 +30,7 @@ Something that's missing on the app that's halting your progress from making the
 
 ## Translation
 
-For information on how to translate the app into your own language, please visit the [Translation](/translation/) section of the documentation.
+Translating the app into your language has never been easier. Thanks to [Crowdin](https://crowdin.com/), a localization management tool, anyone can translate strings without having to mess arounf with a bunch of files. For information on how to translate the app into your own language, please visit the [Translation Secion](/translation/) of the documentation.
 
 ## Commit Code
 

docs/translation/README.md

@@ -3,3 +3,130 @@ title: Translation
 ---
 
 # Translation
+
+Translating the app into your own language has never been easier. The project makes use of a powerful online tool called [Crowdin](https://crowdin.com/) to help manage translations and updates made to the app.
+
+::: tip TL;DR
+If you are already familiar with the Crowdin platform and want to contribute your time to translating a few strings, just head to the link below and get started!
+
+### **[translate.rxresu.me](https://translate.rxresu.me/)**
+
+:::
+
+## Current Status
+
+### Completed Translations
+
+- English `en`
+- Hindi `hi`
+
+### Pending Translations
+
+- Afrikaans `af`
+- Arabic `ar`
+- Assamese `as`
+- Catalan `ca`
+- Chinese Simplified `zh`
+- Czech `cs`
+- Danish `da`
+- Dutch `nl`
+- Finnish `fi`
+- French `fr`
+- German `de`
+- Greek `el`
+- Hebrew `he`
+- Hungarian `hu`
+- Italian `it`
+- Japanese `ja`
+- Kannada `kn`
+- Korean `ko`
+- Malayalam `ml`
+- Marathi `mr`
+- Norwegian `no`
+- Polish `pl`
+- Portuguese `pt`
+- Punjabi `pa`
+- Romanian `ro`
+- Russian `ru`
+- Spanish `es`
+- Swedish `sv`
+- Tamil `ta`
+- Turkish `tr`
+- Ukrainian `uk`
+- Vietnamese `vi`
+
+::: warning
+If your language is not available in the list above, send me an email at <a href="mailto:im.amruth@gmail.com">im.amruth@gmail.com</a> with your request or raise an issue on GitHub and I'll add it on the Crowdin Platform.
+:::
+
+## Translating through Crowdin
+
+### Step 1: Choose your Language
+
+<p style="text-align: center">
+  <img src="./images/language-options.png" alt="Choose your Language" width="50%" />
+</p>
+
+As mentioned above, all you need to do is go to the [Translation Portal ](https://translate.rxresu.me/) of Reactive Resume and select the language you want to begin translating to.
+
+### Step 2: Click on `Translate All`
+
+The PR would be accepted and merged only when the translations are 100% complete, which you can track through Crowdin.
+
+<p style="text-align: center">
+  <img src="./images/translate-all.png" alt="Translate All" width="40%" />
+</p>
+
+### Step 3: Create an Account with Crowdin
+
+You can use your email address and password, or for a quick getaway, use one of the many social providers to login quickly and get started.
+
+### Step 4.1: List of Strings to be Translated
+
+On the left sidebar, you can see a list of strings that are ready to be translated. The red box means it's not translated yet, and a green box means it has been translated to the target language.
+
+<p style="text-align: center">
+  <img src="./images/list-of-strings.png" alt="List of Strings to be Translated" width="40%" />
+</p>
+
+### Step 4.2: Enter the Translation using the Editor
+
+You can enter the translated string in the editor below. It is powerul enough to suggest you whether you have made any mistakes in the formatting of the string as well, and autocorrect them. Once you are done with the translation, click on the `Save` button.
+
+::: tip
+To make the process faster, you may also use Keyboard Shortcuts such as `Cmd/Ctrl + S`.
+:::
+
+<p style="text-align: center">
+  <img src="./images/translation-editor.png" alt="Enter the Translation using the Editor" width="80%" />
+</p>
+
+### Step 4.3: Make Use of the Translation Suggestions
+
+Crowdin is extremely powerful with NLP capabilities to understand your language and translate it automatically through numerous training provided through Open Source development. This will make your job much easier when translating from one language to another.
+
+<p style="text-align: center">
+  <img src="./images/translation-helper.png" alt="Make Use of the Translation Suggestions" width="80%" />
+</p>
+
+### Step 5: That's All Folks!
+
+Once you have translated all the strings, the integration between Crowdin and GitHub would kick in and start replacing the updated strings in the repo. I would get a notification around the same time to merge the PR, and once that's done you can use the app in your own language and share it with others in your community!
+
+## Translating through GitHub
+
+For those who don't want to go through the process of creating an account with Crowdin and be continuous contributors to the project's translation, you can also perform a one-off translation by editing the JSON files through GitHub. Here's how:
+
+### Step 1: Choose your Language
+
+Go to the `src/i18n/locales` folder in the master branch of the repository and choose the language of your choice. Alternatively, you can [click this link](https://github.com/AmruthPillai/Reactive-Resume/tree/master/src/i18n/locales) to go the specific folder in GitHub.
+
+Be careful as the folder only contains ISO-639-1 Two Letter Language Codes, so refer the [list above](#current-status) to find the corresponding language folder.
+
+### Step 2: Fork the Repository, Edit the `.json` Files
+
+By clicking on the Edit button in any of the files, it immediately creates a fork of the repository where you can edit the files at once. You may also choose to clone the forked repository locally and translate the strings using your favorite editor, then create a Pull Request for the changes.
+
+---
+
+While this is a bit more time consuming because of the structure of files that has been set up, for those who know what they are doing and want to get translating quickly without any help, this is the quickest method. But for those who would like to stay in constant touch with the project and provide translations for future updates to come, the Crowdin path is recommended.