chore(release): v3.4.4

New Crowdin updates

.devcontainer/Dockerfile

@@ -0,0 +1,5 @@
+ARG VARIANT="lts-bullseye"
+
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm

.devcontainer/devcontainer.json

@@ -0,0 +1,27 @@
+{
+  "name": "Node.js",
+
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": { "VARIANT": "16-bullseye" }
+  },
+
+  // Set *default* container specific settings.json values on container create.
+  "settings": {},
+
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "lokalise.i18n-ally"],
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [80, 5432],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "pnpm install",
+
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node",
+
+  "features": {
+    "docker-from-docker": "latest"
+  }
+}

.dockerignore

@@ -15,4 +15,7 @@ node_modules
 # Docker
 Dockerfile
 .dockerignore
-docker-compose.yml
+docker-compose.yml
+
+# Android App
+/app

.env.example

@@ -1,29 +1,33 @@
-# App
+# Server + Client
 TZ=UTC
-SECRET_KEY=change-me
-
-# URLs
 PUBLIC_URL=http://localhost:3000
+PUBLIC_SERVER_URL=http://localhost:3000/api
+PUBLIC_GOOGLE_CLIENT_ID=
 
-# Database
-POSTGRES_HOST=localhost
-POSTGRES_PORT=5432
-POSTGRES_USERNAME=postgres
+# Server + Database
+POSTGRES_DB=postgres
+POSTGRES_USER=postgres
 POSTGRES_PASSWORD=postgres
-POSTGRES_DATABASE=reactive_resume
+
+# Server
+SECRET_KEY=
+POSTGRES_HOST=postgres
+POSTGRES_PORT=5432
 POSTGRES_SSL_CERT=
-
-# Auth
-JWT_SECRET=change-me
+JWT_SECRET=
 JWT_EXPIRY_TIME=604800
-
-# Google
-PUBLIC_GOOGLE_CLIENT_ID=change-me
-GOOGLE_CLIENT_SECRET=change-me
-GOOGLE_API_KEY=change-me
-
-# SendGrid (Optional)
+GOOGLE_CLIENT_SECRET=
+GOOGLE_API_KEY=
 SENDGRID_API_KEY=
 SENDGRID_FORGOT_PASSWORD_TEMPLATE_ID=
 SENDGRID_FROM_NAME=
-SENDGRID_FROM_EMAIL=
+SENDGRID_FROM_EMAIL=
+STORAGE_BUCKET=
+STORAGE_REGION=
+STORAGE_ENDPOINT=
+STORAGE_URL_PREFIX=
+STORAGE_ACCESS_KEY=
+STORAGE_SECRET_KEY=
+
+# Flags (Client)
+PUBLIC_FLAG_DISABLE_SIGNUPS=false

.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "root": true,
+  "ignorePatterns": ["/app"],
   "parser": "@typescript-eslint/parser",
   "extends": ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
   "plugins": ["@typescript-eslint/eslint-plugin", "simple-import-sort", "unused-imports"],

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://paypal.me/RajaRajanA

.github/ISSUE_TEMPLATE/bug-report.md

@@ -8,31 +8,29 @@ assignees: ''
 ---
 
 **Describe the bug**
-A clear and concise description of what the bug is.
+<!-- A clear and concise description of what the bug is. -->
+
+**Product Flavor**
+- [ ] Managed (https://rxresu.me)
+- [ ] Self Hosted
 
 **To Reproduce**
-Steps to reproduce the behavior:
+<!-- Steps to reproduce the behavior: -->
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
 **Expected behavior**
-A clear and concise description of what you expected to happen.
+<!-- A clear and concise description of what you expected to happen. -->
 
 **Screenshots**
-If applicable, add screenshots to help explain your problem.
+<!-- If applicable, add screenshots to help explain your problem. -->
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+ - OS: <!--[e.g. iOS]-->
+ - Browser <!--[e.g. chrome, safari]-->
+ - Version <!--[e.g. 22]-->
 
 **Additional context**
-Add any other context about the problem here.
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +0,0 @@
----
-name: Bug report
-about: Create a report to help improve
-title: "[BUG] "
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -8,13 +8,13 @@ assignees: ''
 ---
 
 **Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
 
 **Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+<!-- A clear and concise description of what you want to happen. -->
 
 **Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: "[FEATURE] "
-labels: enhancement
-assignees: AmruthPillai
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,22 @@
+version: 2
+
+updates:
+  - package-ecosystem: 'docker'
+    directory: '/server'
+    schedule:
+      interval: 'weekly'
+
+  - package-ecosystem: 'docker'
+    directory: '/client'
+    schedule:
+      interval: 'weekly'
+
+  - package-ecosystem: 'gradle'
+    directory: '/app'
+    schedule:
+      interval: 'weekly'
+
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'weekly'

.github/workflows/digitalocean-deploy.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Install DigitalOcean CLI
-        uses: digitalocean/action-doctl@v2.1.0
+        uses: digitalocean/action-doctl@v2.1.1
         with:
           token: ${{ secrets.DIGITALOCEAN_TOKEN }}
 

.github/workflows/docker-build-push.yml

@@ -5,116 +5,76 @@ on:
     types: [published]
 
 jobs:
-  docker_client:
-    name: Docker (Client)
+  client:
+    name: Client
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.0.0
+        uses: actions/checkout@v3.0.2
 
-      - id: slug
-        name: Get Short Commit SHA
-        run: echo "::set-output name=sha8::$(echo ${GITHUB_SHA} | cut -c1-8)"
+      - id: version
+        name: Get Version
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
 
-      - name: Login to Docker
+      - name: Login to Docker Hub
         uses: docker/login-action@v1.14.1
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1.14.1
+        with:
+          registry: ghcr.io
+          username: $GITHUB_REPOSITORY_OWNER
+          password: ${{ secrets.GH_TOKEN }}
+
       - name: Build and Push Client Image
-        uses: docker/build-push-action@v2.9.0
+        uses: docker/build-push-action@v2.10.0
         with:
           context: .
           push: true
           file: client/Dockerfile
           tags: |
             amruthpillai/reactive-resume:client-latest
-            amruthpillai/reactive-resume:client-${{ steps.slug.outputs.sha8 }}
+            amruthpillai/reactive-resume:client-${{ steps.version.outputs.tag }}
+            ghcr.io/amruthpillai/reactive-resume:client-latest
+            ghcr.io/amruthpillai/reactive-resume:client-${{ steps.version.outputs.tag }}
 
-  docker_server:
-    name: Docker (Server)
+  server:
+    name: Server
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.0.0
+        uses: actions/checkout@v3.0.2
 
-      - id: slug
-        name: Get Short Commit SHA
-        run: echo "::set-output name=sha8::$(echo ${GITHUB_SHA} | cut -c1-8)"
+      - id: version
+        name: Get Version
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
 
-      - name: Login to Docker
+      - name: Login to Docker Hub
         uses: docker/login-action@v1.14.1
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1.14.1
+        with:
+          registry: ghcr.io
+          username: $GITHUB_REPOSITORY_OWNER
+          password: ${{ secrets.GH_TOKEN }}
+
       - name: Build and Push Server Image
-        uses: docker/build-push-action@v2.9.0
+        uses: docker/build-push-action@v2.10.0
         with:
           context: .
           push: true
           file: server/Dockerfile
           tags: |
             amruthpillai/reactive-resume:server-latest
-            amruthpillai/reactive-resume:server-${{ steps.slug.outputs.sha8 }}
-
-  github_client:
-    name: GitHub (Client)
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.0.0
-
-      - id: slug
-        name: Get Short Commit SHA
-        run: echo "::set-output name=sha8::$(echo ${GITHUB_SHA} | cut -c1-8)"
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v1.14.1
-        with:
-          registry: ghcr.io
-          username: $GITHUB_REPOSITORY_OWNER
-          password: ${{ secrets.GH_TOKEN }}
-
-      - name: Build and Push Client Image
-        uses: docker/build-push-action@v2.9.0
-        with:
-          context: .
-          push: true
-          file: client/Dockerfile
-          tags: |
-            ghcr.io/amruthpillai/reactive-resume:client-latest
-            ghcr.io/amruthpillai/reactive-resume:client-${{ steps.slug.outputs.sha8 }}
-
-  github_server:
-    name: GitHub (Server)
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.0.0
-
-      - id: slug
-        name: Get Short Commit SHA
-        run: echo "::set-output name=sha8::$(echo ${GITHUB_SHA} | cut -c1-8)"
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v1.14.1
-        with:
-          registry: ghcr.io
-          username: $GITHUB_REPOSITORY_OWNER
-          password: ${{ secrets.GH_TOKEN }}
-
-      - name: Build and Push Server Image
-        uses: docker/build-push-action@v2.9.0
-        with:
-          context: .
-          push: true
-          file: server/Dockerfile
-          tags: |
+            amruthpillai/reactive-resume:server-${{ steps.version.outputs.tag }}
             ghcr.io/amruthpillai/reactive-resume:server-latest
-            ghcr.io/amruthpillai/reactive-resume:server-${{ steps.slug.outputs.sha8 }}
+            ghcr.io/amruthpillai/reactive-resume:server-${{ steps.version.outputs.tag }}

.gitignore

@@ -5,3 +5,6 @@
 
 # Project Dependencies
 node_modules
+
+# macOS
+.DS_Store

.prettierignore

@@ -1,4 +1,32 @@
-dist
-.next
-__ENV.js
-node_modules
+# Schema
+schema/dist
+
+# Server
+server/dist
+
+# Client
+client/.next
+client/public/__ENV.js
+
+# IDEs
+.vscode
+
+# Project Metadata
+LICENSE
+README.md
+CHANGELOG.md
+
+# Project Dependencies
+node_modules
+
+# Docker
+Dockerfile
+.dockerignore
+docker-compose.yml
+
+# Android App
+/app
+
+# Docs
+docs/build
+docs/.docusaurus

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Debug: Server",
+      "port": 9229,
+      "restart": true,
+      "stopOnEntry": false,
+      "protocol": "inspector"
+    },
+    {
+      "name": "Debug: Client",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm run dev:client",
+      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -1,15 +1,25 @@
 {
   "css.validate": false,
-  "scss.validate": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.wordWrap": "on",
-  "eslint.workingDirectories": ["schema", "client", "server"],
-  "i18n-ally.enabledFrameworks": ["i18next"],
-  "i18n-ally.localesPaths": ["client/public/locales"],
-  "i18n-ally.sourceLanguage": "en",
-  "i18n-ally.keystyle": "nested"
-}
+  "eslint.workingDirectories": [
+    "schema",
+    "client",
+    "server"
+  ],
+  "i18n-ally.enabledFrameworks": [
+    "react"
+  ],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": [
+    "client/public/locales"
+  ],
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+  "i18n-ally.sortKeys": true,
+  "scss.validate": false
+}

CHANGELOG.md

@@ -1,19 +1,242 @@
-## v3.0.0-beta.1 (2022-03-09)
+# Changelog
 
