Merge pull request #2 from AmruthPillai/develop

Merge from origin

crowdin.yml

@@ -1,3 +1,3 @@
 files:
-  - source: /src/i18n/source/**/*.json
+  - source: /src/i18n/locales/en/**/*.json
     translation: /src/i18n/locales/%two_letters_code%/**/%original_file_name%

docs/changelog/README.md

@@ -8,6 +8,29 @@ All notable changes to this project will be documented in this file.
 
 ## April 2020
 
+### April 28, 2020
+
+- Added Feature to Reorder Skills/Hobbies
+- Added Hobbies Section to Left Sidebar
+- Updated Templates to Add Hobbies
+
+### April 23, 2020
+
+- Fix Issue with Page Controller Icon Size
+- Fix Issue with Checkbox Icon Toggle
+
+### April 23, 2020
+
+- Transfer all external resources to local, self-host everything
+- Shorten entry animation by a second
+- Optimize Images through `imgbot`
+
+### April 22, 2020
+
+- Display Original Language Name alongside English Language Name
+- Added Language: Tamil
+- Added Language: Vietnamese
+
 ### April 17, 2020
 
 - Updated Dependencies across App

docs/translation/README.md

@@ -29,6 +29,8 @@ If you are already familiar with the Crowdin platform and want to contribute you
 - Polish `pl`
 - Portuguese `pt`
 - Spanish `es`
+- Tamil `ta`
+- Vietnamese `vi`
 
 ### Pending Translations
 
@@ -50,10 +52,8 @@ If you are already familiar with the Crowdin platform and want to contribute you
 - Romanian `ro`
 - Russian `ru`
 - 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.

package-lock.json

@@ -1704,9 +1704,9 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-10.0.2.tgz",
-      "integrity": "sha512-fVeP4U37BIYdp9nBRKEITFSLPqgCSS7Og6LHvxoQ2JSOTJ1NJI4Dfesv4uNXxvNNcJgBS88V+Tc6h8vbDsa2iA=="
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-10.1.0.tgz",
+      "integrity": "sha512-qutUm/2lWAD8IiKrss2Cg6Hf8AkcMeylKm09bSMtYC39Ug68aXWkcbc0H/NVD5R1zOHguTjkR/Ppuns6bWksGQ=="
     },
     "@types/babel__core": {
       "version": "7.1.6",
@@ -6844,9 +6844,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.10.1.tgz",
-      "integrity": "sha512-svTy6zh1ecQojvpbJSgH3aei/Rt7C6i090l5f2WQ4aB05lYHeZIR1qL4wZyyILTbtmnbHP5Yn8MrsOJMGa8RkQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
+      "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
       "dev": true,
       "requires": {
         "get-stdin": "^6.0.0"
@@ -8708,12 +8708,12 @@
         "@babel/runtime": "^7.5.5"
       }
     },
-    "i18next-xhr-backend": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz",
-      "integrity": "sha512-OtRf2Vo3IqAxsttQbpjYnmMML12IMB5e0fc5B7qKJFLScitYaXa1OhMX0n0X/3vrfFlpHL9Ro/H+ps4Ej2j7QQ==",
+    "i18next-http-backend": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.0.4.tgz",
+      "integrity": "sha512-nnaCLtUIarFoQv1NNzN1I/TPyDRbHnq2gb5Lnf/rZBiWNJ6BdPXY0kpY1oxLIFTkwHvXJLoD9O6vVUDSXhnUjQ==",
       "requires": {
-        "@babel/runtime": "^7.5.5"
+        "node-fetch": "2.6.0"
       }
     },
     "iconv-lite": {
@@ -11427,6 +11427,11 @@
         "lodash.toarray": "^4.4.0"
       }
     },
+    "node-fetch": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -16077,13 +16082,13 @@
       }
     },
     "tailwindcss": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.2.0.tgz",
