remove VERSION env dependency from server

Bump org.jetbrains.kotlin.android from 1.8.10 to 1.8.20 in /app

.dockerignore

@@ -1,7 +1,9 @@
+# Android App
+/app
+
 # Build Artifacts
-dist
-.next
-.turbo
+/server/dist
+/client/.next
 
 # IDEs
 .vscode
@@ -16,12 +18,9 @@ CHANGELOG.md
 CODE_OF_CONDUCT.md
 
 # Project Dependencies
-node_modules
+**/node_modules
 
 # Docker
 Dockerfile
 .dockerignore
 docker-compose.yml
-
-# Android App
-/app

.env.example

@@ -1,11 +1,7 @@
-# Turbo Cache (Optional)
-TURBO_TEAM=
-TURBO_TOKEN=
-
 # Server + Client
 TZ=UTC
-PUBLIC_URL=http://client:3000
-PUBLIC_SERVER_URL=http://server:3100
+PUBLIC_URL=http://localhost:3000
+PUBLIC_SERVER_URL=http://localhost:3100
 PUBLIC_GOOGLE_CLIENT_ID=
 
 # Server + Database
@@ -15,7 +11,7 @@ POSTGRES_PASSWORD=postgres
 
 # Server
 SECRET_KEY=
-POSTGRES_HOST=postgres
+POSTGRES_HOST=localhost
 POSTGRES_PORT=5432
 POSTGRES_SSL_CERT=
 JWT_SECRET=
@@ -34,6 +30,7 @@ STORAGE_ENDPOINT=
 STORAGE_URL_PREFIX=
 STORAGE_ACCESS_KEY=
 STORAGE_SECRET_KEY=
+PDF_DELETION_TIME=345600000
 
-# Flags (Client)
-PUBLIC_FLAG_DISABLE_SIGNUPS=false
+# Client
+PUBLIC_FLAG_DISABLE_SIGNUPS=false

.eslintrc.json

@@ -2,23 +2,11 @@
   "ignorePatterns": ["/app"],
   "parser": "@typescript-eslint/parser",
   "extends": ["plugin:@typescript-eslint/recommended"],
-  "plugins": ["@typescript-eslint/eslint-plugin", "simple-import-sort", "unused-imports"],
+  "plugins": ["@typescript-eslint/eslint-plugin", "simple-import-sort"],
   "rules": {
     // ESLint
     "no-unused-vars": "off",
 
-    // Unused Imports
-    "unused-imports/no-unused-imports": "error",
-    "unused-imports/no-unused-vars": [
-      "warn",
-      {
-        "vars": "all",
-        "args": "none",
-        "varsIgnorePattern": "^_",
-        "argsIgnorePattern": "^_"
-      }
-    ],
-
     // Simple Import Sort
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
@@ -26,6 +14,7 @@
     // TypeScript ESLint
     "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off"

.github/FUNDING.yml

@@ -1 +1,2 @@
+github: AmruthPillai
 custom: https://paypal.me/RajaRajanA

.github/workflows/digitalocean-deploy.yml

@@ -8,14 +8,21 @@ on:
       - completed
 
 jobs:
-  deploy:
+  on-success:
     runs-on: ubuntu-latest
-
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Install DigitalOcean CLI
-        uses: digitalocean/action-doctl@v2.1.1
+        uses: digitalocean/action-doctl@v2.3.0
         with:
           token: ${{ secrets.DIGITALOCEAN_TOKEN }}
 
       - name: Create Deployment with Latest Version
         run: doctl apps create-deployment ${{ secrets.DIGITALOCEAN_APP_ID }} --wait --force-rebuild
+
+  on-failure:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'failure' }}
+    steps:
+      - name: Abruptly end the worklfow
+        run: exit 1

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

@@ -1,112 +1,58 @@
 name: Build and Push Docker Image
 
 on:
+  workflow_dispatch:
   release:
     types: [published]
 
 jobs:
-  client:
-    name: Client
+  build_matrix:
+    name: Build and Push Docker Image
     runs-on: ubuntu-latest
 
-    env:
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+    strategy:
+      matrix:
+        image: [client, server]
 
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.0.2
-        with:
-          fetch-depth: 2
+        uses: actions/checkout@v3.5.0
 
       - id: version
-        name: Get Version
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+        name: App Version
+        uses: martinbeentjes/npm-get-version-action@v1.2.3
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.0.0
+        uses: docker/setup-qemu-action@v2.1.0
+        with:
+          platforms: amd64
 
       - id: buildx
         name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.0.0
-        with:
-          install: true
+        uses: docker/setup-buildx-action@v2.5.0
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v2.0.0
+        uses: docker/login-action@v2.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2.0.0
+        uses: docker/login-action@v2.1.0
         with:
           registry: ghcr.io
           username: $GITHUB_REPOSITORY_OWNER
           password: ${{ secrets.GH_TOKEN }}
 
-      - name: Build and Push Client Image
-        uses: docker/build-push-action@v3.1.1
+      - name: Build and Push Docker Image
+        uses: docker/build-push-action@v4.0.0
         with:
           context: .
           push: true
-          file: client/Dockerfile
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64
+          file: ${{ matrix.image }}/Dockerfile
           tags: |
-            amruthpillai/reactive-resume:client-latest
-            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 }}
-
-  server:
-    name: Server
-    runs-on: ubuntu-latest
-
-    env:
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.0.2
-        with:
-          fetch-depth: 2
-
-      - id: version
-        name: Get Version
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.0.0
-
-      - id: buildx
-        name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.0.0
-        with:
-          install: true
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.0.0
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v2.0.0
-        with:
-          registry: ghcr.io
-          username: $GITHUB_REPOSITORY_OWNER
-          password: ${{ secrets.GH_TOKEN }}
-
-      - name: Build and Push Server Image
-        uses: docker/build-push-action@v3.1.1
-        with:
-          context: .
-          push: true
-          file: server/Dockerfile
-          platforms: linux/amd64,linux/arm64
-          tags: |
-            amruthpillai/reactive-resume:server-latest
-            amruthpillai/reactive-resume:server-${{ steps.version.outputs.tag }}
-            ghcr.io/amruthpillai/reactive-resume:server-latest
-            ghcr.io/amruthpillai/reactive-resume:server-${{ steps.version.outputs.tag }}
+            amruthpillai/reactive-resume:${{ matrix.image }}-latest
+            amruthpillai/reactive-resume:${{ matrix.image }}-${{ steps.version.outputs.current-version }}
+            ghcr.io/amruthpillai/reactive-resume:${{ matrix.image }}-latest
+            ghcr.io/amruthpillai/reactive-resume:${{ matrix.image }}-${{ steps.version.outputs.current-version }}

.github/workflows/docker-build.yml

@@ -1,84 +0,0 @@
-name: Build Docker Image
-
-on: pull_request
-
-jobs:
-  client:
-    name: Client
-    runs-on: ubuntu-latest
-
-    env:
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.0.2
-        with:
-          fetch-depth: 2
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.0.0
-
-      - id: buildx
-        name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.0.0
-        with:
-          install: true
-
-      - id: variables
-        name: Get Short SHA
-        run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
-
-      - name: Build Client Image
-        uses: docker/build-push-action@v3.1.1
-        with:
-          context: .
-          push: false
-          file: client/Dockerfile
-          platforms: linux/amd64,linux/arm64
-          tags: |
-            amruthpillai/reactive-resume:client-latest
-            amruthpillai/reactive-resume:client-${{ steps.variables.outputs.sha_short }}
-            ghcr.io/amruthpillai/reactive-resume:client-latest
-            ghcr.io/amruthpillai/reactive-resume:client-${{ steps.variables.outputs.sha_short }}
-
-  server:
-    name: Server
-    runs-on: ubuntu-latest
-
-    env:
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v3.0.2
-        with:
-          fetch-depth: 2
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2.0.0
-
-      - id: buildx
-        name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.0.0
-        with:
-          install: true
-
-      - id: variables
-        name: Get Short SHA
-        run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
-
-      - name: Build Server Image
-        uses: docker/build-push-action@v3.1.1
-        with:
-          context: .
-          push: false
-          file: server/Dockerfile
-          platforms: linux/amd64,linux/arm64
-          tags: |
-            amruthpillai/reactive-resume:server-latest
-            amruthpillai/reactive-resume:server-${{ steps.variables.outputs.sha_short }}
-            ghcr.io/amruthpillai/reactive-resume:server-latest
-            ghcr.io/amruthpillai/reactive-resume:server-${{ steps.variables.outputs.sha_short }}

.gitignore

@@ -1,6 +1,7 @@
 # Environment Variables
 .env
 .env.*
+!.env.gitpod
 !.env.example
 
 # Project Dependencies
@@ -9,5 +10,5 @@ node_modules
 # macOS
 .DS_Store
 
-# Turbo
-.turbo
+# Intellij
+.idea

.gitpod.yml

@@ -0,0 +1,41 @@
+tasks:
+  - name: Run PostgreSQL Database
+    command: docker run --name postgres -p 5432:5432 -e POSTGRES_PASSWORD=postgres -d postgres
+
+  - name: Install Project Dependencies
+    command: |
+      pnpm install
+      pnpm dlx playwright install --with-deps chromium
+      gp sync-done deps
+
+  - name: Generate Environment Variables
+    init: gp sync-await deps
+    command: |
+      if [ -f .env ]; then
+        echo "Found .env in workspace, skipping generation"
+      else
+        pnpm generate-env
+      fi
+      gp sync-done env
+
+  - name: Build and Run Project
+    init: gp sync-await env
+    command: |
+      pnpm build
+      pnpm start
+
+ports:
+  # PostgreSQL
+  - port: 5432
+    onOpen: ignore
+    visibility: private
+
+  # Client
+  - port: 3100
+    onOpen: ignore
+    visibility: public
+
+  # Client
+  - port: 3000
+    onOpen: open-browser
+    visibility: public

README.md

@@ -1,4 +1,4 @@
-<img src="https://github.com/AmruthPillai/Reactive-Resume/blob/main/docs/static/logo.svg" alt="Reactive Resume" width="256px" height="256px" />
+<img src="https://rxresu.me/images/logos/logo.png" alt="Reactive Resume" width="256px" height="256px" />
 
 # Reactive Resume
 