-### New feature:
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-- **client/landing**: add testimonials section to landing page([`6f02048`](https://github.com/AmruthPillai/Reactive-Resume/commit/6f02048ebd29b2a5b53aa291e0cdd10df93d032f)) (by Amruth Pillai)
-- **client**: add language selector, language detector and privacy/tos pages([`a131bb3`](https://github.com/AmruthPillai/Reactive-Resume/commit/a131bb36525bf85eaee5cdb65542289cdfcff36e)) (by Amruth Pillai)
+## [3.4.4](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.4.3...v3.4.4) (2022-05-02)
 
-### Bugs fixed:
+### Features
 
-- **pnpm**: install deps to update pnpm-lock.yaml([`54fd97b`](https://github.com/AmruthPillai/Reactive-Resume/commit/54fd97b5ecce629456a0dd1848981658136bbaa9)) (by Amruth Pillai)
-- **mail.service**: use sendgrid api instead of nodemailer for better deliverability([`9df1219`](https://github.com/AmruthPillai/Reactive-Resume/commit/9df12194bf465d2f9c040c642036e05edef8d945)) (by Amruth Pillai)
-- **printer.service**: add --disable-dev-shm-usage flag to chromium headless playwright browser([`e96b090`](https://github.com/AmruthPillai/Reactive-Resume/commit/e96b09090485fefc044dfc8e3daa9f52e123d946)) (by Amruth Pillai)
-- **playwright**: use playwright docker image due to runtime error([`2696a54`](https://github.com/AmruthPillai/Reactive-Resume/commit/2696a54d176dd8821be97881447e075c05f9e8fb)) (by Amruth Pillai)
-- **databasemodule**: make ssl optional, pass ca cert as base64 env([`c738f31`](https://github.com/AmruthPillai/Reactive-Resume/commit/c738f311dabdbe77770bb3c33959ac121d60019e)) (by Amruth Pillai)
-- **i18n**: load locales from file system, instead of http-backend([`a4983ac`](https://github.com/AmruthPillai/Reactive-Resume/commit/a4983ac6bc35efee5b10de0768203dec9110b866)) (by Amruth Pillai)
+* **i18n:** add Hungrarian (Magyar) language ([35fe4e2](https://github.com/AmruthPillai/Reactive-Resume/commit/35fe4e27744b6f7325b25db2cf3b626ed8598623))
 
-### Performance improves:
+### [3.4.3](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.4.2...v3.4.3) (2022-05-01)
 
-- **app**: working docker build stage, with github actions ci to push image([`5104ea6`](https://github.com/AmruthPillai/Reactive-Resume/commit/5104ea6438d5e37d6c591949d6b3861cef4295b7)) (by Amruth Pillai)
+### [3.4.2](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.4.1...v3.4.2) (2022-04-30)
+
+### [3.4.1](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.4.0...v3.4.1) (2022-04-30)
+
+
+### Bug Fixes
+
+* **typeorm:** update typeorm to latest 0.2.x for secpatch ([5bdb92b](https://github.com/AmruthPillai/Reactive-Resume/commit/5bdb92b1cff9e56879f9bbf31801d6554a00a8d5))
+
+### [3.4.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.3...v3.4.0) (2022-04-30)
+
+### [3.3.4](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.3...v3.3.4) (2022-04-09)
+
+### [3.3.3](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.2...v3.3.3) (2022-04-09)
+
+
+### Features
+
+* **profile:** add XING profile icon ([1e59f73](https://github.com/AmruthPillai/Reactive-Resume/commit/1e59f73f79a91d0264c0d2108906ee89d4eb27f8)), closes [#821](https://github.com/AmruthPillai/Reactive-Resume/issues/821)
+* **s3:** implement non-ephemeral storage through S3/DO Spaces ([feb911a](https://github.com/AmruthPillai/Reactive-Resume/commit/feb911aea06bacf58ea933d2803a2a89fe36e57b))
+
+### [3.3.2](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.1...v3.3.2) (2022-04-08)
+
+
+### Bug Fixes
+
+* **types/react:** downgrade to <18 ([fc77b54](https://github.com/AmruthPillai/Reactive-Resume/commit/fc77b548d8d61530b2d158ff83f088bed12d5080))
+
+### [3.3.1](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.3.0...v3.3.1) (2022-04-08)
+
+## [3.3.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.11...v3.3.0) (2022-04-08)
+
+
+### Features
+
+* **upgrade:** changes to code to support new template ([1df7810](https://github.com/AmruthPillai/Reactive-Resume/commit/1df78100ca0667ce9b7834cf2c25384eb21c67c2))
+
+### What's Changed
+* New Crowdin updates by @AmruthPillai in https://github.com/AmruthPillai/Reactive-Resume/pull/791
+* Bump org.jetbrains.kotlin.android from 1.6.10 to 1.6.20 in /app by @dependabot in https://github.com/AmruthPillai/Reactive-Resume/pull/812
+* New Crowdin updates by @AmruthPillai in https://github.com/AmruthPillai/Reactive-Resume/pull/806
+* A new template - Leafish by @klejejs in https://github.com/AmruthPillai/Reactive-Resume/pull/811
+* Automatic multi-platform Docker image build by @schklom in https://github.com/AmruthPillai/Reactive-Resume/pull/817
+
+### New Contributors
+* @klejejs made their first contribution in https://github.com/AmruthPillai/Reactive-Resume/pull/811
+* @schklom made their first contribution in https://github.com/AmruthPillai/Reactive-Resume/pull/817
+
+### [3.2.11](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.10...v3.2.11) (2022-03-28)
+
+### [3.2.10](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.9...v3.2.10) (2022-03-24)
+
+
+### Features
+
+* **i18n:** add portuguese (pt) language to i18n locales ([7f1c82c](https://github.com/AmruthPillai/Reactive-Resume/commit/7f1c82cd9185ebb44486a16132eb44d5c2fb747a))
+
+### [3.2.9](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.8...v3.2.9) (2022-03-21)
+
+
+### Features
+
+* **i18n:** add nl and ru i18n locales to app ([03cbf22](https://github.com/AmruthPillai/Reactive-Resume/commit/03cbf22c9bee96cac8f228830b67b44529b7ecee))
+
+### [3.2.8](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.7...v3.2.8) (2022-03-18)
+
+
+### Features
+
+* **client/theme:** add theme switcher to landing page ([8f5632c](https://github.com/AmruthPillai/Reactive-Resume/commit/8f5632c5ad0bc8a4b3028c2806365717fedd78c9))
+* **flags:** introduce flags, disable_user_signups ([b6267d0](https://github.com/AmruthPillai/Reactive-Resume/commit/b6267d07ba2dcaed0da3946d136a0a9a01c441d5)), closes [#698](https://github.com/AmruthPillai/Reactive-Resume/issues/698)
+* **i18n:** add Vietnamese language to i18n locales ([4390bcc](https://github.com/AmruthPillai/Reactive-Resume/commit/4390bccfb9764f2d2730ec3a124b7befb6792e9a))
+
+
+### Bug Fixes
+
+* **client/create-rename-slug:** fix slug accepting apostrophes and other special characters ([1facd2a](https://github.com/AmruthPillai/Reactive-Resume/commit/1facd2ad111cd9d990c808b3956d3915e8711acd)), closes [#706](https://github.com/AmruthPillai/Reactive-Resume/issues/706)
+* **disable_user_signups:** hide create account link under flag ([80acfe9](https://github.com/AmruthPillai/Reactive-Resume/commit/80acfe97c74bfa05b719285b19144144f3f7c5ba))
+
+### [3.2.7](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.6...v3.2.7) (2022-03-18)
+
+
+### Features
+
+* **i18n:** add Malayalam (മലയാളം) language to i18n locales ([3a2e62b](https://github.com/AmruthPillai/Reactive-Resume/commit/3a2e62be4c9acc14f17277c060cc9ea2c417a478))
+
+
+### Bug Fixes
+
+* **printer/i18n:** fix dates not showing up in resume language when printing ([90321e1](https://github.com/AmruthPillai/Reactive-Resume/commit/90321e1284409ab9442883c04a9b4c591d36f95d)), closes [#729](https://github.com/AmruthPillai/Reactive-Resume/issues/729)
+
+### [3.2.6](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.5...v3.2.6) (2022-03-17)
+
+
+### Features
+
+* **client/auth/google:** disable google login/registration if GOOGLE_CLIENT_ID is not in ENV ([7f0ee40](https://github.com/AmruthPillai/Reactive-Resume/commit/7f0ee40af4acc7eb41514406ecee3218ace9e891)), closes [#724](https://github.com/AmruthPillai/Reactive-Resume/issues/724)
+* **i18n:** add arabic language to i18n locale ([39fa6da](https://github.com/AmruthPillai/Reactive-Resume/commit/39fa6da5dd77ce2e12e81530fa18c2eac722c1f2))
+
+
+### Bug Fixes
+
+* **i18n:** add missing languages to dayjs date wrapper locales ([9e6dafc](https://github.com/AmruthPillai/Reactive-Resume/commit/9e6dafc8cada5c01559894905996b81004bedaec)), closes [#719](https://github.com/AmruthPillai/Reactive-Resume/issues/719)
+* **json-export:** add mimeType and charset to JSON export ([b3ff780](https://github.com/AmruthPillai/Reactive-Resume/commit/b3ff7805cd856a52900d9acef0554867d8ce0b01)), closes [#726](https://github.com/AmruthPillai/Reactive-Resume/issues/726)
+* **linkedin:** fix skill modal crashing when importing from linkedin ([a02b85b](https://github.com/AmruthPillai/Reactive-Resume/commit/a02b85b4bb1c4a1499aacddeac7bc59bcb1f7adb)), closes [#718](https://github.com/AmruthPillai/Reactive-Resume/issues/718)
+
+### [3.2.5](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.4...v3.2.5) (2022-03-16)
+
+
+### Features
+
+* **i18n:** add danish, polish and turkish locales to i18n ([97e9432](https://github.com/AmruthPillai/Reactive-Resume/commit/97e9432d6bd887e666a3443fbfde9a92cef53965))
+
+
+### Bug Fixes
+
+* **client/templates:** fix text veering off of artboard in most templates ([b2f1fb3](https://github.com/AmruthPillai/Reactive-Resume/commit/b2f1fb3a5502988a49c5cd3e496d9d165f5c1792)), closes [#702](https://github.com/AmruthPillai/Reactive-Resume/issues/702)
+
+### [3.2.4](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.3...v3.2.4) (2022-03-14)
+
+### [3.2.3](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.2...v3.2.3) (2022-03-14)
+
+
+### Features
+
+* **client/import:** implement import json from reactive resume v2 ([42408ce](https://github.com/AmruthPillai/Reactive-Resume/commit/42408ce8c5ce55904854f9f6e0481889a01edfb8))
+
+### [3.2.2](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.1...v3.2.2) (2022-03-14)
+
+
+### Bug Fixes
+
+* **client/skills:** make skill level optional ([02e396b](https://github.com/AmruthPillai/Reactive-Resume/commit/02e396bfdbf07ae75661f1e7e4e55060cacee7d0))
+
+### [3.2.1](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.2.0...v3.2.1) (2022-03-14)
+
+
+### Features
+
+* **i18n:** add Chinese (Simplified) language to locales ([549363b](https://github.com/AmruthPillai/Reactive-Resume/commit/549363bbe5bdd781699dea9506bd4baedf5740d1))
+
+
+### Bug Fixes
+
+* **client/basics:** fix issue with overlapping photo filters on safari/webkit/iOS ([e6bda68](https://github.com/AmruthPillai/Reactive-Resume/commit/e6bda688ac3ba1c04e82721add92e755ea5386c3))
+* **docker:** fix docker-compose for production grade deployments ([57f7edc](https://github.com/AmruthPillai/Reactive-Resume/commit/57f7edc13432a038c907afc6cb74b5182a9b2333))
+
+## [3.2.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.1.4...v3.2.0) (2022-03-14)
+
+
+### Features
+
+* **i18n:** add Bengali, Italian and other languages ([21931bc](https://github.com/AmruthPillai/Reactive-Resume/commit/21931bc324b5e2440baaaaa2e52a93b4f2c766f8))
+
+
+### Bug Fixes
+
+* **app:** fix issue with external link redirection in android app ([b18120b](https://github.com/AmruthPillai/Reactive-Resume/commit/b18120b3f7223981e28c0441a6b7725787186edb))
+* **client:** fix issue with react-query cache ([ed75a85](https://github.com/AmruthPillai/Reactive-Resume/commit/ed75a858279047dfd43152e041c1a09a625417f5))
+
+### [3.1.4](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.1.3...v3.1.4) (2022-03-12)
+
+
+### Bug Fixes
+
+* **client:** exported pdf did not contain "Present" keyword with translations ([cf670af](https://github.com/AmruthPillai/Reactive-Resume/commit/cf670af4035dc9b462cf5b1aad06ca089cf1d40c))
+* **client:** fix issues raised through lgtm alerts ([dfccb31](https://github.com/AmruthPillai/Reactive-Resume/commit/dfccb3130f889934d31196226be3d33e772f323b))
+
+### [3.1.3](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.1.2...v3.1.3) (2022-03-12)
+
+
+### Bug Fixes
+
+* **server:** reform url for pdf generation and download ([6d55f91](https://github.com/AmruthPillai/Reactive-Resume/commit/6d55f917eab3cb2f5f3a90c5a18f03b625d60021)), closes [#661](https://github.com/AmruthPillai/Reactive-Resume/issues/661)
+
+### [3.1.2](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.1.1...v3.1.2) (2022-03-12)
+
+
+### CI
+
+* **docker:**: include traefik routing and proxy to ensure server connections pass in local ([11cb066](https://github.com/AmruthPillai/Reactive-Resume/commit/11cb066573c6917857b79c028b97fcda1acaf90a))
+
+### [3.1.1](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.1.0...v3.1.1) (2022-03-12)
+
+
+### Features
+
+* **client:** add product hunt announcement banner ([b515fc3](https://github.com/AmruthPillai/Reactive-Resume/commit/b515fc36e7f282db92e8eb509b6c5004a944fa95))
+
+## [3.1.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0...v3.1.0) (2022-03-12)
+
+
+### Features
+
+* **client:** add "spanish (es)" language to i18n locales ([bf167f8](https://github.com/AmruthPillai/Reactive-Resume/commit/bf167f81a3659677dada55856f5eaf0fc469e697))
+* **client:** add mm/yyyy date option to date format options ([82bf44d](https://github.com/AmruthPillai/Reactive-Resume/commit/82bf44daa24422156779e9b38d3dc695176eaa09)), closes [#656](https://github.com/AmruthPillai/Reactive-Resume/issues/656)
+* **client:** add sitemap generation to next app ([2cbc582](https://github.com/AmruthPillai/Reactive-Resume/commit/2cbc582a12b72b3012246022d4b518ed657d4c08))
+* **client:** disable "Toggle Page Orientation" when there's only one page on the artboard ([01da1a0](https://github.com/AmruthPillai/Reactive-Resume/commit/01da1a06b802f1063a41d7a9a682e76b1daf9461)), closes [#655](https://github.com/AmruthPillai/Reactive-Resume/issues/655)
+
+
+### Bug Fixes
+
+* **client:** remove hard-coded "keywords:" in certain templates ([dda42b4](https://github.com/AmruthPillai/Reactive-Resume/commit/dda42b4c6b3bc359ac4f2bb91ca8118ddc84ec07)), closes [#650](https://github.com/AmruthPillai/Reactive-Resume/issues/650)
+* **client:** show "present" string if end date is not entered, also add to i18n locales ([b5cd6c4](https://github.com/AmruthPillai/Reactive-Resume/commit/b5cd6c412b5b6b6ca7bb43c3801762de451f06b4)), closes [#653](https://github.com/AmruthPillai/Reactive-Resume/issues/653)
+* **server:** photo uploads not working, fix save location and returned url ([799f208](https://github.com/AmruthPillai/Reactive-Resume/commit/799f20823e6d97a1ff0ba2c45c61d56304d0fa58)), closes [#658](https://github.com/AmruthPillai/Reactive-Resume/issues/658)
+
+## [3.0.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.6...v3.0.0) (2022-03-11)
+
+
+### Features
+
+* **lang**: add German, Kannada and Tamil languages to the app ([3a524f9](https://github.com/AmruthPillai/Reactive-Resume/commit/3a524f9c9c7a0e446491265b2242ad3dfeae188c))
+* **docs:** add docusaurus workspace, initial setup of docs ([dc4aa0b](https://github.com/AmruthPillai/Reactive-Resume/commit/dc4aa0b496096bd59c45426bfcea6ba7db5f5c01))
+
+## [3.0.0-beta.6](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2022-03-11)
+
+### Features
+
+* **lang:** add language switcher on the landing page, in the footer ([8bc7d25](https://github.com/AmruthPillai/Reactive-Resume/commit/8bc7d2599ef6af7a07bfbe886c43844152b0d9f7))
+
+### Bug Fixes
+
+* **i18n:** add missing translation keys, update lang/locale logic ([7d8828a](https://github.com/AmruthPillai/Reactive-Resume/commit/7d8828a358d653bb162877a64c75028eb82678cd))
+* **webkit:** fix issue with webkit not supporting .at() ([2654cba](https://github.com/AmruthPillai/Reactive-Resume/commit/2654cba039eb73d33257c36fa90a52cabc9fda96))
+
+## [3.0.0-beta.5](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2022-03-10)
+
+### Bug Fixes
+
+* **app:** fix issue with using swipelayout ([972e8b1](https://github.com/AmruthPillai/Reactive-Resume/commit/972e8b1bcf9ad44d8915bf23d189711672937bc0))

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+im.amruth@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Amruth Pillai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,27 +1,48 @@
-<img src="https://i.imgur.com/pc8Ingg.png" alt="Reactive Resume" width="256px" height="256px" />
+<img src="https://github.com/AmruthPillai/Reactive-Resume/blob/main/docs/static/logo.svg" alt="Reactive Resume" width="256px" height="256px" />
 
 # Reactive Resume
 
+[![Project Version](https://img.shields.io/github/package-json/v/AmruthPillai/Reactive-Resume?style=flat-square)](https://github.com/AmruthPillai/Reactive-Resume/releases)
+[![Project License](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume?style=flat-square)](https://github.com/AmruthPillai/Reactive-Resume/blob/main/LICENSE)
+[![Crowdin](https://badges.crowdin.net/reactive-resume/localized.svg)](https://translate.rxresu.me)
 [![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume?style=flat-square)](https://hub.docker.com/r/amruthpillai/reactive-resume)
+![GitHub Workflow Status](https://img.shields.io/github/workflow/status/AmruthPillai/Reactive-Resume/Build%20and%20Push%20Docker%20Image?label=docker%20build&style=flat-square)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume?ref=badge_shield)
 
-## [Go to App](https://beta.rxresu.me/)
+## [Go to App](https://rxresu.me) | [Docs](https://docs.rxresu.me)
 
 Reactive Resume is a free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3. With this app, you can create multiple resumes, share them with recruiters through a unique link and print as PDF, all for free, no advertisements, without losing the integrity and privacy of your data.
 
 You have complete control over what goes into your resume, how it looks, what colors, what templates, even the layout in which sections placed. Want a dark mode resume? It’s as easy as editing 3 values and you’re done. You don’t need to wait to see your changes either. Everything you type, everything you change, appears immediately on your resume and gets updated in real time.
 
+## Table of Contents
+
+- [Reactive Resume](#reactive-resume)
+  - [Go to App | [Docs](https://docs.rxresu.me)](#go-to-app--docs)
+  - [Table of Contents](#table-of-contents)
+  - [Features](#features)
+  - [Languages](#languages)
+  - [Tutorial](#tutorial)
+  - [Build from Source](#build-from-source)
+  - [Contributing](#contributing)
+  - [Report Bugs and Feature Requests](#report-bugs-and-feature-requests)
+  - [Donations](#donations)
+    - [💸 PayPal](#-paypal)
+  - [Infrastructure](#infrastructure)
+  - [Contributors Wall](#contributors-wall)
+  - [License](#license)
+
 ## Features
 
 - Free, forever
 - No Advertising
-- No Tracking (no 🍪s too)
+- No User Tracking
 - Sync your data across devices
+- Accessible in multiple languages
 - Import data from [LinkedIn](https://www.linkedin.com/), [JSON Resume](https://jsonresume.org/)
 - Manage multiple resumes with one account
 - Open Source (with large community support)
 - Send your resume to others with a unique sharable link
-- Accessible in multiple languages, [help translate here](https://translate.rxresu.me/)
 - Pick any font from [Google Fonts](https://fonts.google.com/) to use on your resume
 - Choose from 6 vibrant templates and more coming soon
 - Export your resume to JSON or PDF format with just one click
@@ -31,64 +52,46 @@ You have complete control over what goes into your resume, how it looks, what co
 - Tailor-made Backend and Database, isolated from Google, Amazon etc.
 - **Oh, and did I mention that it's free?**
 
-## Docker Setup
+## Languages
 
-You can pull the prebuilt docker images right off the shelf from either [Docker Hub](https://hub.docker.com/repository/docker/amruthpillai/reactive-resume) or [GitHub Container Registry](https://ghcr.io/amruthpillai/reactive-resume). Keep in mind, you would also need a database for this to work as intended.
+- Arabic (اَلْعَرَبِيَّةُ)
+- Bengali (বাংলা)
+- Chinese (中文)
+- Czech (čeština)
+- Danish (Dansk)
+- Dutch (Nederlands)
+- English
+- French (Français)
+- German (Deutsch)
+- Greek (Ελληνικά)
+- Hindi (हिन्दी)
+- Hungarian (Magyar)
+- Italian (Italiano)
+- Kannada (ಕನ್ನಡ)
+- Malayalam (മലയാളം)
+- Odia (ଓଡ଼ିଆ)
+- Polish (Polski)
+- Portuguese (Português)
+- Russian (русский)
+- Spanish (Español)
+- Swedish (Svenska)
+- Tamil (தமிழ்)
+- Turkish (Türkçe)
+- Vietnamese (Tiếng Việt)
 
-```sh
-# Server
-docker run -p 3100:3100 --env-file .env amruthpillai/reactive-resume:server-latest
+Help by [translating Reactive Resume](https://translate.rxresu.me) to your language!
 
-# Client
-docker run -p 3000:3000 --env-file .env amruthpillai/reactive-resume:client-latest
-```
+## Tutorial
 
-Or, to make your life easier there's a simple `docker-compose.yml` included to help you get set up for success.
-
-```sh
-docker compose up
-```
+The docs include an extensive [Tutorial](https://docs.rxresu.me/tutorial) section which outline the features of Reactive Resume and help you through building your first resume on the app.
 
 ## Build from Source
 
-If you don't want to use Docker, I understand. There's an old-school way to build the app too. This project, and these instructions rely heavily on [pnpm](https://pnpm.io/) so you might want to have that installed on your system before you continue.
-
-1. Clone the repository locally, or use GitHub Codespaces or CodeSandbox
-
-```
-git clone https://github.com/AmruthPillai/Reactive-Resume.git
-cd Reactive-Resume
-```
-
-2. Install dependencies using `pnpm`, but feel free to use any other package manager that supports npm workspaces.
-
-```
-pnpm install
-```
-
-3. Copy the `.env.example` file to `.env` in the project root and fill it with values according to your setup. You can skip the SendGrid variables if you don't want to set up mail right away.
-
-```
-cp .env.example .env
-```
-
-1. Use Docker Compose to create a PostgreSQL instance and a `reactive_resume` database, or feel free to use your own and modify the variables used in `.env`
-
-```
-docker-compose up -d postgres
-```
-
-5. Run the project and start building!
-
-```
-pnpm dev
-```
+For extensive information on how to build the app on your local machine, head over to the docs's [Source Code](https://docs.rxresu.me/source-code) section.
 
 ## Contributing
 
-Please refer to the project's style and contribution guidelines for submitting pull requests.
-
-In general, this project follows the "fork-and-pull" Git workflow.
+This project makes use of [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) style and workflow for commit messages to ensure that the CHANGELOG is auto-generated. In general, this project follows the "fork-and-pull" Git workflow.
 
 1. **Fork** the repo on GitHub
 2. **Clone** the project to your own machine
@@ -98,28 +101,38 @@ In general, this project follows the "fork-and-pull" Git workflow.
 
 NOTE: Be sure to merge the latest from `main` before making a pull request!
 
-## Bugs? Feature Requests?
+## Report Bugs and Feature Requests
 
 Use the [GitHub Issues](https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose) platform to notify me about bugs or new features that you would like to see in Reactive Resume. Please check before creating new issues as there might already be one.
 
 ## Donations
 
-Reactive Resume would be nothing without the folks who supported me and kept the project alive in the beginning, and your cotinued support is what keeps me going. If you found Reactive Resume to be useful, helpful or just insightful and appreciate the effort I took to make the project, please consider donating as little or as much as your can.
+Reactive Resume would be nothing without the folks who supported me and kept the project alive in the beginning, and your continued support is what keeps me going. If you found Reactive Resume to be useful, helpful or just insightful and appreciate the effort I took to make the project, please consider donating as little or as much as you can.
 
-[☕️ Buy me a coffee](https://www.buymeacoffee.com/AmruthPillai)
+### [💸 PayPal](https://paypal.me/RajaRajanA)
 
 ## Infrastructure
 
-- Next.js, frontend
-- NestJS, backend
-- PostgreSQL, database
-- DigitalOcean, infrastructure provider
-- Crowdin, translation management platform
+- [Next.js](https://nextjs.org/), frontend
+- [NestJS](https://nestjs.com/), backend
+- [PostgreSQL](https://www.postgresql.org/), database
+- [DigitalOcean](https://www.digitalocean.com/), infrastructure provider
+- [Crowdin](https://translate.rxresu.me/), translation management platform
 
-<a href="https://www.digitalocean.com/">
+&nbsp;
+
+<a href="https://pillai.xyz/digitalocean">
   <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="200px" />
 </a>
 
+## Contributors Wall
+<a href="https://github.com/AmruthPillai/Reactive-Resume/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=AmruthPillai/Reactive-Resume" />
+</a>
+
+
+_Note: It may take up to 24h for the [contrib.rocks](https://contrib.rocks/image?repo=AmruthPillai/Reactive-Resume) plugin to update because it's refreshed once a day._
+
 ## License
 
 Reactive Resume is packaged and distributed using the [MIT License](https://choosealicense.com/licenses/mit/) which allows for commercial use, distribution, modification and private use provided that all copies of the software contain the same license and copyright.

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 3.x.x   | :white_check_mark: |
+| 2.x.x   | :x:                |
+| 1.x.x   | :x:                |
+
+## Reporting a Vulnerability
+
+Create an issue on GitHub or send me an email through the contact form on my website at https://amruthpillai.com/

app/.gitignore

@@ -0,0 +1,33 @@
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Log/OS Files
+*.log
+
+# Android Studio generated files and folders
+captures/
+.externalNativeBuild/
+.cxx/
+*.apk
+output.json
+
+# IntelliJ
+*.iml
+.idea/
+misc.xml
+deploymentTargetDropDown.xml
+render.experimental.xml
+
+# Keystore files
+*.jks
+*.keystore
+
+# Google Services (e.g. APIs or Firebase)
+google-services.json
+
+# Android Profiling
+*.hprof

app/app/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

app/app/.gitignore

@@ -0,0 +1,2 @@
+/build
+/release

app/app/build.gradle

@@ -0,0 +1,46 @@
+plugins {
+    id 'com.android.application'
+    id 'org.jetbrains.kotlin.android'
+}
+
+android {
+    compileSdk 32
+
+    defaultConfig {
+        applicationId "me.rxresu.app"
+        minSdk 21
+        targetSdk 32
+        versionCode 3
+        versionName "1.0"
+
+        resConfigs "en"
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled true
+            shrinkResources true
+            zipAlignEnabled true
+
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+
+    buildFeatures {
+        viewBinding true
+    }
+}
+
+dependencies {
+    implementation 'androidx.core:core-ktx:1.7.0'
+    implementation 'com.google.android.material:material:1.5.0'
+}

app/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

app/app/src/main/AndroidManifest.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    package="me.rxresu.app">
+
+    <uses-permission android:name="android.permission.INTERNET"/>
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+        <activity
+            android:configChanges="orientation|screenSize"
+            android:name=".MainActivity"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

app/app/src/main/java/me/rxresu/app/CustomWebViewClient.kt

@@ -0,0 +1,21 @@
+package me.rxresu.app
+
+import android.content.Intent
+import android.net.Uri
+import android.webkit.WebView
+import android.webkit.WebViewClient
+
+internal class CustomWebViewClient : WebViewClient() {
+    override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
+        val hostname = "rxresu.me"
+        val uri = Uri.parse(url)
+
+        if (uri.host != null && uri.host!!.endsWith(hostname)) {
+            return false
+        }
+
+        view.context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url)))
+
+        return true
+    }
+}

app/app/src/main/java/me/rxresu/app/MainActivity.kt

@@ -0,0 +1,35 @@
+package me.rxresu.app
+
+import android.annotation.SuppressLint
+import android.os.Bundle
+import android.webkit.WebView
+import androidx.appcompat.app.AppCompatActivity
+
+class MainActivity : AppCompatActivity() {
+
+    private lateinit var webView: WebView
+
+    private var url = "https://rxresu.me"
+
+    @SuppressLint("SetJavaScriptEnabled")
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+
+        webView = findViewById(R.id.webview)
+
+        webView.webViewClient = CustomWebViewClient()
+        webView.settings.javaScriptEnabled = true
+        webView.settings.userAgentString = "Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Mobile Safari/537.36"
+
+        webView.loadUrl(url)
+    }
+
+    override fun onBackPressed() {
+        if (webView.canGoBack()) {
+            webView.goBack()
+        } else {
+            super.onBackPressed()
+        }
+    }
+}

app/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+  <include
+    layout="@layout/content_main"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:visibility="visible" />
+
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

app/app/src/main/res/layout/content_main.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <WebView
+        android:id="@+id/webview"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

app/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

app/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

app/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

app/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">Reactive Resume</string>
+</resources>

app/app/src/main/res/values/themes.xml

@@ -0,0 +1,6 @@
+<resources>
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+    </style>
+</resources>

app/build.gradle

@@ -0,0 +1,9 @@
+plugins {
+    id 'com.android.application' version '7.1.2' apply false
+    id 'com.android.library' version '7.1.2' apply false
+    id 'org.jetbrains.kotlin.android' version '1.6.21' apply false
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

app/gradle.properties

@@ -0,0 +1,23 @@
+# Project-wide Gradle settings.
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app"s APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Kotlin code style for this project: "official" or "obsolete":
+kotlin.code.style=official
+# Enables namespacing of each library's R class so that its R class includes only the
+# resources declared in the library itself and none from the library's dependencies,
+# thereby reducing the size of the R class for that library
+android.nonTransitiveRClass=true

app/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,6 @@
+#Wed Mar 09 21:34:49 CET 2022
+distributionBase=GRADLE_USER_HOME
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-bin.zip
+distributionPath=wrapper/dists
+zipStorePath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME

app/gradlew

@@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"

app/gradlew.bat

@@ -0,0 +1,89 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

app/settings.gradle

@@ -0,0 +1,16 @@
+pluginManagement {
+    repositories {
+        gradlePluginPortal()
+        google()
+        mavenCentral()
+    }
+}
+dependencyResolutionManagement {
+    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+rootProject.name = "Reactive Resume"
+include ':app'

client/.eslintrc.json

@@ -3,6 +3,7 @@
   "ignorePatterns": [".next", "__ENV.js"],
   "rules": {
     "@next/next/no-img-element": "off",
-    "@next/next/no-sync-scripts": "off"
+    "@next/next/no-sync-scripts": "off",
+    "@next/next/no-html-link-for-pages": ["error", "pages"]
   }
 }

client/.gitignore

@@ -36,4 +36,7 @@ yarn-error.log*
 *.tsbuildinfo
 
 # react-env
-__ENV.js
+__ENV.js
+
+# next-sitemap
+sitemap*.xml

client/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-alpine as dependencies
+FROM node:lts-alpine as dependencies
 
 RUN apk add --no-cache curl g++ make python3 \
   && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
@@ -11,7 +11,7 @@ COPY ./client/package.json ./client/package.json
 
 RUN pnpm install --frozen-lockfile
 
-FROM node:16-alpine as builder
+FROM node:lts-alpine as builder
 
 RUN apk add --no-cache curl g++ make python3 \
   && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
@@ -27,7 +27,7 @@ COPY --from=dependencies /app/client/node_modules ./client/node_modules
 RUN pnpm run build:schema
 RUN pnpm run build:client
 
-FROM node:16-alpine as production
+FROM node:lts-alpine as production
 
 WORKDIR /app
 
@@ -36,16 +36,20 @@ RUN apk add --no-cache curl \
 
 COPY --from=builder /app/pnpm-*.yaml ./
 COPY --from=builder /app/package.json ./
+COPY --from=builder /app/client/package.json ./client/package.json
+
+RUN pnpm install -F client --frozen-lockfile --prod
+
 COPY --from=builder /app/client/.next ./client/.next
 COPY --from=builder /app/client/public ./client/public
 COPY --from=builder /app/client/next.config.js ./client/next.config.js
 COPY --from=builder /app/client/next-i18next.config.js ./client/next-i18next.config.js
-COPY --from=builder /app/client/package.json ./client/package.json
-
-RUN pnpm install -F client --frozen-lockfile --prod
 
 EXPOSE 3000
 
 ENV PORT 3000
 
+HEALTHCHECK --interval=30s --timeout=20s --retries=3 --start-period=15s \
+    CMD curl -fSs 127.0.0.1:3000 || exit 1
+
 CMD [ "pnpm", "run", "start:client" ]

client/components/build/Center/ArtboardController.tsx

@@ -33,6 +33,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
   const resume = useAppSelector((state) => state.resume);
   const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
+  const pages = useAppSelector((state) => state.resume.metadata.layout);
   const { left, right } = useAppSelector((state) => state.build.sidebar);
   const orientation = useAppSelector((state) => state.build.page.orientation);
 
@@ -51,7 +52,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
     const url = getResumeUrl(resume, { withHost: true });
     await navigator.clipboard.writeText(url);
 
-    toast.success(t('common.toast.success.resume-link-copied'));
+    toast.success(t<string>('common.toast.success.resume-link-copied'));
   };
 
   const handleExportPDF = async () => {
@@ -62,7 +63,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
     const url = await mutateAsync({ username, slug });
 
-    download(url);
+    download(`/api${url}`);
   };
 
   return (
@@ -96,15 +97,17 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
         {isDesktop && (
           <>
-            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-orientation')}>
-              <ButtonBase onClick={handleTogglePageOrientation}>
-                {orientation === 'vertical' ? (
-                  <AlignHorizontalCenter fontSize="medium" />
-                ) : (
-                  <AlignVerticalCenter fontSize="medium" />
-                )}
-              </ButtonBase>
-            </Tooltip>
+            {pages.length > 1 && (
+              <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-orientation')}>
+                <ButtonBase onClick={handleTogglePageOrientation}>
+                  {orientation === 'vertical' ? (
+                    <AlignHorizontalCenter fontSize="medium" />
+                  ) : (
+                    <AlignVerticalCenter fontSize="medium" />
+                  )}
+                </ButtonBase>
+              </Tooltip>
+            )}
 
             <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-page-break-line')}>
               <ButtonBase onClick={handleTogglePageBreakLine}>

client/components/build/Center/Header.tsx

@@ -133,7 +133,7 @@ const Header = () => {
     const url = getResumeUrl(resume, { withHost: true });
     await navigator.clipboard.writeText(url);
 
-    toast.success(t('common.toast.success.resume-link-copied'));
+    toast.success(t<string>('common.toast.success.resume-link-copied'));
   };
 
   return (
@@ -166,14 +166,14 @@ const Header = () => {
               <ListItemIcon>
                 <DriveFileRenameOutline className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t('builder.header.menu.rename')}</ListItemText>
+              <ListItemText>{t<string>('builder.header.menu.rename')}</ListItemText>
             </MenuItem>
 
             <MenuItem onClick={handleDuplicate}>
               <ListItemIcon>
                 <CopyAll className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t('builder.header.menu.duplicate')}</ListItemText>
+              <ListItemText>{t<string>('builder.header.menu.duplicate')}</ListItemText>
             </MenuItem>
 
             {resume.public ? (
@@ -181,7 +181,7 @@ const Header = () => {
                 <ListItemIcon>
                   <LinkIcon className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
+                <ListItemText>{t<string>('builder.header.menu.share-link')}</ListItemText>
               </MenuItem>
             ) : (
               <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.share-link')}>
@@ -190,7 +190,7 @@ const Header = () => {
                     <ListItemIcon>
                       <LinkIcon className="scale-90" />
                     </ListItemIcon>
-                    <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
+                    <ListItemText>{t<string>('builder.header.menu.share-link')}</ListItemText>
                   </MenuItem>
                 </div>
               </Tooltip>
@@ -201,7 +201,7 @@ const Header = () => {
                 <ListItemIcon>
                   <Delete className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>{t('builder.header.menu.delete')}</ListItemText>
+                <ListItemText>{t<string>('builder.header.menu.delete')}</ListItemText>
               </MenuItem>
             </Tooltip>
           </Menu>

client/components/build/Center/Page.tsx

@@ -48,9 +48,7 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
       </div>
 
       {showPageNumbers && (
-        <h4 className={styles.pageNumber}>
-          {t('builder.common.glossary.page')} {page + 1}
-        </h4>
+        <h4 className={styles.pageNumber}>{`${t<string>('builder.common.glossary.page')} ${page + 1}`}</h4>
       )}
     </div>
   );

client/components/build/LeftSidebar/LeftSidebar.tsx

@@ -81,14 +81,14 @@ const LeftSidebar = () => {
                 arrow
                 key={id}
                 placement="right"
-                title={get(sections, `${id}.name`, t<string>(`builder.leftSidebar.sections.${id}.heading`))}
+                title={get(sections, `${id}.name`, t<string>(`builder.leftSidebar.sections.${id}.heading`)) as string}
               >
                 <IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
               </Tooltip>
             ))}
 
             {customSections.map(({ id }) => (
-              <Tooltip key={id} title={get(sections, `${id}.name`, '')} placement="right" arrow>
+              <Tooltip key={id} title={get(sections, `${id}.name`, '') as string} placement="right" arrow>
                 <IconButton onClick={() => handleClick(id)}>
                   <Star />
                 </IconButton>
@@ -114,7 +114,9 @@ const LeftSidebar = () => {
 
           <div className="py-6 text-right">
             <Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleAddSection}>
-              {t('builder.common.actions.add', { token: t('builder.leftSidebar.sections.section.heading') })}
+              {t<string>('builder.common.actions.add', {
+                token: t<string>('builder.leftSidebar.sections.section.heading'),
+              })}
             </Button>
           </div>
         </main>

client/components/build/LeftSidebar/sections/Basics.tsx

@@ -24,17 +24,19 @@ const Basics = () => {
 
   return (
     <>
-      <Heading path="sections.basics" name={t('builder.leftSidebar.sections.basics.heading')} />
+      <Heading path="sections.basics" name={t<string>('builder.leftSidebar.sections.basics.heading')} />
 
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div className="flex flex-col items-center gap-4 sm:col-span-2 sm:flex-row">
-          <PhotoUpload />
+        <div className="grid items-center gap-4 sm:col-span-2 sm:grid-cols-3">
+          <div className="mx-auto">
+            <PhotoUpload />
+          </div>
 
-          <div className="flex w-full flex-col-reverse gap-4 sm:flex-col sm:gap-2">
-            <ResumeInput label={t('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
+          <div className="grid gap-2 w-full sm:col-span-2">
+            <ResumeInput label={t<string>('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
 
             <Button variant="outlined" startIcon={<PhotoFilter />} onClick={handleClick}>
-              {t('builder.leftSidebar.sections.basics.actions.photo-filters')}
+              {t<string>('builder.leftSidebar.sections.basics.actions.photo-filters')}
             </Button>
 
             <Popover
@@ -55,20 +57,30 @@ const Basics = () => {
           </div>
         </div>
 
-        <ResumeInput label={t('builder.common.form.email.label')} path="basics.email" className="sm:col-span-2" />
-        <ResumeInput label={t('builder.common.form.phone.label')} path="basics.phone" />
-        <ResumeInput label={t('builder.common.form.url.label')} path="basics.website" />
+        <ResumeInput
+          type="date"
+          label={t<string>('builder.leftSidebar.sections.basics.birthdate.label')}
+          path="basics.birthdate"
+          className="sm:col-span-2"
+        />
+        <ResumeInput
+          label={t<string>('builder.common.form.email.label')}
+          path="basics.email"
+          className="sm:col-span-2"
+        />
+        <ResumeInput label={t<string>('builder.common.form.phone.label')} path="basics.phone" />
+        <ResumeInput label={t<string>('builder.common.form.url.label')} path="basics.website" />
 
         <Divider className="sm:col-span-2" />
 
         <ResumeInput
-          label={t('builder.leftSidebar.sections.basics.headline.label')}
+          label={t<string>('builder.leftSidebar.sections.basics.headline.label')}
           path="basics.headline"
           className="sm:col-span-2"
         />
         <ResumeInput
           type="textarea"
-          label={t('builder.common.form.summary.label')}
+          label={t<string>('builder.common.form.summary.label')}
           path="basics.summary"
           className="sm:col-span-2"
           markdownSupported

client/components/build/LeftSidebar/sections/Location.tsx

@@ -8,19 +8,28 @@ const Location = () => {
 
   return (
     <>
-      <Heading path="sections.location" name={t('builder.leftSidebar.sections.location.heading')} />
+      <Heading path="sections.location" name={t<string>('builder.leftSidebar.sections.location.heading')} />
 
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <ResumeInput
-          label={t('builder.leftSidebar.sections.location.address.label')}
+          label={t<string>('builder.leftSidebar.sections.location.address.label')}
           path="basics.location.address"
           className="sm:col-span-2"
         />
-        <ResumeInput label={t('builder.leftSidebar.sections.location.city.label')} path="basics.location.city" />
-        <ResumeInput label={t('builder.leftSidebar.sections.location.region.label')} path="basics.location.region" />
-        <ResumeInput label={t('builder.leftSidebar.sections.location.country.label')} path="basics.location.country" />
         <ResumeInput
-          label={t('builder.leftSidebar.sections.location.postal-code.label')}
+          label={t<string>('builder.leftSidebar.sections.location.city.label')}
+          path="basics.location.city"
+        />
+        <ResumeInput
+          label={t<string>('builder.leftSidebar.sections.location.region.label')}
+          path="basics.location.region"
+        />
+        <ResumeInput
+          label={t<string>('builder.leftSidebar.sections.location.country.label')}
+          path="basics.location.country"
+        />
+        <ResumeInput
+          label={t<string>('builder.leftSidebar.sections.location.postal-code.label')}
           path="basics.location.postalCode"
         />
       </div>

client/components/build/LeftSidebar/sections/PhotoFilters.tsx

@@ -32,7 +32,7 @@ const PhotoFilters = () => {
   return (
     <div className="flex flex-col gap-2 p-5 dark:bg-neutral-800">
       <div>
-        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
+        <h4 className="font-medium">{t<string>('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
 
         <div className="mx-2">
           <Slider
@@ -54,7 +54,9 @@ const PhotoFilters = () => {
       <Divider />
 
       <div>
-        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}</h4>
+        <h4 className="font-medium">
+          {t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}
+        </h4>
 
         <div className="flex items-center">
           <FormControlLabel
@@ -74,7 +76,7 @@ const PhotoFilters = () => {
       <Divider />
 
       <div className="flex flex-col gap-2">
-        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
+        <h4 className="font-medium">{t<string>('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
 
         <ToggleButtonGroup exclusive value={shape} onChange={(_, value) => handleChangeShape(value)}>
           <ToggleButton size="small" value="square" className="w-14">

client/components/build/LeftSidebar/sections/PhotoUpload.tsx

@@ -49,7 +49,7 @@ const PhotoUpload: React.FC = () => {
       const file = event.target.files[0];
 
       if (file.size > FILE_UPLOAD_MAX_SIZE) {
-        toast.error(t('common.toast.error.upload-photo-size'));
+        toast.error(t<string>('common.toast.error.upload-photo-size'));
         return;
       }
 
@@ -67,8 +67,8 @@ const PhotoUpload: React.FC = () => {
         <Tooltip
           title={
             isEmpty(photo.url)
-              ? t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload')
-              : t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove')
+              ? (t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload') as string)
+              : (t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove') as string)
           }
         >
           <Avatar sx={{ width: 96, height: 96 }} src={photo.url} />

client/components/build/LeftSidebar/sections/Profiles.tsx

@@ -28,7 +28,7 @@ const Profiles = () => {
 
   return (
     <>
-      <Heading path="sections.profiles" name={t('builder.leftSidebar.sections.profiles.heading')} />
+      <Heading path="sections.profiles" name={t<string>('builder.leftSidebar.sections.profiles.heading')} />
 
       <List
         path="basics.profiles"
@@ -40,8 +40,8 @@ const Profiles = () => {
 
       <footer className="flex justify-end">
         <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
-          {t('builder.common.actions.add', {
-            section: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+          {t<string>('builder.common.actions.add', {
+            token: t<string>('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
           })}
         </Button>
       </footer>

client/components/build/LeftSidebar/sections/Section.tsx

@@ -41,14 +41,14 @@ const Section: React.FC<Props> = ({
   const visibility = useAppSelector<boolean>((state) => get(state.resume, `${path}.visible`, true));
 
   const handleAdd = () => {
-    const id = path.split('.').at(-1) as string;
+    const id = path.split('.')[1];
     const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
 
     dispatch(setModalState({ modal, state: { open: true, payload: { path } } }));
   };
 
   const handleEdit = (item: ListItem) => {
-    const id = path.split('.').at(-1) as string;
+    const id = path.split('.')[1];
     const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
     const payload = validate(id) ? { path, item } : { item };
 
@@ -74,7 +74,7 @@ const Section: React.FC<Props> = ({
         <SectionSettings path={path} />
 
         <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
-          {t('builder.common.actions.add', { token: heading })}
+          {t<string>('builder.common.actions.add', { token: heading })}
         </Button>
       </footer>
     </>

client/components/build/LeftSidebar/sections/SectionSettings.tsx

@@ -48,7 +48,7 @@ const SectionSettings: React.FC<Props> = ({ path }) => {
         }}
       >
         <div className="p-5 dark:bg-neutral-800">
-          <h4 className="mb-2 font-medium">{t('builder.common.columns.heading')}</h4>
+          <h4 className="mb-2 font-medium">{t<string>('builder.common.columns.heading')}</h4>
 
           <ToggleButtonGroup exclusive value={columns} onChange={(_, value: number) => handleSetColumns(value)}>
             {[1, 2, 3, 4].map((index) => (

client/components/build/RightSidebar/sections/CustomCSS.tsx

@@ -25,7 +25,7 @@ const CustomCSS = () => {
 
   return (
     <>
-      <Heading path="metadata.css" name={t('builder.rightSidebar.sections.css.heading')} isHideable />
+      <Heading path="metadata.css" name={t<string>('builder.rightSidebar.sections.css.heading')} isHideable />
 
       <Editor
         height="200px"

client/components/build/RightSidebar/sections/Export.tsx

@@ -19,12 +19,12 @@ const Export = () => {
 
   const pdfListItemText = {
     normal: {
-      primary: t('builder.rightSidebar.sections.export.pdf.normal.primary'),
-      secondary: t('builder.rightSidebar.sections.export.pdf.normal.secondary'),
+      primary: t<string>('builder.rightSidebar.sections.export.pdf.normal.primary'),
+      secondary: t<string>('builder.rightSidebar.sections.export.pdf.normal.secondary'),
     },
     loading: {
-      primary: t('builder.rightSidebar.sections.export.pdf.loading.primary'),
-      secondary: t('builder.rightSidebar.sections.export.pdf.loading.secondary'),
+      primary: t<string>('builder.rightSidebar.sections.export.pdf.loading.primary'),
+      secondary: t<string>('builder.rightSidebar.sections.export.pdf.loading.secondary'),
     },
   };
 
@@ -34,9 +34,10 @@ const Export = () => {
 
     const redactedResume = pick(resume, ['basics', 'sections', 'metadata', 'public']);
     const jsonString = JSON.stringify(redactedResume, null, 4);
+    const jsonBlob = new Blob([jsonString], { type: 'application/json;charset=utf-8' });
     const filename = `RxResume_JSONExport_${nanoid()}.json`;
 
-    download(jsonString, filename, 'application/json');
+    download(jsonBlob, filename);
   };
 
   const handleExportPDF = async () => {
@@ -47,12 +48,12 @@ const Export = () => {
 
     const url = await mutateAsync({ username, slug });
 
-    download(url);
+    download(`/api${url}`);
   };
 
   return (
     <>
-      <Heading path="metadata.export" name={t('builder.rightSidebar.sections.export.heading')} />
+      <Heading path="metadata.export" name={t<string>('builder.rightSidebar.sections.export.heading')} />
 
       <List sx={{ padding: 0 }}>
         <ListItem sx={{ padding: 0 }}>
@@ -60,8 +61,8 @@ const Export = () => {
             <Schema />
 
             <ListItemText
-              primary={t('builder.rightSidebar.sections.export.json.primary')}
-              secondary={t('builder.rightSidebar.sections.export.json.secondary')}
+              primary={t<string>('builder.rightSidebar.sections.export.json.primary')}
+              secondary={t<string>('builder.rightSidebar.sections.export.json.secondary')}
             />
           </ListItemButton>
         </ListItem>

client/components/build/RightSidebar/sections/Layout.tsx

@@ -60,7 +60,7 @@ const Layout = () => {
     <>
       <Heading
         path="metadata.layout"
-        name={t('builder.rightSidebar.sections.layout.heading')}
+        name={t<string>('builder.rightSidebar.sections.layout.heading')}
         action={
           <Tooltip title={t<string>('builder.rightSidebar.sections.layout.tooltip.reset-layout')}>
             <IconButton onClick={handleResetLayout}>
@@ -76,12 +76,16 @@ const Layout = () => {
           <div key={pageIndex} className={styles.page}>
             <div className="flex items-center justify-between pr-3">
               <p className={styles.heading}>
-                {t('builder.common.glossary.page')} {pageIndex + 1}
+                {t<string>('builder.common.glossary.page')} {pageIndex + 1}
               </p>
 
               <div className={clsx(styles.delete, { hidden: pageIndex === 0 })}>
                 <Tooltip
-                  title={t<string>('builder.common.actions.delete', { token: t('builder.common.glossary.page') })}
+                  title={
+                    t<string>('builder.common.actions.delete', {
+                      token: t<string>('builder.common.glossary.page'),
+                    }) as string
+                  }
                 >
                   <IconButton size="small" onClick={() => handleDeletePage(pageIndex)}>
                     <Close fontSize="small" />
@@ -113,7 +117,7 @@ const Layout = () => {
                                     [styles.disabled]: !get(resumeSections, `${sectionId}.visible`, true),
                                   })}
                                 >
-                                  {get(resumeSections, `${sectionId}.name`)}
+                                  {get(resumeSections, `${sectionId}.name`, '') as string}
                                 </div>
                               </div>
                             )}
@@ -132,7 +136,7 @@ const Layout = () => {
 
         <div className="flex items-center justify-end">
           <Button variant="outlined" startIcon={<Add />} onClick={handleAddPage}>
-            {t('builder.common.actions.add', { token: t('builder.common.glossary.page') })}
+            {t<string>('builder.common.actions.add', { token: t<string>('builder.common.glossary.page') })}
           </Button>
         </div>
       </DragDropContext>

client/components/build/RightSidebar/sections/Links.tsx

@@ -12,39 +12,41 @@ const Links = () => {
 
   return (
     <>
-      <Heading path="metadata.links" name={t('builder.rightSidebar.sections.links.heading')} />
+      <Heading path="metadata.links" name={t<string>('builder.rightSidebar.sections.links.heading')} />
 
       <div className={styles.container}>
         <div className={styles.section}>
           <h2>
             <Savings fontSize="small" />
-            {t('builder.rightSidebar.sections.links.donate.heading')}
+            {t<string>('builder.rightSidebar.sections.links.donate.heading')}
           </h2>
 
-          <p>{t('builder.rightSidebar.sections.links.donate.body')}</p>
+          <p>{t<string>('builder.rightSidebar.sections.links.donate.body')}</p>
 
           <a href={DONATION_URL} target="_blank" rel="noreferrer">
-            <Button startIcon={<Coffee />}>{t('builder.rightSidebar.sections.links.donate.button')}</Button>
+            <Button startIcon={<Coffee />}>{t<string>('builder.rightSidebar.sections.links.donate.button')}</Button>
           </a>
         </div>
 
         <div className={styles.section}>
           <h2>
             <BugReport fontSize="small" />
-            {t('builder.rightSidebar.sections.links.bugs-features.heading')}
+            {t<string>('builder.rightSidebar.sections.links.bugs-features.heading')}
           </h2>
 
-          <p>{t('builder.rightSidebar.sections.links.bugs-features.body')}</p>
+          <p>{t<string>('builder.rightSidebar.sections.links.bugs-features.body')}</p>
 
           <a href={GITHUB_ISSUES_URL} target="_blank" rel="noreferrer">
-            <Button startIcon={<GitHub />}>{t('builder.rightSidebar.sections.links.bugs-features.button')}</Button>
+            <Button startIcon={<GitHub />}>
+              {t<string>('builder.rightSidebar.sections.links.bugs-features.button')}
+            </Button>
           </a>
         </div>
 
         <div>
           <a href={GITHUB_URL} target="_blank" rel="noreferrer">
             <Button variant="text" startIcon={<Link />}>
-              {t('builder.rightSidebar.sections.links.github')}
+              {t<string>('builder.rightSidebar.sections.links.github')}
             </Button>
           </a>
         </div>

client/components/build/RightSidebar/sections/Settings.tsx

@@ -13,17 +13,18 @@ import {
 import { DateConfig, Resume } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import get from 'lodash/get';
+import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
 import { useMutation } from 'react-query';
 
 import Heading from '@/components/shared/Heading';
 import ThemeSwitch from '@/components/shared/ThemeSwitch';
-import { Language, languages } from '@/config/languages';
+import { Language, languageMap, languages } from '@/config/languages';
 import { ServerError } from '@/services/axios';
 import queryClient from '@/services/react-query';
 import { loadSampleData, LoadSampleDataParams, resetResume, ResetResumeParams } from '@/services/resume';
-import { setLanguage, setTheme, togglePageBreakLine, togglePageOrientation } from '@/store/build/buildSlice';
+import { setTheme, togglePageBreakLine, togglePageOrientation } from '@/store/build/buildSlice';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { setResumeState } from '@/store/resume/resumeSlice';
 import { dateFormatOptions } from '@/utils/date';
@@ -33,9 +34,11 @@ const Settings = () => {
 
   const dispatch = useAppDispatch();
 
+  const { locale, ...router } = useRouter();
+
   const resume = useAppSelector((state) => state.resume);
   const theme = useAppSelector((state) => state.build.theme);
-  const language = useAppSelector((state) => state.build.language);
+  const pages = useAppSelector((state) => state.resume.metadata.layout);
   const breakLine = useAppSelector((state) => state.build.page.breakLine);
   const orientation = useAppSelector((state) => state.build.page.orientation);
 
@@ -59,7 +62,13 @@ const Settings = () => {
     dispatch(setResumeState({ path: 'metadata.date.format', value }));
 
   const handleChangeLanguage = (value: Language | null) => {
-    dispatch(setLanguage({ language: value?.code || 'en' }));
+    const { pathname, asPath, query, push } = router;
+    const code = value?.code || 'en';
+
+    document.cookie = `NEXT_LOCALE=${code}; path=/; expires=2147483647`;
+    dispatch(setResumeState({ path: 'metadata.locale', value: code }));
+
+    push({ pathname, query }, asPath, { locale: code });
   };
 
   const handleLoadSampleData = async () => {
@@ -76,13 +85,13 @@ const Settings = () => {
 
   return (
     <>
-      <Heading path="metadata.settings" name={t('builder.rightSidebar.sections.settings.heading')} />
+      <Heading path="metadata.settings" name={t<string>('builder.rightSidebar.sections.settings.heading')} />
 
       <List sx={{ padding: 0 }}>
         {/* Global Settings */}
         <>
           <ListSubheader className="rounded">
-            {t('builder.rightSidebar.sections.settings.global.heading')}
+            {t<string>('builder.rightSidebar.sections.settings.global.heading')}
           </ListSubheader>
 
           <ListItem>
@@ -90,7 +99,7 @@ const Settings = () => {
               <Palette />
             </ListItemIcon>
             <ListItemText
-              primary={t('builder.rightSidebar.sections.settings.global.theme.primary')}
+              primary={t<string>('builder.rightSidebar.sections.settings.global.theme.primary')}
               secondary={themeString}
             />
             <ThemeSwitch checked={isDarkMode} onChange={(_, value: boolean) => handleSetTheme(value)} />
@@ -99,8 +108,8 @@ const Settings = () => {
           <ListItem className="flex-col">
             <ListItemText
               className="w-full"
-              primary={t('builder.rightSidebar.sections.settings.global.date.primary')}
-              secondary={t('builder.rightSidebar.sections.settings.global.date.secondary')}
+              primary={t<string>('builder.rightSidebar.sections.settings.global.date.primary')}
+              secondary={t<string>('builder.rightSidebar.sections.settings.global.date.secondary')}
             />
             <Autocomplete<string, false, boolean, false>
               disableClearable
@@ -115,14 +124,14 @@ const Settings = () => {
           <ListItem className="flex-col">
             <ListItemText
               className="w-full"
-              primary={t('builder.rightSidebar.sections.settings.global.language.primary')}
-              secondary={t('builder.rightSidebar.sections.settings.global.language.secondary')}
+              primary={t<string>('builder.rightSidebar.sections.settings.global.language.primary')}
+              secondary={t<string>('builder.rightSidebar.sections.settings.global.language.secondary')}
             />
             <Autocomplete<Language, false, boolean, false>
               disableClearable
               className="my-2 w-full"
               options={languages}
-              value={language}
+              value={languageMap[locale ?? 'en']}
               isOptionEqualToValue={(a, b) => a.code === b.code}
               onChange={(_, value) => handleChangeLanguage(value)}
               renderInput={(params) => <TextField {...params} />}
@@ -139,15 +148,22 @@ const Settings = () => {
 
         {/* Page Settings */}
         <>
-          <ListSubheader className="rounded">{t('builder.rightSidebar.sections.settings.page.heading')}</ListSubheader>
+          <ListSubheader className="rounded">
+            {t<string>('builder.rightSidebar.sections.settings.page.heading')}
+          </ListSubheader>
 
           <ListItem>
             <ListItemText
-              primary={t('builder.rightSidebar.sections.settings.page.orientation.primary')}
-              secondary={t('builder.rightSidebar.sections.settings.page.orientation.secondary')}
+              primary={t<string>('builder.rightSidebar.sections.settings.page.orientation.primary')}
+              secondary={
+                pages.length === 1
+                  ? t<string>('builder.rightSidebar.sections.settings.page.orientation.disabled')
+                  : t<string>('builder.rightSidebar.sections.settings.page.orientation.secondary')
+              }
             />
             <Switch
               color="secondary"
+              disabled={pages.length === 1}
               checked={orientation === 'horizontal'}
               onChange={() => dispatch(togglePageOrientation())}
             />
@@ -155,8 +171,8 @@ const Settings = () => {
 
           <ListItem>
             <ListItemText
-              primary={t('builder.rightSidebar.sections.settings.page.break-line.primary')}
-              secondary={t('builder.rightSidebar.sections.settings.page.break-line.secondary')}
+              primary={t<string>('builder.rightSidebar.sections.settings.page.break-line.primary')}
+              secondary={t<string>('builder.rightSidebar.sections.settings.page.break-line.secondary')}
             />
             <Switch color="secondary" checked={breakLine} onChange={() => dispatch(togglePageBreakLine())} />
           </ListItem>
@@ -165,7 +181,7 @@ const Settings = () => {
         {/* Resume Settings */}
         <>
           <ListSubheader className="rounded">
-            {t('builder.rightSidebar.sections.settings.resume.heading')}
+            {t<string>('builder.rightSidebar.sections.settings.resume.heading')}
           </ListSubheader>
 
           <ListItem>
@@ -174,8 +190,8 @@ const Settings = () => {
                 <Anchor />
               </ListItemIcon>
               <ListItemText
-                primary={t('builder.rightSidebar.sections.settings.resume.sample.primary')}
-                secondary={t('builder.rightSidebar.sections.settings.resume.sample.secondary')}
+                primary={t<string>('builder.rightSidebar.sections.settings.resume.sample.primary')}
+                secondary={t<string>('builder.rightSidebar.sections.settings.resume.sample.secondary')}
               />
             </ListItemButton>
           </ListItem>
@@ -186,8 +202,8 @@ const Settings = () => {
                 <DeleteForever />
               </ListItemIcon>
               <ListItemText
-                primary={t('builder.rightSidebar.sections.settings.resume.reset.primary')}
-                secondary={t('builder.rightSidebar.sections.settings.resume.reset.secondary')}
+                primary={t<string>('builder.rightSidebar.sections.settings.resume.reset.primary')}
+                secondary={t<string>('builder.rightSidebar.sections.settings.resume.reset.secondary')}
               />
             </ListItemButton>
           </ListItem>

client/components/build/RightSidebar/sections/Sharing.tsx

@@ -29,19 +29,19 @@ const Sharing = () => {
 
     await navigator.clipboard.writeText(text);
 
-    toast.success(t('common.toast.success.resume-link-copied'));
+    toast.success(t<string>('common.toast.success.resume-link-copied'));
   };
 
   return (
     <>
-      <Heading path="metadata.sharing" name={t('builder.rightSidebar.sections.sharing.heading')} />
+      <Heading path="metadata.sharing" name={t<string>('builder.rightSidebar.sections.sharing.heading')} />
 
       <List sx={{ padding: 0 }}>
         <ListItem className="flex flex-col" sx={{ padding: 0 }}>
           <div className="flex w-full items-center justify-between">
             <ListItemText
-              primary={t('builder.rightSidebar.sections.sharing.visibility.title')}
-              secondary={t('builder.rightSidebar.sections.sharing.visibility.subtitle')}
+              primary={t<string>('builder.rightSidebar.sections.sharing.visibility.title')}
+              secondary={t<string>('builder.rightSidebar.sections.sharing.visibility.subtitle')}
             />
             <Switch color="secondary" checked={isPublic} onChange={(_, value) => handleSetVisibility(value)} />
           </div>

client/components/build/RightSidebar/sections/Templates.tsx

@@ -24,7 +24,7 @@ const Templates = () => {
 
   return (
     <>
-      <Heading path="metadata.templates" name={t('builder.rightSidebar.sections.templates.heading')} />
+      <Heading path="metadata.templates" name={t<string>('builder.rightSidebar.sections.templates.heading')} />
 
       <div className={styles.container}>
         {Object.values(templateMap).map((template) => (

client/components/build/RightSidebar/sections/Theme.tsx

@@ -1,4 +1,4 @@
-import { Theme } from '@reactive-resume/schema';
+import { Theme as ThemeType } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
 
@@ -16,15 +16,15 @@ const Theme = () => {
 
   const dispatch = useAppDispatch();
 
-  const { background, text, primary } = useAppSelector<Theme>((state) => get(state.resume, 'metadata.theme'));
+  const { background, text, primary } = useAppSelector<ThemeType>((state) => get(state.resume, 'metadata.theme'));
 
   const handleChange = (property: string, color: string) => {
-    dispatch(setResumeState({ path: `metadata.theme.${property}`, value: color }));
+    dispatch(setResumeState({ path: `metadata.theme.${property}`, value: color[0] !== '#' ? `#${color}` : color }));
   };
 
   return (
     <>
-      <Heading path="metadata.theme" name={t('builder.rightSidebar.sections.theme.heading')} />
+      <Heading path="metadata.theme" name={t<string>('builder.rightSidebar.sections.theme.heading')} />
 
       <div className={styles.container}>
         <div className={styles.colorOptions}>
@@ -34,18 +34,18 @@ const Theme = () => {
         </div>
 
         <ColorPicker
-          label={t('builder.rightSidebar.sections.theme.form.primary.label')}
+          label={t<string>('builder.rightSidebar.sections.theme.form.primary.label')}
           color={primary}
           className="col-span-2"
           onChange={(color) => handleChange('primary', color)}
         />
         <ColorPicker
-          label={t('builder.rightSidebar.sections.theme.form.background.label')}
+          label={t<string>('builder.rightSidebar.sections.theme.form.background.label')}
           color={background}
           onChange={(color) => handleChange('background', color)}
         />
         <ColorPicker
-          label={t('builder.rightSidebar.sections.theme.form.text.label')}
+          label={t<string>('builder.rightSidebar.sections.theme.form.text.label')}
           color={text}
           onChange={(color) => handleChange('text', color)}
         />

client/components/build/RightSidebar/sections/Typography.tsx

@@ -64,7 +64,7 @@ const Widgets: React.FC<WidgetProps> = ({ label, category }) => {
             step={1}
             marks={[
               { value: 12, label: '12px' },
-              { value: 24, label: t('builder.rightSidebar.sections.typography.form.font-size.label') },
+              { value: 24, label: t<string>('builder.rightSidebar.sections.typography.form.font-size.label') },
               { value: 36, label: '36px' },
             ]}
             valueLabelDisplay="auto"
@@ -82,7 +82,10 @@ const Widgets: React.FC<WidgetProps> = ({ label, category }) => {
           value={fonts.find((font) => font.family === family[category])}
           onChange={(_, font: Font | null) => handleChange('family', font)}
           renderInput={(params) => (
-            <TextField {...params} label={t('builder.rightSidebar.sections.typography.form.font-family.label')} />
+            <TextField
+              {...params}
+              label={t<string>('builder.rightSidebar.sections.typography.form.font-family.label')}
+            />
           )}
         />
       </div>
@@ -95,10 +98,13 @@ const Typography = () => {
 
   return (
     <>
-      <Heading path="metadata.typography" name={t('builder.rightSidebar.sections.typography.heading')} />
+      <Heading path="metadata.typography" name={t<string>('builder.rightSidebar.sections.typography.heading')} />
 
-      <Widgets label={t('builder.rightSidebar.sections.typography.widgets.headings.label')} category="heading" />
-      <Widgets label={t('builder.rightSidebar.sections.typography.widgets.body.label')} category="body" />
+      <Widgets
+        label={t<string>('builder.rightSidebar.sections.typography.widgets.headings.label')}
+        category="heading"
+      />
+      <Widgets label={t<string>('builder.rightSidebar.sections.typography.widgets.body.label')} category="body" />
     </>
   );
 };

client/components/dashboard/ResumePreview.tsx

@@ -94,7 +94,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
     const url = getResumeUrl(resume, { withHost: true });
     await navigator.clipboard.writeText(url);
 
-    toast.success(t('common.toast.success.resume-link-copied'));
+    toast.success(t<string>('common.toast.success.resume-link-copied'));
   };
 
   const handleDelete = async () => {
@@ -124,7 +124,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
       <footer>
         <div className={styles.meta}>
           <p>{resume.name}</p>
-          <p>{t('dashboard.resume.timestamp', { timestamp: getRelativeTime(resume.updatedAt) })}</p>
+          <p>{t<string>('dashboard.resume.timestamp', { timestamp: getRelativeTime(resume.updatedAt) })}</p>
         </div>
 
         <ButtonBase className={styles.menu} onClick={handleOpenMenu}>
@@ -136,21 +136,21 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
             <ListItemIcon>
               <OpenInNew className="scale-90" />
             </ListItemIcon>
-            <ListItemText>{t('dashboard.resume.menu.open')}</ListItemText>
+            <ListItemText>{t<string>('dashboard.resume.menu.open')}</ListItemText>
           </MenuItem>
 
           <MenuItem onClick={handleRename}>
             <ListItemIcon>
               <DriveFileRenameOutline className="scale-90" />
             </ListItemIcon>
-            <ListItemText>{t('dashboard.resume.menu.rename')}</ListItemText>
+            <ListItemText>{t<string>('dashboard.resume.menu.rename')}</ListItemText>
           </MenuItem>
 
           <MenuItem onClick={handleDuplicate}>
             <ListItemIcon>
               <ContentCopy className="scale-90" />
             </ListItemIcon>
-            <ListItemText>{t('dashboard.resume.menu.duplicate')}</ListItemText>
+            <ListItemText>{t<string>('dashboard.resume.menu.duplicate')}</ListItemText>
           </MenuItem>
 
           {resume.public ? (
@@ -158,7 +158,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
               <ListItemIcon>
                 <LinkIcon className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText>
+              <ListItemText>{t<string>('dashboard.resume.menu.share-link')}</ListItemText>
             </MenuItem>
           ) : (
             <Tooltip arrow placement="right" title={t<string>('dashboard.resume.menu.tooltips.share-link')}>
@@ -167,7 +167,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
                   <ListItemIcon>
                     <LinkIcon className="scale-90" />
                   </ListItemIcon>
-                  <ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText>
+                  <ListItemText>{t<string>('dashboard.resume.menu.share-link')}</ListItemText>
                 </MenuItem>
               </div>
             </Tooltip>
@@ -178,7 +178,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
               <ListItemIcon>
                 <DeleteOutline className="scale-90" />
               </ListItemIcon>
-              <ListItemText>{t('dashboard.resume.menu.delete')}</ListItemText>
+              <ListItemText>{t<string>('dashboard.resume.menu.delete')}</ListItemText>
             </MenuItem>
           </Tooltip>
         </Menu>

client/components/landing/Testimony.tsx

@@ -1,8 +1,8 @@
-import { Testimony } from '@/data/testimonials';
+import { Testimony as TestimonyType } from '@/data/testimonials';
 
 import styles from './Testimony.module.scss';
 
-type Props = Testimony;
+type Props = TestimonyType;
 
 const Testimony: React.FC<Props> = ({ name, message }) => {
   return (

client/components/shared/ArrayInput.tsx

@@ -8,14 +8,14 @@ import styles from './ArrayInput.module.scss';
 
 type Props = {
   label: string;
-  value: string[];
+  value?: string[];
   className?: string;
   onChange: (event: any) => void;
   errors?: FieldError | FieldError[];
 };
 
 const ArrayInput: React.FC<Props> = ({ value, label, onChange, errors, className }) => {
-  const [items, setItems] = useState<string[]>(value);
+  const [items, setItems] = useState<string[]>(value || []);
 
   const onAdd = () => setItems([...items, '']);
 

client/components/shared/Avatar.tsx

@@ -56,12 +56,12 @@ const Avatar: React.FC<Props> = ({ size = 64 }) => {
       <Menu anchorEl={anchorEl} onClose={handleClose} open={Boolean(anchorEl)}>
         <MenuItem>
           <div>
-            <span className="text-xs opacity-50">{t('common.avatar.menu.greeting')}</span>
+            <span className="text-xs opacity-50">{t<string>('common.avatar.menu.greeting')}</span>
             <p>{user?.name}</p>
           </div>
         </MenuItem>
         <Divider />
-        <MenuItem onClick={handleLogout}>{t('common.avatar.menu.logout')}</MenuItem>
+        <MenuItem onClick={handleLogout}>{t<string>('common.avatar.menu.logout')}</MenuItem>
       </Menu>
     </>
   );

client/components/shared/BaseModal.module.scss

@@ -1,10 +1,16 @@
 .content {
-  @apply rounded p-6 text-sm shadow lg:w-1/2 xl:w-2/5;
+  @apply rounded px-6 text-sm shadow lg:w-1/2 xl:w-2/5;
   @apply absolute inset-4 sm:inset-x-4 sm:inset-y-auto lg:inset-auto;
   @apply overflow-scroll bg-neutral-50 dark:bg-neutral-900 lg:overflow-auto;
+  @apply max-h-[90vh] min-h-fit;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .header {
+  @apply sticky top-0 left-0 right-0 z-50 pt-6 bg-neutral-50 dark:bg-neutral-900;
   @apply flex items-center justify-between;
   @apply w-full border-b pb-5 dark:border-white/10;
 
@@ -27,6 +33,7 @@
 }
 
 .footer {
+  @apply sticky bottom-0 left-0 right-0 z-50 pb-6 bg-neutral-50 dark:bg-neutral-900;
   @apply flex items-center justify-end gap-x-4;
   @apply w-full border-t pt-5 dark:border-white/10;
 }

client/components/shared/BaseModal.tsx

@@ -5,11 +5,12 @@ import { useRouter } from 'next/router';
 import styles from './BaseModal.module.scss';
 
 type Props = {
-  icon?: React.ReactNode;
   isOpen: boolean;
   heading: string;
-  handleClose: () => void;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
   footerChildren?: React.ReactNode;
+  handleClose: () => void;
 };
 
 const BaseModal: React.FC<Props> = ({ icon, isOpen, heading, children, handleClose, footerChildren }) => {

client/components/shared/ColorAvatar.tsx

@@ -12,7 +12,7 @@ const ColorAvatar: React.FC<Props> = ({ color, size = 20, onClick }) => {
 
   return (
     <IconButton onClick={handleClick}>
-      <Avatar sx={{ bgcolor: color, width: size, height: size }}> </Avatar>
+      <Avatar sx={{ bgcolor: color, width: size, height: size }}>&nbsp;</Avatar>
     </IconButton>
   );
 };

client/components/shared/Footer.tsx

@@ -9,8 +9,9 @@ const Footer: React.FC<Props> = ({ className }) => {
   const { t } = useTranslation();
 
   return (
-    <footer className={clsx('text-xs', className)}>
-      <p>{t('common.footer.license')}</p>
+    <div className={clsx('text-xs', className)}>
+      <p>{t<string>('common.footer.license')}</p>
+
       <p>
         <Trans t={t} i18nKey="common.footer.credit">
           A passion project by
@@ -19,7 +20,7 @@ const Footer: React.FC<Props> = ({ className }) => {
           </a>
         </Trans>
       </p>
-    </footer>
+    </div>
   );
 };
 

client/components/shared/Heading.tsx

@@ -37,7 +37,7 @@ const Heading: React.FC<Props> = ({
 
   const [editMode, setEditMode] = useState(false);
 
-  const id = useMemo(() => path && path.split('.').at(-1), [path]);
+  const id = useMemo(() => path.split('.')[1], [path]);
 
   const icon = sections.find((x) => x.id === id)?.icon || <Grade />;
 

client/components/shared/LanguageSwitcher.module.scss

@@ -0,0 +1,13 @@
+.popover {
+  width: 460px;
+
+  @apply px-4 py-2;
+}
+
+.container {
+  @apply grid grid-cols-3 items-center justify-center gap-x-2;
+}
+
+.language {
+  @apply py-2 px-4 cursor-pointer text-center hover:underline;
+}

client/components/shared/LanguageSwitcher.tsx

@@ -0,0 +1,53 @@
+import { Language } from '@mui/icons-material';
+import { IconButton, Menu, MenuItem } from '@mui/material';
+import { useRouter } from 'next/router';
+import { MouseEvent, useState } from 'react';
+
+import { languages } from '@/config/languages';
+import { TRANSLATE_URL } from '@/constants/index';
+
+const LanguageSwitcher = () => {
+  const router = useRouter();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
+
+  const handleClose = () => setAnchorEl(null);
+
+  const handleChange = (locale: string) => {
+    const { pathname, asPath, query } = router;
+
+    handleClose();
+
+    document.cookie = `NEXT_LOCALE=${locale}; path=/; expires=2147483647`;
+
+    router.push({ pathname, query }, asPath, { locale });
+  };
+
+  const handleAddLanguage = () => window.open(TRANSLATE_URL, '_blank');
+
+  return (
+    <div>
+      <IconButton onClick={handleClick}>
+        <Language />
+      </IconButton>
+
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        {languages.map(({ code, name, localName }) => (
+          <MenuItem key={code} onClick={() => handleChange(code)}>
+            {name} {localName && `(${localName})`}
+          </MenuItem>
+        ))}
+
+        <MenuItem>
+          <span className="font-bold" onClick={handleAddLanguage}>
+            Add your language
+          </span>
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default LanguageSwitcher;

client/components/shared/List.tsx

@@ -66,7 +66,7 @@ const List: React.FC<Props> = ({
   return (
     <DndProvider backend={HTML5Backend}>
       <div className={clsx(styles.container, className)}>
-        {isEmpty(list) && <div className={styles.empty}>{t('builder.common.list.empty-text')}</div>}
+        {isEmpty(list) && <div className={styles.empty}>{t<string>('builder.common.list.empty-text')}</div>}
 
         {list.map((item, index) => {
           const title = get(item, titleKey, '');
@@ -76,6 +76,7 @@ const List: React.FC<Props> = ({
           return (
             <ListItem
               key={item.id}
+              path={path}
               item={item}
               index={index}
               title={title}

client/components/shared/ListItem.tsx

@@ -3,6 +3,7 @@ import { Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Toolti
 import { ListItem as ListItemType } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import isFunction from 'lodash/isFunction';
+import { useTranslation } from 'next-i18next';
 import React, { useRef, useState } from 'react';
 import { DropTargetMonitor, useDrag, useDrop, XYCoord } from 'react-dnd';
 
@@ -16,6 +17,7 @@ interface DragItem {
 
 type Props = {
   item: ListItemType;
+  path: string;
   index: number;
   title: string;
   subtitle?: string;
@@ -25,12 +27,14 @@ type Props = {
   onDuplicate?: (item: ListItemType) => void;
 };
 
-const ListItem: React.FC<Props> = ({ item, index, title, subtitle, onMove, onEdit, onDelete, onDuplicate }) => {
+const ListItem: React.FC<Props> = ({ item, path, index, title, subtitle, onMove, onEdit, onDelete, onDuplicate }) => {
+  const { t } = useTranslation();
+
   const ref = useRef<HTMLDivElement>(null);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
   const [{ handlerId }, drop] = useDrop<DragItem, any, any>({
-    accept: 'ListItem',
+    accept: path,
     collect(monitor) {
       return { handlerId: monitor.getHandlerId() };
     },
@@ -65,7 +69,7 @@ const ListItem: React.FC<Props> = ({ item, index, title, subtitle, onMove, onEdi
   });
 
   const [{ isDragging }, drag] = useDrag({
-    type: 'ListItem',
+    type: path,
     item: () => {
       return { id: item.id, index };
     },
@@ -122,29 +126,25 @@ const ListItem: React.FC<Props> = ({ item, index, title, subtitle, onMove, onEdi
             <ListItemIcon>
               <DriveFileRenameOutline className="scale-90" />
             </ListItemIcon>
-            <ListItemText>Edit</ListItemText>
+            <ListItemText>{t<string>('builder.common.list.actions.edit')}</ListItemText>
           </MenuItem>
 
           <MenuItem onClick={() => handleDuplicate(item)}>
             <ListItemIcon>
               <FileCopy className="scale-90" />
             </ListItemIcon>
-            <ListItemText>Duplicate</ListItemText>
+            <ListItemText>{t<string>('builder.common.list.actions.duplicate')}</ListItemText>
           </MenuItem>
 
           <Divider />
 
-          <Tooltip
-            arrow
-            placement="right"
-            title="Are you sure you want to delete this item? This is an irreversible action."
-          >
+          <Tooltip arrow placement="right" title={t<string>('builder.common.tooltip.delete-item')}>
             <div>
               <MenuItem onClick={() => handleDelete(item)}>
                 <ListItemIcon>
                   <DeleteOutline className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>Delete</ListItemText>
+                <ListItemText>{t<string>('builder.common.list.actions.delete')}</ListItemText>
               </MenuItem>
             </div>
           </Tooltip>

client/components/shared/NoSSR.tsx

@@ -1,5 +0,0 @@
-import dynamic from 'next/dynamic';
-
-const NoSSR: React.FC = ({ children }) => <>{children}</>;
-
-export default dynamic(() => Promise.resolve(NoSSR), { ssr: false });

client/components/shared/ResumeInput.tsx

@@ -1,4 +1,7 @@
+import { DatePicker } from '@mui/lab';
 import { TextField } from '@mui/material';
+import dayjs from 'dayjs';
+import { isEmpty } from 'lodash';
 import get from 'lodash/get';
 import { useEffect, useState } from 'react';
 
@@ -8,7 +11,7 @@ import { setResumeState } from '@/store/resume/resumeSlice';
 import MarkdownSupported from './MarkdownSupported';
 
 interface Props {
-  type?: 'text' | 'textarea';
+  type?: 'text' | 'textarea' | 'date';
   label: string;
   path: string;
   className?: string;
@@ -31,6 +34,11 @@ const ResumeInput: React.FC<Props> = ({ type = 'text', label, path, className, m
     dispatch(setResumeState({ path, value: event.target.value }));
   };
 
+  const onChangeValue = (value: string) => {
+    setValue(value);
+    dispatch(setResumeState({ path, value }));
+  };
+
   if (type === 'textarea') {
     return (
       <TextField
@@ -45,6 +53,22 @@ const ResumeInput: React.FC<Props> = ({ type = 'text', label, path, className, m
     );
   }
 
+  if (type === 'date') {
+    return (
+      <DatePicker
+        openTo="year"
+        label={label}
+        value={value}
+        views={['year', 'month', 'day']}
+        renderInput={(params) => <TextField {...params} error={false} className={className} />}
+        onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
+          isEmpty(keyboardInputValue) && onChangeValue('');
+          date && dayjs(date).isValid() && onChangeValue(date.toISOString());
+        }}
+      />
+    );
+  }
+
   return <TextField type={type} label={label} value={value} onChange={onChange} className={className} />;
 };
 

client/config/languages.ts

@@ -5,11 +5,31 @@ export type Language = {
 };
 
 export const languages: Language[] = [
-  {
-    code: 'en',
-    name: 'English',
-  },
-];
+  { code: 'ar', name: 'Arabic', localName: 'اَلْعَرَبِيَّةُ' },
+  { code: 'bn', name: 'Bengali', localName: 'বাংলা' },
+  { code: 'cs', name: 'Czech', localName: 'čeština' },
+  { code: 'da', name: 'Danish', localName: 'Dansk' },
+  { code: 'de', name: 'German', localName: 'Deutsch' },
+  { code: 'el', name: 'Greek', localName: 'Ελληνικά' },
+  { code: 'en', name: 'English' },
+  { code: 'es', name: 'Spanish', localName: 'Español' },
+  { code: 'fr', name: 'French', localName: 'Français' },
+  { code: 'hi', name: 'Hindi', localName: 'हिन्दी' },
+  { code: 'hu', name: 'Hungarian', localName: 'Magyar' },
+  { code: 'it', name: 'Italian', localName: 'Italiano' },
+  { code: 'kn', name: 'Kannada', localName: 'ಕನ್ನಡ' },
+  { code: 'ml', name: 'Malayalam', localName: 'മലയാളം' },
+  { code: 'nl', name: 'Dutch', localName: 'Nederlands' },
+  { code: 'or', name: 'Odia', localName: 'ଓଡ଼ିଆ' },
+  { code: 'pl', name: 'Polish', localName: 'Polski' },
+  { code: 'pt', name: 'Portuguese', localName: 'Português' },
+  { code: 'ru', name: 'Russian', localName: 'русский' },
+  { code: 'sv', name: 'Swedish', localName: 'Svenska' },
+  { code: 'ta', name: 'Tamil', localName: 'தமிழ்' },
+  { code: 'tr', name: 'Turkish', localName: 'Türkçe' },
+  { code: 'vi', name: 'Vietnamese', localName: 'Tiếng Việt' },
+  { code: 'zh', name: 'Chinese', localName: '中文' },
+].sort((a, b) => a.name.localeCompare(b.name));
 
 export const languageMap: Record<string, Language> = languages.reduce(
   (acc, lang) => ({