-      "integrity": "sha512-CKvY0ytB3ze5qvynG7qv4XSpQtFNGPbu9pUn8qFdkqgD8Yo/vGss8mhzbqls44YCXTl4G62p3qVZBj45qrd6FQ==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.3.5.tgz",
+      "integrity": "sha512-hHGShfHBj7tAQRobnsYckDySPpMDnPF4KejHYYRcZjZQvyRRnCSHi2S905icK24HrYadOq9pZKwENqg2axSviw==",
       "requires": {
         "autoprefixer": "^9.4.5",
         "bytes": "^3.0.0",
-        "chalk": "^3.0.0",
+        "chalk": "^4.0.0",
         "detective": "^5.2.0",
         "fs-extra": "^8.0.0",
         "lodash": "^4.17.15",
@@ -16109,9 +16114,9 @@
           }
         },
         "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
+          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"

package.json

@@ -10,14 +10,14 @@
     "@fullhuman/postcss-purgecss": "^2.1.2",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.3",
-    "@testing-library/user-event": "^10.0.2",
+    "@testing-library/user-event": "^10.1.0",
     "@vuepress/plugin-google-analytics": "^1.4.1",
     "autoprefixer": "^9.7.6",
     "axios": "^0.19.2",
     "html2canvas": "^1.0.0-rc.5",
     "i18next": "^19.4.3",
     "i18next-browser-languagedetector": "^4.1.1",
-    "i18next-xhr-backend": "^3.2.2",
+    "i18next-http-backend": "^1.0.4",
     "jspdf": "^1.5.3",
     "lodash": "^4.17.15",
     "postcss-cli": "^7.1.0",
@@ -28,7 +28,7 @@
     "react-markdown": "^4.3.1",
     "react-scripts": "3.4.1",
     "react-toastify": "^5.5.0",
-    "tailwindcss": "^1.2.0",
+    "tailwindcss": "^1.3.5",
     "uuid": "^7.0.3",
     "vuepress": "^1.4.1"
   },
@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.1",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.3",

public/index.html

@@ -25,15 +25,6 @@
   <meta name="twitter:site" content="@amruthpillai">
 
   <title>Reactive Resume</title>
-
-  <!-- Animate.css -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
-
-  <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
-
-  <!-- Material Icons -->
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 </head>
 
 <body>

src/assets/css/animate.css

@@ -0,0 +1,79 @@
+@-webkit-keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+@media (print), (prefers-reduced-motion: reduce) {
+  .animated {
+    -webkit-animation-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    -webkit-transition-duration: 1ms !important;
+    transition-duration: 1ms !important;
+    -webkit-animation-iteration-count: 1 !important;
+    animation-iteration-count: 1 !important;
+  }
+}

src/assets/css/fonts.css