@@ -6,7 +6,8 @@
 [![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)
+![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/AmruthPillai/Reactive-Resume/docker-build-push.yml?branch=main&label=docker%20build&style=flat-square)
+[![Gitpod](https://img.shields.io/badge/Contribute%20with-Gitpod-908a85?logo=gitpod)](https://gitpod.io/#https://github.com/AmruthPillai/Reactive-Resume)
 [![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://rxresu.me) | [Docs](https://docs.rxresu.me)
@@ -18,7 +19,7 @@ You have complete control over what goes into your resume, how it looks, what co
 ## Table of Contents
 
 - [Reactive Resume](#reactive-resume)
-  - [Go to App | [Docs](https://docs.rxresu.me)](#go-to-app--docs)
+  - [Go to App | Docs](#go-to-app--docs)
   - [Table of Contents](#table-of-contents)
   - [Features](#features)
   - [Languages](#languages)
@@ -27,7 +28,8 @@ You have complete control over what goes into your resume, how it looks, what co
   - [Contributing](#contributing)
   - [Report Bugs and Feature Requests](#report-bugs-and-feature-requests)
   - [Donations](#donations)
-    - [💸 PayPal](#-paypal)
+    - [GitHub Sponsor](#github-sponsor)
+    - [PayPal](#paypal)
   - [Infrastructure](#infrastructure)
   - [Contributors Wall](#contributors-wall)
   - [License](#license)
@@ -54,9 +56,11 @@ You have complete control over what goes into your resume, how it looks, what co
 
 ## Languages
 
+- Amharic (አማርኛ)
 - Arabic (اَلْعَرَبِيَّةُ)
 - Bengali (বাংলা)
 - Bulgarian (български)
+- Catalan (Valencian)
 - Chinese (中文)
 - Czech (čeština)
 - Danish (Dansk)
@@ -71,17 +75,26 @@ You have complete control over what goes into your resume, how it looks, what co
 - Hungarian (Magyar)
 - Indonesian (Bahasa Indonesia)
 - Italian (Italiano)
+- Japanese (日本語)
 - Kannada (ಕನ್ನಡ)
+- Khmer (ភាសាខ្មែរ)
+- Korean (한국어)
 - Malayalam (മലയാളം)
+- Marathi (मराठी)
+- Nepali (नेपाली)
+- Norwegian (Norsk)
 - Odia (ଓଡ଼ିଆ)
-- Persian (Farsi)
+- Persian (فارسی)
 - Polish (Polski)
 - Portuguese (Português)
+- Romanian (limba română)
 - Russian (русский)
+- Serbian (српски језик)
 - Spanish (Español)
 - Swedish (Svenska)
 - Tamil (தமிழ்)
 - Turkish (Türkçe)
+- Ukrainian (Українська мова)
 - Vietnamese (Tiếng Việt)
 
 Help by [translating Reactive Resume](https://translate.rxresu.me) to your language!
@@ -92,7 +105,11 @@ The docs include an extensive [Tutorial](https://docs.rxresu.me/tutorial) sectio
 
 ## Build from Source
 
-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.
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/AmruthPillai/Reactive-Resume)
+
+Initially building the image and project on Gitpod will take at least ~10 minutes, so please be patient on first launch.
+
+For extensive information on how to build the app on your local machine, head over to the docs [Source Code](https://docs.rxresu.me/source-code) section.
 
 ## Contributing
 
@@ -114,7 +131,12 @@ Use the [GitHub Issues](https://github.com/AmruthPillai/Reactive-Resume/issues/n
 
 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.
 
-### [💸 PayPal](https://paypal.me/RajaRajanA)
+### [GitHub Sponsor](https://github.com/sponsors/AmruthPillai)
+### [PayPal](https://paypal.me/RajaRajanA)
+
+## GitHub Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date)](https://star-history.com/#AmruthPillai/Reactive-Resume&Date)
 
 ## Infrastructure
 

app/app/build.gradle

@@ -12,8 +12,8 @@ android {
         targetSdk 32
         versionCode 3
         versionName "1.0"
+        resConfigs 'en'
 
-        resConfigs "en"
     }
 
     buildTypes {
@@ -38,6 +38,7 @@ android {
     buildFeatures {
         viewBinding true
     }
+    namespace 'me.rxresu.app'
 }
 
 dependencies {

app/app/src/main/AndroidManifest.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    package="me.rxresu.app">
+    xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET"/>
 

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

@@ -6,7 +6,6 @@ import android.webkit.WebView
 import androidx.appcompat.app.AppCompatActivity
 
 class MainActivity : AppCompatActivity() {
-
     private lateinit var webView: WebView
 
     private var url = "https://rxresu.me"

app/build.gradle

@@ -1,7 +1,7 @@
 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.7.10' apply false
+    id 'com.android.application' version '7.4.2' apply false
+    id 'com.android.library' version '7.4.2' apply false
+    id 'org.jetbrains.kotlin.android' version '1.8.20' apply false
 }
 
 task clean(type: Delete) {

app/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +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
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME

client/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": ["../.eslintrc.json", "next/core-web-vitals", "plugin:tailwindcss/recommended"],
+  "plugins": ["unused-imports"],
   "ignorePatterns": [".next", "__ENV.js"],
   "settings": {
     "next": {
@@ -14,6 +15,18 @@
     // React Hooks
     "react-hooks/exhaustive-deps": "off",
 
+    // Unused Imports
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "args": "none",
+        "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+
     // Tailwind CSS
     "tailwindcss/no-custom-classname": ["warn", { "whitelist": ["preview-mode", "printer-mode", "markdown"] }]
   }

client/.gitignore

@@ -39,4 +39,4 @@ yarn-error.log*
 __ENV.js
 
 # next-sitemap
-sitemap*.xml
+sitemap*.xml

client/Dockerfile

@@ -2,12 +2,12 @@ FROM node:lts-alpine AS base
 
 WORKDIR /app
 
-RUN apk add --no-cache g++ git curl make python3 \
-  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+RUN apk add --no-cache g++ git make curl python3 libc6-compat \
+  && corepack enable && corepack prepare pnpm@latest --activate
 
 FROM base as dependencies
 
-COPY package.json pnpm-*.yaml turbo.json ./
+COPY package.json pnpm-*.yaml ./
 COPY ./schema/package.json ./schema/package.json
 COPY ./client/package.json ./client/package.json
 
@@ -21,17 +21,12 @@ COPY --from=dependencies /app/node_modules ./node_modules
 COPY --from=dependencies /app/schema/node_modules ./schema/node_modules
 COPY --from=dependencies /app/client/node_modules ./client/node_modules
 
-ARG TURBO_TEAM
-ARG TURBO_TOKEN
-
-ENV TURBO_TEAM $TURBO_TEAM
-ENV TURBO_TOKEN $TURBO_TOKEN
-
-RUN pnpm run build --filter client
+RUN pnpm run --filter schema build \
+  && pnpm run --filter client build
 
 FROM base as production
 
-COPY --from=builder /app/package.json /app/pnpm-*.yaml /app/turbo.json ./
+COPY --from=builder /app/package.json /app/pnpm-*.yaml ./
 COPY --from=builder /app/client/package.json ./client/package.json
 
 RUN pnpm install --filter client --prod --frozen-lockfile --workspace-root
@@ -46,6 +41,6 @@ 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 curl -fSs localhost:3000 || exit 1
 
-CMD [ "pnpm", "run", "start", "--filter", "client" ]
+CMD [ "pnpm", "run", "--filter", "client", "start" ]

client/components/build/Center/ArtboardController.tsx

@@ -13,11 +13,12 @@ import {
 } from '@mui/icons-material';
 import { ButtonBase, Divider, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import clsx from 'clsx';
-import { get } from 'lodash';
+import dayjs from 'dayjs';
+import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
 import toast from 'react-hot-toast';
 import { useMutation } from 'react-query';
-import { ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
+import { ReactZoomPanPinchHandlers } from 'react-zoom-pan-pinch';
 import { ActionCreators } from 'redux-undo';
 
 import { ServerError } from '@/services/axios';
@@ -28,7 +29,7 @@ import getResumeUrl from '@/utils/getResumeUrl';
 
 import styles from './ArtboardController.module.scss';
 
-const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, centerView }) => {
+const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomOut, centerView }) => {
   const { t } = useTranslation();
 
   const theme = useTheme();
@@ -67,10 +68,11 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
     const slug = get(resume, 'slug');
     const username = get(resume, 'user.username');
+    const updatedAt = get(resume, 'updatedAt');
 
-    const url = await mutateAsync({ username, slug });
+    const url = await mutateAsync({ username, slug, lastUpdated: dayjs(updatedAt).unix().toString() });
 
-    download(`/api${url}`);
+    download(url);
   };
 
   return (

client/components/build/Center/Center.module.scss

@@ -5,7 +5,7 @@
 }
 
 .wrapper {
-  @apply h-full w-full #{!important};
+  @apply h-full w-full overflow-visible #{!important};
 }
 
 .artboard {

client/components/build/Center/Header.tsx

@@ -53,13 +53,12 @@ const Header = () => {
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
-  const { mutateAsync: duplicateMutation } = useMutation<Resume, ServerError, DuplicateResumeParams>(duplicateResume);
-
-  const { mutateAsync: deleteMutation } = useMutation<void, ServerError, DeleteResumeParams>(deleteResume);
-
   const resume = useAppSelector((state) => state.resume.present);
   const { left, right } = useAppSelector((state) => state.build.sidebar);
 
+  const { mutateAsync: deleteMutation } = useMutation<void, ServerError, DeleteResumeParams>(deleteResume);
+  const { mutateAsync: duplicateMutation } = useMutation<Resume, ServerError, DuplicateResumeParams>(duplicateResume);
+
   const name = useMemo(() => get(resume, 'name'), [resume]);
 
   useEffect(() => {

client/components/build/Center/Page.module.scss

@@ -15,7 +15,7 @@
   }
 
   &.break::after {
-    content: 'A4 Page Break';
+    content: 'Page Break';
     top: calc(297mm - 19px);
 
     @apply absolute w-full border-b border-dashed border-neutral-800/75;
@@ -28,9 +28,13 @@
     }
   }
 
-  ul {
-    padding-left: 1.5em;
-    text-indent: -1.5em;
+  &.format-letter {
+    width: 216mm;
+    min-height: 279mm;
+
+    &.break::after {
+      top: calc(279mm - 19px);
+    }
   }
 }
 

client/components/build/Center/Page.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { CustomCSS, Theme, Typography } from '@reactive-resume/schema';
+import { CustomCSS, PageConfig, ThemeConfig, Typography } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -23,22 +23,24 @@ const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
   const resume = useAppSelector((state) => state.resume.present);
   const breakLine: boolean = useAppSelector((state) => state.build.page.breakLine);
 
-  const theme: Theme = get(resume, 'metadata.theme');
+  const theme: ThemeConfig = get(resume, 'metadata.theme');
   const customCSS: CustomCSS = get(resume, 'metadata.css');
   const template: string = get(resume, 'metadata.template');
   const typography: Typography = get(resume, 'metadata.typography');
+  const pageConfig: PageConfig = get(resume, 'metadata.page', {} as PageConfig);
 
   const themeCSS = useMemo(() => !isEmpty(theme) && generateThemeStyles(theme), [theme]);
   const typographyCSS = useMemo(() => !isEmpty(typography) && generateTypographyStyles(typography), [typography]);
   const TemplatePage: React.FC<PageProps> | null = useMemo(() => templateMap[template].component, [template]);
 
   return (
-    <div data-page={page + 1} className={styles.container}>
+    <div className={styles.container} data-page={page + 1} data-format={pageConfig?.format || 'A4'}>
       <div
         className={clsx({
           reset: true,
           [styles.page]: true,
           [styles.break]: breakLine,
+          [styles['format-letter']]: pageConfig?.format === 'Letter',
           [css(themeCSS)]: true,
           [css(typographyCSS)]: true,
           [css(customCSS.value)]: customCSS.visible,

client/components/build/LeftSidebar/LeftSidebar.tsx

@@ -1,14 +1,15 @@
 import { Add, Star } from '@mui/icons-material';
 import { Button, Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import { Section as SectionRecord } from '@reactive-resume/schema';
+import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
-import { useMemo } from 'react';
+import React, { ReactComponentElement, useMemo } from 'react';
 import { validate } from 'uuid';
 
 import Logo from '@/components/shared/Logo';
-import { getCustomSections, left } from '@/config/sections';
+import { getCustomSections, getSectionsByType, left } from '@/config/sections';
 import { setSidebarState } from '@/store/build/buildSlice';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { addSection } from '@/store/resume/resumeSlice';
@@ -26,6 +27,7 @@ const LeftSidebar = () => {
   const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
 
   const sections = useAppSelector((state) => state.resume.present.sections);
+
   const { open } = useAppSelector((state) => state.build.sidebar.left);
 
   const customSections = useMemo(() => getCustomSections(sections), [sections]);
@@ -52,7 +54,49 @@ const LeftSidebar = () => {
       items: [],
     };
 
-    dispatch(addSection({ value: newSection }));
+    dispatch(addSection({ value: newSection, type: 'custom' }));
+  };
+
+  const sectionsList = () => {
+    const sectionsComponents: Array<ReactComponentElement<any>> = [];
+
+    for (const item of left) {
+      const id = (item as any).id;
+      const component = (item as any).component;
+      const type = component.props.type;
+      const addMore = !!component.props.addMore;
+
+      sectionsComponents.push(
+        <section key={id} id={id}>
+          {component}
+        </section>
+      );
+
+      if (addMore) {
+        const additionalSections = getSectionsByType(sections, type);
+        const elements = [];
+        for (const element of additionalSections) {
+          const newId = element.id;
+
+          const props = cloneDeep(component.props);
+          props.path = 'sections.' + newId;
+          props.name = element.name;
+          props.isDeletable = true;
+          props.addMore = false;
+          props.isDuplicated = true;
+          const newComponent = React.cloneElement(component, props);
+
+          elements.push(
+            <section key={newId} id={`section-${newId}`}>
+              {newComponent}
+            </section>
+          );
+        }
+        sectionsComponents.push(...elements);
+      }
+    }
+
+    return sectionsComponents;
   };
 
   return (
@@ -65,12 +109,10 @@ const LeftSidebar = () => {
       variant={isDesktop ? 'persistent' : 'temporary'}
     >
       <div className={styles.container}>
-        <nav className="overflow-y-scroll">
+        <nav className="overflow-y-auto">
           <div>
             <Link href="/dashboard">
-              <a className="inline-flex">
-                <Logo size={40} />
-              </a>
+              <Logo size={40} />
             </Link>
             <Divider />
           </div>
@@ -81,15 +123,20 @@ const LeftSidebar = () => {
                 arrow
                 key={id}
                 placement="right"
-                title={get(sections, `${id}.name`, t<string>(`builder.leftSidebar.sections.${id}.heading`)) as string}
+                title={t<string>(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))}
               >
                 <IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
               </Tooltip>
             ))}
 
             {customSections.map(({ id }) => (
-              <Tooltip key={id} title={get(sections, `${id}.name`, '') as string} placement="right" arrow>
-                <IconButton onClick={() => handleClick(id)}>
+              <Tooltip
+                key={id}
+                title={t<string>(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))}
+                placement="right"
+                arrow
+              >
+                <IconButton onClick={() => id && handleClick(id)}>
                   <Star />
                 </IconButton>
               </Tooltip>
@@ -100,15 +147,11 @@ const LeftSidebar = () => {
         </nav>
 
         <main>
-          {left.map(({ id, component }) => (
-            <section key={id} id={id}>
-              {component}
-            </section>
-          ))}
+          {sectionsList()}
 
           {customSections.map(({ id }) => (
             <section key={id} id={`section-${id}`}>
-              <Section path={`sections.${id}`} isEditable isHideable isDeletable />
+              <Section path={`sections.${id}`} type="custom" isEditable isHideable isDeletable />
             </section>
           ))}
 

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

@@ -1,6 +1,6 @@
 import { Add } from '@mui/icons-material';
 import { Button } from '@mui/material';
-import { ListItem } from '@reactive-resume/schema';
+import { ListItem, Section as SectionRecord, SectionType } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
@@ -10,28 +10,34 @@ import Heading from '@/components/shared/Heading';
 import List from '@/components/shared/List';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { ModalName, setModalState } from '@/store/modal/modalSlice';
-import { duplicateItem } from '@/store/resume/resumeSlice';
+import { duplicateItem, duplicateSection } from '@/store/resume/resumeSlice';
 
 import SectionSettings from './SectionSettings';
 
 type Props = {
   path: `sections.${string}`;
+  type?: SectionType;
   name?: string;
   titleKey?: string;
   subtitleKey?: string;
   isEditable?: boolean;
   isHideable?: boolean;
   isDeletable?: boolean;
+  addMore?: boolean;
+  isDuplicated?: boolean;
 };
 
 const Section: React.FC<Props> = ({
   path,
   name = 'Section Name',
+  type = 'basic',
   titleKey = 'title',
   subtitleKey = 'subtitle',
   isEditable = false,
   isHideable = false,
   isDeletable = false,
+  addMore = false,
+  isDuplicated = false,
 }) => {
   const { t } = useTranslation();
 
@@ -41,22 +47,40 @@ const Section: React.FC<Props> = ({
   const visibility = useAppSelector<boolean>((state) => get(state.resume.present, `${path}.visible`, true));
 
   const handleAdd = () => {
-    const id = path.split('.')[1];
-    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+    const modal: ModalName = `builder.sections.${type}`;
 
     dispatch(setModalState({ modal, state: { open: true, payload: { path } } }));
   };
 
   const handleEdit = (item: ListItem) => {
     const id = path.split('.')[1];
-    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+    let modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+
     const payload = validate(id) ? { path, item } : { item };
 
+    if (isDuplicated) {
+      modal = `builder.sections.${type}`;
+      payload.path = path;
+    }
+
     dispatch(setModalState({ modal, state: { open: true, payload } }));
   };
 
   const handleDuplicate = (item: ListItem) => dispatch(duplicateItem({ path: `${path}.items`, value: item }));
 
+  const handleDuplicateSection = () => {
+    const newSection: SectionRecord = {
+      name: `${heading}`,
+      type: type,
+      visible: true,
+      columns: 2,
+      items: [],
+      isDuplicated: true,
+    };
+
+    dispatch(duplicateSection({ value: newSection, type }));
+  };
+
   return (
     <>
       <Heading path={path} name={name} isEditable={isEditable} isHideable={isHideable} isDeletable={isDeletable} />
@@ -74,9 +98,21 @@ const Section: React.FC<Props> = ({
         <SectionSettings path={path} />
 
         <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
-          {t<string>('builder.common.actions.add', { token: heading })}
+          {t<string>('builder.common.actions.add', {
+            token: t<string>(`builder.leftSidebar.${path}.heading`, heading),
+          })}
         </Button>
       </footer>
+
+      {addMore ? (
+        <div className="py-6 text-right">
+          <Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleDuplicateSection}>
+            {t<string>('builder.common.actions.duplicate')}
+          </Button>
+        </div>
+      ) : (
+        <></>
+      )}
     </>
   );
 };

client/components/build/RightSidebar/RightSidebar.tsx

@@ -1,5 +1,5 @@
 import { Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import { capitalize } from 'lodash';
+import capitalize from 'lodash/capitalize';
 import { useTranslation } from 'next-i18next';
 
 import Avatar from '@/components/shared/Avatar';
@@ -43,7 +43,7 @@ const RightSidebar = () => {
       variant={isDesktop ? 'persistent' : 'temporary'}
     >
       <div className={styles.container}>
-        <nav className="overflow-y-scroll">
+        <nav className="overflow-y-auto">
           <div>
             <Avatar size={40} />
             <Divider />

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

@@ -17,7 +17,9 @@ const CustomCSS = () => {
 
   const dispatch = useAppDispatch();
 
-  const customCSS: CustomCSSType = useAppSelector((state) => get(state.resume.present, 'metadata.css', {}));
+  const customCSS: CustomCSSType = useAppSelector((state) =>
+    get(state.resume.present, 'metadata.css', {} as CustomCSSType)
+  );
 
   const handleChange = (value: string | undefined) => {
     dispatch(setResumeState({ path: 'metadata.css.value', value }));

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

@@ -1,5 +1,6 @@
 import { PictureAsPdf, Schema } from '@mui/icons-material';
 import { List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import dayjs from 'dayjs';
 import get from 'lodash/get';
 import pick from 'lodash/pick';
 import { useTranslation } from 'next-i18next';
@@ -45,10 +46,11 @@ const Export = () => {
 
     const slug = get(resume, 'slug');
     const username = get(resume, 'user.username');
+    const updatedAt = get(resume, 'updatedAt');
 
-    const url = await mutateAsync({ username, slug });
+    const url = await mutateAsync({ username, slug, lastUpdated: dayjs(updatedAt).unix().toString() });
 
-    download(`/api${url}`);
+    download(url);
   };
 
   return (

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

@@ -3,7 +3,7 @@ import { Button } from '@mui/material';
 import { useTranslation } from 'next-i18next';
 
 import Heading from '@/components/shared/Heading';
-import { DONATION_URL, GITHUB_ISSUES_URL, GITHUB_URL } from '@/constants/index';
+import { DOCS_URL, DONATION_URL, GITHUB_ISSUES_URL, GITHUB_URL, REDDIT_URL } from '@/constants/index';
 
 import styles from './Links.module.scss';
 
@@ -49,6 +49,18 @@ const Links = () => {
               {t<string>('builder.rightSidebar.sections.links.github')}
             </Button>
           </a>
+
+          <a href={REDDIT_URL} target="_blank" rel="noreferrer">
+            <Button variant="text" startIcon={<Link />}>
+              {t<string>('builder.rightSidebar.sections.links.reddit')}
+            </Button>
+          </a>
+
+          <a href={DOCS_URL} target="_blank" rel="noreferrer">
+            <Button variant="text" startIcon={<Link />}>
+              {t<string>('builder.rightSidebar.sections.links.docs')}
+            </Button>
+          </a>
         </div>
       </div>
     </>

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

@@ -10,7 +10,7 @@ import {
   Switch,
   TextField,
 } from '@mui/material';
-import { DateConfig, Resume } from '@reactive-resume/schema';
+import { DateConfig, PageConfig, Resume } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import get from 'lodash/get';
 import { useRouter } from 'next/router';
@@ -48,9 +48,10 @@ const Settings = () => {
   const slug: string = useMemo(() => get(resume, 'slug'), [resume]);
   const username: string = useMemo(() => get(resume, 'user.username'), [resume]);
   const dateConfig: DateConfig = useMemo(() => get(resume, 'metadata.date'), [resume]);
+  const pageConfig: PageConfig | undefined = useMemo(() => get(resume, 'metadata.page'), [resume]);
 
   const isDarkMode = useMemo(() => theme === 'dark', [theme]);
-  const exampleString = useMemo(() => `Eg. ${dayjs().utc().format(dateConfig.format)}`, [dateConfig.format]);
+  const exampleDateString = useMemo(() => `Eg. ${dayjs().format(dateConfig.format)}`, [dateConfig.format]);
   const themeString = useMemo(() => (isDarkMode ? 'Matte Black Everything' : 'As bright as your future'), [isDarkMode]);
 
   const { mutateAsync: loadSampleDataMutation } = useMutation<Resume, ServerError, LoadSampleDataParams>(
@@ -60,6 +61,9 @@ const Settings = () => {
 
   const handleSetTheme = (value: boolean) => dispatch(setTheme({ theme: value ? 'dark' : 'light' }));
 
+  const handleChangePageFormat = (value: PageConfig['format'] | null) =>
+    dispatch(setResumeState({ path: 'metadata.page.format', value }));
+
   const handleChangeDateFormat = (value: string | null) =>
     dispatch(setResumeState({ path: 'metadata.date.format', value }));
 
@@ -94,7 +98,7 @@ const Settings = () => {
     <>
       <Heading path="metadata.settings" name={t<string>('builder.rightSidebar.sections.settings.heading')} />
 
-      <List sx={{ padding: 0 }}>
+      <List disablePadding>
         {/* Global Settings */}
         <>
           <ListSubheader disableSticky className="rounded">
@@ -118,13 +122,13 @@ const Settings = () => {
               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>
+            <Autocomplete<string, false, true, false>
               disableClearable
               className="my-2 w-full"
               options={dateFormatOptions}
               value={dateConfig.format}
               onChange={(_, value) => handleChangeDateFormat(value)}
-              renderInput={(params) => <TextField {...params} helperText={exampleString} />}
+              renderInput={(params) => <TextField {...params} helperText={exampleDateString} />}
             />
           </ListItem>
 
@@ -134,7 +138,7 @@ const Settings = () => {
               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>
+            <Autocomplete<Language, false, true, false>
               disableClearable
               className="my-2 w-full"
               options={languages}
@@ -159,6 +163,23 @@ const Settings = () => {
             {t<string>('builder.rightSidebar.sections.settings.page.heading')}
           </ListSubheader>
 
+          <ListItem className="flex-col">
+            <ListItemText
+              className="w-full"
+              primary={t<string>('builder.rightSidebar.sections.settings.page.format.primary')}
+              secondary={t<string>('builder.rightSidebar.sections.settings.page.format.secondary')}
+            />
+            <Autocomplete<PageConfig['format'], false, true, false>
+              disableClearable
+              defaultValue="A4"
+              className="my-2 w-full"
+              options={['A4', 'Letter']}
+              value={pageConfig?.format || 'A4'}
+              renderInput={(params) => <TextField {...params} />}
+              onChange={(_, value) => handleChangePageFormat(value)}
+            />
+          </ListItem>
+
           <ListItem>
             <ListItemText
               primary={t<string>('builder.rightSidebar.sections.settings.page.orientation.primary')}
@@ -191,7 +212,7 @@ const Settings = () => {
             {t<string>('builder.rightSidebar.sections.settings.resume.heading')}
           </ListSubheader>
 
-          <ListItem>
+          <ListItem disableGutters>
             <ListItemButton onClick={handleLoadSampleData}>
               <ListItemIcon>
                 <Anchor />
@@ -203,7 +224,7 @@ const Settings = () => {
             </ListItemButton>
           </ListItem>
 
-          <ListItem>
+          <ListItem disableGutters>
             <ListItemButton onClick={handleResetResume}>
               <ListItemIcon>
                 <DeleteForever />

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

@@ -31,7 +31,14 @@ const Templates = () => {
           <div key={template.id} className={styles.template}>
             <div className={clsx(styles.preview, { [styles.selected]: template.id === currentTemplate })}>
               <ButtonBase onClick={() => handleChange(template)}>
-                <Image src={template.preview} alt={template.name} className="rounded-sm" layout="fill" priority />
+                <Image
+                  fill
+                  priority
+                  alt={template.name}
+                  src={template.preview}
+                  className="rounded-sm"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                />
               </ButtonBase>
             </div>
 

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

@@ -1,4 +1,4 @@
-import { Theme as ThemeType } from '@reactive-resume/schema';
+import { ThemeConfig } from '@reactive-resume/schema';
 import get from 'lodash/get';
 import { useTranslation } from 'next-i18next';
 
@@ -16,7 +16,7 @@ const Theme = () => {
 
   const dispatch = useAppDispatch();
 
-  const { background, text, primary } = useAppSelector<ThemeType>((state) =>
+  const { background, text, primary } = useAppSelector<ThemeConfig>((state) =>
     get(state.resume.present, 'metadata.theme')
   );
 

client/components/dashboard/ResumeCard.tsx

@@ -16,9 +16,7 @@ type Props = {
 const ResumeCard: React.FC<Props> = ({ modal, icon: Icon, title, subtitle }) => {
   const dispatch = useAppDispatch();
 
-  const handleClick = () => {
-    dispatch(setModalState({ modal, state: { open: true } }));
-  };
+  const handleClick = () => dispatch(setModalState({ modal, state: { open: true } }));
 
   return (
     <section className={styles.resume}>

client/components/dashboard/ResumePreview.tsx

@@ -115,9 +115,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
         }}
       >
         <ButtonBase className={styles.preview}>
-          {resume.image ? (
-            <Image src={resume.image} alt={resume.name} objectFit="cover" layout="fill" priority />
-          ) : null}
+          {resume.image ? <Image src={resume.image} alt={resume.name} priority width={400} height={0} /> : null}
         </ButtonBase>
       </Link>
 

client/components/shared/Avatar.tsx

@@ -6,15 +6,17 @@ import { useState } from 'react';
 
 import { logout } from '@/store/auth/authSlice';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
 import getGravatarUrl from '@/utils/getGravatarUrl';
 
 import styles from './Avatar.module.scss';
 
 type Props = {
   size?: number;
+  interactive?: boolean;
 };
 
-const Avatar: React.FC<Props> = ({ size = 64 }) => {
+const Avatar: React.FC<Props> = ({ size = 64, interactive = true }) => {
   const router = useRouter();
 
   const { t } = useTranslation();
@@ -34,6 +36,11 @@ const Avatar: React.FC<Props> = ({ size = 64 }) => {
     setAnchorEl(null);
   };
 
+  const handleOpenProfile = () => {
+    dispatch(setModalState({ modal: 'auth.profile', state: { open: true } }));
+    handleClose();
+  };
+
   const handleLogout = () => {
     dispatch(logout());
     handleClose();
@@ -43,20 +50,20 @@ const Avatar: React.FC<Props> = ({ size = 64 }) => {
 
   return (
     <>
-      <IconButton onClick={handleOpen}>
+      <IconButton onClick={handleOpen} disabled={!interactive}>
         <Image
           width={size}
           height={size}
-          alt={user?.name}
           className={styles.avatar}
           src={getGravatarUrl(email, size)}
+          alt={user?.name ?? 'User Avatar'}
         />
       </IconButton>
 
       <Menu anchorEl={anchorEl} onClose={handleClose} open={Boolean(anchorEl)}>
-        <MenuItem>
+        <MenuItem onClick={handleOpenProfile}>
           <div>
-            <span className="text-xs opacity-50">{t<string>('common.avatar.menu.greeting')}</span>
+            <span className="text-xs opacity-50">{t<string>('common.avatar.menu.greeting')},</span>
             <p>{user?.name}</p>
           </div>
         </MenuItem>

client/components/shared/Heading.tsx

@@ -62,7 +62,7 @@ const Heading: React.FC<Props> = ({
         {editMode ? (
           <TextField size="small" value={heading} className="w-3/4" onChange={handleChange} />
         ) : (
-          <h1>{heading}</h1>
+          <h1>{t<string>(`builder.leftSidebar.${path}.heading`, heading)}</h1>
         )}
       </div>
 

client/components/shared/Logo.tsx

@@ -4,8 +4,8 @@ type Props = {
   size?: 256 | 64 | 48 | 40 | 32;
 };
 
-const Logo: React.FC<Props> = ({ size = 64 }) => {
-  return <Image alt="Reactive Resume" src="/images/logos/logo.svg" className="rounded" width={size} height={size} />;
-};
+const Logo: React.FC<Props> = ({ size = 64 }) => (
+  <Image alt="Reactive Resume" src="/images/logos/logo.svg" className="rounded" width={size} height={size} priority />
+);
 
 export default Logo;

client/components/shared/Markdown.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import ReactMarkdown from 'react-markdown';
+import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
 
 type Props = {
   children?: string;
@@ -12,7 +14,11 @@ const Markdown: React.FC<Props> = ({ className, children }) => {
   if (!children || isEmpty(children)) return null;
 
   return (
-    <ReactMarkdown remarkPlugins={[remarkGfm]} className={clsx('markdown', className)}>
+    <ReactMarkdown
+      className={clsx('markdown', className)}
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
+    >
       {children}
     </ReactMarkdown>
   );

client/components/shared/ResumeInput.tsx

@@ -1,7 +1,6 @@
 import { TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import dayjs from 'dayjs';
-import { isEmpty } from 'lodash';
 import get from 'lodash/get';
 import { useEffect, useState } from 'react';
 
@@ -58,12 +57,13 @@ const ResumeInput: React.FC<Props> = ({ type = 'text', label, path, className, m
       <DatePicker
         openTo="year"
         label={label}
-        value={value}
+        value={dayjs(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).utc().isValid() && onChangeValue(dayjs(date).utc().toISOString());
+        slots={{
+          textField: (params) => <TextField {...params} error={false} className={className} />,
+        }}
+        onChange={(date: dayjs.Dayjs | null) => {
+          date && dayjs(date).isValid() && onChangeValue(dayjs(date).format('YYYY-MM-DD'));
         }}
       />
     );

client/config/languages.ts

@@ -2,23 +2,25 @@ export type Language = {
   code: string;
   name: string;
   localName?: string;
+  isRTL?: boolean;
 };
 
 export const languages: Language[] = [
-  { code: 'ar', name: 'Arabic', localName: 'اَلْعَرَبِيَّةُ' },
+  { code: 'am', name: 'Amharic', localName: 'አማርኛ' },
+  { code: 'ar', name: 'Arabic', localName: 'اَلْعَرَبِيَّةُ', isRTL: true },
   { code: 'bg', name: 'Bulgarian', localName: 'български' },
   { code: 'bn', name: 'Bengali', localName: 'বাংলা' },
   { code: 'ca', name: 'Catalan', localName: 'Valencian' },
   { code: 'cs', name: 'Czech', localName: 'čeština' },
   { code: 'da', name: 'Danish', localName: 'Dansk' },
-  { code: 'de', name: 'German', localName: 'Deutsch' },
+  { code: 'de', name: 'German', localName: 'Deutsch Formell / Sie' },
   { code: 'el', name: 'Greek', localName: 'Ελληνικά' },
   { code: 'en', name: 'English' },
   { code: 'es', name: 'Spanish', localName: 'Español' },
-  { code: 'fa', name: 'Persian', localName: 'فارسی' },
+  { code: 'fa', name: 'Persian', localName: 'فارسی', isRTL: true },
   { code: 'fi', name: 'Finnish', localName: 'Suomi' },
   { code: 'fr', name: 'French', localName: 'Français' },
-  { code: 'he', name: 'Hebrew', localName: 'Ivrit' },
+  { code: 'he', name: 'Hebrew', localName: 'Ivrit', isRTL: true },
   { code: 'hi', name: 'Hindi', localName: 'हिन्दी' },
   { code: 'hu', name: 'Hungarian', localName: 'Magyar' },
   { code: 'id', name: 'Indonesian', localName: 'Bahasa Indonesia' },
@@ -26,13 +28,16 @@ export const languages: Language[] = [
   { code: 'ja', name: 'Japanese', localName: '日本語' },
   { code: 'km', name: 'Khmer', localName: 'ភាសាខ្មែរ' },
   { code: 'kn', name: 'Kannada', localName: 'ಕನ್ನಡ' },
+  { code: 'ko', name: 'Korean', localName: '한국어' },
   { code: 'ml', name: 'Malayalam', localName: 'മലയാളം' },
+  { code: 'mr', name: 'Marathi', localName: 'मराठी' },
   { code: 'ne', name: 'Nepali', localName: 'नेपाली' },
   { code: 'nl', name: 'Dutch', localName: 'Nederlands' },
   { code: 'no', name: 'Norwegian', localName: 'Norsk' },
   { code: 'or', name: 'Odia', localName: 'ଓଡ଼ିଆ' },
   { code: 'pl', name: 'Polish', localName: 'Polski' },
   { code: 'pt', name: 'Portuguese', localName: 'Português' },
+  { code: 'pt-BR', name: 'Brazilian Portuguese', localName: 'Brasil' },
   { code: 'ro', name: 'Romanian', localName: 'limba română' },
   { code: 'ru', name: 'Russian', localName: 'русский' },
   { code: 'sr', name: 'Serbian', localName: 'српски језик' },

client/config/sections.tsx

@@ -23,7 +23,7 @@ import {
   VolunteerActivism,
   Work,
 } from '@mui/icons-material';
-import { Section as SectionRecord } from '@reactive-resume/schema';
+import { Section as SectionRecord, SectionType } from '@reactive-resume/schema';
 import isEmpty from 'lodash/isEmpty';
 
 import Basics from '@/components/build/LeftSidebar/sections/Basics';
@@ -60,59 +60,136 @@ export const left: SidebarSection[] = [
   {
     id: 'work',
     icon: <Work />,
-    component: <Section path="sections.work" titleKey="name" subtitleKey="position" isEditable isHideable />,
+    component: (
+      <Section
+        type={'work'}
+        addMore={true}
+        path="sections.work"
+        titleKey="name"
+        subtitleKey="position"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'education',
     icon: <School />,
-    component: <Section path="sections.education" titleKey="institution" subtitleKey="area" isEditable isHideable />,
+    component: (
+      <Section
+        type={'education'}
+        path="sections.education"
+        titleKey="institution"
+        subtitleKey="area"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'awards',
     icon: <EmojiEvents />,
-    component: <Section path="sections.awards" titleKey="title" subtitleKey="awarder" isEditable isHideable />,
+    component: (
+      <Section type={'awards'} path="sections.awards" titleKey="title" subtitleKey="awarder" isEditable isHideable />
+    ),
   },
   {
     id: 'certifications',
     icon: <CardGiftcard />,
-    component: <Section path="sections.certifications" titleKey="name" subtitleKey="issuer" isEditable isHideable />,
+    component: (
+      <Section
+        type={'certifications'}
+        path="sections.certifications"
+        titleKey="name"
+        subtitleKey="issuer"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'publications',
     icon: <MenuBook />,
-    component: <Section path="sections.publications" titleKey="name" subtitleKey="publisher" isEditable isHideable />,
+    component: (
+      <Section
+        type={'publications'}
+        path="sections.publications"
+        titleKey="name"
+        subtitleKey="publisher"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'skills',
     icon: <Architecture />,
-    component: <Section path="sections.skills" titleKey="name" subtitleKey="level" isEditable isHideable />,
+    component: (
+      <Section type={'skills'} path="sections.skills" titleKey="name" subtitleKey="level" isEditable isHideable />
+    ),
   },
   {
     id: 'languages',
     icon: <Language />,
-    component: <Section path="sections.languages" titleKey="name" subtitleKey="level" isEditable isHideable />,
+    component: (
+      <Section type={'languages'} path="sections.languages" titleKey="name" subtitleKey="level" isEditable isHideable />
+    ),
   },
   {
     id: 'interests',
     icon: <Sailing />,
-    component: <Section path="sections.interests" titleKey="name" subtitleKey="keywords" isEditable isHideable />,
+    component: (
+      <Section
+        type={'interests'}
+        path="sections.interests"
+        titleKey="name"
+        subtitleKey="keywords"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'volunteer',
     icon: <VolunteerActivism />,
     component: (
-      <Section path="sections.volunteer" titleKey="organization" subtitleKey="position" isEditable isHideable />
+      <Section
+        type={'volunteer'}
+        path="sections.volunteer"
+        titleKey="organization"
+        subtitleKey="position"
+        isEditable
+        isHideable
+      />
     ),
   },
   {
     id: 'projects',
     icon: <Coffee />,
-    component: <Section path="sections.projects" titleKey="name" subtitleKey="description" isEditable isHideable />,
+    component: (
+      <Section
+        type={'projects'}
+        path="sections.projects"
+        titleKey="name"
+        subtitleKey="description"
+        isEditable
+        isHideable
+      />
+    ),
   },
   {
     id: 'references',
     icon: <Groups />,
-    component: <Section path="sections.references" titleKey="name" subtitleKey="relationship" isEditable isHideable />,
+    component: (
+      <Section
+        type={'references'}
+        path="sections.references"
+        titleKey="name"
+        subtitleKey="relationship"
+        isEditable
+        isHideable
+      />
+    ),
   },
 ];
 
@@ -164,7 +241,19 @@ export const right: SidebarSection[] = [
   },
 ];
 
-export const getCustomSections = (sections: Record<string, SectionRecord>): Array<Required<SectionRecord>> => {
+export const getSectionsByType = (sections: Record<string, SectionRecord>, type: SectionType): SectionRecord[] => {
+  if (isEmpty(sections)) return [];
+
+  return Object.entries(sections).reduce((acc, [id, section]) => {
+    if (section.type.startsWith(type) && section.isDuplicated) {
+      return [...acc, { ...section, id }];
+    }
+
+    return acc;
+  }, [] as SectionRecord[]);
+};
+
+export const getCustomSections = (sections: Record<string, SectionRecord>): SectionRecord[] => {
   if (isEmpty(sections)) return [];
 
   return Object.entries(sections).reduce((acc, [id, section]) => {
@@ -173,7 +262,7 @@ export const getCustomSections = (sections: Record<string, SectionRecord>): Arra
     }
 
     return acc;
-  }, [] as Array<Required<SectionRecord>>);
+  }, [] as SectionRecord[]);
 };
 
 const sections = [...left, ...right];

client/constants/index.ts

@@ -9,9 +9,15 @@ export const VALID_URL_REGEX = /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}
 export const FILENAME_TIMESTAMP = 'DDMMYYYYHHmmss';
 
 // Links
+export const DOCS_URL = 'https://docs.rxresu.me';
 export const DONATION_URL = 'https://paypal.me/RajaRajanA';
 export const TRANSLATE_URL = 'https://translate.rxresu.me/';
 export const DIGITALOCEAN_URL = 'https://pillai.xyz/digitalocean';
+export const REDDIT_URL = 'https://www.reddit.com/r/reactiveresume/';
 export const GITHUB_URL = 'https://github.com/AmruthPillai/Reactive-Resume';
 export const PRODUCT_HUNT_URL = 'https://www.producthunt.com/posts/reactive-resume-v3';
 export const GITHUB_ISSUES_URL = 'https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose';
+
+// Default Error Message
+export const DEFAULT_ERROR_MESSAGE =
+  'Something went wrong while performing this action, please report this issue on GitHub.';

client/modals/auth/LoginModal.tsx

@@ -4,7 +4,7 @@ import { Login, Visibility, VisibilityOff } from '@mui/icons-material';
 import { Button, IconButton, InputAdornment, TextField } from '@mui/material';
 import { CredentialResponse, GoogleLogin } from '@react-oauth/google';
 import Joi from 'joi';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { Trans, useTranslation } from 'next-i18next';
 import { useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -62,14 +62,7 @@ const LoginModal: React.FC = () => {
   };
 
   const onSubmit = async ({ identifier, password }: FormData) => {
-    await loginMutation(
-      { identifier, password },
-      {
-        onError: (error) => {
-          toast.error(error.message);
-        },
-      }
-    );
+    await loginMutation({ identifier, password });
 
     handleClose();
   };
@@ -86,14 +79,14 @@ const LoginModal: React.FC = () => {
 
   const handleLoginWithGoogle = async (response: CredentialResponse) => {
     if (response.credential) {
-      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleLoginWithGoogleError });
+      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleGoogleLoginError });
 
       handleClose();
     }
   };
 
-  const handleLoginWithGoogleError = () => {
-    toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
+  const handleGoogleLoginError = () => {
+    toast.error("Google doesn't seem to be responding, please try logging in using email/password instead.");
   };
 
   const PasswordVisibility = (): React.ReactElement => {
@@ -117,7 +110,7 @@ const LoginModal: React.FC = () => {
       footerChildren={
         <div className="flex gap-4">
           {!isEmpty(env('GOOGLE_CLIENT_ID')) && (
-            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleLoginWithGoogleError} />
+            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleGoogleLoginError} />
           )}
 
           <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>
@@ -162,15 +155,15 @@ const LoginModal: React.FC = () => {
       {!FLAG_DISABLE_SIGNUPS && (
         <p className="text-xs">
           <Trans t={t} i18nKey="modals.auth.login.register-text">
-            If you don&apos;t have one, you can <a onClick={handleCreateAccount}>create an account</a> here.
+            If you don&apos;t have one, you can <a onClick={handleCreateAccount}>create an account here.</a>
           </Trans>
         </p>
       )}
 
       <p className="text-xs">
         <Trans t={t} i18nKey="modals.auth.login.recover-text">
-          In case you have forgotten your password, you can <a onClick={handleRecoverAccount}>recover your account</a>
-          here.
+          In case you have forgotten your password, you can
+          <a onClick={handleRecoverAccount}>recover your account here.</a>
         </Trans>
       </p>
     </BaseModal>

client/modals/auth/RegisterModal.tsx

@@ -4,7 +4,7 @@ import { HowToReg } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
 import { CredentialResponse, GoogleLogin } from '@react-oauth/google';
 import Joi from 'joi';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { Trans, useTranslation } from 'next-i18next';
 import { Controller, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
@@ -81,14 +81,14 @@ const RegisterModal: React.FC = () => {
 
   const handleLoginWithGoogle = async (response: CredentialResponse) => {
     if (response.credential) {
-      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleLoginWithGoogleError });
+      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleGoogleLoginError });
 
       handleClose();
     }
   };
 
-  const handleLoginWithGoogleError = () => {
-    toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
+  const handleGoogleLoginError = () => {
+    toast("Google doesn't seem to be responding, please try logging in using email/password instead.");
   };
 
   return (
@@ -100,7 +100,7 @@ const RegisterModal: React.FC = () => {
       footerChildren={
         <div className="flex gap-4">
           {!isEmpty(env('GOOGLE_CLIENT_ID')) && (
-            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleLoginWithGoogleError} />
+            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleGoogleLoginError} />
           )}
 
           <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>

client/modals/auth/UserProfileModal.tsx

@@ -0,0 +1,159 @@
+import { joiResolver } from '@hookform/resolvers/joi';
+import { CrisisAlert, ManageAccounts } from '@mui/icons-material';
+import { Button, Divider, TextField } from '@mui/material';
+import Joi from 'joi';
+import { useRouter } from 'next/router';
+import { Trans, useTranslation } from 'next-i18next';
+import { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useMutation } from 'react-query';
+
+import Avatar from '@/components/shared/Avatar';
+import BaseModal from '@/components/shared/BaseModal';
+import { deleteAccount, updateProfile, UpdateProfileParams } from '@/services/auth';
+import { ServerError } from '@/services/axios';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
+
+type FormData = {
+  name: string;
+  email: string;
+};
+
+const defaultState: FormData = {
+  name: '',
+  email: '',
+};
+
+const schema = Joi.object({
+  name: Joi.string().required(),
+  email: Joi.string()
+    .email({ tlds: { allow: false } })
+    .required(),
+});
+
+const UserProfileModal = () => {
+  const router = useRouter();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const [deleteText, setDeleteText] = useState<string>('');
+  const isDeleteTextValid = useMemo(() => deleteText.toLowerCase() === 'delete', [deleteText]);
+
+  const user = useAppSelector((state) => state.auth.user);
+  const { open: isOpen } = useAppSelector((state) => state.modal['auth.profile']);
+
+  const { mutateAsync: deleteAccountMutation } = useMutation<void, ServerError>(deleteAccount);
+  const { mutateAsync: updateProfileMutation } = useMutation<void, ServerError, UpdateProfileParams>(updateProfile);
+
+  const { reset, getFieldState, control, handleSubmit } = useForm<FormData>({
+    defaultValues: defaultState,
+    resolver: joiResolver(schema),
+  });
+
+  useEffect(() => {
+    if (user && !getFieldState('name').isTouched && !getFieldState('email').isTouched) {
+      reset({ name: user.name, email: user.email });
+    }
+  }, [user]);
+
+  const handleClose = () => {
+    dispatch(setModalState({ modal: 'auth.profile', state: { open: false } }));
+  };
+
+  const handleUpdate = handleSubmit(async (data) => {
+    handleClose();
+    await updateProfileMutation({ name: data.name });
+  });
+
+  const handleDelete = async () => {
+    await deleteAccountMutation();
+    handleClose();
+
+    router.push('/');
+  };
+
+  return (
+    <BaseModal isOpen={isOpen} handleClose={handleClose} heading="Your Account" icon={<ManageAccounts />}>
+      <div className="grid gap-4">
+        <form className="grid gap-4 xl:w-2/3">
+          <div className="flex items-center gap-4">
+            <Avatar interactive={false} />
+
+            <div className="grid flex-1 gap-1.5">
+              <Controller
+                name="name"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <TextField
+                    autoFocus
+                    label={t('modals.auth.profile.form.name.label')}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message}
+                    {...field}
+                  />
+                )}
+              />
+
+              <p className="pl-4 text-[10.25px] opacity-50">
+                <Trans t={t} i18nKey="modals.auth.profile.form.avatar.help-text">
+                  You can update your profile picture on{' '}
+                  <a href="https://gravatar.com/" target="_blank" rel="noreferrer">
+                    Gravatar
+                  </a>
+                </Trans>
+              </p>
+            </div>
+          </div>
+
+          <Controller
+            name="email"
+            control={control}
+            render={({ field, fieldState }) => (
+              <TextField
+                disabled
+                label={t('modals.auth.profile.form.email.label')}
+                error={!!fieldState.error}
+                helperText={t('modals.auth.profile.form.email.help-text')}
+                {...field}
+              />
+            )}
+          />
+
+          <div>
+            <Button onClick={handleUpdate}>{t('modals.auth.profile.actions.save')}</Button>
+          </div>
+        </form>
+
+        <div className="my-2">
+          <Divider />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <CrisisAlert />
+          <h5 className="font-medium">{t('modals.auth.profile.delete-account.heading')}</h5>
+        </div>
+
+        <p className="text-xs opacity-75">{t('modals.auth.profile.delete-account.body', { keyword: 'delete' })}</p>
+
+        <div className="flex max-w-xs flex-col gap-4">
+          <TextField
+            value={deleteText}
+            placeholder="Type 'delete' to confirm"
+            onChange={(e) => setDeleteText(e.target.value)}
+          />
+
+          <div>
+            <Button variant="contained" color="error" disabled={!isDeleteTextValid} onClick={handleDelete}>
+              {t('modals.auth.profile.delete-account.actions.delete')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default UserProfileModal;

client/modals/builder/sections/AwardModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { Award, SectionPath } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
@@ -93,7 +93,7 @@ const AwardModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="title"
           control={control}
@@ -128,21 +128,23 @@ const AwardModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -177,6 +179,7 @@ const AwardModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/CertificateModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { Certificate, SectionPath } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
@@ -93,7 +93,7 @@ const CertificateModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="name"
           control={control}
@@ -128,21 +128,23 @@ const CertificateModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -177,6 +179,7 @@ const CertificateModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/CustomModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, Slider, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { Custom } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
@@ -60,13 +60,14 @@ const CustomModal: React.FC = () => {
 
   const dispatch = useAppDispatch();
 
-  const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
   const { open: isOpen, payload } = useAppSelector((state) => state.modal['builder.sections.custom']);
 
-  const path: string = get(payload, 'path', '');
+  const path: string = get(payload, 'path', 'sections.custom');
   const item: FormData = get(payload, 'item', null);
   const isEditMode = useMemo(() => !!item, [item]);
 
+  const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
+
   const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
   const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
 
@@ -110,7 +111,7 @@ const CustomModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="title"
           control={control}
@@ -144,21 +145,23 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -168,21 +171,23 @@ const CustomModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || 'Leave this field blank, if still present'}
-                />
-              )}
             />
           )}
         />
@@ -260,9 +265,9 @@ const CustomModal: React.FC = () => {
               multiline
               minRows={3}
               maxRows={6}
-              label={t<string>('builder.common.form.summary.label')}
               className="col-span-2"
               error={!!fieldState.error}
+              label={t<string>('builder.common.form.summary.label')}
               helperText={fieldState.error?.message || <MarkdownSupported />}
               {...field}
             />
@@ -282,6 +287,7 @@ const CustomModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/EducationModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { Education, SectionPath } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
@@ -106,7 +106,7 @@ const EducationModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="institution"
           control={control}
@@ -167,21 +167,23 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -191,21 +193,23 @@ const EducationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
-                />
-              )}
             />
           )}
         />
@@ -255,6 +259,7 @@ const EducationModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/InterestModal.tsx

@@ -84,7 +84,7 @@ const InterestModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="name"
           control={control}
@@ -114,6 +114,7 @@ const InterestModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/LanguageModal.tsx

@@ -85,7 +85,7 @@ const LanguageModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="name"
           control={control}
@@ -150,6 +150,7 @@ const LanguageModal: React.FC = () => {
             </div>
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/ProfileModal.tsx

@@ -89,7 +89,7 @@ const ProfileModal: React.FC = () => {
       handleClose={handleClose}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="network"
           control={control}
@@ -136,6 +136,7 @@ const ProfileModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/ProjectModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { Project, SectionPath } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
@@ -102,7 +102,7 @@ const ProjectModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="name"
           control={control}
@@ -137,21 +137,23 @@ const ProjectModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -161,21 +163,23 @@ const ProjectModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || 'Leave this field blank, if still present'}
-                />
-              )}
             />
           )}
         />
@@ -225,6 +229,7 @@ const ProjectModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/PublicationModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { Publication, SectionPath } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
@@ -93,7 +93,7 @@ const PublicationModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="name"
           control={control}
@@ -128,21 +128,23 @@ const PublicationModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -177,6 +179,7 @@ const PublicationModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/ReferenceModal.tsx

@@ -90,7 +90,7 @@ const ReferenceModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="name"
           control={control}
@@ -162,6 +162,7 @@ const ReferenceModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/SkillModal.tsx

@@ -88,7 +88,7 @@ const SkillModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="name"
           control={control}
@@ -166,6 +166,8 @@ const SkillModal: React.FC = () => {
             />
           )}
         />
+
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/VolunteerModal.tsx

@@ -1,7 +1,7 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { SectionPath, Volunteer } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
@@ -99,7 +99,7 @@ const VolunteerModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="organization"
           control={control}
@@ -134,21 +134,23 @@ const VolunteerModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -158,21 +160,23 @@ const VolunteerModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || 'Leave this field blank, if still present'}
-                />
-              )}
             />
           )}
         />
@@ -208,6 +212,7 @@ const VolunteerModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/builder/sections/WorkModal.tsx

@@ -1,8 +1,8 @@
 import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers';
-import { SectionPath, WorkExperience } from '@reactive-resume/schema';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { WorkExperience } from '@reactive-resume/schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -20,8 +20,6 @@ import { addItem, editItem } from '@/store/resume/resumeSlice';
 
 type FormData = WorkExperience;
 
-const path: SectionPath = 'sections.work';
-
 const defaultState: FormData = {
   name: '',
   position: '',
@@ -50,14 +48,23 @@ const WorkModal: React.FC = () => {
 
   const dispatch = useAppDispatch();
 
-  const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
-  const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]);
-
+  const { open: isOpen, payload } = useAppSelector((state) => state.modal['builder.sections.work']);
+  const path: string = get(payload, 'path', 'sections.work');
   const item: FormData = get(payload, 'item', null);
+
+  const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`));
+
   const isEditMode = useMemo(() => !!item, [item]);
 
-  const addText = useMemo(() => t<string>('builder.common.actions.add', { token: heading }), [t, heading]);
-  const editText = useMemo(() => t<string>('builder.common.actions.edit', { token: heading }), [t, heading]);
+  const addText = useMemo(
+    () => t<string>('builder.common.actions.add', { token: t<string>(`builder.leftSidebar.${path}.heading`, heading) }),
+    [t, heading]
+  );
+  const editText = useMemo(
+    () =>
+      t<string>('builder.common.actions.edit', { token: t<string>(`builder.leftSidebar.${path}.heading`, heading) }),
+    [t, heading]
+  );
 
   const { reset, control, handleSubmit } = useForm<FormData>({
     defaultValues: defaultState,
@@ -77,7 +84,7 @@ const WorkModal: React.FC = () => {
   const handleClose = () => {
     dispatch(
       setModalState({
-        modal: `builder.${path}`,
+        modal: 'builder.sections.work',
         state: { open: false },
       })
     );
@@ -99,7 +106,7 @@ const WorkModal: React.FC = () => {
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
-      <form className="my-2 grid grid-cols-2 gap-4">
+      <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Controller
           name="name"
           control={control}
@@ -134,21 +141,23 @@ const WorkModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.start-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || params.inputProps?.placeholder}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || params.inputProps?.placeholder}
-                />
-              )}
             />
           )}
         />
@@ -158,21 +167,23 @@ const WorkModal: React.FC = () => {
           control={control}
           render={({ field, fieldState }) => (
             <DatePicker
-              {...field}
               openTo="year"
+              inputRef={field.ref}
               label={t<string>('builder.common.form.end-date.label')}
+              value={dayjs(field.value)}
               views={['year', 'month', 'day']}
-              onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
-                isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).utc().isValid() && field.onChange(dayjs(date).utc().toISOString());
+              slots={{
+                textField: (params) => (
+                  <TextField
+                    {...params}
+                    error={!!fieldState.error}
+                    helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
+                  />
+                ),
+              }}
+              onChange={(date: dayjs.Dayjs | null) => {
+                date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD'));
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={!!fieldState.error}
-                  helperText={fieldState.error?.message || t<string>('builder.common.form.end-date.help-text')}
-                />
-              )}
             />
           )}
         />
@@ -208,6 +219,7 @@ const WorkModal: React.FC = () => {
             />
           )}
         />
+        <input type="submit" style={{ display: 'none' }} />
       </form>
     </BaseModal>
   );

client/modals/dashboard/CreateResumeModal.tsx

@@ -6,7 +6,6 @@ import Joi from 'joi';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
 import { useMutation } from 'react-query';
 
 import BaseModal from '@/components/shared/BaseModal';
@@ -66,15 +65,10 @@ const CreateResumeModal: React.FC = () => {
   }, [name, setValue]);
 
   const onSubmit = async ({ name, slug, isPublic }: FormData) => {
-    try {
-      await mutateAsync({ name, slug, public: isPublic });
+    await mutateAsync({ name, slug, public: isPublic });
+    await queryClient.invalidateQueries(RESUMES_QUERY);
 
-      await queryClient.invalidateQueries(RESUMES_QUERY);
-
-      handleClose();
-    } catch (error: any) {
-      toast.error(error.message);
-    }
+    handleClose();
   };
 
   const handleClose = () => {

client/modals/dashboard/ImportExternalModal.tsx

@@ -68,8 +68,8 @@ const ImportExternalModal: React.FC = () => {
       }
 
       await mutateAsync({ integration, file });
-
       queryClient.invalidateQueries(RESUMES_QUERY);
+
       handleClose();
     }
   };

client/modals/index.tsx

@@ -8,6 +8,7 @@ import ForgotPasswordModal from './auth/ForgotPasswordModal';
 import LoginModal from './auth/LoginModal';
 import RegisterModal from './auth/RegisterModal';
 import ResetPasswordModal from './auth/ResetPasswordModal';
+import UserProfileModal from './auth/UserProfileModal';
 import AwardModal from './builder/sections/AwardModal';
 import CertificateModal from './builder/sections/CertificateModal';
 import CustomModal from './builder/sections/CustomModal';
@@ -49,6 +50,7 @@ const ModalWrapper: React.FC = () => {
       <RegisterModal />
       <ForgotPasswordModal />
       <ResetPasswordModal />
+      <UserProfileModal />
 
       {/* Dashboard */}
       <CreateResumeModal />

client/next-i18next.config.js

@@ -4,6 +4,7 @@ const i18nConfig = {
   i18n: {
     defaultLocale: 'en',
     locales: [
+      'am',
       'ar',
       'bg',
       'bn',
@@ -25,13 +26,16 @@ const i18nConfig = {
       'ja',
       'km',
       'kn',
+      'ko',
       'ml',
+      'mr',
       'ne',
       'nl',
       'no',
       'or',
       'pl',
       'pt',
+      'pt-BR',
       'ro',
       'ru',
       'sr',

client/next.config.js

@@ -15,19 +15,6 @@ const nextConfig = {
     domains: ['cdn.rxresu.me', 'www.gravatar.com'],
   },
 
-  async rewrites() {
-    if (process.env.NODE_ENV === 'development') {
-      return [
-        {
-          source: '/api/:path*',
-          destination: 'http://localhost:3100/:path*',
-        },
-      ];
-    }
-
-    return [];
-  },
-
   // Hack to make Tailwind darkMode 'class' strategy with CSS Modules
   // Ref: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-968368156
   webpack: (config) => {

client/package.json

@@ -9,75 +9,74 @@
   },
   "dependencies": {
     "@beam-australia/react-env": "^3.1.1",
-    "@date-io/dayjs": "^2.15.0",
-    "@emotion/css": "^11.10.0",
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
-    "@hello-pangea/dnd": "^16.0.0",
-    "@hookform/resolvers": "2.9.7",
-    "@monaco-editor/react": "^4.4.5",
-    "@mui/icons-material": "^5.10.2",
-    "@mui/lab": "^5.0.0-alpha.96",
-    "@mui/material": "^5.10.2",
-    "@mui/system": "^5.10.2",
-    "@mui/x-date-pickers": "5.0.0-beta.7",
-    "@next/env": "^12.2.5",
-    "@react-oauth/google": "^0.2.6",
-    "@reduxjs/toolkit": "^1.8.5",
-    "axios": "^0.27.2",
+    "@emotion/css": "^11.10.6",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@hello-pangea/dnd": "^16.2.0",
+    "@hookform/resolvers": "3.0.1",
+    "@monaco-editor/react": "^4.4.6",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.125",
+    "@mui/material": "^5.11.16",
+    "@mui/system": "^5.11.16",
+    "@mui/x-date-pickers": "6.0.4",
+    "@react-oauth/google": "^0.9.0",
+    "@reduxjs/toolkit": "^1.9.3",
+    "axios": "^1.3.5",
     "clsx": "^1.2.1",
-    "dayjs": "^1.11.5",
+    "dayjs": "^1.11.7",
     "downloadjs": "^1.4.7",
-    "joi": "^17.6.0",
+    "joi": "^17.9.1",
     "lodash": "^4.17.21",
     "md5-hex": "^4.0.0",
-    "monaco-editor": "^0.34.0",
-    "nanoid": "^3.3.4",
-    "next": "12.2.5",
-    "next-i18next": "^12.0.0",
+    "monaco-editor": "^0.37.0",
+    "nanoid": "3.3.4",
+    "next": "13.2.4",
+    "next-i18next": "^13.2.2",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.34.2",
-    "react-hot-toast": "2.3.0",
-    "react-hotkeys-hook": "^3.4.7",
-    "react-icons": "^4.4.0",
-    "react-markdown": "^8.0.3",
-    "react-query": "^3.39.2",
-    "react-redux": "^8.0.2",
-    "react-zoom-pan-pinch": "^2.1.3",
-    "redux": "^4.2.0",
+    "react-hook-form": "^7.43.9",
+    "react-hot-toast": "2.4.0",
+    "react-icons": "^4.8.0",
+    "react-markdown": "^8.0.6",
+    "react-query": "^3.39.3",
+    "react-redux": "^8.0.5",
+    "react-zoom-pan-pinch": "^3.0.6",
+    "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.2.1",
+    "redux-saga": "^1.2.3",
     "redux-undo": "^1.0.1",
+    "rehype-katex": "^6.0.2",
     "remark-gfm": "^3.0.1",
-    "sharp": "^0.30.7",
-    "uuid": "^8.3.2",
+    "remark-math": "^5.1.1",
+    "sharp": "^0.32.0",
+    "uuid": "^9.0.0",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
+    "@babel/core": "^7.21.4",
     "@reactive-resume/schema": "workspace:*",
-    "@tailwindcss/typography": "^0.5.4",
+    "@tailwindcss/typography": "^0.5.9",
     "@types/downloadjs": "^1.4.3",
-    "@types/lodash": "^4.14.184",
-    "@types/node": "^18.7.13",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-redux": "^7.1.24",
-    "@types/tailwindcss": "^3.0.11",
-    "@types/uuid": "^8.3.4",
-    "@types/webfontloader": "^1.6.34",
-    "autoprefixer": "^10.4.8",
-    "csstype": "^3.1.0",
-    "eslint-config-next": "^12.2.5",
-    "eslint-plugin-tailwindcss": "^3.6.0",
-    "next-sitemap": "^3.1.21",
-    "postcss": "^8.4.16",
-    "sass": "^1.54.5",
-    "tailwindcss": "^3.1.8",
-    "typescript": "^4.8.2"
+    "@types/lodash": "^4.14.192",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-redux": "^7.1.25",
+    "@types/uuid": "^9.0.1",
+    "@types/webfontloader": "^1.6.35",
+    "autoprefixer": "^10.4.14",
+    "csstype": "^3.1.2",
+    "eslint-config-next": "^13.2.4",
+    "eslint-plugin-tailwindcss": "^3.11.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "next-sitemap": "^4.0.6",
+    "postcss": "^8.4.21",
+    "sass": "^1.60.0",
+    "tailwindcss": "^3.3.1",
+    "typescript": "^5.0.3"
   }
 }

client/pages/[username]/[slug]/index.tsx

@@ -2,6 +2,7 @@ import { Download, Downloading } from '@mui/icons-material';
 import { ButtonBase } from '@mui/material';
 import { Resume } from '@reactive-resume/schema';
 import clsx from 'clsx';
+import dayjs from 'dayjs';
 import download from 'downloadjs';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -14,6 +15,7 @@ import toast from 'react-hot-toast';
 import { useMutation, useQuery } from 'react-query';
 
 import Page from '@/components/build/Center/Page';
+import { DEFAULT_ERROR_MESSAGE } from '@/constants/index';
 import { ServerError } from '@/services/axios';
 import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
 import { fetchResumeByIdentifier } from '@/services/resume';
@@ -60,10 +62,12 @@ const Preview: NextPage<Props> = ({ username, slug, resume: initialData }) => {
   }, [dispatch, initialData]);
 
   useEffect(() => {
-    if (!isEmpty(resume) && router.locale !== resume.metadata.locale) {
+    const locale = get(resume, 'metadata.locale', 'en');
+
+    if (!isEmpty(resume) && router.locale !== locale) {
       const { pathname, asPath, query } = router;
 
-      router.push({ pathname, query }, asPath, { locale: resume.metadata.locale });
+      router.push({ pathname, query }, asPath, { locale });
     }
   }, [resume, router]);
 
@@ -96,11 +100,13 @@ const Preview: NextPage<Props> = ({ username, slug, resume: initialData }) => {
 
   const handleDownload = async () => {
     try {
-      const url = await mutateAsync({ username, slug });
+      const updatedAt = get(resume, 'updatedAt');
 
-      download(`/api${url}`);
+      const url = await mutateAsync({ username, slug, lastUpdated: dayjs(updatedAt).unix().toString() });
+
+      download(url);
     } catch {
-      toast.error('Something went wrong, please try again later.');
+      toast.error(DEFAULT_ERROR_MESSAGE);
     }
   };
 

client/pages/[username]/[slug]/printer.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { GetServerSideProps, NextPage } from 'next';
+import { useRouter } from 'next/router';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useEffect } from 'react';
 
@@ -26,7 +27,7 @@ type Props = {
 
 export const getServerSideProps: GetServerSideProps<Props | Promise<Props>, QueryParams> = async ({
   query,
-  locale,
+  locale = 'en',
 }) => {
   const { username, slug, secretKey } = query as QueryParams;
 
@@ -34,7 +35,7 @@ export const getServerSideProps: GetServerSideProps<Props | Promise<Props>, Quer
     if (isEmpty(secretKey)) throw new Error('There is no secret key!');
 
     const resume = await fetchResumeByIdentifier({ username, slug, options: { secretKey } });
-    const displayLocale = resume.metadata.locale || locale || 'en';
+    const displayLocale = get(resume, 'metadata.locale') ?? locale;
 
     return {
       props: {
@@ -54,10 +55,20 @@ export const getServerSideProps: GetServerSideProps<Props | Promise<Props>, Quer
 };
 
 const Printer: NextPage<Props> = ({ resume: initialData, locale }) => {
+  const router = useRouter();
+
   const dispatch = useAppDispatch();
 
   const resume = useAppSelector((state) => state.resume.present);
 
+  useEffect(() => {
+    if (router.locale !== locale) {
+      const { pathname, asPath, query } = router;
+
+      router.push({ pathname, query }, asPath, { locale });
+    }
+  }, [router, locale]);
+
   useEffect(() => {
     if (initialData) dispatch(setResume(initialData));
   }, [dispatch, initialData]);

client/pages/_app.tsx

@@ -1,8 +1,8 @@
 import '@/styles/globals.scss';
 
 import env from '@beam-australia/react-env';
-import DayjsAdapter from '@date-io/dayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
@@ -18,46 +18,44 @@ import queryClient from '@/services/react-query';
 import store, { persistor } from '@/store/index';
 import WrapperRegistry from '@/wrappers/index';
 
-const App: React.FC<AppProps> = ({ Component, pageProps }) => {
-  return (
-    <>
-      <Head>
-        <title>Reactive Resume</title>
+const App = ({ Component, pageProps }: AppProps): JSX.Element => (
+  <>
+    <Head>
+      <title>Reactive Resume | A free and open source resume builder</title>
 
-        <meta
-          name="description"
-          content="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."
-        />
-        <link rel="icon" href="/favicon.ico" />
-        <meta name="viewport" content="initial-scale=1, width=device-width" />
-      </Head>
+      <meta
+        name="description"
+        content="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."
+      />
+      <link rel="icon" href="/favicon.ico" />
+      <meta name="viewport" content="initial-scale=1, width=device-width" />
+    </Head>
 
-      <ReduxProvider store={store}>
-        <LocalizationProvider dateAdapter={DayjsAdapter}>
-          <PersistGate loading={null} persistor={persistor}>
-            <GoogleOAuthProvider clientId={env('GOOGLE_CLIENT_ID')}>
-              <QueryClientProvider client={queryClient}>
-                <WrapperRegistry>
-                  <Loading />
+    <ReduxProvider store={store}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <PersistGate loading={null} persistor={persistor}>
+          <GoogleOAuthProvider clientId={env('GOOGLE_CLIENT_ID')}>
+            <QueryClientProvider client={queryClient}>
+              <WrapperRegistry>
+                <Loading />
 
-                  <Component {...pageProps} />
+                <Component {...pageProps} />
 
-                  <ModalWrapper />
-                  <Toaster
-                    position="bottom-right"
-                    toastOptions={{
-                      duration: 4000,
-                      className: 'toast',
-                    }}
-                  />
-                </WrapperRegistry>
-              </QueryClientProvider>
-            </GoogleOAuthProvider>
-          </PersistGate>
-        </LocalizationProvider>
-      </ReduxProvider>
-    </>
-  );
-};
+                <ModalWrapper />
+                <Toaster
+                  position="bottom-right"
+                  toastOptions={{
+                    duration: 4000,
+                    className: 'toast',
+                  }}
+                />
+              </WrapperRegistry>
+            </QueryClientProvider>
+          </GoogleOAuthProvider>
+        </PersistGate>
+      </LocalizationProvider>
+    </ReduxProvider>
+  </>
+);
 
 export default appWithTranslation(App);

client/pages/_document.tsx

@@ -1,15 +1,69 @@
 import { NextPage } from 'next';
 import NextDocument, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
+import Script from 'next/script';
 
 const Document: NextPage = () => (
-  <Html>
-    <Head />
+  <Html lang="en">
+    <Head>
+      <Script
+        id="google-tag-manager"
+        type="text/javascript"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M9DK4S4');`,
+        }}
+      />
+
+      <Script
+        id="logo-schema"
+        type="application/ld+json"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `{
+            "@context": "https://schema.org",
+            "@type": "Organization",
+            "url": "https://rxresu.me",
+            "logo": "https://rxresu.me/images/logos/logo.svg"
+          }`,
+        }}
+      />
+
+      <Script
+        id="software-application-schema"
+        type="application/ld+json"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `{
+            "@context": "https://schema.org",
+            "@type": "SoftwareApplication",
+            "name": "Reactive Resume",
+            "operatingSystem": "Windows, macOS, Linux, Android, iOS",
+            "applicationCategory": "BrowserApplication",
+            "aggregateRating": {
+              "@type": "AggregateRating",
+              "ratingValue": "5",
+              "ratingCount": "11394"
+            },
+            "offers": {
+              "@type": "Offer",
+              "price": "0"
+            }
+          }`,
+        }}
+      />
+    </Head>
 
     <body>
       <Main />
       <NextScript />
 
       <script src="/__ENV.js" />
+
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M9DK4S4" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+        }}
+      />
     </body>
   </Html>
 );

client/pages/dashboard.tsx

@@ -17,13 +17,11 @@ import { fetchResumes } from '@/services/resume';
 import { useAppDispatch } from '@/store/hooks';
 import styles from '@/styles/pages/Dashboard.module.scss';
 
-export const getStaticProps: GetStaticProps = async ({ locale = 'en' }) => {
-  return {
-    props: {
-      ...(await serverSideTranslations(locale, ['common', 'modals', 'dashboard'])),
-    },
-  };
-};
+export const getStaticProps: GetStaticProps = async ({ locale = 'en' }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ['common', 'modals', 'dashboard'])),
+  },
+});
 
 const Dashboard: NextPage = () => {
   const { t } = useTranslation();
@@ -48,9 +46,7 @@ const Dashboard: NextPage = () => {
 
       <header>
         <Link href="/">
-          <a>
-            <Logo size={40} />
-          </a>
+          <Logo size={40} />
         </Link>
 
         <Avatar size={40} />
@@ -58,15 +54,15 @@ const Dashboard: NextPage = () => {
 
       <main className={styles.resumes}>
         <ResumeCard
-          modal="dashboard.create-resume"
           icon={Add}
+          modal="dashboard.create-resume"
           title={t<string>('dashboard.create-resume.title')}
           subtitle={t<string>('dashboard.create-resume.subtitle')}
         />
 
         <ResumeCard
-          modal="dashboard.import-external"
           icon={ImportExport}
+          modal="dashboard.import-external"
           title={t<string>('dashboard.import-external.title')}
           subtitle={t<string>('dashboard.import-external.subtitle')}
         />

client/pages/index.tsx

@@ -20,15 +20,13 @@ import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { setModalState } from '@/store/modal/modalSlice';
 import styles from '@/styles/pages/Home.module.scss';
 
-import { DIGITALOCEAN_URL, DONATION_URL, GITHUB_URL } from '../constants';
+import { DIGITALOCEAN_URL, DOCS_URL, DONATION_URL, GITHUB_URL, REDDIT_URL } from '../constants';
 
-export const getStaticProps: GetStaticProps = async ({ locale = 'en' }) => {
-  return {
-    props: {
-      ...(await serverSideTranslations(locale, ['common', 'modals', 'landing'])),
-    },
-  };
-};
+export const getStaticProps: GetStaticProps = async ({ locale = 'en' }) => ({
+  props: {
+    ...(await serverSideTranslations(locale, ['common', 'modals', 'landing'])),
+  },
+});
 
 const Home: NextPage = () => {
   const { t } = useTranslation();
@@ -39,11 +37,8 @@ const Home: NextPage = () => {
   const isLoggedIn = useAppSelector((state) => state.auth.isLoggedIn);
 
   const handleLogin = () => dispatch(setModalState({ modal: 'auth.login', state: { open: true } }));
-
   const handleRegister = () => dispatch(setModalState({ modal: 'auth.register', state: { open: true } }));
-
   const handleToggle = () => dispatch(setTheme({ theme: theme === 'light' ? 'dark' : 'light' }));
-
   const handleLogout = () => dispatch(logout());
 
   return (
@@ -117,7 +112,13 @@ const Home: NextPage = () => {
         <div className={styles.screenshots}>
           {screenshots.map(({ src, alt }) => (
             <a key={src} href={src} className={styles.image} target="_blank" rel="noreferrer">
-              <Image src={src} alt={alt} layout="fill" objectFit="cover" />
+              <Image
+                fill
+                src={src}
+                alt={alt}
+                className="object-cover"
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              />
             </a>
           ))}
         </div>
@@ -170,6 +171,18 @@ const Home: NextPage = () => {
             </Button>
           </a>
 
+          <a href={DOCS_URL} target="_blank" rel="noreferrer">
+            <Button variant="text" startIcon={<LinkIcon />}>
+              {t<string>('landing.links.links.docs')}
+            </Button>
+          </a>
+
+          <a href={REDDIT_URL} target="_blank" rel="noreferrer">
+            <Button variant="text" startIcon={<LinkIcon />}>
+              {t<string>('landing.links.links.reddit')}
+            </Button>
+          </a>
+
           <a href={DONATION_URL} target="_blank" rel="noreferrer">
             <Button variant="text" startIcon={<LinkIcon />}>
               {t<string>('landing.links.links.donate')}
@@ -180,7 +193,13 @@ const Home: NextPage = () => {
 
       <section className={styles.section}>
         <a href={DIGITALOCEAN_URL} target="_blank" rel="noreferrer">
-          <Image src="/images/sponsors/digitalocean.svg" alt="Powered By DigitalOcean" width={200} height={40} />
+          <Image
+            src={`/images/sponsors/${theme == 'dark' ? 'digitalocean' : 'digitaloceanLight'}.svg`}
+            style={{ width: 200, height: 40, objectFit: 'contain' }}
+            alt="Powered By DigitalOcean"
+            width={200}
+            height={40}
+          />
         </a>
       </section>
 

client/pages/r/[shortId].tsx

@@ -2,6 +2,7 @@ import { Download, Downloading } from '@mui/icons-material';
 import { ButtonBase } from '@mui/material';
 import { Resume } from '@reactive-resume/schema';
 import clsx from 'clsx';
+import dayjs from 'dayjs';
 import download from 'downloadjs';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -10,7 +11,6 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useEffect } from 'react';
-import toast from 'react-hot-toast';
 import { useMutation, useQuery } from 'react-query';
 
 import Page from '@/components/build/Center/Page';
@@ -68,13 +68,13 @@ const Preview: NextPage<Props> = ({ shortId }) => {
   const layout: string[][][] = get(resume, 'metadata.layout', []);
 
   const handleDownload = async () => {
-    try {
-      const url = await mutateAsync({ username: resume.user.username, slug: resume.slug });
+    const url = await mutateAsync({
+      username: resume.user.username,
+      slug: resume.slug,
+      lastUpdated: dayjs(resume.updatedAt).unix().toString(),
+    });
 
-      download(`/api${url}`);
-    } catch {
-      toast.error('Something went wrong, please try again later.');
-    }
+    download(url);
   };
 
   return (

client/public/images/sponsors/digitaloceanLight.svg

@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 604 129" style="enable-background:new 0 0 604 129;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0069ff;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0069ff;}
+</style>
+<g>
+	<g>
+		<g>
+			<path class="st0" d="M174.3,3c4.9,0,8.7,2.9,8.7,8.6c0,5.6-3.8,8.5-8.7,8.5h-7.6v11.1h-3.5V3H174.3z M166.7,17.1h7.2
+				c3,0,5.6-1.8,5.6-5.5c0-3.8-2.5-5.5-5.6-5.5h-7.2V17.1z"/>
+			<path class="st0" d="M208.8,21.7c0,6.1-4.3,10-9.9,10c-5.6,0-9.9-3.9-9.9-10c0-6.1,4.3-10,9.9-10
+				C204.5,11.7,208.8,15.6,208.8,21.7z M192.3,21.7c0,4.5,2.9,7.2,6.6,7.2c3.7,0,6.6-2.7,6.6-7.2c0-4.5-2.9-7.1-6.6-7.1
+				C195.2,14.5,192.3,17.2,192.3,21.7z"/>
+			<path class="st0" d="M234.4,31.3l-5.2-13.8L224,31.3h-2.6L214.1,12h3.6l5.2,14l5.2-14h2.3l5.3,14l5.2-14h3.5L237,31.3H234.4z"/>
+			<path class="st0" d="M253,22.9c0.2,3.7,2.6,5.9,6,5.9c2.8,0,4.8-1.3,5.4-3.4l3.2,0.2c-0.8,3.5-4.1,6.1-8.6,6.1
+				c-5.5,0-9.6-3.7-9.6-10c0-6.3,4-10,9.5-10c5.5,0,8.8,3.7,8.8,9.4v1.8H253z M253,20.3h11.6c-0.1-3.4-2-5.7-5.6-5.7
+				C255.6,14.5,253.2,16.5,253,20.3z"/>
+			<path class="st0" d="M285.4,14.9c-3.4,0-5.6,2.3-5.6,5.3v11.1h-3.2V12h3.2v2.9c0.7-1.6,2.5-3.1,5.7-3.1V14.9z"/>
+			<path class="st0" d="M294.7,22.9c0.2,3.7,2.6,5.9,6,5.9c2.8,0,4.8-1.3,5.4-3.4l3.2,0.2c-0.8,3.5-4.1,6.1-8.6,6.1
+				c-5.5,0-9.6-3.7-9.6-10c0-6.3,4-10,9.5-10c5.5,0,8.8,3.7,8.8,9.4v1.8H294.7z M294.7,20.3h11.6c-0.1-3.4-2-5.7-5.6-5.7
+				C297.4,14.5,294.9,16.5,294.7,20.3z"/>
+			<path class="st0" d="M333.1,31.3v-3.1c-1.1,2-3.6,3.5-6.8,3.5c-5.3,0-9.3-3.8-9.3-10c0-6.2,4-10,9.3-10c3.2,0,5.6,1.4,6.6,3.2V2
+				h3.2v29.4H333.1z M320.3,21.7c0,4.6,2.8,7.2,6.5,7.2c3.6,0,6.2-2.2,6.2-6.6v-1.1c0-4.3-2.6-6.6-6.2-6.6
+				C323.1,14.5,320.3,17.1,320.3,21.7z"/>
+			<path class="st0" d="M361.8,14.9c1.1-1.9,3.4-3.2,6.7-3.2c5.3,0,9.3,3.8,9.3,10c0,6.2-4,10-9.3,10c-3.3,0-5.7-1.5-6.8-3.5v3.1
+				h-3.1V2h3.2V14.9z M361.9,21.1v1.1c0,4.4,2.6,6.6,6.2,6.6c3.7,0,6.5-2.5,6.5-7.2c0-4.6-2.8-7.1-6.5-7.1
+				C364.5,14.5,361.9,16.8,361.9,21.1z"/>
+			<path class="st0" d="M386.3,40.9l4.6-10.7L383.2,12h3.6l5.8,14.5l5.8-14.5h3.6l-12.2,28.9H386.3z"/>
+		</g>
+	</g>
+	<g id="XMLID_2369_">
+		<g>
+			<g id="XMLID_281_">
+				<g id="XMLID_282_">
+					<g>
+						<g id="XMLID_283_">
+							<g id="XMLID_287_">
+								<path id="XMLID_288_" class="st0" d="M64.4,127l0-24.2c25.6,0,45.5-25.4,35.7-52.3c-3.6-10-11.6-17.9-21.6-21.6
+									c-27-9.8-52.3,10-52.3,35.7c0,0,0,0,0,0L2,64.7C2,23.8,41.5-8,84.3,5.4c18.7,5.8,33.6,20.7,39.4,39.4
+									C137,87.6,105.2,127,64.4,127z"/>
+							</g>
+							<polygon id="XMLID_286_" class="st1" points="64.4,102.9 40.4,102.9 40.4,78.9 40.4,78.9 64.4,78.9 64.4,78.9 							"/>
+							<polygon id="XMLID_285_" class="st1" points="40.3,121.5 21.8,121.5 21.8,121.5 21.8,102.9 40.4,102.9 40.4,121.5 							"/>
+							<path id="XMLID_284_" class="st1" d="M21.9,102.9H6.3c0,0,0,0,0,0V87.4c0,0,0,0,0,0h15.5c0,0,0,0,0,0V102.9z"/>
+						</g>
+					</g>
+				</g>
+			</g>
+			<g id="XMLID_254_">
+				<path id="XMLID_278_" class="st0" d="M200.9,52.4c-5.5-3.8-12.4-5.8-20.5-5.8h-17.5v55.5h17.5c8,0,14.9-2.1,20.5-6.1
+					c3-2.1,5.4-5.1,7.1-8.9c1.7-3.7,2.5-8.2,2.5-13.1c0-4.9-0.8-9.3-2.5-13C206.3,57.4,203.9,54.4,200.9,52.4z M173.1,56h5.5
+					c6.1,0,11.1,1.2,15,3.6c4.2,2.6,6.4,7.4,6.4,14.4c0,7.2-2.2,12.3-6.4,15.1h0c-3.7,2.4-8.7,3.6-14.9,3.6h-5.6V56z"/>
+				<path id="XMLID_277_" class="st0" d="M222.6,45.9c-1.7,0-3.1,0.6-4.3,1.8c-1.2,1.1-1.8,2.6-1.8,4.2c0,1.7,0.6,3.1,1.8,4.3
+					c1.2,1.2,2.6,1.8,4.3,1.8c1.7,0,3.1-0.6,4.3-1.8c1.2-1.2,1.8-2.6,1.8-4.3c0-1.7-0.6-3.1-1.8-4.2
+					C225.7,46.5,224.3,45.9,222.6,45.9z"/>
+				<rect id="XMLID_276_" x="217.6" y="63" class="st0" width="9.8" height="39.1"/>
+				<path id="XMLID_273_" class="st0" d="M263.2,66.3c-3-2.6-6.3-4.2-9.9-4.2c-5.4,0-9.9,1.9-13.4,5.6c-3.5,3.7-5.3,8.4-5.3,14.1
+					c0,5.5,1.8,10.2,5.2,14c3.5,3.7,8,5.5,13.5,5.5c3.8,0,7.1-1.1,9.7-3.1V99c0,3.2-0.9,5.8-2.6,7.5c-1.7,1.7-4.1,2.6-7.1,2.6
+					c-4.5,0-7.4-1.8-10.9-6.5l-6.7,6.4l0.2,0.3c1.4,2,3.7,4,6.6,5.9c2.9,1.9,6.6,2.8,10.9,2.8c5.8,0,10.6-1.8,14.1-5.4
+					c3.5-3.6,5.3-8.4,5.3-14.2V63h-9.7V66.3z M260.6,89.4c-1.7,2-3.9,2.9-6.8,2.9c-2.8,0-5-0.9-6.7-2.9c-1.7-1.9-2.5-4.5-2.5-7.7
+					c0-3.2,0.9-5.8,2.5-7.7c1.7-1.9,3.9-2.9,6.7-2.9c2.8,0,5,1,6.8,2.9c1.7,2,2.6,4.6,2.6,7.7C263.2,84.9,262.3,87.5,260.6,89.4z"/>
+				<rect id="XMLID_272_" x="281.3" y="63" class="st0" width="9.8" height="39.1"/>
+				<path id="XMLID_271_" class="st0" d="M286.3,45.9c-1.7,0-3.1,0.6-4.3,1.8c-1.2,1.1-1.8,2.6-1.8,4.2c0,1.7,0.6,3.1,1.8,4.3
+					c1.2,1.2,2.6,1.8,4.3,1.8c1.7,0,3.1-0.6,4.3-1.8c1.2-1.2,1.8-2.6,1.8-4.3c0-1.7-0.6-3.1-1.8-4.2C289.4,46.5,288,45.9,286.3,45.9
+					z"/>
+				<path id="XMLID_270_" class="st0" d="M312.7,52.5H303V63h-5.6v9h5.6v16.2c0,5.1,1,8.7,3,10.8c2,2.1,5.6,3.2,10.6,3.2
+					c1.6,0,3.2-0.1,4.8-0.2l0.4,0v-9l-3.4,0.2c-2.3,0-3.9-0.4-4.7-1.2c-0.8-0.8-1.1-2.6-1.1-5.2V72h9.2v-9h-9.2V52.5z"/>
+				<rect id="XMLID_269_" x="368" y="46.6" class="st0" width="9.8" height="55.5"/>
+				<path id="XMLID_268_" class="st0" d="M477.3,88.2c-1.8,2-3.6,3.7-4.9,4.6v0c-1.4,0.9-3.1,1.3-5.1,1.3c-2.9,0-5.2-1.1-7.1-3.2
+					c-1.9-2.2-2.8-4.9-2.8-8.3s0.9-6.1,2.8-8.2c1.9-2.2,4.2-3.2,7.1-3.2c3.2,0,6.5,2,9.4,5.4l6.5-6.2l0,0c-4.2-5.5-9.7-8.1-16.1-8.1
+					c-5.4,0-10.1,2-13.9,5.8c-3.8,3.9-5.7,8.8-5.7,14.6s1.9,10.7,5.7,14.6c3.8,3.9,8.5,5.9,13.9,5.9c7.1,0,12.9-3.1,16.8-8.7
+					L477.3,88.2z"/>
+				<path id="XMLID_265_" class="st0" d="M517.7,68.5c-1.4-1.9-3.3-3.5-5.7-4.7c-2.3-1.1-5.1-1.7-8.1-1.7c-5.5,0-10,2-13.4,6
+					c-3.3,4-4.9,8.9-4.9,14.7c0,5.9,1.8,10.8,5.4,14.6c3.6,3.7,8.4,5.6,14.2,5.6c6.6,0,12.1-2.7,16.2-8l0.2-0.3l-6.4-6.2l0,0
+					c-0.6,0.7-1.4,1.5-2.2,2.3c-1,0.9-1.9,1.6-2.9,2.1c-1.5,0.7-3.1,1.1-5,1.1c-2.7,0-5-0.8-6.7-2.4c-1.6-1.5-2.6-3.5-2.8-5.9h26.1
+					l0.1-3.6c0-2.5-0.3-5-1-7.3C520.1,72.6,519.1,70.4,517.7,68.5z M496.2,77.7c0.5-1.9,1.3-3.4,2.6-4.6c1.3-1.3,3.1-2,5.2-2
+					c2.4,0,4.2,0.7,5.5,2c1.2,1.2,1.8,2.8,2,4.6H496.2z"/>
+				<path id="XMLID_262_" class="st0" d="M555.5,66L555.5,66c-3-2.5-7.1-3.8-12.3-3.8c-3.3,0-6.3,0.7-9.1,2.1
+					c-2.6,1.3-5.1,3.5-6.7,6.3l0.1,0.1l6.3,6c2.6-4.1,5.5-5.6,9.3-5.6c2.1,0,3.8,0.6,5.1,1.6c1.3,1.1,1.9,2.5,1.9,4.2v1.9
+					c-2.4-0.7-4.9-1.1-7.2-1.1c-4.9,0-8.9,1.2-11.8,3.4c-3,2.3-4.5,5.6-4.5,9.8c0,3.7,1.3,6.7,3.8,8.9c2.6,2.1,5.8,3.2,9.5,3.2
+					c3.7,0,7.3-1.5,10.4-4.1v3.2h9.7V77C560,72.2,558.5,68.5,555.5,66z M538,87.2c1.1-0.8,2.7-1.2,4.7-1.2c2.4,0,4.9,0.5,7.5,1.4
+					v3.8c-2.1,2-5,3-8.5,3c-1.7,0-3-0.4-3.9-1.1c-0.9-0.7-1.3-1.7-1.3-2.8C536.4,89,536.9,88,538,87.2z"/>
+				<path id="XMLID_261_" class="st0" d="M597.9,66.7c-2.7-3.1-6.6-4.6-11.5-4.6c-3.9,0-7.1,1.1-9.4,3.3V63h-9.7v39.1h9.8V80.6
+					c0-3,0.7-5.3,2.1-7c1.4-1.7,3.3-2.5,5.8-2.5c2.2,0,3.9,0.7,5.2,2.2c1.3,1.5,1.9,3.6,1.9,6.2v22.7h9.8V79.5
+					C602,74.1,600.6,69.8,597.9,66.7z"/>
+				<path id="XMLID_258_" class="st0" d="M355.6,66L355.6,66c-3-2.5-7.1-3.8-12.3-3.8c-3.3,0-6.3,0.7-9.1,2.1
+					c-2.6,1.3-5.1,3.5-6.7,6.3l0.1,0.1l6.3,6c2.6-4.1,5.5-5.6,9.3-5.6c2.1,0,3.8,0.6,5.1,1.6c1.3,1.1,1.9,2.5,1.9,4.2v1.9
+					c-2.4-0.7-4.9-1.1-7.2-1.1c-4.9,0-8.9,1.2-11.8,3.4c-3,2.3-4.5,5.6-4.5,9.8c0,3.7,1.3,6.7,3.8,8.9c2.6,2.1,5.8,3.2,9.5,3.2
+					c3.7,0,7.3-1.5,10.4-4.1v3.2h9.7V77C360.2,72.2,358.7,68.5,355.6,66z M338.2,87.2c1.1-0.8,2.7-1.2,4.7-1.2
+					c2.4,0,4.9,0.5,7.5,1.4v3.8c-2.1,2-5,3-8.5,3c-1.7,0-3-0.4-3.9-1.1c-0.9-0.7-1.3-1.7-1.3-2.8C336.6,89,337.1,88,338.2,87.2z"/>
+				<path id="XMLID_255_" class="st0" d="M413.6,103c-15.8,0-28.6-12.8-28.6-28.6s12.8-28.6,28.6-28.6s28.6,12.8,28.6,28.6
+					S429.4,103,413.6,103z M413.6,55.8c-10.2,0-18.5,8.3-18.5,18.5s8.3,18.5,18.5,18.5s18.5-8.3,18.5-18.5S423.8,55.8,413.6,55.8z"
+					/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

client/public/locales/am/builder.json

@@ -0,0 +1,368 @@
+{
+  "common": {
+    "actions": {
+      "add": "አዲስ {{token}} ጨምር",
+      "delete": "{{token}} አጥፋ",
+      "edit": "{{token}} አዘምን"
+    },
+    "columns": {
+      "heading": "አምዶች",
+      "tooltip": "የአምዶች ብዛት ይቀይሩ"
+    },
+    "form": {
+      "date": {
+        "label": "ቀን"
+      },
+      "description": {
+        "label": "መግለጫ"
+      },
+      "email": {
+        "label": "የኢሜል አድራሻ"
+      },
+      "end-date": {
+        "help-text": "አሁንም ካለ፤ ይህንን ቦታ ክፍት ይተውት።",
+        "label": "የመጨረሻ ቀን"
+      },
+      "keywords": {
+        "label": "ቁልፍ ቃላት"
+      },
+      "level": {
+        "label": "ደረጃ"
+      },
+      "levelNum": {
+        "label": "ደረጃ (ቁጥር)"
+      },
+      "name": {
+        "label": "ስም"
+      },
+      "phone": {
+        "label": "የስልክ ቁጥር"
+      },
+      "position": {
+        "label": "የስራ ሚና"
+      },
+      "start-date": {
+        "label": "የመጀመሪያ ቀን"
+      },
+      "subtitle": {
+        "label": "ንዑስ ርዕስ"
+      },
+      "summary": {
+        "label": "ማጠቃለያ"
+      },
+      "title": {
+        "label": "ርዕስ"
+      },
+      "url": {
+        "label": "ድህረገፅ"
+      }
+    },
+    "glossary": {
+      "page": "ገጽ"
+    },
+    "list": {
+      "actions": {
+        "delete": "አጥፋ",
+        "duplicate": "አባዛ",
+        "edit": "አዘምን"
+      },
+      "empty-text": "ይህ ዝርዝር ባዶ ነው።"
+    },
+    "tooltip": {
+      "delete-item": "እርግጠኛ ነዎት ይህንn ማጥፋት ይፈልጋሉ? ይህ የማይመለስ ተግባር ነው።",
+      "delete-section": "ክፍሉን አጥፋ",
+      "rename-section": "ክፍሉን እንደገና ይሰይሙ",
+      "toggle-visibility": "ዕይታውን ቀያይር"
+    }
+  },
+  "controller": {
+    "tooltip": {
+      "center-artboard": "መሃል የሰዕል ማሳያ",
+      "copy-link": "የስራ ልምድ ሰነዱን ሊንክ ቅዳ",
+      "export-pdf": "PDF አውጣ",
+      "toggle-orientation": "የገጽ አቀማመጥን ቀያይር",
+      "toggle-page-break-line": "የገጽ መግቻ መስመርን ቀያይር",
+      "toggle-sidebars": "የጎን ክፍሎችን ቀይር",
+      "zoom-in": "አቅርብ",
+      "zoom-out": "አሳንስ",
+      "undo": "ቀልብስ",
+      "redo": "ድገም"
+    }
+  },
+  "header": {
+    "menu": {
+      "delete": "አጥፋ",
+      "duplicate": "አብዛ",
+      "rename": "ዳግም ሰይም",
+      "share-link": "ሊንክ አጋራ",
+      "tooltips": {
+        "delete": "እርግጠኛ ነዎት ይህን የስራ ልምድ ሰነድ ማጥፋት ይፈልጋሉ? ይህ የማይመለስ ተግባር ነው።",
+        "share-link": "የሥራ ልምድዎን ለሌሎች እንዲታይ ለማድረግ ዕይታውን ወደ ይፋዊ መለወጥ ያስፈልግዎታል።"
+      }
+    }
+  },
+  "leftSidebar": {
+    "sections": {
+      "awards": {
+        "form": {
+          "awarder": {
+            "label": "ሸላሚ"
+          }
+        }
+      },
+      "basics": {
+        "actions": {
+          "photo-filters": "የፎቶ ማጣሪያዎች"
+        },
+        "heading": "መሰረታዊ ነገሮች",
+        "headline": {
+          "label": "ርዕስ"
+        },
+        "name": {
+          "label": "ሙሉ ስም"
+        },
+        "birthdate": {
+          "label": "የትውልድ ቀን"
+        },
+        "photo-filters": {
+          "effects": {
+            "border": {
+              "label": "ድንበር"
+            },
+            "grayscale": {
+              "label": "ግራጫ ልኬት"
+            },
+            "heading": "ተፅዕኖዎች"
+          },
+          "shape": {
+            "heading": "ቅርጽ"
+          },
+          "size": {
+            "heading": "መጠን (በፒክስል)"
+          }
+        },
+        "photo-upload": {
+          "tooltip": {
+            "remove": "ፎቶ አስወግድ",
+            "upload": "ፎቶ ስቀል"
+          }
+        }
+      },
+      "certifications": {
+        "form": {
+          "issuer": {
+            "label": "ሰጪ አካል"
+          }
+        }
+      },
+      "education": {
+        "form": {
+          "area-study": {
+            "label": "የጥናት ዙሪያ"
+          },
+          "courses": {
+            "label": "ትምህርቶች"
+          },
+          "degree": {
+            "label": "ዲግሪ"
+          },
+          "grade": {
+            "label": "ውጤት"
+          },
+          "institution": {
+            "label": "ተቋም"
+          }
+        }
+      },
+      "location": {
+        "address": {
+          "label": "አድራሻ"
+        },
+        "city": {
+          "label": "ከተማ"
+        },
+        "country": {
+          "label": "ሀገር"
+        },
+        "heading": "አካባቢ",
+        "postal-code": {
+          "label": "የፖስታ ኮድ"
+        },
+        "region": {
+          "label": "ክልል"
+        }
+      },
+      "profiles": {
+        "form": {
+          "network": {
+            "label": "አውታረ መረብ"
+          },
+          "username": {
+            "label": "የተጠቃሚ ስም"
+          }
+        },
+        "heading": "መለያዎች",
+        "heading_one": "መለያ"
+      },
+      "publications": {
+        "form": {
+          "publisher": {
+            "label": "አታሚ"
+          }
+        }
+      },
+      "references": {
+        "form": {
+          "relationship": {
+            "label": "ዝምድና"
+          }
+        }
+      },
+      "section": {
+        "heading": "ክፍል"
+      },
+      "volunteer": {
+        "form": {
+          "organization": {
+            "label": "ድርጅት"
+          }
+        }
+      }
+    }
+  },
+  "rightSidebar": {
+    "sections": {
+      "css": {
+        "heading": "የራስ CSS"
+      },
+      "export": {
+        "heading": "አውጣ",
+        "json": {
+          "primary": "JSON",
+          "secondary": "ወደ Reactive Resume ተመልሶ ሊመጣ የሚችል የስራ ልምድ ሰነድ የJSON ቅጂዎትን ያውርዱ።"
+        },
+        "pdf": {
+          "loading": {
+            "primary": "PDF በመስራት ላይ",
+            "secondary": "እባክዎ PDF እስኪሰራ ይጠብቁ፣ ይህ እስከ 15 ሰከንድ ሊወስድ ይችላል።"
+          },
+          "normal": {
+            "primary": "PDF",
+            "secondary": "ማተም እና መላክ የሚችሉትን የስራ ልምድ ሰነድዎን በPDF ያውርዱ። ይህ ፋይል ለተጨማሪ አርትዖት ተመልሶ ሊመጣ አይችልም።"
+          }
+        }
+      },
+      "layout": {
+        "heading": "አቀማመጥ",
+        "tooltip": {
+          "reset-layout": "አቀማመጡን መልስ"
+        }
+      },
+      "links": {
+        "bugs-features": {
+          "body": "የስራ ልምድ ሰነድዎን ለመስራት የሚከለክሎት ነገር አለ? ወይም የሚጨምሩት አስደናቂ ሀሳብ አለዎት? በ GitHub ላይ ጉዳይዎን ያቅርቡ።",
+          "button": "GitHub ጉዳዮች",
+          "heading": "ችግሮች? የባህሪ ጥያቄዎች?"
+        },
+        "donate": {
+          "body": "Reactive Resumeን መጠቀም ከወደዱ እባክዎን መተግበሪያው እንዲሰራ እና ያለ ማስታወቂያ ሁሌም በነፃ እንዲቀጥል በተቻለዎት መጠን ለመለገስ ያስቡበት።",
+          "button": "ቡና ይጋብዙኝ",
+          "heading": "ለ Reactive Resume ይለግሱ"
+        },
+        "github": "የምንጭ ኮድ",
+        "docs": "ሰነዶች",
+        "heading": "አገናኞች"
+      },
+      "settings": {
+        "global": {
+          "date": {
+            "primary": "ቀን",
+            "secondary": "በመላው መተግበሪያ ላይ የሚጠቀሙበት የቀን አይነት"
+          },
+          "heading": "ዓለም አቀፍ",
+          "language": {
+            "primary": "ቋንቋ",
+            "secondary": "በመላው መተግበሪያ ላይ የሚጠቀሙበት ቋንቋ"
+          },
+          "theme": {
+            "primary": "ገጽታ"
+          }
+        },
+        "heading": "ቅንብሮች",
+        "page": {
+          "format": {
+            "primary": "የወረቀት መጠን",
+            "secondary": "ከቆመበት ቀጥል ገጾችዎ ልኬቶችን ይወስናል"
+          },
+          "break-line": {
+            "primary": "መስመር መቁረጫ",
+            "secondary": "የA4 ገጽ ቁመትን ለመለየት በሁሉም ገጾች ላይ መስመር አሳይ"
+          },
+          "heading": "ገጽ",
+          "orientation": {
+            "disabled": "አንድ ገጽ ብቻ ሲኖር ምንም ተጽእኖ የለውም",
+            "primary": "አቅጣጫ",
+            "secondary": "ገጾችን በአግድም ሆነ በቋሚ ለማሳየት"
+          }
+        },
+        "resume": {
+          "heading": "የስራልምድ ሰነድ",
+          "reset": {
+            "primary": "ሁሉንም ነገር ዳግም አስጀምር",
+            "secondary": "በጣም ብዙ ስህተቶችን ሰርተዋል? ሁሉንም ለውጦች ዳግም ለማስጀመር እና ከባዶ ለመጀመር እዚህ ይንኩ። ይጠንቀቁ፤ ይህ እርምጃ ወደ ኋላ መመለስ አይቻልም።"
+          },
+          "sample": {
+            "primary": "የናሙና መረጃን ጫን",
+            "secondary": "የት መጀመር እንዳለብዎት እርግጠኛ አይደሉም? የተሟላ የስራ ልምድ ሰነድ እንዴት እንደሚመስል ለማየት አንዳንድ ናሙና መረጃ ለመጫን እዚህ ይንኩ።"
+          }
+        }
+      },
+      "sharing": {
+        "heading": "ማጋራት",
+        "short-url": {
+          "label": "አጭር ማስፈንጠሪያ ይመርጣሉ።"
+        },
+        "visibility": {
+          "subtitle": "ማስፈንጥሪያ ያለው ማንኛውም ሰው የእርስዎን የስራ ልምድ እንዲመለከት ይፍቀዱለት",
+          "title": "ይፋዊ"
+        }
+      },
+      "templates": {
+        "heading": "ምሳሌዎች"
+      },
+      "theme": {
+        "form": {
+          "background": {
+            "label": "ዳራ"
+          },
+          "primary": {
+            "label": "ዋና"
+          },
+          "text": {
+            "label": "ጽሑፍ"
+          }
+        },
+        "heading": "ገጽታ"
+      },
+      "typography": {
+        "form": {
+          "font-family": {
+            "label": "የጽሁፍ ቅርጽ ቤተሰብ"
+          },
+          "font-size": {
+            "label": "የጽሁፍ ቅርጽ መጠን"
+          }
+        },
+        "heading": "የፊደል አጻጻፍ",
+        "widgets": {
+          "body": {
+            "label": "ሐተታ"
+          },
+          "headings": {
+            "label": "ርዕሶች"
+          }
+        }
+      }
+    }
+  }
+}

client/public/locales/am/common.json

@@ -0,0 +1,29 @@
+{
+  "avatar": {
+    "menu": {
+      "greeting": "ሰላም",
+      "logout": "ውጣ"
+    }
+  },
+  "footer": {
+    "credit": "ተወዳጅ ፕሮጀክት በ<1>Amruth Pillai</1>",
+    "license": "በማህበረሰቡ ፣ ለማህበረሰቡ።"
+  },
+  "markdown": {
+    "help-text": "ይህ ክፍል ይደግፋል <1>markdown</1> አፃፃፍ ይደግፋል።"
+  },
+  "date": {
+    "present": "አሁን"
+  },
+  "subtitle": "ነፃ እና ክፍት የስራ ልምድ ሰነድ መገንቢያ",
+  "title": "Reactive Resume",
+  "toast": {
+    "error": {
+      "upload-file-size": "እባክዎ ከ2 ሜጋባይት በታች የሆኑ ፋይሎችን ብቻ ይስቀሉ።",
+      "upload-photo-size": "እባክዎትን ከ2 ሜጋባይት በታች የሆኑ ፎቶዎችን ብቻ ይስቀሉ፣ ቢቻል ካሬ።"
+    },
+    "success": {
+      "resume-link-copied": "ወደ የስራ ታሪክዎ የሚወስድ አገናኝ በሰሌዳዎ ተይዟል።"
+    }
+  }
+}

client/public/locales/am/dashboard.json

@@ -0,0 +1,25 @@
+{
+  "create-resume": {
+    "subtitle": "ከባዶ ጀምር",
+    "title": "አዲስ የሥራ ታሪክ ፍጠር"
+  },
+  "import-external": {
+    "subtitle": "LinkedIn, JSON Resume, Reactive Resume",
+    "title": "ከውጭ ምንጮች አስገባ"
+  },
+  "resume": {
+    "menu": {
+      "delete": "አጥፋ",
+      "duplicate": "አብዛ",
+      "open": "ክፈት",
+      "rename": "እንደገና ይሰይሙ",
+      "share-link": "ሊንክ አጋራ",
+      "tooltips": {
+        "delete": "እርግጠኛ ነዎት ይህን የሥራ ታሪክ ማጥፋት ይፈልጋሉ? ይህ የማይመለስ ተግባር ነው።",
+        "share-link": "የስራ ልምድዎን ለሌሎች እንዲታይ ለማድረግ ዕይታውን ወደ ይፋዊ መቀየር አለብዎት።"
+      }
+    },
+    "timestamp": "መጨረሻ የተሻሻለው {{timestamp}} በፊት"
+  },
+  "title": "ዳሽቦርድ"
+}

client/public/locales/am/landing.json

@@ -0,0 +1,42 @@
+{
+  "actions": {
+    "app": "ወደ መተግበሪያ ይሂዱ",
+    "login": "ግባ",
+    "logout": "ውጣ",
+    "register": "ይመዝገቡ"
+  },
+  "features": {
+    "heading": "መገለጫዎች",
+    "list": {
+      "ads": "ምንም ማስታወቂያ የለም",
+      "export": "የስራ ልምድዎን ወደ JSON ወይም PDF ቅርጸት ይላኩ።",
+      "free": "ሁሌም ነጻ",
+      "import": "መረጃ ከ LinkedIn, JSON Resume ማምጣት",
+      "languages": "በተለያዩ ቋንቋዎች ተደራሽ",
+      "more": "እና ብዙ ተጨማሪ አስደሳች መገለጫዎች፤ <1>ሁሉንም እዚህ ያንብቡ</1>",
+      "tracking": "ምንም የተጠቃሚ መከታተያ የለም።"
+    }
+  },
+  "links": {
+    "heading": "አገናኞች",
+    "links": {
+      "donate": "ይለግሱ",
+      "github": "የምንጭ ኮድ",
+      "docs": "ሰነዶች",
+      "privacy": "የግላዊነት መመሪያ",
+      "service": "የአገልግሎት ውሎች"
+    }
+  },
+  "screenshots": {
+    "heading": "የገጽ እይታዎች"
+  },
+  "testimonials": {
+    "heading": "ምስክሮች",
+    "body": "ጥሩም ይሁን መጥፎ፣ ስለ Reactive Resume እና ለእርስዎ እንዴት እንደነበረ አስተያየትዎን መስማት እፈልጋለሁ።<br/>በአለም ዙሪያ በተጠቃሚዎች የተላኩ አንዳንድ መልዕክቶች እነዚሁና",
+    "contact": "በዚህ በኩል ልታገኙኝ <1>ኢሜል</1> ትችላላችሁ ወይም <3>በድረ-ገጽ</3> ላይ ባለው የእውቂያ ቅጽ ማግኘት ይችላሉ።"
+  },
+  "summary": {
+    "body": "Reactive Resume የእርስዎን የስራ ታሪክ የመፍጠር፣ የማዘመን እና የማጋራት መደበኛ ተግባራትን እንደ 1 2 3 ቀላል ለማድረግ የተሰራ ነፃ እና በነጻ የሚገኝ የስራ ልምድ ሰነድ መገንቢያ ነው። በዚህ መገልገያ የተለያዩ የስራ ልምድ ሰነዶችን በመስራት፣ ከቀጣሪዎች ወይም ከጓደኞች ጋር በማስፈንጠሪያ ማጋራት እና እንደ PDF ማተም ፣ ሁሉንም በነጻ ፣ ምንም ማስታወቂያ ሳይኖር ፣ ምንም ክትትል ሳይደረግ ፣ የመረጃዎን ትክክለኛነት እና ግላዊነት ተጠብቆ ማከናወን ይችላሉ።",
+    "heading": "ማጠቃለያ"
+  }
+}

client/public/locales/am/modals.json

@@ -0,0 +1,135 @@
+{
+  "auth": {
+    "forgot-password": {
+      "actions": {
+        "send-email": "የይለፍ ቃል ዳግም ማስጀመሪያ ኢሜይል ላክ"
+      },
+      "body": "መልሰው ማግኘት ከሚፈልጉት መለያ ጋር የተያያዘውን የኢሜይል አድራሻ ያስገቡ።",
+      "form": {
+        "email": {
+          "label": "የኢሜል አድራሻ"
+        }
+      },
+      "heading": "የይለፍ ቃልዎን ረሱ?",
+      "help-text": "መለያው ካለ የይለፍ ቃልዎን እንደገና ለማስጀመር የሚያስችል ኢሜል ይደርስዎታል።"
+    },
+    "login": {
+      "actions": {
+        "login": "ግባ"
+      },
+      "body": "እባክዎ የስራ ልምድ ሰነድዎ ወዳለበት ለመግባት፣ ለማግኘት፣ ለማስተዳደር እና ለማጋራት ከመለያዎ ጋር የተያያዘውን የተጠቃሚ ስምዎን እና የይለፍ ቃልዎን ያስገቡ።",
+      "form": {
+        "password": {
+          "label": "የይለፍ ቃል"
+        },
+        "username": {
+          "help-text": "እንዲሁም የኢሜል አድራሻዎን ማስገባት ይችላሉ",
+          "label": "የተጠቃሚ ስም"
+        }
+      },
+      "heading": "ወደ መለያዎ ይግቡ",
+      "recover-text": "የይለፍ ቃልዎን ከረሱት፣ እዚህ <1>መለያዎን መልሰው ማግኘት</1> ይችላሉ።",
+      "register-text": "ከሌለዎት እዚህ <1>መለያ መፍጠር</1> ይችላሉ።"
+    },
+    "register": {
+      "actions": {
+        "register": "ይመዝገቡ",
+        "google": "በጉግል ይመዝገቡ"
+      },
+      "body": "እባክዎ መለያ ለመፍጠር የእርስዎን የግል መረጃ ያስገቡ።",
+      "form": {
+        "confirm-password": {
+          "label": "የይለፍ ቃልዎን አረጋግጥ"
+        },
+        "email": {
+          "label": "የኢሜል አድራሻ"
+        },
+        "name": {
+          "label": "ሙሉ ስም"
+        },
+        "password": {
+          "label": "የይለፍ ቃል"
+        },
+        "username": {
+          "label": "የተጠቃሚ ስም"
+        }
+      },
+      "heading": "መለያ ፍጠር",
+      "loginText": "መለያ ካለዎት <1>እዚህ መግባት</1> ይችላሉ።"
+    },
+    "reset-password": {
+      "actions": {
+        "set-password": "አዲስ የይለፍ ቃል ያዘጋጁ"
+      },
+      "body": "ለመለያዎ አዲስ የይለፍ ቃል ያስገቡ።",
+      "form": {
+        "confirm-password": {
+          "label": "የይለፍ ቃልዎን አረጋግጡ"
+        },
+        "password": {
+          "label": "የይለፍ ቃል"
+        }
+      },
+      "heading": "የይለፍ ቃልዎን ዳግም ያስጀምሩ"
+    }
+  },
+  "dashboard": {
+    "create-resume": {
+      "actions": {
+        "create-resume": "የስራ ታሪክ ሰነድ ይፍጠሩ"
+      },
+      "body": "ስም በመስጠት የስራ ልምድዎ ሰነድዎን መገንባት ይጀምሩ። መጠሪያው ለሚያመለክቱበት የስራ ሚና ወይም የሚወዱት ምግብ ሊሆን ይችላል።",
+      "form": {
+        "name": {
+          "label": "ስም"
+        },
+        "public": {
+          "label": "በይፋ ተደራሽ ነው?"
+        },
+        "slug": {
+          "label": "ማስፈንጠሪያ"
+        }
+      },
+      "heading": "አዲስ የስራ ታሪክ ሰነድ ይፍጠሩ"
+    },
+    "import-external": {
+      "heading": "ከውጭ ምንጮች አስገባ",
+      "json-resume": {
+        "actions": {
+          "upload-json": "JSON ስቀል"
+        },
+        "body": "ለመቀጠል ዝግጁ የሆነ <1>የተረጋገጠ JSON ሰነድ</1> ካለዎት በReactive Resume ላይ ስራዎን ለማፋጠን ሊጠቀሙበት ይችላሉ። ከታች ያለውን አዝራር በመጫን የሚሰራ JSON ፋይል ይስቀሉ።",
+        "heading": "ከ JSON ሰነድ"
+      },
+      "linkedin": {
+        "actions": {
+          "upload-archive": "የ ZIP ማህደር ስቀል"
+        },
+        "body": "መረጃዎን ከ LinkedIn ወደ በመላክ እና Reactive Resume ላይ በራስ-ሙላ መስኮችን በመጠቀም ጊዜ መቆጠብ ይችላሉ። በ LinkedIn ላይ ወደ <1>የመረጃ ግላዊነት</1> ክፍል ይሂዱ እና የመረጃ ማህደርዎን ይጠይቁ። ከተገኘ በኋላ፣ ከታች በሚገኘው የ ZIP ፋይሉን ይስቀሉ።",
+        "heading": "ከ LinkedIn ስቀል"
+      },
+      "reactive-resume": {
+        "actions": {
+          "upload-json": "JSON ስቀል",
+          "upload-json-v2": "JSON v2 ይስቀሉ።"
+        },
+        "body": "አሁን ካለው Reactive Resume ስሪት ጋር ወደ ውጭ የተላከ JSON ካለዎት፣ እንደገና ሊስተካከል የሚችል ስሪት ለማግኘት ወደዚህ መልሰው ማስገባት ይችላሉ።",
+        "heading": "ከ Reactive Resume ስቀል"
+      }
+    },
+    "rename-resume": {
+      "actions": {
+        "rename-resume": "የስራ ታሪክ ሰነዱን ደግመው ይሰይሙ"
+      },
+      "form": {
+        "name": {
+          "label": "ስም"
+        },
+        "slug": {
+          "label": "ማስፈንጥሪያ"
+        }
+      },
+      "heading": "የስራ ታሪክ ሰነዱን ደግመው ይሰይሙ"
+    }
+  }
+}

client/public/locales/ar/builder.json

@@ -270,6 +270,7 @@
           "heading": "تبرع الى Reactive Resume"
         },
         "github": "الشفرة المصدرية",
+        "docs": "توثيق",
         "heading": "الروابط"
       },
       "settings": {
@@ -289,6 +290,10 @@
         },
         "heading": "الإعدادات",
         "page": {
+          "format": {
+            "primary": "حجم الورق",
+            "secondary": "تحدد أبعاد صفحات سيرتك الذاتية"
+          },
           "break-line": {
             "primary": "خط فاصل",
             "secondary": "اعرض خط في كل الصفحات لتحديد ارتفاع صفحة A4"

client/public/locales/ar/landing.json

@@ -22,6 +22,7 @@
     "links": {
       "donate": "تبرّع",
       "github": "الشفرة المصدرية",
+      "docs": "توثيق",
       "privacy": "سياسة الخصوصية",
       "service": "شروط الإستخدام"
     }

client/public/locales/bg/builder.json

@@ -270,6 +270,7 @@
           "heading": "Направи дарение и подкрепи Reactive Resume"
         },
         "github": "Програмен код",
+        "docs": "Документация",
         "heading": "Връзки"
       },
       "settings": {
@@ -289,6 +290,10 @@
         },
         "heading": "Настройки",
         "page": {
+          "format": {
+            "primary": "Размер на хартията",
+            "secondary": "Определя размерите на вашите страници с автобиография"
+          },
           "break-line": {
             "primary": "Линия на прекъсване",
             "secondary": "Показване на линия на всички страници за обозначаване на височината на страница A4"

client/public/locales/bg/landing.json

@@ -22,6 +22,7 @@
     "links": {
       "donate": "Дарение",
       "github": "Програмен код",
+      "docs": "Документация",
       "privacy": "Политика за поверителност",
       "service": "Условия на ползване"
     }

client/public/locales/bn/builder.json

@@ -270,6 +270,7 @@
           "heading": "Reactive Resume -তে দান করুন"
         },
         "github": "সোর্স কোড",
+        "docs": "ডকুমেন্টেশন",
         "heading": "লিঙ্ক"
       },
       "settings": {
@@ -289,6 +290,10 @@
         },
         "heading": "সেটিংস",
         "page": {
+          "format": {
+            "primary": "কাগজের আকার",
+            "secondary": "আপনার জীবনবৃত্তান্ত পৃষ্ঠাগুলির মাত্রা নির্ধারণ করে"
+          },
           "break-line": {
             "primary": "লাইন ভেঙ্গে ফেলুন",
             "secondary": "একটি A4 পৃষ্ঠার উচ্চতা চিহ্নিত করতে সমস্ত পৃষ্ঠায় একটি লাইন দেখান৷"

client/public/locales/bn/landing.json

@@ -22,6 +22,7 @@
     "links": {
       "donate": "দান করুন",
       "github": "সোর্স কোড",
+      "docs": "ডকুমেন্টেশন",
       "privacy": "গোপনীয়তা নীতি",
       "service": "সেবা পাবার শর্ত"
     }

client/public/locales/ca/builder.json

@@ -270,6 +270,7 @@
           "heading": "Dona a Reactive Curriculum vitae"
         },
         "github": "Codi font",
+        "docs": "Documentació",
         "heading": "Enllaços"
       },
       "settings": {
@@ -289,6 +290,10 @@
         },
         "heading": "Configuració",
         "page": {
+          "format": {
+            "primary": "Mida del paper",
+            "secondary": "Determina les dimensions de les pàgines del vostre currículum"
+          },
           "break-line": {
             "primary": "Línia de trencament",
             "secondary": "Mostra una línia a totes les pàgines per marcar l'alçada d'una pàgina A4"

client/public/locales/ca/landing.json

@@ -22,6 +22,7 @@
     "links": {
       "donate": "Donar",
       "github": "Codi font",
+      "docs": "Documentació",
       "privacy": "Política de privacitat",
       "service": "Termes del servei"
     }

client/public/locales/cs/builder.json

@@ -270,6 +270,7 @@
           "heading": "Přispějte na Reactive Resume"
         },
         "github": "Zdrojový kód",
+        "docs": "Dokumentace",
         "heading": "Odkazy"
       },
       "settings": {
@@ -289,6 +290,10 @@
         },
         "heading": "Nastavení",
         "page": {
+          "format": {
+            "primary": "Velikost papíru",
+            "secondary": "Určuje rozměry stránek vašeho životopisu"
+          },
           "break-line": {
             "primary": "Nový řádek",
             "secondary": "Zobrazit čáru na všech stránkách pro označení výšky stránky A4"

client/public/locales/cs/landing.json

@@ -22,6 +22,7 @@
     "links": {
       "donate": "Darovat",
       "github": "Zdrojový kód",
+      "docs": "Dokumentace",
       "privacy": "Zásady ochrany osobních údajů",
       "service": "Podmínky služby"
     }

client/public/locales/da/builder.json

@@ -3,6 +3,7 @@
     "actions": {
       "add": "Tilføj ny {{token}}",
       "delete": "Slet {{token}}",
+      "duplicate": "Dublet afsnit",
       "edit": "Rediger {{token}}"
     },
     "columns": {
@@ -80,13 +81,13 @@
       "center-artboard": "Centrer tegnebræt",
       "copy-link": "Kopier link til CV",
       "export-pdf": "Eksporter PDF",
+      "redo": "Redo",
       "toggle-orientation": "Skift sideorientering",
       "toggle-page-break-line": "Skift sideskiftlinje",
       "toggle-sidebars": "Sidebjælke til/fra",
-      "zoom-in": "Zoom ind",
-      "zoom-out": "Zoom ud",
       "undo": "Fortryd",
-      "redo": "Redo"
+      "zoom-in": "Zoom ind",
+      "zoom-out": "Zoom ud"
     }
   },
   "header": {
@@ -114,6 +115,9 @@
         "actions": {
           "photo-filters": "Fotofiltre"
         },
+        "birthdate": {
+          "label": "Fødselsdato"
+        },
         "heading": "Grundlæggende",
         "headline": {
           "label": "Overskrift"
@@ -121,9 +125,6 @@
         "name": {
           "label": "Fulde navn"
         },
-        "birthdate": {
-          "label": "Fødselsdato"
-        },
         "photo-filters": {
           "effects": {
             "border": {
@@ -264,13 +265,15 @@
           "button": "GitHub-problemer",
           "heading": "Fejl? Ønsker til en ny funktion?"
         },
+        "docs": "Dokumentation",
         "donate": {
           "body": "Hvis du kunne lide at bruge Reactive Resume, bedes du overveje at donere så meget som muligt til formålet med at holde appen oppe og køre, uden annoncer og gratis for evigt.",
           "button": "Købe mig en kop kaffe",
           "heading": "Donér til Reactive Resume"
         },
         "github": "Kildekode",
-        "heading": "Links"
+        "heading": "Links",
+        "reddit": "Reddit"
       },
       "settings": {
         "global": {
@@ -293,6 +296,10 @@
             "primary": "Brudlinje",
             "secondary": "Vis en streg på alle sider for at markere højden på en A4-side"
           },
+          "format": {
+            "primary": "Papirstørrelse",
+            "secondary": "Bestemmer dimensionerne på dine CV-sider"
+          },
           "heading": "Side",
           "orientation": {
             "disabled": "Har ingen effekt, når der kun er én side",

client/public/locales/da/landing.json

@@ -8,34 +8,36 @@
   "features": {
     "heading": "Funktioner",
     "list": {
-      "ads": "Ingen reklamer.",
+      "ads": "Ingen reklamer",
       "export": "Eksporter dit CV til JSON- eller PDF-format",
       "free": "Gratis for evigt",
       "import": "Importer data fra LinkedIn, JSON CV",
       "languages": "Tilgængelig på flere sprog",
-      "more": "Og meget flere spændende funktioner, <1>læs alt om det her</1>",
+      "more": "Og mange flere spændende funktioner, <1>læs alt om det her</1>",
       "tracking": "Ingen brugersporing"
     }
   },
   "links": {
     "heading": "Links",
     "links": {
+      "docs": "Dokumentation",
       "donate": "Donér",
       "github": "Kildekode",
       "privacy": "Fortrolighedspolitik",
+      "reddit": "Reddit",
       "service": "Servicevilkår"
     }
   },
   "screenshots": {
     "heading": "Skærmbilleder"
   },
-  "testimonials": {
-    "heading": "Udtalelser",
-    "body": "Godt eller dårligt, jeg ville elske at høre din mening om Reactive Resume og hvordan oplevelsen har været for dig.<br/>Her er nogle af de beskeder, der er sendt af brugere over hele verden.",
-    "contact": "Du kan kontakte mig via <1>min e-mail</1> eller gennem kontaktformularen på <3>min hjemmeside</3> ."
-  },
   "summary": {
     "body": "Reactive Resume er en gratis og open source CV-bygger, der er bygget til at gøre de hverdagsagtige opgaver med at oprette, opdatere og dele dit CV så lette som 1, 2, 3. Med denne app kan du oprette flere CV'er, dele dem med rekrutterere eller venner gennem et unikt link og udskriv det som en PDF, helt gratis, ingen annoncer, ingen sporing, uden at miste integriteten og fortroligheden af dine data.",
     "heading": "Opsummering"
+  },
+  "testimonials": {
+    "body": "Godt eller dårligt, jeg ville elske at høre din mening om Reactive Resume og hvordan oplevelsen har været for dig.<br/>Her er nogle af de beskeder, der er sendt af brugere over hele verden.",
+    "contact": "Du kan kontakte mig via <1>min e-mail</1> eller gennem kontaktformularen på <3>min hjemmeside</3> .",
+    "heading": "Udtalelser"
   }
 }

client/public/locales/de/builder.json

@@ -1,9 +1,10 @@
 {
   "common": {
     "actions": {
-      "add": "Neue {{token}} hinzufügen",
-      "delete": "Löschen {{token}}",
-      "edit": "Bearbeiten {{token}}"
+      "add": "{{token}} hinzufügen",
+      "delete": "{{token}} löschen",
+      "duplicate": "Abschnitt duplizieren",
+      "edit": "{{token}} bearbeiten"
     },
     "columns": {
       "heading": "Spalten",
@@ -17,10 +18,10 @@
         "label": "Beschreibung"
       },
       "email": {
-        "label": "E-Mail Adresse"
+        "label": "E-Mail-Adresse"
       },
       "end-date": {
-        "help-text": "Dieses Feld leer lassen, wenn noch vorhanden",
+        "help-text": "Dieses Feld leer lassen, wenn dieser Eintrag noch kein Enddatum hat.",
         "label": "Enddatum"
       },
       "keywords": {
@@ -69,7 +70,7 @@
       "empty-text": "Diese Liste ist leer."
     },
     "tooltip": {
-      "delete-item": "Sind Sie sicher, dass Sie dieses Element löschen möchten? Dies ist eine unumkehrbare Aktion.",
+      "delete-item": "Sind Sie sicher, dass Sie dieses Element löschen möchten? Dies lässt sich nicht rückgängig machen.",
       "delete-section": "Abschnitt löschen",
       "rename-section": "Abschnitt umbenennen",
       "toggle-visibility": "Sichtbarkeit umschalten"
@@ -80,13 +81,13 @@
       "center-artboard": "Artboard zentrieren",
       "copy-link": "Link zum Lebenslauf kopieren",
       "export-pdf": "PDF exportieren",
+      "redo": "Wiederholen",
       "toggle-orientation": "Seitenausrichtung umschalten",
       "toggle-page-break-line": "Pausenzeile umschalten",
       "toggle-sidebars": "Seitenleisten umschalten",
-      "zoom-in": "Vergrößern",
-      "zoom-out": "Verkleinern",
       "undo": "Rückgängig machen",
-      "redo": "Redo"
+      "zoom-in": "Vergrößern",
+      "zoom-out": "Verkleinern"
     }
   },
   "header": {
@@ -96,8 +97,8 @@
       "rename": "Umbenennen",
       "share-link": "Link teilen",
       "tooltips": {
-        "delete": "Sind Sie sicher, dass Sie diesen Lebenslauf löschen möchten? Dies ist eine unumkehrbare Aktion.",
-        "share-link": "Du musst die Sichtbarkeit deines Lebenslaufs in die Öffentlichkeit ändern, um ihn für andere sichtbar zu machen."
+        "delete": "Sind Sie sicher, dass Sie diesen Lebenslauf löschen möchten? Dies lässt sich nicht rückgängig machen.",
+        "share-link": "Sie müssen die Sichtbarkeit Ihres Lebenslaufs in Öffentlich ändern, um ihn für andere sichtbar zu machen."
       }
     }
   },
@@ -106,7 +107,7 @@
       "awards": {
         "form": {
           "awarder": {
-            "label": "Auszeichnung"
+            "label": "Auszeichner"
           }
         }
       },
@@ -114,20 +115,20 @@
         "actions": {
           "photo-filters": "Fotofilter"
         },
+        "birthdate": {
+          "label": "Geburtsdatum"
+        },
         "heading": "Grundlagen",
         "headline": {
           "label": "Überschrift"
         },
         "name": {
-          "label": "Voller Name"
-        },
-        "birthdate": {
-          "label": "Geburtsdatum"
+          "label": "Vollständiger Name"
         },
         "photo-filters": {
           "effects": {
             "border": {
-              "label": "Grenze"
+              "label": "Rahmen"
             },
             "grayscale": {
               "label": "Graustufen"
@@ -158,13 +159,13 @@
       "education": {
         "form": {
           "area-study": {
-            "label": "Studienbereich"
+            "label": "Studienfach"
           },
           "courses": {
             "label": "Kurse"
           },
           "degree": {
-            "label": "Grad"
+            "label": "Abschluss"
           },
           "grade": {
             "label": "Note"
@@ -176,7 +177,7 @@
       },
       "location": {
         "address": {
-          "label": "Adresse"
+          "label": "Straße"
         },
         "city": {
           "label": "Stadt"
@@ -184,12 +185,12 @@
         "country": {
           "label": "Land"
         },
-        "heading": "Standort",
+        "heading": "Anschrift",
         "postal-code": {
           "label": "Postleitzahl"
         },
         "region": {
-          "label": "Region"
+          "label": "Bundesland"
         }
       },
       "profiles": {
@@ -201,7 +202,7 @@
             "label": "Benutzername"
           }
         },
-        "heading": "Profiles",
+        "heading": "Soziale Netzwerke",
         "heading_one": "Profil"
       },
       "publications": {
@@ -239,16 +240,16 @@
         "heading": "Exportieren",
         "json": {
           "primary": "JSON",
-          "secondary": "Laden Sie eine JSON-Version Ihres Lebenslaufs herunter, die Sie wieder in Reaktives Lebenslauf importieren können."
+          "secondary": "Laden Sie eine JSON-Version Ihres Lebenslaufs herunter, die Sie wieder in Reactive Resume importieren können."
         },
         "pdf": {
           "loading": {
             "primary": "PDF wird erstellt",
-            "secondary": "Bitte warten Sie, wenn Ihr PDF generiert wird, dies kann bis zu 15 Sekunden dauern."
+            "secondary": "Bitte warten Sie, während Ihr PDF generiert wird. Dies kann bis zu 15 Sekunden dauern."
           },
           "normal": {
             "primary": "PDF",
-            "secondary": "Laden Sie sich ein PDF Ihres Lebenslaufs herunter, das Sie ausdrucken und an Ihren Traumjob senden können. Diese Datei kann nicht zur weiteren Bearbeitung importiert werden."
+            "secondary": "Laden Sie sich ein PDF Ihres Lebenslaufs herunter, dass Sie ausdrucken oder an Ihren Traumarbeitgeber senden können. Diese Datei kann nicht zur weiteren Bearbeitung importiert werden."
           }
         }
       },
@@ -260,55 +261,61 @@
       },
       "links": {
         "bugs-features": {
-          "body": "Hält Sie etwas davon ab, einen Lebenslauf zu erstellen? Oder haben Sie eine tolle Idee, die Sie hinzufügen möchten? Erhöhen Sie einen Eintrag auf GitHub, um loszulegen.",
+          "body": "Sind Sie bei der Erstellung Ihres Lebenslaufs auf ein Problem gestoßen? Oder haben Sie eine tolle Idee, die Sie hinzufügen möchten? Erstellen Sie ein Ticket auf GitHub.",
           "button": "GitHub Themen",
-          "heading": "Fehler? Feature-Anfragen?"
+          "heading": "Fehler? Verbesserungsvorschläge?"
         },
+        "docs": "Dokumentation",
         "donate": {
-          "body": "Wenn Ihnen Reactive Resume gefallen hat, denken Sie bitte darüber nach, so viel wie möglich zu spenden, damit die App für immer kostenlos und werbefrei bleibt.",
+          "body": "Sollte Ihnen Reactive Resume gefallen, möchte ich Sie bitten, etwas zu spenden, damit die App für immer kostenlos und werbefrei bleibt.",
           "button": "Kaufe mir einen Kaffee",
-          "heading": "Spenden an Reaktives Lebenslauf"
+          "heading": "Spenden Sie an Reactive Resume."
         },
         "github": "Quellcode",
-        "heading": "Links"
+        "heading": "Links",
+        "reddit": "Reddit"
       },
       "settings": {
         "global": {
           "date": {
             "primary": "Datum",
-            "secondary": "Datumsformat für die gesamte App"
+            "secondary": "Datumsformat für die gesamte App."
           },
           "heading": "Globale",
           "language": {
             "primary": "Sprache",
-            "secondary": "Sprache anzeigen, die in der gesamten App verwendet wird"
+            "secondary": "Anzeigesprache, die in der gesamten App verwendet wird."
           },
           "theme": {
-            "primary": "Thema"
+            "primary": "App Design"
           }
         },
         "heading": "Einstellungen",
         "page": {
           "break-line": {
-            "primary": "Linie anhalten",
-            "secondary": "Zeile auf allen Seiten anzeigen, um die Höhe einer A4-Seite zu markieren"
+            "primary": "Seitenumbruch anzeigen",
+            "secondary": "Zeigt den Seitenumbruch als Linie auf allen Seiten an."
+          },
+          "format": {
+            "primary": "Papiergröße",
+            "secondary": "Legt die Seitenabmessungen Ihres Lebenslaufs fest."
           },
           "heading": "Seite",
           "orientation": {
-            "disabled": "Hat keine Auswirkung, wenn nur eine Seite vorhanden ist",
+            "disabled": "Hat keine Auswirkung, wenn nur eine Seite vorhanden ist.",
             "primary": "Ausrichtung",
-            "secondary": "Ob Seiten horizontal oder vertikal angezeigt werden sollen"
+            "secondary": "Legt fest, ob Seiten horizontal oder vertikal angezeigt werden sollen."
           }
         },
         "resume": {
           "heading": "Lebenslauf",
           "reset": {
             "primary": "Alles zurücksetzen",
-            "secondary": "Zu viele Fehler gemacht? Klicken Sie hier, um alle Änderungen zurückzusetzen und bei Null zu beginnen. Sei vorsichtig, diese Aktion kann nicht rückgängig gemacht werden."
+            "secondary": "Zu viele Fehler gemacht? Klicken Sie hier, um alle Änderungen zurückzusetzen und von vorne zu beginnen. Vorsicht! Diese Aktion kann nicht rückgängig gemacht werden."
           },
           "sample": {
             "primary": "Beispieldaten laden",
-            "secondary": "Nicht sicher, wo man anfangen soll? Klicken Sie hier, um ein paar Beispieldaten zu laden, um zu sehen, wie ein vollständiger Lebenslauf aussieht."
+            "secondary": "Sie sind nicht sicher, wo Sie anfangen sollen? Klicken Sie hier, um Beispieldaten zu laden. So können Sie sich ansehen, wie ein vollständiger Lebenslauf aussieht."
           }
         }
       },
@@ -318,8 +325,8 @@
           "label": "Kurze URL bevorzugen"
         },
         "visibility": {
-          "subtitle": "Erlaube jemandem mit einem Link deinen Lebenslauf anzusehen",
-          "title": "Öffentlich"
+          "subtitle": "Erlaubt jedem, dem Sie diesen Link schicken, Ihren Lebenslauf anzusehen.",
+          "title": "Öffentlich zugänglich"
         }
       },
       "templates": {
@@ -328,16 +335,16 @@
       "theme": {
         "form": {
           "background": {
-            "label": "Hintergrund"
+            "label": "Hintergrundfarbe"
           },
           "primary": {
-            "label": "Primär"
+            "label": "Primärfarbe"
           },
           "text": {
-            "label": "Text"
+            "label": "Textfarbe"
           }
         },
-        "heading": "Thema"
+        "heading": "Lebenslauf Design"
       },
       "typography": {
         "form": {

client/public/locales/de/common.json

@@ -13,14 +13,14 @@
     "help-text": "Dieser Abschnitt unterstützt <1>Markdown</1> Formatierung."
   },
   "date": {
-    "present": "Gegenwärtig"
+    "present": "Heute"
   },
-  "subtitle": "Ein freier und Open-Source-Lebenslauf-Builder.",
-  "title": "Reaktives Lebenslauf",
+  "subtitle": "Ein kostenloser Open Source Lebenslauf-Baukasten.",
+  "title": "Reactive Resume",
   "toast": {
     "error": {
       "upload-file-size": "Bitte laden Sie nur Dateien unter 2 Megabytes hoch.",
-      "upload-photo-size": "Bitte laden Sie nur Fotos unter 2 Megabytes hoch, vorzugsweise quadratisch."
+      "upload-photo-size": "Bitte laden Sie nur Fotos unter 2 Megabytes hoch, am besten in einem quadratischen Format."
     },
     "success": {
       "resume-link-copied": "Ein Link zu deinem Lebenslauf wurde in deine Zwischenablage kopiert."

client/public/locales/de/dashboard.json

@@ -1,25 +1,25 @@
 {
   "create-resume": {
-    "subtitle": "Bei Null anfangen",
+    "subtitle": "Mit einem leeren Lebenslauf starten",
     "title": "Neuen Lebenslauf erstellen"
   },
   "import-external": {
-    "subtitle": "LinkedIn, JSON Resume, Reaktives Lebenslauf",
-    "title": "Aus externen Quellen importieren"
+    "subtitle": "LinkedIn, JSON Lebenslauf, Reactive Resume",
+    "title": "Aus externer Quelle importieren"
   },
   "resume": {
     "menu": {
       "delete": "Löschen",
-      "duplicate": "Duplikat",
+      "duplicate": "Duplizieren",
       "open": "Öffnen",
       "rename": "Umbenennen",
-      "share-link": "Einen Link teilen",
+      "share-link": "Link teilen",
       "tooltips": {
-        "delete": "Möchten Sie diesen Lebenslauf wirklich löschen? Dies ist eine irreversible Aktion.",
+        "delete": "Möchten Sie diesen Lebenslauf wirklich löschen? Dies lässt sich nicht rückgängig machen.",
         "share-link": "Sie müssen die Sichtbarkeit Ihres Lebenslaufs auf öffentlich ändern, um ihn für andere sichtbar zu machen."
       }
     },
-    "timestamp": "Zuletzt vor {{timestamp}} aktualisiert"
+    "timestamp": "Zuletzt vor {{timestamp}} geändert."
   },
   "title": "Dashboard"
 }

client/public/locales/de/landing.json

@@ -1,6 +1,6 @@
 {
   "actions": {
-    "app": "Gehe zu App",
+    "app": "Gehe zur App",
     "login": "Anmelden",
     "logout": "Ausloggen",
     "register": "Registrieren"
@@ -9,33 +9,35 @@
     "heading": "Eigenschaften",
     "list": {
       "ads": "Keine Werbung",
-      "export": "Exportieren Sie Ihren Lebenslauf in JSON oder PDF Format",
-      "free": "Frei, für immer",
-      "import": "Importiere Daten von LinkedIn, JSON Lebenslauf",
-      "languages": "In mehreren Sprachen zugänglich",
-      "more": "Und viel mehr aufregende Features, <1>lesen Sie alles hier</1>",
-      "tracking": "Keine Benutzerverfolgung"
+      "export": "Exportieren Sie Ihren Lebenslauf als JSON oder PDF Format",
+      "free": "Kostenlos, für immer",
+      "import": "Importieren Sie Ihre Daten von LinkedIn oder als JSON Lebenslauf",
+      "languages": "In mehreren Sprachen verfügbar",
+      "more": "Und viele weitere aufregende Features. <1>Hier gibt es mehr informationen (in englischer Sprache)</1>",
+      "tracking": "Kein Benutzertracking"
     }
   },
   "links": {
     "heading": "Verknüpfungen",
     "links": {
+      "docs": "Dokumentation",
       "donate": "Spenden",
       "github": "Quellcode",
       "privacy": "Datenschutzerklärung",
+      "reddit": "Reddit",
       "service": "Nutzungsbedingungen"
     }
   },
   "screenshots": {
     "heading": "Screenshots"
   },
-  "testimonials": {
-    "heading": "Referenzen",
-    "body": "Gut oder schlecht, ich würde gerne Ihre Meinung über Reactive Resume und wie die Erfahrung war für Sie.<br/>Hier sind einige der Nachrichten, die von Benutzern auf der ganzen Welt gesendet werden.",
-    "contact": "Du kannst mich über <1>meine E-Mail</1> oder über das Kontaktformular auf <3>meiner Website</3>erreichen."
-  },
   "summary": {
-    "body": "Reaktives Lebenslauf ist ein freier und Open-Source-Lebenslauf-Builder, der gebaut wurde, um die weltlichen Aufgaben zu machen, zu erstellen, Aktualisieren und teilen Sie Ihren Lebenslauf so einfach wie 1, 2, 3. Mit dieser App kannst du mehrere Bewerbungen erstellen, sie mit Recruitern oder Freunden über einen einzigartigen Link teilen und sie als PDF ausdrucken. alle kostenlos, keine Werbung, keine Verfolgung, ohne die Integrität und Privatsphäre Ihrer Daten zu verlieren.",
+    "body": "Reactive Resume ist ein kostenloser Open Source Lebenslauf-Builder, der gebaut wurde, um die langweilige Aufgabe einen Lebenslauf zu erstellen, aktuell zu halten und zu teilen so einfach wie möglich zu machen. Mit dieser App können Sie mehrere Lebensläufe erstellen, sie mit Recruitern oder Freunden über einen einzigartigen Link teilen und als PDF exportieren. Kostenlos, ohne Werbung, kein Tracking, ohne die Integrität und Privatsphäre Ihrer Daten zu verlieren.",
     "heading": "Zusammenfassung"
+  },
+  "testimonials": {
+    "body": "Egal ob gut oder schlecht - ich würde gerne Ihre Meinung über Reactive Resume hören und welche Erfahrungen Sie gemacht haben.<br/>Hier sind einige der Nachrichten, die mir von Benutzern auf der ganzen Welt zugesandt wurden.",
+    "contact": "Sie können mich über <1>meine E-Mail</1> oder über das Kontaktformular auf <3>meiner Website</3> erreichen.",
+    "heading": "Referenzen"
   }
 }

client/public/locales/de/modals.json

@@ -2,16 +2,16 @@
   "auth": {
     "forgot-password": {
       "actions": {
-        "send-email": "Passwort zurücksetzen E-Mail senden"
+        "send-email": "Passwort zurücksetzen E-Mail senden."
       },
-      "body": "Geben Sie einfach die E-Mail-Adresse ein, die mit dem Konto verknüpft ist, das Sie wiederherstellen möchten.",
+      "body": "Geben Sie die E-Mail-Adresse des Benutzerkontos ein, dass Sie wiederherstellen möchten.",
       "form": {
         "email": {
-          "label": "E-Mail-Addresse"
+          "label": "E-Mail-Adresse"
         }
       },
       "heading": "Passwort vergessen?",
-      "help-text": "Wenn das Konto existiert, erhalten Sie eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts."
+      "help-text": "Sollte das Konto existieren, erhalten Sie eine E-Mail mit einem Link zum Zurücksetzen des Passworts."
     },
     "login": {
       "actions": {
@@ -24,12 +24,12 @@
         },
         "username": {
           "help-text": "Sie können auch Ihre E-Mail-Adresse eingeben",
-          "label": "Nutzername"
+          "label": "Benutzername"
         }
       },
       "heading": "Bei Ihrem Konto anmelden",
-      "recover-text": "Falls Sie Ihr Passwort vergessen haben, können Sie <1>Ihr Konto wiederherstellen</1> hier einrichten.",
-      "register-text": "Wenn Sie keinen haben, können Sie hier <1>ein Konto erstellen</1> anlegen."
+      "recover-text": "Falls Sie Ihr Passwort vergessen haben, können Sie es <1>hier zurücksetzen</1>.",
+      "register-text": "Sollten Sie kein Benutzerkonto haben, können Sie <1>hier ein Konto anlegen</1>."
     },
     "register": {
       "actions": {
@@ -42,7 +42,7 @@
           "label": "Passwort bestätigen"
         },
         "email": {
-          "label": "E-Mail-Addresse"
+          "label": "E-Mail-Adresse"
         },
         "name": {
           "label": "Vollständiger Name"
@@ -71,6 +71,31 @@
         }
       },
       "heading": "Passwort zurücksetzen"
+    },
+    "profile": {
+      "heading": "Ihr Benutzerkonto",
+      "form": {
+        "avatar": {
+          "help-text": "Sie können Ihr Profilbild auf <1>Gravatar</1> aktualisieren"
+        },
+        "name": {
+          "label": "Vollständiger Name"
+        },
+        "email": {
+          "label": "E-Mail-Adresse",
+          "help-text": "Im Moment ist es nicht möglich, Ihre E-Mail-Adresse zu aktualisieren. Bitte erstellen Sie stattdessen ein neues Konto."
+        }
+      },
+      "delete-account": {
+        "heading": "Konto und Daten löschen",
+        "body": "Um Ihr Konto, Ihre Daten und alle Ihre Lebensläufe zu löschen, geben Sie „{{keyword}}“ in das Textfeld ein und klicken Sie auf die Schaltfläche. Bitte beachten Sie, dass dies ein irreversibler Vorgang ist und Ihre Daten nicht wiederhergestellt werden können.",
+        "actions": {
+          "delete": "Account löschen"
+        }
+      },
+      "actions": {
+        "save": "Änderungen speichern"
+      }
     }
   },
   "dashboard": {
@@ -87,7 +112,7 @@
           "label": "Ist öffentlich zugänglich?"
         },
         "slug": {
-          "label": "Slug"
+          "label": "URL-Segment"
         }
       },
       "heading": "Neuen Lebenslauf erstellen"
@@ -98,14 +123,14 @@
         "actions": {
           "upload-json": "JSON hochladen"
         },
-        "body": "Wenn du einen <1>validierten JSON Resume</1> bereit hast, kannst du damit deine Entwicklung auf reaktiven Resume beschleunigen. Klicken Sie auf den Button unten und laden Sie eine gültige JSON-Datei hoch, um zu beginnen.",
+        "body": "Wenn du einen <1>validierten JSON Lebenslauf</1> bereit hast, kannst du damit deine Entwicklung auf Reactive Resume beschleunigen. Klicken Sie auf den Button unten und laden Sie eine gültige JSON-Datei hoch, um zu beginnen.",
         "heading": "Import vom JSON-Lebenslauf"
       },
       "linkedin": {
         "actions": {
           "upload-archive": "ZIP-Archiv hochladen"
         },
-        "body": "Sie können Zeit sparen, indem Sie Ihre Daten aus LinkedIn exportieren und sie zum automatischen Ausfüllen von Feldern auf Reaktives Lebenslauf verwenden. Gehen Sie zum Abschnitt <1>Datenschutz </1> auf LinkedIn und fordern Sie ein Archiv Ihrer Daten an. Sobald diese verfügbar sind, laden Sie die ZIP-Datei unten hoch.",
+        "body": "Sie können Zeit sparen, indem Sie Ihre Daten aus LinkedIn exportieren und sie zum automatischen Ausfüllen von Feldern auf Reactive Resume verwenden. Gehen Sie zum Abschnitt <1>Datenschutz </1> auf LinkedIn und fordern Sie ein Archiv Ihrer Daten an. Sobald diese verfügbar sind, laden Sie die ZIP-Datei unten hoch.",
         "heading": "Aus LinkedIn importieren"
       },
       "reactive-resume": {
@@ -114,7 +139,7 @@
           "upload-json-v2": "Laden Sie JSON von v2 hoch"
         },
         "body": "Wenn Sie eine JSON haben, die mit der aktuellen Version von Reactive Resume exportiert wurde, können Sie sie hier wieder importieren, um wieder eine bearbeitbare Version zu erhalten.",
-        "heading": "Import vom Reaktives Lebenslauf"
+        "heading": "Import von Reactive Resume"
       }
     },
     "rename-resume": {
@@ -126,7 +151,7 @@
           "label": "Name"
         },
         "slug": {
-          "label": "Slug"
+          "label": "URL-Segment"
         }
       },
       "heading": "Lebenslauf umbenennen"

client/public/locales/el/builder.json

@@ -270,6 +270,7 @@
           "heading": "Κάντε δωρεά στο Reactive βιογραφικό"
         },
         "github": "Πηγαίος κώδικας",
+        "docs": "Τεκμηρίωση",
         "heading": "Σύνδεσμοι"
       },
       "settings": {
@@ -289,6 +290,10 @@
         },
         "heading": "Ρυθμίσεις",
         "page": {
+          "format": {
+            "primary": "Μέγεθος χαρτιού",
+            "secondary": "Καθορίζει τις διαστάσεις των σελίδων του βιογραφικού σας"
+          },
           "break-line": {
             "primary": "Γραμμή διακοπής",
             "secondary": "Εμφάνιση μιας γραμμής σε όλες τις σελίδες για να επισημάνετε το ύψος μιας σελίδας Α4"

client/public/locales/el/landing.json

@@ -22,6 +22,7 @@
     "links": {
       "donate": "Δωρεά",
       "github": "Πηγαίος Κώδικας",
+      "docs": "Τεκμηρίωση",
       "privacy": "Πολιτική Απορρήτου",
       "service": "Όρους παροχής υπηρεσιών"
     }

client/public/locales/en/builder.json

@@ -3,6 +3,7 @@
     "actions": {
       "add": "Add New {{token}}",
       "delete": "Delete {{token}}",
+      "duplicate": "Duplicate Section",
       "edit": "Edit {{token}}"
     },
     "columns": {
@@ -80,13 +81,13 @@
       "center-artboard": "Center Artboard",
       "copy-link": "Copy Link to Resume",
       "export-pdf": "Export PDF",
+      "redo": "Redo",
       "toggle-orientation": "Toggle Page Orientation",
       "toggle-page-break-line": "Toggle Page Break Line",
       "toggle-sidebars": "Toggle Sidebars",
-      "zoom-in": "Zoom In",
-      "zoom-out": "Zoom Out",
       "undo": "Undo",
-      "redo": "Redo"
+      "zoom-in": "Zoom In",
+      "zoom-out": "Zoom Out"
     }
   },
   "header": {
@@ -114,6 +115,9 @@
         "actions": {
           "photo-filters": "Photo Filters"
         },
+        "birthdate": {
+          "label": "Date of Birth"
+        },
         "heading": "Basics",
         "headline": {
           "label": "Headline"
@@ -121,9 +125,6 @@
         "name": {
           "label": "Full Name"
         },
-        "birthdate": {
-          "label": "Date of Birth"
-        },
         "photo-filters": {
           "effects": {
             "border": {
@@ -244,7 +245,7 @@
         "pdf": {
           "loading": {
             "primary": "Generating PDF",
-            "secondary": "Please wait as your PDF gets generated, this may take upto 15 seconds."
+            "secondary": "Please wait as your PDF gets generated, this may take up to 15 seconds."
           },
           "normal": {
             "primary": "PDF",
@@ -264,13 +265,15 @@
           "button": "GitHub Issues",
           "heading": "Bugs? Feature Requests?"
         },
+        "docs": "Documentation",
         "donate": {
           "body": "If you liked using Reactive Resume, please consider donating as much as you can to the cause of keeping the app up and running, without ads and free forever.",
           "button": "Buy me a coffee",
           "heading": "Donate to Reactive Resume"
         },
         "github": "Source Code",
-        "heading": "Links"
+        "heading": "Links",
+        "reddit": "Reddit"
       },
       "settings": {
         "global": {
@@ -293,6 +296,10 @@
             "primary": "Break Line",
             "secondary": "Show a line on all pages to mark the height of an A4 page"
           },
+          "format": {
+            "primary": "Paper Size",
+            "secondary": "Determines the dimensions of your resume pages"
+          },
           "heading": "Page",
           "orientation": {
             "disabled": "Has no effect when there is only one page",

client/public/locales/en/common.json

@@ -20,7 +20,7 @@
   "toast": {
     "error": {
       "upload-file-size": "Please upload only files under 2 megabytes.",
-      "upload-photo-size": "Please upload only photos under 2 megabytes, preferrably square."
+      "upload-photo-size": "Please upload only photos under 2 megabytes, preferably square."
     },
     "success": {
       "resume-link-copied": "A link to your resume has been copied to your clipboard."

client/public/locales/en/landing.json

@@ -20,22 +20,24 @@
   "links": {
     "heading": "Links",
     "links": {
+      "docs": "Documentation",
       "donate": "Donate",
       "github": "Source Code",
       "privacy": "Privacy Policy",
+      "reddit": "Reddit",
       "service": "Terms of Service"
     }
   },
   "screenshots": {
     "heading": "Screenshots"
   },
-  "testimonials": {
-    "heading": "Testimonials",
-    "body": "Good or bad, I would love to hear your opinion on Reactive Resume and how the experience has been for you.<br/>Here are some of the messages sent in by users across the world.",
-    "contact": "You can reach out to me through <1>my email</1> or through the contact form on <3>my website</3>."
-  },
   "summary": {
     "body": "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 or friends through a unique link and print it as a PDF, all for free, no ads, no tracking, without losing the integrity and privacy of your data.",
     "heading": "Summary"
+  },
+  "testimonials": {
+    "body": "Good or bad, I would love to hear your opinion on Reactive Resume and how the experience has been for you.<br/>Here are some of the messages sent in by users across the world.",
+    "contact": "You can reach out to me through <1>my email</1> or through the contact form on <3>my website</3>.",
+    "heading": "Testimonials"
   }
 }

client/public/locales/en/modals.json

@@ -71,6 +71,31 @@
         }
       },
       "heading": "Reset your password"
+    },
+    "profile": {
+      "heading": "Your Account",
+      "form": {
+        "avatar": {
+          "help-text": "You can update your profile picture on <1>Gravatar</1>"
+        },
+        "name": {
+          "label": "Full Name"
+        },
+        "email": {
+          "label": "Email Address",
+          "help-text": "It is not possible to update your email address at the moment, please create a new account instead."
+        }
+      },
+      "delete-account": {
+        "heading": "Delete Account and Data",
+        "body": "To delete your account, your data and all your resumes, type \"{{keyword}}\" into the textbox and click on the button. Please note that this is an irreversible action and your data cannot be retrieved again.",
+        "actions": {
+          "delete": "Delete Account"
+        }
+      },
+      "actions": {
+        "save": "Save Changes"
+      }
     }
   },
   "dashboard": {