@@ -0,0 +1,304 @@
+/* Material Icons */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'), local('MaterialIcons-Regular'),
+    url('../fonts/MaterialIcons/MaterialIcons-400.woff2') format('woff2'),
+    url('../fonts/MaterialIcons/MaterialIcons-400.woff') format('woff');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga';
+}
+
+/* Montserrat 400 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'),
+    url('../fonts/Montserrat/Montserrat-400.woff2') format('woff2'),
+    url('../fonts/Montserrat/Montserrat-400.woff') format('woff');
+}
+
+/* Montserrat 500 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Montserrat Medium'), local('Montserrat-Medium'),
+    url('../fonts/Montserrat/Montserrat-500.woff2') format('woff2'),
+    url('../fonts/Montserrat/Montserrat-500.woff') format('woff');
+}
+
+/* Montserrat 600 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
+    url('../fonts/Montserrat/Montserrat-600.woff2') format('woff2'),
+    url('../fonts/Montserrat/Montserrat-600.woff') format('woff');
+}
+
+/* Montserrat 700 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Montserrat Bold'), local('Montserrat-Bold'),
+    url('../fonts/Montserrat/Montserrat-700.woff2') format('woff2'),
+    url('../fonts/Montserrat/Montserrat-700.woff') format('woff');
+}
+
+/* Lato 400 */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Lato Regular'), local('Lato-Regular'),
+    url('../fonts/Lato/Lato-400.woff2') format('woff2'),
+    url('../fonts/Lato/Lato-400.woff') format('woff');
+}
+
+/* Lato 700 */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/Lato/Lato-700.woff2') format('woff2'),
+    url('../fonts/Lato/Lato-700.woff') format('woff');
+}
+
+/* Nunito 400 */
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Nunito Regular'), local('Nunito-Regular'),
+    url('../fonts/Nunito/Nunito-400.woff') format('woff2'),
+    url('../fonts/Nunito/Nunito-400.woff2') format('woff');
+}
+
+/* Nunito 600 */
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Nunito SemiBold'), local('Nunito-SemiBold'),
+    url('../fonts/Nunito/Nunito-600.woff') format('woff2'),
+    url('../fonts/Nunito/Nunito-600.woff2') format('woff');
+}
+
+/* Nunito 700 */
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Nunito Bold'), local('Nunito-Bold'),
+    url('../fonts/Nunito/Nunito-700.woff') format('woff2'),
+    url('../fonts/Nunito/Nunito-700.woff2') format('woff');
+}
+
+/* Open Sans 400 */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url('../fonts/OpenSans/OpenSans-400.woff2') format('woff2'),
+    url('../fonts/OpenSans/OpenSans-400.woff') format('woff');
+}
+
+/* Open Sans 600 */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+    url('../fonts/OpenSans/OpenSans-600.woff2') format('woff2'),
+    url('../fonts/OpenSans/OpenSans-600.woff') format('woff');
+}
+
+/* Open Sans 700 */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+    url('../fonts/OpenSans/OpenSans-700.woff2') format('woff2'),
+    url('../fonts/OpenSans/OpenSans-700.woff') format('woff');
+}
+
+/* Raleway 400 */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Raleway'), local('Raleway-Regular'),
+    url('../fonts/Raleway/Raleway-400.woff2') format('woff2'),
+    url('../fonts/Raleway/Raleway-400.woff') format('woff');
+}
+
+/* Raleway 500 */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Raleway Medium'), local('Raleway-Medium'),
+    url('../fonts/Raleway/Raleway-500.woff2') format('woff2'),
+    url('../fonts/Raleway/Raleway-500.woff') format('woff');
+}
+
+/* Raleway 600 */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Raleway SemiBold'), local('Raleway-SemiBold'),
+    url('../fonts/Raleway/Raleway-600.woff2') format('woff2'),
+    url('../fonts/Raleway/Raleway-600.woff') format('woff');
+}
+
+/* Raleway 700 */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Raleway Bold'), local('Raleway-Bold'),
+    url('../fonts/Raleway/Raleway-700.woff2') format('woff2'),
+    url('../fonts/Raleway/Raleway-700.woff') format('woff');
+}
+
+/* Rubik 400 */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Rubik'), local('Rubik-Regular'), url('../fonts/Rubik/Rubik-400.woff2') format('woff2'),
+    url('../fonts/Rubik/Rubik-400.woff') format('woff');
+}
+
+/* Rubik 500 */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Rubik Medium'), local('Rubik-Medium'),
+    url('../fonts/Rubik/Rubik-500.woff2') format('woff2'),
+    url('../fonts/Rubik/Rubik-500.woff') format('woff');
+}
+
+/* Rubik 700 */
+@font-face {
+  font-family: 'Rubik';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Rubik Bold'), local('Rubik-Bold'),
+    url('../fonts/Rubik/Rubik-700.woff2') format('woff2'),
+    url('../fonts/Rubik/Rubik-700.woff') format('woff');
+}
+
+/* Source Sans Pro 400 */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
+    url('../fonts/SourceSansPro/SourceSansPro-400.woff2') format('woff2'),
+    url('../fonts/SourceSansPro/SourceSansPro-400.woff') format('woff');
+}
+
+/* Source Sans Pro 600 */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
+    url('../fonts/SourceSansPro/SourceSansPro-600.woff2') format('woff2'),
+    url('../fonts/SourceSansPro/SourceSansPro-600.woff') format('woff');
+}
+
+/* Source Sans Pro 700 */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
+    url('../fonts/SourceSansPro/SourceSansPro-700.woff2') format('woff2'),
+    url('../fonts/SourceSansPro/SourceSansPro-700.woff') format('woff');
+}
+
+/* Titillium Web 400 */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
+    url('../fonts/TitilliumWeb/TitilliumWeb-400.woff2') format('woff2'),
+    url('../fonts/TitilliumWeb/TitilliumWeb-400.woff') format('woff');
+}
+
+/* Titillium Web 600 */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'),
+    url('../fonts/TitilliumWeb/TitilliumWeb-600.woff2') format('woff2'),
+    url('../fonts/TitilliumWeb/TitilliumWeb-600.woff') format('woff');
+}
+
+/* Titillium Web 700 */
+@font-face {
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'),
+    url('../fonts/TitilliumWeb/TitilliumWeb-700.woff2') format('woff2'),
+    url('../fonts/TitilliumWeb/TitilliumWeb-700.woff') format('woff');
+}
+
+/* Ubuntu 400 */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
+    url('../fonts/Ubuntu/Ubuntu-400.woff2') format('woff2'),
+    url('../fonts/Ubuntu/Ubuntu-400.woff') format('woff');
+}
+
+/* Ubuntu 500 */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Ubuntu Medium'), local('Ubuntu-Medium'),
+    url('../fonts/Ubuntu/Ubuntu-500.woff2') format('woff2'),
+    url('../fonts/Ubuntu/Ubuntu-500.woff') format('woff');
+}
+
+/* Ubuntu 700 */
+@font-face {
+  font-family: 'Ubuntu';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
+    url('../fonts/Ubuntu/Ubuntu-700.woff2') format('woff2'),
+    url('../fonts/Ubuntu/Ubuntu-700.woff') format('woff');
+}

src/components/LeftSidebar/LeftSidebar.js

@@ -12,6 +12,7 @@ import SkillsTab from './tabs/Skills';
 import ExtrasTab from './tabs/Extras';
 import LanguagesTab from './tabs/Languages';
 import ReferencesTab from './tabs/References';
+import HobbiesTab from './tabs/Hobbies';
 
 const LeftSidebar = () => {
   const context = useContext(AppContext);
@@ -26,6 +27,7 @@ const LeftSidebar = () => {
     { key: 'awards', name: data.awards.heading },
     { key: 'certifications', name: data.certifications.heading },
     { key: 'skills', name: data.skills.heading },
+    { key: 'hobbies', name: data.hobbies.heading },
     { key: 'languages', name: data.languages.heading },
     { key: 'references', name: data.references.heading },
     { key: 'extras', name: data.extras.heading },
@@ -45,25 +47,27 @@ const LeftSidebar = () => {
 
   const renderTabs = () => {
     switch (currentTab) {
-      case tabs[0].key:
+      case 'profile':
         return <ProfileTab data={data} onChange={onChange} />;
-      case tabs[1].key:
+      case 'objective':
         return <ObjectiveTab data={data} onChange={onChange} />;
-      case tabs[2].key:
+      case 'work':
         return <WorkTab data={data} onChange={onChange} />;
-      case tabs[3].key:
+      case 'education':
         return <EducationTab data={data} onChange={onChange} />;
-      case tabs[4].key:
+      case 'awards':
         return <AwardsTab data={data} onChange={onChange} />;
-      case tabs[5].key:
+      case 'certifications':
         return <CertificationsTab data={data} onChange={onChange} />;
-      case tabs[6].key:
+      case 'skills':
         return <SkillsTab data={data} onChange={onChange} />;
-      case tabs[7].key:
+      case 'hobbies':
+        return <HobbiesTab data={data} onChange={onChange} />;
+      case 'languages':
         return <LanguagesTab data={data} onChange={onChange} />;
-      case tabs[8].key:
+      case 'references':
         return <ReferencesTab data={data} onChange={onChange} />;
-      case tabs[9].key:
+      case 'extras':
         return <ExtrasTab data={data} onChange={onChange} />;
       default:
         return null;

src/components/LeftSidebar/tabs/Hobbies.js

@@ -0,0 +1,133 @@
+import React, { useState, useContext } from 'react';
+
+import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
+import TextField from '../../../shared/TextField';
+import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
+import ItemHeading from '../../../shared/ItemHeading';
+
+const HobbiesTab = ({ data, onChange }) => {
+  const context = useContext(AppContext);
+  const { dispatch } = context;
+
+  return (
+    <>
+      <div className="my-6 grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.hobbies.enable}
+            onChange={v => onChange('data.hobbies.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.hobbies.heading}
+            onChange={v => onChange('data.hobbies.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
+      {data.hobbies.items.map((x, index) => (
+        <Item item={x} key={index} index={index} onChange={onChange} dispatch={dispatch} />
+      ))}
+
+      <AddItem heading={data.hobbies.heading} dispatch={dispatch} />
+    </>
+  );
+};
+
+const Form = ({ item, onChange }) => {
+  return (
+    <input
+      className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+      placeholder="Beatboxing"
+      value={item}
+      onChange={e => onChange(e.target.value)}
+      type="text"
+    />
+  );
+};
+
+const AddItem = ({ heading, dispatch }) => {
+  const [isOpen, setOpen] = useState(false);
+  const [item, setItem] = useState('');
+
+  const add = () => {
+    if (item === '') return;
+
+    addItem(dispatch, 'hobbies', item);
+
+    setItem('');
+  };
+
+  return (
+    <div className="my-4 border border-gray-200 rounded p-5">
+      <ItemHeading heading={heading} setOpen={setOpen} isOpen={isOpen} />
+
+      <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
+        <div className="grid grid-cols-4 gap-4">
+          <div className="col-span-3">
+            <Form item={item} onChange={setItem} />
+          </div>
+
+          <button
+            type="button"
+            onClick={add}
+            className="col-span-1 bg-gray-600 hover:bg-gray-700 text-sm font-medium rounded"
+          >
+            <div className="flex justify-center items-center">
+              <i className="material-icons font-bold text-white text-lg">add</i>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Item = ({ item, index, onChange, dispatch }) => {
+  const identifier = `data.hobbies.items[${index}]`;
+
+  return (
+    <div className="my-4 grid grid-cols-12">
+      <div className="col-span-9">
+        <Form item={item} onChange={v => onChange(identifier, v)} />
+      </div>
+
+      <button
+        type="button"
+        onClick={() => moveItemUp(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_upward</i>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={() => moveItemDown(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_downward</i>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={() => deleteItem(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">close</i>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default HobbiesTab;

src/components/LeftSidebar/tabs/Skills.js

@@ -3,7 +3,7 @@ import React, { useState, useContext } from 'react';
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
 import TextField from '../../../shared/TextField';
-import { addItem, deleteItem } from '../../../utils';
+import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
 import ItemHeading from '../../../shared/ItemHeading';
 
 const SkillsTab = ({ data, onChange }) => {
@@ -92,18 +92,38 @@ const Item = ({ item, index, onChange, dispatch }) => {
   const identifier = `data.skills.items[${index}]`;
 
   return (
-    <div className="my-4 grid grid-cols-6 gap-4">
-      <div className="col-span-5">
+    <div className="my-4 grid grid-cols-12">
+      <div className="col-span-9">
         <Form item={item} onChange={v => onChange(identifier, v)} />
       </div>
 
+      <button
+        type="button"
+        onClick={() => moveItemUp(dispatch, 'skills', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_upward</i>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={() => moveItemDown(dispatch, 'skills', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_downward</i>
+        </div>
+      </button>
+
       <button
         type="button"
         onClick={() => deleteItem(dispatch, 'skills', item)}
         className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
       >
         <div className="flex justify-end items-center">
-          <i className="material-icons font-bold text-lg pr-4">close</i>
+          <i className="material-icons font-bold text-lg">close</i>
         </div>
       </button>
     </div>

src/context/AppContext.js

@@ -24,47 +24,52 @@ const initialState = {
       email: '',
     },
     objective: {
-      enable: false,
+      enable: true,
       heading: 'Objective',
       body: '',
     },
     work: {
-      enable: false,
+      enable: true,
       heading: 'Work Experience',
       items: [],
     },
     education: {
-      enable: false,
+      enable: true,
       heading: 'Education',
       items: [],
     },
     awards: {
-      enable: false,
+      enable: true,
       heading: 'Honors & Awards',
       items: [],
     },
     certifications: {
-      enable: false,
+      enable: true,
       heading: 'Certifications',
       items: [],
     },
     skills: {
-      enable: false,
-      heading: 'Skills & Hobbies',
+      enable: true,
+      heading: 'Skills',
+      items: [],
+    },
+    hobbies: {
+      enable: true,
+      heading: 'Hobbies',
       items: [],
     },
     languages: {
-      enable: false,
+      enable: true,
       heading: 'Languages',
       items: [],
     },
     references: {
-      enable: false,
+      enable: true,
       heading: 'References',
       items: [],
     },
     extras: {
-      enable: false,
+      enable: true,
       heading: 'Personal Information',
       items: [],
     },
@@ -97,7 +102,7 @@ const reducer = (state, { type, payload }) => {
       return set({ ...state }, `data.${payload.key}.items`, items);
     case 'delete_item':
       items = get({ ...state }, `data.${payload.key}.items`, []);
-      remove(items, (x) => x === payload.value);
+      remove(items, x => x === payload.value);
       return set({ ...state }, `data.${payload.key}.items`, items);
     case 'move_item_up':
       items = get({ ...state }, `data.${payload.key}.items`, []);

src/i18n/index.js

@@ -1,5 +1,5 @@
 import i18n from 'i18next';
-import backend from 'i18next-xhr-backend';
+import backend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 import detector from 'i18next-browser-languagedetector';
 
@@ -8,56 +8,60 @@ import resources from './locales';
 const languages = [
   {
     code: 'ar',
-    name: 'Arabic',
+    name: 'Arabic (عربى)',
   },
   {
     code: 'zh',
-    name: 'Chinese',
+    name: 'Chinese (中文)',
   },
   {
     code: 'da',
-    name: 'Danish',
+    name: 'Danish (Dansk)',
   },
   {
     code: 'nl',
-    name: 'Dutch',
+    name: 'Dutch (Nederlands)',
   },
   {
     code: 'en',
-    name: 'English',
+    name: 'English (US)',
   },
   {
     code: 'fr',
-    name: 'French',
+    name: 'French (Français)',
   },
   {
     code: 'de',
-    name: 'German',
+    name: 'German (Deutsche)',
   },
   {
     code: 'hi',
-    name: 'Hindi',
+    name: 'Hindi (हिन्दी)',
   },
   {
     code: 'kn',
-    name: 'Kannada',
+    name: 'Kannada (ಕನ್ನಡ)',
   },
   {
     code: 'pl',
-    name: 'Polish',
+    name: 'Polish (Polskie)',
   },
   {
     code: 'pt',
-    name: 'Portuguese',
+    name: 'Portuguese (Português)',
   },
   {
     code: 'es',
-    name: 'Spanish',
+    name: 'Spanish (Español)',
+  },
+  {
+    code: 'ta',
+    name: 'Tamil (தமிழ்)',
   },
   {
     code: 'vi',
-    name: 'Tiếng Việt'
-  }
+    name: 'Vietnamese (Tiếng Việt)',
+  },
 ];
 
 i18n

src/i18n/locales/af/leftSidebar/certifications.json

@@ -1,13 +1,8 @@
 {
   "title": {
-    "label": "Title",
-    "placeholder": "Android Development Nanodegree"
+    "label": "Title"
   },
   "subtitle": {
-    "label": "Subtitle",
-    "placeholder": "Udacity"
-  },
-  "description": {
-    "placeholder": "You can write about what you learned from your certification program."
+    "label": "Subtitle"
   }
 }

src/i18n/locales/af/leftSidebar/index.js

@@ -4,7 +4,6 @@ import work from './work.json';
 import education from './education.json';
 import awards from './awards.json';
 import certifications from './certifications.json';
-import skills from './skills.json';
 import languages from './languages.json';
 import references from './references.json';
 import extras from './extras.json';
@@ -16,7 +15,6 @@ export default {
   education,
   awards,
   certifications,
-  skills,
   languages,
   references,
   extras,

src/i18n/locales/af/leftSidebar/skills.json

@@ -1,5 +0,0 @@
-{
-  "item": {
-    "placeholder": "Cooking"
-  }
-}

src/i18n/locales/ar/app/app.json

@@ -30,12 +30,12 @@
       }
     },
     "helpText": [
-      "يستخدم فى صيغة التصدير هنا HTML canvas لتحويل السيرة الذاتية إلى صورة ثم طباعتها فى ملف pdf ، مما يعنى أنك ستفقد كل قدرات تحديد\\تحليل النص المكتوب.",
+      "يستخدم فى صيغة التصدير هنا HTML canvas لتحويل السيرة الذاتية إلى صورة ثم طباعتها فى ملف PDF ، مما يعنى أنك ستفقد كل قدرات تحديد\\تحليل النص المكتوب.",
       "إذا كان هذا مهماً بالنسبة لك، يرجى محاولة طباعة السيرة الذاتية بدلاً من ذلك باستخدام Cmd/Ctrl + P أو زر الطباعة أدناه. قد تختلف النتيجة لأن طبيعة الطباعة تعتمد على نوع المتصفح، ولكن من المعروف أنه يعمل بشكل أفضل على أحدث إصدار من Google Chrome."
     ],
     "buttons": {
       "cancel": "إلغاء",
-      "saveAsPdf": "حفظ كـ pdf"
+      "saveAsPdf": "حفظ كـ PDF"
     }
   },
   "panZoomAnimation": {

src/i18n/locales/ar/leftSidebar/index.js

@@ -4,7 +4,6 @@ import work from './work.json';
 import education from './education.json';
 import awards from './awards.json';
 import certifications from './certifications.json';
-import skills from './skills.json';
 import languages from './languages.json';
 import references from './references.json';
 import extras from './extras.json';
@@ -16,7 +15,6 @@ export default {
   education,
   awards,
   certifications,
-  skills,
   languages,
   references,
   extras,

src/i18n/locales/ar/leftSidebar/languages.json

@@ -2,6 +2,9 @@
   "key": {
     "label": "الاسم"
   },
+  "level": {
+    "label": "مستوى"
+  },
   "rating": {
     "label": "التقييم"
   }

src/i18n/locales/ar/leftSidebar/skills.json

@@ -1,5 +0,0 @@
-{
-  "item": {
-    "placeholder": "Cooking"
-  }
-}

src/i18n/locales/ar/rightSidebar/actions.json

@@ -13,7 +13,7 @@
     "heading": "تحميل السيرة الذاتية الخاصة بك",
     "body": "يمكنك النقر على الزر أدناه لتنزيل نسخة PDF من سيرتك الذاتية على الفور. للحصول على أفضل النتائج، يرجى استخدام أحدث إصدار من Google Chrome.",
     "buttons": {
-      "saveAsPdf": "حفظ كـ pdf"
+      "saveAsPdf": "حفظ كـ PDF"
     }
   },
   "loadDemoData": {