Merge pull request #646 from AmruthPillai/i18n_main

New Crowdin updates

.dockerignore

@@ -1,8 +1,21 @@
-node_modules
-git
-.gitignore
-.dockerignore
-Dockerfile*
-docker-compose*
+# Build Artifacts
+dist
+.next
+
+# IDEs
+.vscode
+
+# Project Metadata
 README.md
-LICENSE
+CHANGELOG.md
+
+# Project Dependencies
+node_modules
+
+# Docker
+Dockerfile
+.dockerignore
+docker-compose.yml
+
+# Android App
+/app

.editorconfig

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

.env

@@ -1 +0,0 @@
-SKIP_PREFLIGHT_CHECK=true

.env.example

@@ -0,0 +1,30 @@
+# App
+TZ=UTC
+SECRET_KEY=change-me
+
+# URLs
+PUBLIC_URL=http://localhost:3000
+PUBLIC_SERVER_URL=http://localhost:3100
+
+# Database
+POSTGRES_HOST=localhost
+POSTGRES_PORT=5432
+POSTGRES_USERNAME=postgres
+POSTGRES_PASSWORD=postgres
+POSTGRES_DATABASE=reactive_resume
+POSTGRES_SSL_CERT=
+
+# Auth
+JWT_SECRET=change-me
+JWT_EXPIRY_TIME=604800
+
+# Google
+PUBLIC_GOOGLE_CLIENT_ID=change-me
+GOOGLE_CLIENT_SECRET=change-me
+GOOGLE_API_KEY=change-me
+
+# SendGrid (Optional)
+SENDGRID_API_KEY=
+SENDGRID_FORGOT_PASSWORD_TEMPLATE_ID=
+SENDGRID_FROM_NAME=
+SENDGRID_FROM_EMAIL=

.eslintrc

@@ -1,29 +0,0 @@
-{
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "sourceType": "module",
-    "allowImportExportEverywhere": false,
-    "codeFrame": false
-  },
-  "extends": [
-    "airbnb",
-    "plugin:react/recommended",
-    "prettier",
-    "prettier/react"
-  ],
-  "env": {
-    "browser": true,
-    "jest": true
-  },
-  "rules": {
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/click-events-have-key-events": 0,
-    "jsx-a11y/label-has-associated-control": 0,
-    "react/jsx-filename-extension": 0,
-    "react/no-array-index-key": 0,
-    "no-restricted-syntax": 0,
-    "no-param-reassign": 0,
-    "react/prop-types": 0,
-    "no-plusplus": 0
-  }
-}

.eslintrc.json

@@ -0,0 +1,38 @@
+{
+  "root": true,
+  "ignorePatterns": ["/app"],
+  "parser": "@typescript-eslint/parser",
+  "extends": ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
+  "plugins": ["@typescript-eslint/eslint-plugin", "simple-import-sort", "unused-imports"],
+  "rules": {
+    // TypeScript ESLint
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    // Simple Import Sort
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    // Unused Imports
+    "no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "none",
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["*.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ]
+}

.firebaserc

@@ -1,17 +0,0 @@
-{
-  "projects": {
-    "default": "rx-resume"
-  },
-  "targets": {
-    "rx-resume": {
-      "hosting": {
-        "app": [
-          "rx-resume"
-        ],
-        "docs": [
-          "docs-rx-resume"
-        ]
-      }
-    }
-  }
-}

.github/FUNDING.yml

@@ -1 +0,0 @@
-open_collective: reactive-resume

.github/ISSUE_TEMPLATE/bug-report.md

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

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,15 +1,14 @@
 ---
 name: Feature Request
 about: Suggest an idea for this project
-title: "[Feature] "
+title: "[FEATURE] "
 labels: enhancement
 assignees: ''
 
 ---
 
 **Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is.  
-Ex. I'm always frustrated when [...]
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.

.github/workflows/close-stale.yml

@@ -0,0 +1,16 @@
+name: 'Close stale issues and PRs'
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v5.0.0
+        with:
+          stale-pr-message: 'This PR is stale because it has been open for 30 days with no activity. Remove the stale label or comment on this PR, otherwise it would be closed in 5 days.'
+          stale-issue-message: 'This issue is stale because it has been open for 30 days with no activity. Remove the stale label or comment on this issue, otherwise it would be closed in 5 days.'
+          days-before-stale: 30
+          days-before-close: 5

.github/workflows/digitalocean-deploy.yml

@@ -0,0 +1,21 @@
+name: Deploy Latest Version on DigitalOcean
+
+on:
+  workflow_run:
+    workflows:
+      - Build and Push Docker Image
+    types:
+      - completed
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Install DigitalOcean CLI
+        uses: digitalocean/action-doctl@v2.1.0
+        with:
+          token: ${{ secrets.DIGITALOCEAN_TOKEN }}
+
+      - name: Create Deployment with Latest Version
+        run: doctl apps create-deployment ${{ secrets.DIGITALOCEAN_APP_ID }} --wait --force-rebuild

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

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

.github/workflows/main.yml

@@ -1,25 +0,0 @@
-name: Build & Deploy
-
-on:
-  push:
-    branches: [master]
-
-jobs:
-  build:
-    name: Build & Deploy
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout GitHub Repository
-        uses: actions/checkout@v2.0.0
-      - name: Install Project Dependencies
-        run: npm install
-      - name: Build App
-        run: npm run build
-      - name: Build Documentation
-        run: npm run docs:build
-      - name: Deploy to Firebase Hosting
-        uses: w9jds/firebase-action@v1.3.0
-        with:
-          args: deploy --only hosting
-        env:
-          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

.gitignore

@@ -1,30 +1,10 @@
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
+# Environment Variables
+.env
+.env.*
+!.env.example
 
-# testing
-/coverage
+# Project Dependencies
+node_modules
 
-# production
-/build
-
-# firebase
-.firebase
-
-# tailwind
-tailwind.css
-
-# vuepress
-docs/.vuepress/dist
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# macOS
+.DS_Store

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm install
+pnpm run lint
+pnpm run format

.nvmrc

@@ -0,0 +1 @@
+lts/*

.prettierignore

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

.prettierrc

@@ -1,7 +1,4 @@
 {
-  "printWidth": 100,
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
+  "printWidth": 120,
   "singleQuote": true
-}
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "lokalise.i18n-ally"]
+}

.vscode/launch.json

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

.vscode/settings.json

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

CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## [3.0.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.6...v3.0.0) (2022-03-11)
+
+
+### Features
+
+* **lang**: add German, Kannada and Tamil languages to the app ([3a524f9](https://github.com/AmruthPillai/Reactive-Resume/commit/3a524f9c9c7a0e446491265b2242ad3dfeae188c))
+* **docs:** add docusaurus workspace, initial setup of docs ([dc4aa0b](https://github.com/AmruthPillai/Reactive-Resume/commit/dc4aa0b496096bd59c45426bfcea6ba7db5f5c01))
+
+## [3.0.0-beta.6](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2022-03-11)
+
+### Features
+
+* **lang:** add language switcher on the landing page, in the footer ([8bc7d25](https://github.com/AmruthPillai/Reactive-Resume/commit/8bc7d2599ef6af7a07bfbe886c43844152b0d9f7))
+
+### Bug Fixes
+
+* **i18n:** add missing translation keys, update lang/locale logic ([7d8828a](https://github.com/AmruthPillai/Reactive-Resume/commit/7d8828a358d653bb162877a64c75028eb82678cd))
+* **webkit:** fix issue with webkit not supporting .at() ([2654cba](https://github.com/AmruthPillai/Reactive-Resume/commit/2654cba039eb73d33257c36fa90a52cabc9fda96))
+
+## [3.0.0-beta.5](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2022-03-10)
+
+### Bug Fixes
+
+* **app:** fix issue with using swipelayout ([972e8b1](https://github.com/AmruthPillai/Reactive-Resume/commit/972e8b1bcf9ad44d8915bf23d189711672937bc0))

Dockerfile

@@ -1,39 +0,0 @@
-## build image
-FROM node:13.12.0-alpine as build
-
-## set working directory
-WORKDIR /usr/src/app
-
-## add `/usr/src/app/node_modules/.bin` to $PATH
-ENV PATH /usr/src/app/node_modules/.bin:$PATH
-
-## install and cache app dependencies
-COPY package.json /usr/src/app/package.json
-
-## install git
-RUN apk add --no-cache git
-
-## install app dependencies
-RUN npm install
-
-## copy files
-COPY . /usr/src/app
-
-## build production app
-RUN npm run build
-
-## production environment
-FROM nginx:1.17.9-alpine
-
-## copy build artifacts to nginx
-COPY --from=build /usr/src/app/build /usr/share/nginx/html
-
-## copy custom nginx config
-RUN rm /etc/nginx/conf.d/default.conf
-COPY nginx/nginx.conf /etc/nginx/conf.d
-
-## export port 80
-EXPOSE 80
-
-## run nginx server
-CMD ["nginx", "-g", "daemon off;"]

Dockerfile-dev

@@ -1,20 +0,0 @@
-## base image
-FROM node:13.12.0-alpine
-
-## set working directory
-WORKDIR /usr/src/app
-
-## add `/usr/src/app/node_modules/.bin` to $PATH
-ENV PATH /usr/src/app/node_modules/.bin:$PATH
-
-## install and cache app dependencies
-COPY package.json /usr/src/app/package.json
-
-## install git
-RUN apk add --no-cache git
-
-## install app dependencies
-RUN npm install
-
-## start app
-CMD ["npm", "start"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Amruth Pillai
+Copyright (c) 2022 Amruth Pillai
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Procfile

@@ -1 +0,0 @@
-web: bin/boot

README.md

@@ -1,15 +1,95 @@
-<img src="https://i.imgur.com/4eps4gP.png" alt="Reactive Resume" width="256px"  height="256px"/>
+<img src="https://i.imgur.com/pc8Ingg.png" alt="Reactive Resume" width="256px" height="256px" />
 
 # Reactive Resume
 
-[![Build & Deploy](https://github.com/AmruthPillai/Reactive-Resume/workflows/Build%20&%20Deploy/badge.svg)](https://github.com/AmruthPillai/Reactive-Resume/actions)
-![Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)
-[![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume)](https://hub.docker.com/r/amruthpillai/reactive-resume)
-[![Localization](https://badges.crowdin.net/reactive-resume/localized.svg)](https://crowdin.com/project/reactive-resume)
-[![GitHub](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume)](https://github.com/AmruthPillai/Reactive-Resume/blob/develop/LICENSE)
+![Project Version](https://img.shields.io/github/package-json/v/AmruthPillai/Reactive-Resume?style=flat-square)
+![Project License](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume?style=flat-square)
+[![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume?style=flat-square)](https://hub.docker.com/r/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)
 
-#### A Free and Open-Source Resume Builder That Respects Your Privacy
+## [Go to App](https://rxresu.me) | [Docs](https://docs.rxresu.me)
 
-Welcome to the front page of **Reactive Resume**, a free and open-source Resume Builder web app that focuses on one thing, **Privacy**. And also few other important features such as minimalistic UI/UX, customizability, portability, regularly updated templates, etc. But the important thing is that, your personal data is yours alone.
+Reactive Resume is a free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3. With this app, you can create multiple resumes, share them with recruiters through a unique link and print as PDF, all for free, no advertisements, without losing the integrity and privacy of your data.
 
-### [Go to App](https://rxresu.me/) | [Documentation](https://docs.rxresu.me/)
+You have complete control over what goes into your resume, how it looks, what colors, what templates, even the layout in which sections placed. Want a dark mode resume? It’s as easy as editing 3 values and you’re done. You don’t need to wait to see your changes either. Everything you type, everything you change, appears immediately on your resume and gets updated in real time.
+
+## Features
+
+- Free, forever
+- No Advertising
+- No User Tracking
+- Sync your data across devices
+- Accessible in multiple languages
+- Import data from [LinkedIn](https://www.linkedin.com/), [JSON Resume](https://jsonresume.org/)
+- Manage multiple resumes with one account
+- Open Source (with large community support)
+- Send your resume to others with a unique sharable link
+- Pick any font from [Google Fonts](https://fonts.google.com/) to use on your resume
+- Choose from 6 vibrant templates and more coming soon
+- Export your resume to JSON or PDF format with just one click
+- Create an account using your email, or just Sign in with Google
+- Mix and match colors to any degree, even a dark mode resume?
+- Add sections, add pages and change layouts the way you want to
+- Tailor-made Backend and Database, isolated from Google, Amazon etc.
+- **Oh, and did I mention that it's free?**
+
+## Languages
+
+- English
+- German (Deutsch)
+- Hindi (हिन्दी)
+- Kannada (ಕನ್ನಡ) (@aksh1251)
+- Tamil (தமிழ்)
+
+Help by [translating Reactive Resume](https://translate.rxresu.me) to your language!
+
+## Tutorial
+
+The docs include an extensive [Tutorial](https://docs.rxresu.me/tutorial) section which outline the features of Reactive Resume and help you through building your first resume on the app.
+
+## Build from Source
+
+For extensive information on how to build the app on your local machine, head over to the docs's [Source Code](https://docs.rxresu.me/source-code) section.
+
+## Contributing
+
+This project makes use of [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) style and workflow for commit messages to ensure that the CHANGELOG is auto-generated. In general, this project follows the "fork-and-pull" Git workflow.
+
+1. **Fork** the repo on GitHub
+2. **Clone** the project to your own machine
+3. **Commit** changes to your own branch
+4. **Push** your work back up to your fork
+5. Submit a **Pull Request** so that we can review your changes
+
+NOTE: Be sure to merge the latest from `main` before making a pull request!
+
+## Bugs? Feature Requests?
+
+Use the [GitHub Issues](https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose) platform to notify me about bugs or new features that you would like to see in Reactive Resume. Please check before creating new issues as there might already be one.
+
+## Donations
+
+Reactive Resume would be nothing without the folks who supported me and kept the project alive in the beginning, and your cotinued support is what keeps me going. If you found Reactive Resume to be useful, helpful or just insightful and appreciate the effort I took to make the project, please consider donating as little or as much as your can.
+
+### [☕️ Buy me a coffee](https://www.buymeacoffee.com/AmruthPillai) | [💸 PayPal](https://paypal.me/RajaRajanA)
+
+## Infrastructure
+
+- [Next.js](https://nextjs.org/), frontend
+- [NestJS](https://nestjs.com/), backend
+- [PostgreSQL](https://www.postgresql.org/), database
+- [DigitalOcean](https://www.digitalocean.com/), infrastructure provider
+- [Crowdin](https://translate.rxresu.me/), translation management platform
+
+&nbsp;
+
+<a href="https://pillai.xyz/digitalocean">
+  <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="200px" />
+</a>
+
+## License
+
+Reactive Resume is packaged and distributed using the [MIT License](https://choosealicense.com/licenses/mit/) which allows for commercial use, distribution, modification and private use provided that all copies of the software contain the same license and copyright.
+
+_By the community, for the community._  
+A passion project by [Amruth Pillai](https://amruthpillai.com/)

app.json

@@ -1,13 +0,0 @@
-{
-  "name": "Reactive Resume",
-  "description": "A one-of-a-kind resume builder that's not out to get your data. Completely secure, customizable, portable, open-source and free forever.",
-  "website": "https://rxresu.me/",
-  "repository": "https://github.com/AmruthPillai/Reactive-Resume",
-  "logo": "https://i.imgur.com/ugpElge.png",
-  "buildpacks": [
-    {
-      "url": "mars/create-react-app"
-    }
-  ],
-  "keywords": ["react", "resume", "static"]
-}

app/.gitignore

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

app/app/.editorconfig

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

app/app/.gitignore

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

app/app/build.gradle

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

app/app/proguard-rules.pro

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

app/app/src/main/AndroidManifest.xml

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

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

@@ -0,0 +1,76 @@
+package me.rxresu.app
+
+import android.annotation.SuppressLint
+import android.graphics.Bitmap
+import android.os.Bundle
+import android.view.KeyEvent
+import android.webkit.WebResourceError
+import android.webkit.WebResourceRequest
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import androidx.appcompat.app.AppCompatActivity
+
+class MainActivity : AppCompatActivity() {
+
+    private lateinit var webView: WebView
+
+    private var isLoaded: Boolean = false
+    private var webURL = "https://rxresu.me"
+
+    @SuppressLint("SetJavaScriptEnabled")
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+
+        webView = findViewById(R.id.webview)
+
+        webView.settings.javaScriptEnabled = true
+        webView.settings.userAgentString = "Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Mobile Safari/537.36"
+    }
+
+    override fun onResume() {
+        if (!isLoaded) loadWebView()
+
+        super.onResume()
+    }
+
+    private fun loadWebView() {
+        webView.loadUrl(webURL)
+
+        webView.webViewClient = object : WebViewClient() {
+            override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
+                val url = request?.url.toString()
+                view?.loadUrl(url)
+                return super.shouldOverrideUrlLoading(view, request)
+            }
+
+            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+                super.onPageStarted(view, url, favicon)
+            }
+
+            override fun onPageFinished(view: WebView?, url: String?) {
+                isLoaded = true
+                super.onPageFinished(view, url)
+            }
+
+            override fun onReceivedError(view: WebView, request: WebResourceRequest, error: WebResourceError) {
+                isLoaded = false
+                super.onReceivedError(view, request, error)
+            }
+        }
+    }
+
+    override fun onKeyDown(keyCode: Int, event: KeyEvent): Boolean {
+        if (event.action == KeyEvent.ACTION_DOWN) {
+            if (keyCode == KeyEvent.KEYCODE_BACK) {
+                if (webView.canGoBack()) {
+                    webView.goBack()
+                }
+
+                return true
+            }
+        }
+
+        return super.onKeyDown(keyCode, event)
+    }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+<resources>
+    <style name="Theme.ReactiveResume" parent="Theme.MaterialComponents.DayNight.DarkActionBar" />
+
+    <style name="Theme.ReactiveResume.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+    </style>
+
+    <style name="Theme.ReactiveResume.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
+
+    <style name="Theme.ReactiveResume.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
+</resources>

app/build.gradle

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

app/gradle.properties

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

app/gradle/wrapper/gradle-wrapper.properties

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

app/gradlew

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

app/gradlew.bat

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

app/settings.gradle

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

client/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["../.eslintrc.json", "next/core-web-vitals"],
+  "ignorePatterns": [".next", "__ENV.js"],
+  "rules": {
+    "@next/next/no-img-element": "off",
+    "@next/next/no-sync-scripts": "off"
+  }
+}

client/.gitignore

@@ -0,0 +1,39 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# react-env
+__ENV.js

client/Dockerfile

@@ -0,0 +1,52 @@
+FROM node:16-alpine as dependencies
+
+RUN apk add --no-cache curl g++ make python3 \
+  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+WORKDIR /app
+
+COPY package.json pnpm-*.yaml ./
+COPY ./schema/package.json ./schema/package.json
+COPY ./client/package.json ./client/package.json
+
+RUN pnpm install --frozen-lockfile
+
+FROM node:16-alpine as builder
+
+RUN apk add --no-cache curl g++ make python3 \
+  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+WORKDIR /app
+
+COPY . .
+
+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
+
+RUN pnpm run build:schema
+RUN pnpm run build:client
+
+FROM node:16-alpine as production
+
+WORKDIR /app
+
+RUN apk add --no-cache curl \
+  && curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm
+
+COPY --from=builder /app/pnpm-*.yaml ./
+COPY --from=builder /app/package.json ./
+COPY --from=builder /app/client/package.json ./client/package.json
+
+RUN pnpm install -F client --frozen-lockfile --prod
+
+COPY --from=builder /app/client/.next ./client/.next
+COPY --from=builder /app/client/public ./client/public
+COPY --from=builder /app/client/next.config.js ./client/next.config.js
+COPY --from=builder /app/client/next-i18next.config.js ./client/next-i18next.config.js
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD [ "pnpm", "run", "start:client" ]

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

@@ -0,0 +1,28 @@
+.container {
+  @apply flex w-auto items-center justify-center;
+  @apply fixed inset-x-0 bottom-6;
+  @apply transition-[margin-left,margin-right] duration-200;
+}
+
+.pushLeft {
+  @apply xl:ml-[30vw] 2xl:ml-[28vw];
+}
+
+.pushRight {
+  @apply xl:mr-[30vw] 2xl:mr-[28vw];
+}
+
+.controller {
+  @apply z-20 flex items-center justify-center shadow-lg;
+  @apply flex rounded-l-full rounded-r-full px-4;
+  @apply bg-neutral-50 dark:bg-neutral-800;
+  @apply opacity-70 transition-opacity duration-200 hover:opacity-100;
+
+  > button {
+    @apply px-2.5 py-2.5;
+  }
+
+  > hr {
+    @apply mx-3 h-5 w-0.5 bg-neutral-900/40 dark:bg-neutral-50/20;
+  }
+}

client/components/build/Center/ArtboardController.tsx

@@ -0,0 +1,141 @@
+import {
+  AlignHorizontalCenter,
+  AlignVerticalCenter,
+  Download,
+  FilterCenterFocus,
+  InsertPageBreak,
+  Link,
+  ViewSidebar,
+  ZoomIn,
+  ZoomOut,
+} from '@mui/icons-material';
+import { ButtonBase, Divider, Tooltip, useMediaQuery, useTheme } from '@mui/material';
+import clsx from 'clsx';
+import { get } from 'lodash';
+import { useTranslation } from 'next-i18next';
+import toast from 'react-hot-toast';
+import { useMutation } from 'react-query';
+import { ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
+
+import { ServerError } from '@/services/axios';
+import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
+import { togglePageBreakLine, togglePageOrientation, toggleSidebar } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import getResumeUrl from '@/utils/getResumeUrl';
+
+import styles from './ArtboardController.module.scss';
+
+const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, centerView }) => {
+  const { t } = useTranslation();
+
+  const theme = useTheme();
+  const dispatch = useAppDispatch();
+
+  const resume = useAppSelector((state) => state.resume);
+  const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
+  const { left, right } = useAppSelector((state) => state.build.sidebar);
+  const orientation = useAppSelector((state) => state.build.page.orientation);
+
+  const { mutateAsync, isLoading } = useMutation<string, ServerError, PrintResumeAsPdfParams>(printResumeAsPdf);
+
+  const handleTogglePageBreakLine = () => dispatch(togglePageBreakLine());
+
+  const handleTogglePageOrientation = () => dispatch(togglePageOrientation());
+
+  const handleToggleSidebar = () => {
+    dispatch(toggleSidebar({ sidebar: 'left' }));
+    dispatch(toggleSidebar({ sidebar: 'right' }));
+  };
+
+  const handleCopyLink = async () => {
+    const url = getResumeUrl(resume, { withHost: true });
+    await navigator.clipboard.writeText(url);
+
+    toast.success(t('common.toast.success.resume-link-copied'));
+  };
+
+  const handleExportPDF = async () => {
+    const download = (await import('downloadjs')).default;
+
+    const slug = get(resume, 'slug');
+    const username = get(resume, 'user.username');
+
+    const url = await mutateAsync({ username, slug });
+
+    download(`/api${url}`);
+  };
+
+  return (
+    <div
+      className={clsx({
+        [styles.container]: true,
+        [styles.pushLeft]: left.open,
+        [styles.pushRight]: right.open,
+      })}
+    >
+      <div className={styles.controller}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-in') as string}>
+          <ButtonBase onClick={() => zoomIn(0.25)}>
+            <ZoomIn fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-out') as string}>
+          <ButtonBase onClick={() => zoomOut(0.25)}>
+            <ZoomOut fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.center-artboard') as string}>
+          <ButtonBase onClick={() => centerView(0.95)}>
+            <FilterCenterFocus fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+
+        <Divider />
+
+        {isDesktop && (
+          <>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}>
+              <ButtonBase onClick={handleTogglePageOrientation}>
+                {orientation === 'vertical' ? (
+                  <AlignHorizontalCenter fontSize="medium" />
+                ) : (
+                  <AlignVerticalCenter fontSize="medium" />
+                )}
+              </ButtonBase>
+            </Tooltip>
+
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line') as string}>
+              <ButtonBase onClick={handleTogglePageBreakLine}>
+                <InsertPageBreak fontSize="medium" />
+              </ButtonBase>
+            </Tooltip>
+
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars') as string}>
+              <ButtonBase onClick={handleToggleSidebar}>
+                <ViewSidebar fontSize="medium" />
+              </ButtonBase>
+            </Tooltip>
+
+            <Divider />
+          </>
+        )}
+
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.copy-link') as string}>
+          <ButtonBase onClick={handleCopyLink}>
+            <Link fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.export-pdf') as string}>
+          <ButtonBase onClick={handleExportPDF} disabled={isLoading}>
+            <Download fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default ArtboardController;

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

@@ -0,0 +1,13 @@
+.center {
+  @apply mx-0 flex flex-grow pt-12 lg:pt-16;
+  @apply transition-[margin-left,margin-right] duration-200;
+  @apply bg-neutral-200 dark:bg-neutral-900;
+}
+
+.wrapper {
+  @apply h-full w-full #{!important};
+}
+
+.artboard {
+  @apply flex gap-8;
+}

client/components/build/Center/Center.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+
+import { useAppSelector } from '@/store/hooks';
+
+import ArtboardController from './ArtboardController';
+import styles from './Center.module.scss';
+import Header from './Header';
+import Page from './Page';
+
+const Center = () => {
+  const orientation = useAppSelector((state) => state.build.page.orientation);
+
+  const resume = useAppSelector((state) => state.resume);
+  const layout: string[][][] = get(resume, 'metadata.layout');
+
+  if (isEmpty(resume)) return null;
+
+  return (
+    <div className={clsx(styles.center)}>
+      <Header />
+
+      <TransformWrapper
+        centerOnInit
+        minScale={0.25}
+        initialScale={0.95}
+        limitToBounds={false}
+        centerZoomedOut={false}
+        pinch={{ step: 1 }}
+        wheel={{ step: 0.1 }}
+      >
+        {(controllerProps) => (
+          <>
+            <TransformComponent wrapperClass={styles.wrapper}>
+              <div
+                className={clsx({
+                  [styles.artboard]: true,
+                  'flex-col': orientation === 'vertical',
+                })}
+              >
+                {layout.map((_, pageIndex) => (
+                  <Page key={pageIndex} page={pageIndex} showPageNumbers />
+                ))}
+              </div>
+            </TransformComponent>
+
+            <ArtboardController {...controllerProps} />
+          </>
+        )}
+      </TransformWrapper>
+    </div>
+  );
+};
+
+export default Center;

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

@@ -0,0 +1,25 @@
+.header {
+  @apply mx-0 flex justify-between shadow;
+  @apply bg-neutral-800 text-neutral-100;
+  @apply transition-[margin-left,margin-right] duration-200;
+
+  button > svg {
+    @apply text-base text-neutral-100;
+  }
+}
+
+.pushLeft {
+  @apply xl:ml-[30vw] 2xl:ml-[28vw];
+}
+
+.pushRight {
+  @apply xl:mr-[30vw] 2xl:mr-[28vw];
+}
+
+.title {
+  @apply flex items-center justify-center;
+
+  h1 {
+    @apply ml-2;
+  }
+}

client/components/build/Center/Header.tsx

@@ -0,0 +1,216 @@
+import {
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  CopyAll,
+  Delete,
+  DriveFileRenameOutline,
+  Home as HomeIcon,
+  KeyboardArrowDown as KeyboardArrowDownIcon,
+  Link as LinkIcon,
+} from '@mui/icons-material';
+import {
+  AppBar,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { Resume } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import { useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { useMutation } from 'react-query';
+
+import { RESUMES_QUERY } from '@/constants/index';
+import { ServerError } from '@/services/axios';
+import queryClient from '@/services/react-query';
+import { deleteResume, DeleteResumeParams, duplicateResume, DuplicateResumeParams } from '@/services/resume';
+import { setSidebarState, toggleSidebar } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
+import getResumeUrl from '@/utils/getResumeUrl';
+
+import styles from './Header.module.scss';
+
+const Header = () => {
+  const theme = useTheme();
+
+  const router = useRouter();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+
+  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);
+  const { left, right } = useAppSelector((state) => state.build.sidebar);
+
+  const name = useMemo(() => get(resume, 'name'), [resume]);
+
+  useEffect(() => {
+    if (isDesktop) {
+      dispatch(setSidebarState({ sidebar: 'left', state: { open: true } }));
+      dispatch(setSidebarState({ sidebar: 'right', state: { open: true } }));
+    } else {
+      dispatch(setSidebarState({ sidebar: 'left', state: { open: false } }));
+      dispatch(setSidebarState({ sidebar: 'right', state: { open: false } }));
+    }
+  }, [isDesktop, dispatch]);
+
+  const toggleLeftSidebar = () => dispatch(toggleSidebar({ sidebar: 'left' }));
+
+  const toggleRightSidebar = () => dispatch(toggleSidebar({ sidebar: 'right' }));
+
+  const goBack = () => router.push('/dashboard');
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleRename = () => {
+    handleClose();
+
+    dispatch(
+      setModalState({
+        modal: 'dashboard.rename-resume',
+        state: {
+          open: true,
+          payload: {
+            item: resume,
+            onComplete: (newResume: Resume) => {
+              queryClient.invalidateQueries(RESUMES_QUERY);
+
+              router.push(`/${resume.user.username}/${newResume.slug}/build`);
+            },
+          },
+        },
+      })
+    );
+  };
+
+  const handleDuplicate = async () => {
+    handleClose();
+
+    const newResume = await duplicateMutation({ id: resume.id });
+
+    queryClient.invalidateQueries(RESUMES_QUERY);
+
+    router.push(`/${resume.user.username}/${newResume.slug}/build`);
+  };
+
+  const handleDelete = async () => {
+    handleClose();
+
+    await deleteMutation({ id: resume.id });
+
+    queryClient.invalidateQueries(RESUMES_QUERY);
+
+    goBack();
+  };
+
+  const handleShareLink = async () => {
+    handleClose();
+
+    const url = getResumeUrl(resume, { withHost: true });
+    await navigator.clipboard.writeText(url);
+
+    toast.success(t('common.toast.success.resume-link-copied'));
+  };
+
+  return (
+    <AppBar elevation={0} position="fixed">
+      <Toolbar
+        variant="regular"
+        className={clsx({
+          [styles.header]: true,
+          [styles.pushLeft]: left.open,
+          [styles.pushRight]: right.open,
+        })}
+      >
+        <IconButton onClick={toggleLeftSidebar}>{left.open ? <ChevronLeftIcon /> : <ChevronRightIcon />}</IconButton>
+
+        <div className={styles.title}>
+          <IconButton className="opacity-50 hover:opacity-100" onClick={goBack}>
+            <HomeIcon />
+          </IconButton>
+
+          <span className="opacity-50">{'/'}</span>
+
+          <h1>{name}</h1>
+
+          <IconButton onClick={handleClick}>
+            <KeyboardArrowDownIcon />
+          </IconButton>
+
+          <Menu open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={handleClose}>
+            <MenuItem onClick={handleRename}>
+              <ListItemIcon>
+                <DriveFileRenameOutline className="scale-90" />
+              </ListItemIcon>
+              <ListItemText>{t('builder.header.menu.rename')}</ListItemText>
+            </MenuItem>
+
+            <MenuItem onClick={handleDuplicate}>
+              <ListItemIcon>
+                <CopyAll className="scale-90" />
+              </ListItemIcon>
+              <ListItemText>{t('builder.header.menu.duplicate')}</ListItemText>
+            </MenuItem>
+
+            {resume.public ? (
+              <MenuItem onClick={handleShareLink}>
+                <ListItemIcon>
+                  <LinkIcon className="scale-90" />
+                </ListItemIcon>
+                <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
+              </MenuItem>
+            ) : (
+              <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.share-link') as string}>
+                <div>
+                  <MenuItem>
+                    <ListItemIcon>
+                      <LinkIcon className="scale-90" />
+                    </ListItemIcon>
+                    <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
+                  </MenuItem>
+                </div>
+              </Tooltip>
+            )}
+
+            <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.delete') as string}>
+              <MenuItem onClick={handleDelete}>
+                <ListItemIcon>
+                  <Delete className="scale-90" />
+                </ListItemIcon>
+                <ListItemText>{t('builder.header.menu.delete')}</ListItemText>
+              </MenuItem>
+            </Tooltip>
+          </Menu>
+        </div>
+
+        <IconButton onClick={toggleRightSidebar}>{right.open ? <ChevronRightIcon /> : <ChevronLeftIcon />}</IconButton>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,34 @@
+.container {
+  @apply flex flex-col items-center gap-2;
+  @apply rounded-sm;
+}
+
+.page {
+  width: 210mm;
+  min-height: 297mm;
+
+  @apply relative z-50 grid shadow;
+  @apply print:shadow-none;
+
+  :global(.printer-mode) & {
+    @apply shadow-none;
+  }
+
+  &.break::after {
+    content: 'A4 Page Break';
+    top: calc(297mm - 19px);
+
+    @apply absolute w-full border-b border-dashed border-neutral-800/75;
+    @apply flex items-end justify-end pr-2 pb-0.5 text-xs font-bold text-neutral-800/75;
+    @apply print:hidden;
+
+    :global(.preview-mode) &,
+    :global(.printer-mode) & {
+      @apply hidden;
+    }
+  }
+}
+
+.pageNumber {
+  @apply text-center font-bold print:hidden;
+}

client/components/build/Center/Page.tsx

@@ -0,0 +1,59 @@
+import { css } from '@emotion/css';
+import { CustomCSS, Theme, Typography } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+
+import { useAppSelector } from '@/store/hooks';
+import templateMap from '@/templates/templateMap';
+import { generateThemeStyles, generateTypographyStyles } from '@/utils/styles';
+import { PageProps } from '@/utils/template';
+
+import styles from './Page.module.scss';
+
+type Props = PageProps & {
+  showPageNumbers?: boolean;
+};
+
+const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
+  const { t } = useTranslation();
+
+  const resume = useAppSelector((state) => state.resume);
+  const breakLine: boolean = useAppSelector((state) => state.build.page.breakLine);
+
+  const theme: Theme = 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 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={clsx({
+          reset: true,
+          [styles.page]: true,
+          [styles.break]: breakLine,
+          [css(themeCSS)]: true,
+          [css(typographyCSS)]: true,
+          [css(customCSS.value)]: customCSS.visible,
+        })}
+      >
+        {TemplatePage && <TemplatePage page={page} />}
+      </div>
+
+      {showPageNumbers && (
+        <h4 className={styles.pageNumber}>
+          {t('builder.common.glossary.page')} {page + 1}
+        </h4>
+      )}
+    </div>
+  );
+};
+
+export default Page;

client/components/build/LeftSidebar/LeftSidebar.module.scss

@@ -0,0 +1,45 @@
+.container {
+  @apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw];
+  @apply bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50;
+  @apply relative flex border-r-2 border-neutral-50/10;
+
+  nav {
+    @apply absolute inset-y-0 left-0;
+    @apply w-14 py-4 md:w-16 md:px-2;
+    @apply bg-neutral-100 shadow dark:bg-neutral-800;
+    @apply flex flex-col items-center justify-between;
+
+    hr {
+      @apply mt-2;
+    }
+
+    > div {
+      @apply grid gap-2;
+    }
+
+    .sections svg {
+      @apply opacity-75 transition-opacity hover:opacity-100;
+    }
+  }
+
+  main {
+    @apply overflow-y-scroll p-4;
+    @apply absolute inset-y-0 left-12 right-0 md:left-16;
+
+    > section {
+      @apply grid gap-4;
+      @apply pt-5 pb-7 first:pt-0;
+      @apply border-b border-neutral-900/10 last:border-b-0 dark:border-neutral-50/10;
+
+      hr {
+        @apply my-2;
+      }
+    }
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

client/components/build/LeftSidebar/LeftSidebar.tsx

@@ -0,0 +1,126 @@
+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 get from 'lodash/get';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+import { validate } from 'uuid';
+
+import Logo from '@/components/shared/Logo';
+import { getCustomSections, left } from '@/config/sections';
+import { setSidebarState } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { addSection } from '@/store/resume/resumeSlice';
+
+import styles from './LeftSidebar.module.scss';
+import Section from './sections/Section';
+
+const LeftSidebar = () => {
+  const theme = useTheme();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+
+  const sections = useAppSelector((state) => state.resume.sections);
+  const { open } = useAppSelector((state) => state.build.sidebar.left);
+
+  const customSections = useMemo(() => getCustomSections(sections), [sections]);
+
+  const handleOpen = () => dispatch(setSidebarState({ sidebar: 'left', state: { open: true } }));
+
+  const handleClose = () => dispatch(setSidebarState({ sidebar: 'left', state: { open: false } }));
+
+  const handleClick = (id: string) => {
+    const elementId = validate(id) ? `#section-${id}` : `#${id}`;
+    const section = document.querySelector(elementId);
+
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  const handleAddSection = () => {
+    const newSection: SectionRecord = {
+      name: 'Custom Section',
+      type: 'custom',
+      visible: true,
+      columns: 2,
+      items: [],
+    };
+
+    dispatch(addSection({ value: newSection }));
+  };
+
+  return (
+    <SwipeableDrawer
+      open={open}
+      anchor="left"
+      onOpen={handleOpen}
+      onClose={handleClose}
+      PaperProps={{ className: '!shadow-lg' }}
+      variant={isDesktop ? 'persistent' : 'temporary'}
+    >
+      <div className={styles.container}>
+        <nav>
+          <div>
+            <Link href="/dashboard">
+              <a className="inline-flex">
+                <Logo size={40} />
+              </a>
+            </Link>
+            <Divider />
+          </div>
+
+          <div className={styles.sections}>
+            {left.map(({ id, icon }) => (
+              <Tooltip
+                arrow
+                key={id}
+                placement="right"
+                title={get(sections, `${id}.name`, t<string>(`builder.leftSidebar.sections.${id}.heading`))}
+              >
+                <IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
+              </Tooltip>
+            ))}
+
+            {customSections.map(({ id }) => (
+              <Tooltip key={id} title={get(sections, `${id}.name`, '')} placement="right" arrow>
+                <IconButton onClick={() => handleClick(id)}>
+                  <Star />
+                </IconButton>
+              </Tooltip>
+            ))}
+          </div>
+
+          <div />
+        </nav>
+
+        <main>
+          {left.map(({ id, component }) => (
+            <section key={id} id={id}>
+              {component}
+            </section>
+          ))}
+
+          {customSections.map(({ id }) => (
+            <section key={id} id={`section-${id}`}>
+              <Section path={`sections.${id}`} isEditable isHideable isDeletable />
+            </section>
+          ))}
+
+          <div className="py-6 text-right">
+            <Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleAddSection}>
+              {t('builder.common.actions.add', { token: t('builder.leftSidebar.sections.section.heading') })}
+            </Button>
+          </div>
+        </main>
+      </div>
+    </SwipeableDrawer>
+  );
+};
+
+export default LeftSidebar;

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

@@ -0,0 +1,81 @@
+import { PhotoFilter } from '@mui/icons-material';
+import { Button, Divider, Popover } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+
+import Heading from '@/components/shared/Heading';
+import ResumeInput from '@/components/shared/ResumeInput';
+
+import PhotoFilters from './PhotoFilters';
+import PhotoUpload from './PhotoUpload';
+
+const Basics = () => {
+  const { t } = useTranslation();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Heading path="sections.basics" name={t('builder.leftSidebar.sections.basics.heading')} />
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="flex flex-col items-center gap-4 sm:col-span-2 sm:flex-row">
+          <PhotoUpload />
+
+          <div className="flex w-full flex-col-reverse gap-4 sm:flex-col sm:gap-2">
+            <ResumeInput label={t('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
+
+            <Button variant="outlined" startIcon={<PhotoFilter />} onClick={handleClick}>
+              {t('builder.leftSidebar.sections.basics.actions.photo-filters')}
+            </Button>
+
+            <Popover
+              open={Boolean(anchorEl)}
+              anchorEl={anchorEl}
+              onClose={handleClose}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <PhotoFilters />
+            </Popover>
+          </div>
+        </div>
+
+        <ResumeInput label={t('builder.common.form.email.label')} path="basics.email" className="sm:col-span-2" />
+        <ResumeInput label={t('builder.common.form.phone.label')} path="basics.phone" />
+        <ResumeInput label={t('builder.common.form.url.label')} path="basics.website" />
+
+        <Divider className="sm:col-span-2" />
+
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.basics.headline.label')}
+          path="basics.headline"
+          className="sm:col-span-2"
+        />
+        <ResumeInput
+          type="textarea"
+          label={t('builder.common.form.summary.label')}
+          path="basics.summary"
+          className="sm:col-span-2"
+          markdownSupported
+        />
+      </div>
+    </>
+  );
+};
+
+export default Basics;

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

@@ -0,0 +1,31 @@
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import ResumeInput from '@/components/shared/ResumeInput';
+
+const Location = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Heading path="sections.location" name={t('builder.leftSidebar.sections.location.heading')} />
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.location.address.label')}
+          path="basics.location.address"
+          className="sm:col-span-2"
+        />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.city.label')} path="basics.location.city" />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.region.label')} path="basics.location.region" />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.country.label')} path="basics.location.country" />
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.location.postal-code.label')}
+          path="basics.location.postalCode"
+        />
+      </div>
+    </>
+  );
+};
+
+export default Location;

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

@@ -0,0 +1,97 @@
+import { Circle, Square, SquareRounded } from '@mui/icons-material';
+import { Checkbox, Divider, FormControlLabel, Slider, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { Photo, PhotoShape } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const PhotoFilters = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const photo: Photo = useAppSelector((state) => get(state.resume, 'basics.photo'));
+  const size: number = get(photo, 'filters.size', 128);
+  const shape: PhotoShape = get(photo, 'filters.shape', 'square');
+  const grayscale: boolean = get(photo, 'filters.grayscale', false);
+  const border: boolean = get(photo, 'filters.border', false);
+
+  const handleChangeSize = (size: number | number[]) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.size', value: size }));
+
+  const handleChangeShape = (shape: PhotoShape) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.shape', value: shape }));
+
+  const handleSetGrayscale = (value: boolean) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.grayscale', value }));
+
+  const handleSetBorder = (value: boolean) => dispatch(setResumeState({ path: 'basics.photo.filters.border', value }));
+
+  return (
+    <div className="flex flex-col gap-2 p-5 dark:bg-neutral-800">
+      <div>
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
+
+        <div className="mx-2">
+          <Slider
+            min={32}
+            max={512}
+            step={2}
+            marks={[
+              { value: 32, label: '32' },
+              { value: 128, label: '128' },
+              { value: 256, label: '256' },
+              { value: 512, label: '512' },
+            ]}
+            value={size}
+            onChange={(_, value: number | number[]) => handleChangeSize(value)}
+          />
+        </div>
+      </div>
+
+      <Divider />
+
+      <div>
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}</h4>
+
+        <div className="flex items-center">
+          <FormControlLabel
+            label={t('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label') as string}
+            control={
+              <Checkbox color="secondary" checked={grayscale} onChange={(_, value) => handleSetGrayscale(value)} />
+            }
+          />
+
+          <FormControlLabel
+            label={t('builder.leftSidebar.sections.basics.photo-filters.effects.border.label') as string}
+            control={<Checkbox color="secondary" checked={border} onChange={(_, value) => handleSetBorder(value)} />}
+          />
+        </div>
+      </div>
+
+      <Divider />
+
+      <div className="flex flex-col gap-2">
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
+
+        <ToggleButtonGroup exclusive value={shape} onChange={(_, value) => handleChangeShape(value)}>
+          <ToggleButton size="small" value="square" className="w-14">
+            <Square fontSize="small" />
+          </ToggleButton>
+
+          <ToggleButton size="small" value="rounded-square" className="w-14">
+            <SquareRounded fontSize="small" />
+          </ToggleButton>
+
+          <ToggleButton size="small" value="circle" className="w-14">
+            <Circle fontSize="small" />
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </div>
+    </div>
+  );
+};
+
+export default PhotoFilters;

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

@@ -0,0 +1,83 @@
+import { Avatar, IconButton, Skeleton, Tooltip } from '@mui/material';
+import { Photo, Resume } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useTranslation } from 'next-i18next';
+import React, { useRef } from 'react';
+import toast from 'react-hot-toast';
+import { useMutation } from 'react-query';
+
+import { ServerError } from '@/services/axios';
+import { deletePhoto, DeletePhotoParams, uploadPhoto, UploadPhotoParams } from '@/services/resume';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const FILE_UPLOAD_MAX_SIZE = 2000000; // 2 MB
+
+const PhotoUpload: React.FC = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const id: number = useAppSelector((state) => get(state.resume, 'id'));
+  const photo: Photo = useAppSelector((state) => get(state.resume, 'basics.photo'));
+
+  const { mutateAsync: uploadMutation, isLoading } = useMutation<Resume, ServerError, UploadPhotoParams>(uploadPhoto);
+
+  const { mutateAsync: deleteMutation } = useMutation<Resume, ServerError, DeletePhotoParams>(deletePhoto);
+
+  const handleClick = async () => {
+    if (fileInputRef.current) {
+      if (!isEmpty(photo.url)) {
+        try {
+          await deleteMutation({ id });
+        } finally {
+          dispatch(setResumeState({ path: 'basics.photo.url', value: '' }));
+        }
+      } else {
+        fileInputRef.current.click();
+      }
+
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      const file = event.target.files[0];
+
+      if (file.size > FILE_UPLOAD_MAX_SIZE) {
+        toast.error(t('common.toast.error.upload-photo-size'));
+        return;
+      }
+
+      const resume = await uploadMutation({ id, file });
+
+      dispatch(setResumeState({ path: 'basics.photo.url', value: get(resume, 'basics.photo.url', '') }));
+    }
+  };
+
+  return (
+    <IconButton onClick={handleClick}>
+      {isLoading ? (
+        <Skeleton variant="circular" width={96} height={96} />
+      ) : (
+        <Tooltip
+          title={
+            isEmpty(photo.url)
+              ? (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload') as string)
+              : (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove') as string)
+          }
+        >
+          <Avatar sx={{ width: 96, height: 96 }} src={photo.url} />
+        </Tooltip>
+      )}
+
+      <input hidden type="file" ref={fileInputRef} onChange={handleChange} accept="image/*" />
+    </IconButton>
+  );
+};
+
+export default PhotoUpload;

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

@@ -0,0 +1,52 @@
+import { Add } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { ListItem } from '@reactive-resume/schema';
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import List from '@/components/shared/List';
+import { useAppDispatch } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
+import { duplicateItem } from '@/store/resume/resumeSlice';
+
+const Profiles = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const handleAdd = () => {
+    dispatch(setModalState({ modal: 'builder.sections.profile', state: { open: true } }));
+  };
+
+  const handleEdit = (item: ListItem) => {
+    dispatch(setModalState({ modal: 'builder.sections.profile', state: { open: true, payload: { item } } }));
+  };
+
+  const handleDuplicate = (item: ListItem) => {
+    dispatch(duplicateItem({ path: 'basics.profiles', value: item }));
+  };
+
+  return (
+    <>
+      <Heading path="sections.profiles" name={t('builder.leftSidebar.sections.profiles.heading')} />
+
+      <List
+        path="basics.profiles"
+        titleKey="username"
+        subtitleKey="network"
+        onEdit={handleEdit}
+        onDuplicate={handleDuplicate}
+      />
+
+      <footer className="flex justify-end">
+        <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
+          {t('builder.common.actions.add', {
+            token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+          })}
+        </Button>
+      </footer>
+    </>
+  );
+};
+
+export default Profiles;

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

@@ -0,0 +1,84 @@
+import { Add } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { ListItem } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { validate } from 'uuid';
+
+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 SectionSettings from './SectionSettings';
+
+type Props = {
+  path: `sections.${string}`;
+  name?: string;
+  titleKey?: string;
+  subtitleKey?: string;
+  isEditable?: boolean;
+  isHideable?: boolean;
+  isDeletable?: boolean;
+};
+
+const Section: React.FC<Props> = ({
+  path,
+  name = 'Section Name',
+  titleKey = 'title',
+  subtitleKey = 'subtitle',
+  isEditable = false,
+  isHideable = false,
+  isDeletable = false,
+}) => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const heading = useAppSelector<string>((state) => get(state.resume, `${path}.name`, name));
+  const visibility = useAppSelector<boolean>((state) => get(state.resume, `${path}.visible`, true));
+
+  const handleAdd = () => {
+    const id = path.split('.')[1];
+    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+
+    dispatch(setModalState({ modal, state: { open: true, payload: { path } } }));
+  };
+
+  const handleEdit = (item: ListItem) => {
+    const id = path.split('.')[1];
+    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+    const payload = validate(id) ? { path, item } : { item };
+
+    dispatch(setModalState({ modal, state: { open: true, payload } }));
+  };
+
+  const handleDuplicate = (item: ListItem) => dispatch(duplicateItem({ path: `${path}.items`, value: item }));
+
+  return (
+    <>
+      <Heading path={path} name={name} isEditable={isEditable} isHideable={isHideable} isDeletable={isDeletable} />
+
+      <List
+        path={`${path}.items`}
+        titleKey={titleKey}
+        subtitleKey={subtitleKey}
+        onEdit={handleEdit}
+        onDuplicate={handleDuplicate}
+        className={clsx({ 'opacity-50': !visibility })}
+      />
+
+      <footer className="flex items-center justify-between">
+        <SectionSettings path={path} />
+
+        <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
+          {t('builder.common.actions.add', { token: heading })}
+        </Button>
+      </footer>
+    </>
+  );
+};
+
+export default Section;

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

@@ -0,0 +1,66 @@
+import { ViewWeek } from '@mui/icons-material';
+import { ButtonBase, Popover, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+type Props = {
+  path: string;
+};
+
+const SectionSettings: React.FC<Props> = ({ path }) => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const columns = useAppSelector<number>((state) => get(state.resume, `${path}.columns`, 2));
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSetColumns = (index: number) => dispatch(setResumeState({ path: `${path}.columns`, value: index }));
+
+  return (
+    <div>
+      <Tooltip title={t('builder.common.columns.tooltip') as string}>
+        <ButtonBase onClick={handleClick} sx={{ padding: 1, borderRadius: 1 }} className="opacity-50 hover:opacity-75">
+          <ViewWeek /> <span className="ml-1.5 text-xs">{columns}</span>
+        </ButtonBase>
+      </Tooltip>
+
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <div className="p-5 dark:bg-neutral-800">
+          <h4 className="mb-2 font-medium">{t('builder.common.columns.heading')}</h4>
+
+          <ToggleButtonGroup exclusive value={columns} onChange={(_, value: number) => handleSetColumns(value)}>
+            {[1, 2, 3, 4].map((index) => (
+              <ToggleButton key={index} value={index} size="small" className="w-12">
+                {index}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        </div>
+      </Popover>
+    </div>
+  );
+};
+
+export default SectionSettings;

client/components/build/RightSidebar/RightSidebar.module.scss

@@ -0,0 +1,50 @@
+.container {
+  @apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw];
+  @apply bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50;
+  @apply relative flex border-l-2 border-neutral-50/10;
+
+  nav {
+    @apply absolute inset-y-0 right-0;
+    @apply w-12 py-4 md:w-16 md:px-2;
+    @apply bg-neutral-100 shadow dark:bg-neutral-800;
+    @apply flex flex-col items-center justify-between;
+
+    hr {
+      @apply mt-2;
+    }
+
+    > div {
+      @apply grid gap-2;
+    }
+
+    .sections svg {
+      @apply opacity-75 transition-opacity hover:opacity-100;
+    }
+  }
+
+  main {
+    @apply overflow-y-scroll p-4;
+    @apply absolute inset-y-0 right-12 left-0 md:right-16;
+
+    > section {
+      @apply grid gap-4;
+      @apply pt-5 pb-7 first:pt-0;
+      @apply border-b border-neutral-900/10 last:border-b-0 dark:border-neutral-50/10;
+
+      hr {
+        @apply my-2;
+      }
+    }
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .footer {
+    @apply flex flex-col items-center justify-center gap-3 py-4;
+    @apply text-center text-xs leading-normal opacity-40;
+  }
+}

client/components/build/RightSidebar/RightSidebar.tsx

@@ -0,0 +1,86 @@
+import { Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material';
+import { capitalize } from 'lodash';
+import { useTranslation } from 'next-i18next';
+
+import Avatar from '@/components/shared/Avatar';
+import Footer from '@/components/shared/Footer';
+import { right } from '@/config/sections';
+import { setSidebarState } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+
+import styles from './RightSidebar.module.scss';
+
+const RightSidebar = () => {
+  const theme = useTheme();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+
+  const { open } = useAppSelector((state) => state.build.sidebar.right);
+
+  const handleOpen = () => dispatch(setSidebarState({ sidebar: 'right', state: { open: true } }));
+
+  const handleClose = () => dispatch(setSidebarState({ sidebar: 'right', state: { open: false } }));
+
+  const handleClick = (id: string) => {
+    const section = document.querySelector(`#${id}`);
+
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  return (
+    <SwipeableDrawer
+      open={open}
+      anchor="right"
+      onOpen={handleOpen}
+      onClose={handleClose}
+      PaperProps={{ className: '!shadow-lg' }}
+      variant={isDesktop ? 'persistent' : 'temporary'}
+    >
+      <div className={styles.container}>
+        <nav>
+          <div>
+            <Avatar size={40} />
+            <Divider />
+          </div>
+
+          <div className={styles.sections}>
+            {right.map(({ id, icon }) => (
+              <Tooltip
+                key={id}
+                arrow
+                placement="right"
+                title={t<string>(`builder.rightSidebar.sections.${id}.heading`, { defaultValue: capitalize(id) })}
+              >
+                <IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
+              </Tooltip>
+            ))}
+          </div>
+
+          <div />
+        </nav>
+
+        <main>
+          {right.map(({ id, component }) => (
+            <section key={id} id={id}>
+              {component}
+            </section>
+          ))}
+
+          <footer className={styles.footer}>
+            <Footer />
+
+            <div>v{process.env.appVersion}</div>
+          </footer>
+        </main>
+      </div>
+    </SwipeableDrawer>
+  );
+};
+
+export default RightSidebar;

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

@@ -0,0 +1,49 @@
+import Editor from '@monaco-editor/react';
+import { useTheme } from '@mui/material';
+import { CustomCSS as CustomCSSType } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import React from 'react';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const CustomCSS = () => {
+  const theme = useTheme();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const customCSS: CustomCSSType = useAppSelector((state) => get(state.resume, 'metadata.css', {}));
+
+  const handleChange = (value: string | undefined) => {
+    dispatch(setResumeState({ path: 'metadata.css.value', value }));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.css" name={t('builder.rightSidebar.sections.css.heading')} isHideable />
+
+      <Editor
+        height="200px"
+        language="css"
+        value={customCSS.value}
+        onChange={handleChange}
+        className={clsx({ 'opacity-50': !customCSS.visible })}
+        theme={theme.palette.mode === 'dark' ? 'vs-dark' : 'light'}
+        options={{
+          minimap: { enabled: false },
+          overviewRulerLanes: 0,
+          scrollBeyondLastColumn: 5,
+          overviewRulerBorder: false,
+          scrollBeyondLastLine: true,
+        }}
+      />
+    </>
+  );
+};
+
+export default CustomCSS;

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

@@ -0,0 +1,81 @@
+import { PictureAsPdf, Schema } from '@mui/icons-material';
+import { List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import get from 'lodash/get';
+import pick from 'lodash/pick';
+import { useTranslation } from 'next-i18next';
+import { useMutation } from 'react-query';
+
+import Heading from '@/components/shared/Heading';
+import { ServerError } from '@/services/axios';
+import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
+import { useAppSelector } from '@/store/hooks';
+
+const Export = () => {
+  const { t } = useTranslation();
+
+  const resume = useAppSelector((state) => state.resume);
+
+  const { mutateAsync, isLoading } = useMutation<string, ServerError, PrintResumeAsPdfParams>(printResumeAsPdf);
+
+  const pdfListItemText = {
+    normal: {
+      primary: t('builder.rightSidebar.sections.export.pdf.normal.primary'),
+      secondary: t('builder.rightSidebar.sections.export.pdf.normal.secondary'),
+    },
+    loading: {
+      primary: t('builder.rightSidebar.sections.export.pdf.loading.primary'),
+      secondary: t('builder.rightSidebar.sections.export.pdf.loading.secondary'),
+    },
+  };
+
+  const handleExportJSON = async () => {
+    const { nanoid } = await import('nanoid');
+    const download = (await import('downloadjs')).default;
+
+    const redactedResume = pick(resume, ['basics', 'sections', 'metadata', 'public']);
+    const jsonString = JSON.stringify(redactedResume, null, 4);
+    const filename = `RxResume_JSONExport_${nanoid()}.json`;
+
+    download(jsonString, filename, 'application/json');
+  };
+
+  const handleExportPDF = async () => {
+    const download = (await import('downloadjs')).default;
+
+    const slug = get(resume, 'slug');
+    const username = get(resume, 'user.username');
+
+    const url = await mutateAsync({ username, slug });
+
+    download(`/api${url}`);
+  };
+
+  return (
+    <>
+      <Heading path="metadata.export" name={t('builder.rightSidebar.sections.export.heading')} />
+
+      <List sx={{ padding: 0 }}>
+        <ListItem sx={{ padding: 0 }}>
+          <ListItemButton className="gap-6" onClick={handleExportJSON}>
+            <Schema />
+
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.export.json.primary')}
+              secondary={t('builder.rightSidebar.sections.export.json.secondary')}
+            />
+          </ListItemButton>
+        </ListItem>
+
+        <ListItem sx={{ padding: 0 }}>
+          <ListItemButton className="gap-6" onClick={handleExportPDF} disabled={isLoading}>
+            <PictureAsPdf />
+
+            <ListItemText {...(isLoading ? pdfListItemText.loading : pdfListItemText.normal)} />
+          </ListItemButton>
+        </ListItem>
+      </List>
+    </>
+  );
+};
+
+export default Export;

client/components/build/RightSidebar/sections/Layout.module.scss

@@ -0,0 +1,43 @@
+.page {
+  @apply relative border pl-4 pb-4 dark:border-neutral-100/10;
+  @apply rounded bg-neutral-100 dark:bg-neutral-800;
+
+  .delete {
+    @apply opacity-50 hover:opacity-75;
+    @apply rotate-0 hover:rotate-90;
+    @apply transition-[opacity,transform];
+  }
+
+  .container {
+    @apply grid grid-cols-2 gap-2;
+  }
+
+  .heading {
+    @apply relative z-10 my-3;
+    @apply text-xs font-semibold;
+  }
+}
+
+.column {
+  @apply relative w-full px-4;
+
+  .heading {
+    @apply relative z-10 my-3;
+    @apply text-xs font-semibold;
+  }
+
+  .base {
+    @apply absolute inset-0 w-4/5;
+    @apply rounded bg-neutral-200 dark:bg-neutral-700;
+  }
+}
+
+.section {
+  @apply relative my-3 w-full px-4 py-2;
+  @apply cursor-move break-all rounded text-xs capitalize;
+  @apply bg-neutral-800/90 text-neutral-50 dark:bg-neutral-50/90 dark:text-neutral-800;
+
+  &.disabled {
+    @apply opacity-60;
+  }
+}

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

@@ -0,0 +1,143 @@
+import { Add, Close, Restore } from '@mui/icons-material';
+import { Button, IconButton, Tooltip } from '@mui/material';
+import clsx from 'clsx';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { DragDropContext, Draggable, DraggableLocation, Droppable, DropResult } from 'react-beautiful-dnd';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { addPage, deletePage, setResumeState } from '@/store/resume/resumeSlice';
+
+import styles from './Layout.module.scss';
+
+const getIndices = (location: DraggableLocation) => ({
+  page: +location.droppableId.split('.')[0],
+  column: +location.droppableId.split('.')[1],
+  section: +location.index,
+});
+
+const Layout = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const layout = useAppSelector((state) => state.resume.metadata.layout);
+  const resumeSections = useAppSelector((state) => state.resume.sections);
+
+  const onDragEnd = (dropResult: DropResult) => {
+    const { source: srcLoc, destination: destLoc } = dropResult;
+
+    if (!destLoc) return;
+
+    const newLayout = cloneDeep(layout);
+
+    const srcIndex = getIndices(srcLoc);
+    const destIndex = getIndices(destLoc);
+    const section = layout[srcIndex.page][srcIndex.column][srcIndex.section];
+
+    // Remove item at source
+    newLayout[srcIndex.page][srcIndex.column].splice(srcIndex.section, 1);
+
+    // Insert item at destination
+    newLayout[destIndex.page][destIndex.column].splice(destIndex.section, 0, section);
+
+    dispatch(setResumeState({ path: 'metadata.layout', value: newLayout }));
+  };
+
+  const handleAddPage = () => dispatch(addPage());
+
+  const handleDeletePage = (page: number) => dispatch(deletePage({ page }));
+
+  const handleResetLayout = () => {
+    for (let i = layout.length - 1; i > 0; i--) {
+      handleDeletePage(i);
+    }
+  };
+
+  return (
+    <>
+      <Heading
+        path="metadata.layout"
+        name={t('builder.rightSidebar.sections.layout.heading')}
+        action={
+          <Tooltip title={t('builder.rightSidebar.sections.layout.tooltip.reset-layout') as string}>
+            <IconButton onClick={handleResetLayout}>
+              <Restore />
+            </IconButton>
+          </Tooltip>
+        }
+      />
+
+      <DragDropContext onDragEnd={onDragEnd}>
+        {/* Pages */}
+        {layout.map((columns, pageIndex) => (
+          <div key={pageIndex} className={styles.page}>
+            <div className="flex items-center justify-between pr-3">
+              <p className={styles.heading}>
+                {t('builder.common.glossary.page')} {pageIndex + 1}
+              </p>
+
+              <div className={clsx(styles.delete, { hidden: pageIndex === 0 })}>
+                <Tooltip
+                  title={t('builder.common.actions.delete', { token: t('builder.common.glossary.page') }) as string}
+                >
+                  <IconButton size="small" onClick={() => handleDeletePage(pageIndex)}>
+                    <Close fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </div>
+            </div>
+
+            <div className={styles.container}>
+              {/* Sections */}
+              {columns.map((sections, columnIndex) => {
+                const index = `${pageIndex}.${columnIndex}`;
+
+                return (
+                  <Droppable key={index} droppableId={index}>
+                    {(provided) => (
+                      <div ref={provided.innerRef} className={styles.column} {...provided.droppableProps}>
+                        <p className={styles.heading}>{columnIndex ? 'Sidebar' : 'Main'}</p>
+
+                        <div className={styles.base} />
+
+                        {/* Sections */}
+                        {sections.map((sectionId, sectionIndex) => (
+                          <Draggable key={sectionId} draggableId={sectionId} index={sectionIndex}>
+                            {(provided) => (
+                              <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                                <div
+                                  className={clsx(styles.section, {
+                                    [styles.disabled]: !get(resumeSections, `${sectionId}.visible`, true),
+                                  })}
+                                >
+                                  {get(resumeSections, `${sectionId}.name`)}
+                                </div>
+                              </div>
+                            )}
+                          </Draggable>
+                        ))}
+
+                        {provided.placeholder}
+                      </div>
+                    )}
+                  </Droppable>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+
+        <div className="flex items-center justify-end">
+          <Button variant="outlined" startIcon={<Add />} onClick={handleAddPage}>
+            {t('builder.common.actions.add', { token: t('builder.common.glossary.page') })}
+          </Button>
+        </div>
+      </DragDropContext>
+    </>
+  );
+};
+
+export default Layout;

client/components/build/RightSidebar/sections/Links.module.scss

@@ -0,0 +1,20 @@
+.container {
+  @apply grid gap-4;
+
+  .section {
+    @apply grid gap-2 rounded p-6;
+    @apply bg-neutral-100 dark:bg-neutral-800;
+
+    h2 {
+      @apply inline-flex items-center gap-2 text-base font-medium;
+    }
+
+    p {
+      @apply mb-3 text-xs leading-loose;
+    }
+  }
+
+  a {
+    @apply hover:no-underline;
+  }
+}

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

@@ -0,0 +1,56 @@
+import { BugReport, Coffee, GitHub, Link, Savings } from '@mui/icons-material';
+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 styles from './Links.module.scss';
+
+const Links = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Heading path="metadata.links" name={t('builder.rightSidebar.sections.links.heading')} />
+
+      <div className={styles.container}>
+        <div className={styles.section}>
+          <h2>
+            <Savings fontSize="small" />
+            {t('builder.rightSidebar.sections.links.donate.heading')}
+          </h2>
+
+          <p>{t('builder.rightSidebar.sections.links.donate.body')}</p>
+
+          <a href={DONATION_URL} target="_blank" rel="noreferrer">
+            <Button startIcon={<Coffee />}>{t('builder.rightSidebar.sections.links.donate.button')}</Button>
+          </a>
+        </div>
+
+        <div className={styles.section}>
+          <h2>
+            <BugReport fontSize="small" />
+            {t('builder.rightSidebar.sections.links.bugs-features.heading')}
+          </h2>
+
+          <p>{t('builder.rightSidebar.sections.links.bugs-features.body')}</p>
+
+          <a href={GITHUB_ISSUES_URL} target="_blank" rel="noreferrer">
+            <Button startIcon={<GitHub />}>{t('builder.rightSidebar.sections.links.bugs-features.button')}</Button>
+          </a>
+        </div>
+
+        <div>
+          <a href={GITHUB_URL} target="_blank" rel="noreferrer">
+            <Button variant="text" startIcon={<Link />}>
+              {t('builder.rightSidebar.sections.links.github')}
+            </Button>
+          </a>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Links;

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

@@ -0,0 +1,207 @@
+import { Anchor, DeleteForever, Palette } from '@mui/icons-material';
+import {
+  Autocomplete,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  Switch,
+  TextField,
+} from '@mui/material';
+import { DateConfig, Resume } from '@reactive-resume/schema';
+import dayjs from 'dayjs';
+import get from 'lodash/get';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+import { useMutation } from 'react-query';
+
+import Heading from '@/components/shared/Heading';
+import ThemeSwitch from '@/components/shared/ThemeSwitch';
+import { Language, languageMap, languages } from '@/config/languages';
+import { ServerError } from '@/services/axios';
+import queryClient from '@/services/react-query';
+import { loadSampleData, LoadSampleDataParams, resetResume, ResetResumeParams } from '@/services/resume';
+import { setTheme, togglePageBreakLine, togglePageOrientation } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+import { dateFormatOptions } from '@/utils/date';
+
+const Settings = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const { locale, ...router } = useRouter();
+
+  const resume = useAppSelector((state) => state.resume);
+  const theme = useAppSelector((state) => state.build.theme);
+  const breakLine = useAppSelector((state) => state.build.page.breakLine);
+  const orientation = useAppSelector((state) => state.build.page.orientation);
+
+  const id: number = useMemo(() => get(resume, 'id'), [resume]);
+  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 isDarkMode = useMemo(() => theme === 'dark', [theme]);
+  const exampleString = 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>(
+    loadSampleData
+  );
+  const { mutateAsync: resetResumeMutation } = useMutation<Resume, ServerError, ResetResumeParams>(resetResume);
+
+  const handleSetTheme = (value: boolean) => dispatch(setTheme({ theme: value ? 'dark' : 'light' }));
+
+  const handleChangeDateFormat = (value: string | null) =>
+    dispatch(setResumeState({ path: 'metadata.date.format', value }));
+
+  const handleChangeLanguage = (value: Language | null) => {
+    const { pathname, asPath, query, push } = router;
+    const code = value?.code || 'en';
+
+    document.cookie = `NEXT_LOCALE=${code}; path=/; expires=2147483647`;
+
+    push({ pathname, query }, asPath, { locale: code });
+  };
+
+  const handleLoadSampleData = async () => {
+    await loadSampleDataMutation({ id });
+
+    queryClient.invalidateQueries(`resume/${username}/${slug}`);
+  };
+
+  const handleResetResume = async () => {
+    await resetResumeMutation({ id });
+
+    queryClient.invalidateQueries(`resume/${username}/${slug}`);
+  };
+
+  return (
+    <>
+      <Heading path="metadata.settings" name={t('builder.rightSidebar.sections.settings.heading')} />
+
+      <List sx={{ padding: 0 }}>
+        {/* Global Settings */}
+        <>
+          <ListSubheader className="rounded">
+            {t('builder.rightSidebar.sections.settings.global.heading')}
+          </ListSubheader>
+
+          <ListItem>
+            <ListItemIcon>
+              <Palette />
+            </ListItemIcon>
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.settings.global.theme.primary')}
+              secondary={themeString}
+            />
+            <ThemeSwitch checked={isDarkMode} onChange={(_, value: boolean) => handleSetTheme(value)} />
+          </ListItem>
+
+          <ListItem className="flex-col">
+            <ListItemText
+              className="w-full"
+              primary={t('builder.rightSidebar.sections.settings.global.date.primary')}
+              secondary={t('builder.rightSidebar.sections.settings.global.date.secondary')}
+            />
+            <Autocomplete<string, false, boolean, false>
+              disableClearable
+              className="my-2 w-full"
+              options={dateFormatOptions}
+              value={dateConfig.format}
+              onChange={(_, value) => handleChangeDateFormat(value)}
+              renderInput={(params) => <TextField {...params} helperText={exampleString} />}
+            />
+          </ListItem>
+
+          <ListItem className="flex-col">
+            <ListItemText
+              className="w-full"
+              primary={t('builder.rightSidebar.sections.settings.global.language.primary')}
+              secondary={t('builder.rightSidebar.sections.settings.global.language.secondary')}
+            />
+            <Autocomplete<Language, false, boolean, false>
+              disableClearable
+              className="my-2 w-full"
+              options={languages}
+              value={languageMap[locale ?? 'en']}
+              isOptionEqualToValue={(a, b) => a.code === b.code}
+              onChange={(_, value) => handleChangeLanguage(value)}
+              renderInput={(params) => <TextField {...params} />}
+              getOptionLabel={(language) => {
+                if (language.localName) {
+                  return `${language.name} (${language.localName})`;
+                }
+
+                return language.name;
+              }}
+            />
+          </ListItem>
+        </>
+
+        {/* Page Settings */}
+        <>
+          <ListSubheader className="rounded">{t('builder.rightSidebar.sections.settings.page.heading')}</ListSubheader>
+
+          <ListItem>
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.settings.page.orientation.primary')}
+              secondary={t('builder.rightSidebar.sections.settings.page.orientation.secondary')}
+            />
+            <Switch
+              color="secondary"
+              checked={orientation === 'horizontal'}
+              onChange={() => dispatch(togglePageOrientation())}
+            />
+          </ListItem>
+
+          <ListItem>
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.settings.page.break-line.primary')}
+              secondary={t('builder.rightSidebar.sections.settings.page.break-line.secondary')}
+            />
+            <Switch color="secondary" checked={breakLine} onChange={() => dispatch(togglePageBreakLine())} />
+          </ListItem>
+        </>
+
+        {/* Resume Settings */}
+        <>
+          <ListSubheader className="rounded">
+            {t('builder.rightSidebar.sections.settings.resume.heading')}
+          </ListSubheader>
+
+          <ListItem>
+            <ListItemButton onClick={handleLoadSampleData}>
+              <ListItemIcon>
+                <Anchor />
+              </ListItemIcon>
+              <ListItemText
+                primary={t('builder.rightSidebar.sections.settings.resume.sample.primary')}
+                secondary={t('builder.rightSidebar.sections.settings.resume.sample.secondary')}
+              />
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem>
+            <ListItemButton onClick={handleResetResume}>
+              <ListItemIcon>
+                <DeleteForever />
+              </ListItemIcon>
+              <ListItemText
+                primary={t('builder.rightSidebar.sections.settings.resume.reset.primary')}
+                secondary={t('builder.rightSidebar.sections.settings.resume.reset.secondary')}
+              />
+            </ListItemButton>
+          </ListItem>
+        </>
+      </List>
+    </>
+  );
+};
+
+export default Settings;

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

@@ -0,0 +1,78 @@
+import { CopyAll } from '@mui/icons-material';
+import { Checkbox, FormControlLabel, IconButton, List, ListItem, ListItemText, Switch, TextField } from '@mui/material';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+import getResumeUrl from '@/utils/getResumeUrl';
+
+const Sharing = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const [showShortUrl, setShowShortUrl] = useState(false);
+
+  const resume = useAppSelector((state) => state.resume);
+  const isPublic = useMemo(() => get(resume, 'public'), [resume]);
+  const url = useMemo(() => getResumeUrl(resume, { withHost: true }), [resume]);
+  const shortUrl = useMemo(() => getResumeUrl(resume, { withHost: true, shortUrl: true }), [resume]);
+
+  const handleSetVisibility = (value: boolean) => dispatch(setResumeState({ path: 'public', value }));
+
+  const handleCopyToClipboard = async () => {
+    const text = showShortUrl ? shortUrl : url;
+
+    await navigator.clipboard.writeText(text);
+
+    toast.success(t('common.toast.success.resume-link-copied'));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.sharing" name={t('builder.rightSidebar.sections.sharing.heading')} />
+
+      <List sx={{ padding: 0 }}>
+        <ListItem className="flex flex-col" sx={{ padding: 0 }}>
+          <div className="flex w-full items-center justify-between">
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.sharing.visibility.title')}
+              secondary={t('builder.rightSidebar.sections.sharing.visibility.subtitle')}
+            />
+            <Switch color="secondary" checked={isPublic} onChange={(_, value) => handleSetVisibility(value)} />
+          </div>
+
+          <div className="mt-2 w-full">
+            <TextField
+              disabled
+              fullWidth
+              value={showShortUrl ? shortUrl : url}
+              InputProps={{
+                endAdornment: (
+                  <IconButton onClick={handleCopyToClipboard}>
+                    <CopyAll />
+                  </IconButton>
+                ),
+              }}
+            />
+          </div>
+
+          <div className="mt-1 flex w-full">
+            <FormControlLabel
+              label={t('builder.rightSidebar.sections.sharing.short-url.label') as string}
+              control={
+                <Checkbox className="mr-1" checked={showShortUrl} onChange={(_, value) => setShowShortUrl(value)} />
+              }
+            />
+          </div>
+        </ListItem>
+      </List>
+    </>
+  );
+};
+
+export default Sharing;

client/components/build/RightSidebar/sections/Templates.module.scss

@@ -0,0 +1,22 @@
+.container {
+  @apply grid grid-cols-2 gap-4;
+}
+
+.template {
+  @apply grid text-center;
+
+  .preview {
+    aspect-ratio: 1 / 1.4142;
+
+    @apply relative grid rounded;
+    @apply border-2 border-transparent;
+
+    &.selected {
+      @apply border-black dark:border-white;
+    }
+  }
+
+  .label {
+    @apply mt-1 text-xs font-medium;
+  }
+}

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

@@ -0,0 +1,46 @@
+import { ButtonBase } from '@mui/material';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import Image from 'next/image';
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+import templateMap, { TemplateMeta } from '@/templates/templateMap';
+
+import styles from './Templates.module.scss';
+
+const Templates = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const currentTemplate: string = useAppSelector((state) => get(state.resume, 'metadata.template'));
+
+  const handleChange = (template: TemplateMeta) => {
+    dispatch(setResumeState({ path: 'metadata.template', value: template.id }));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.templates" name={t('builder.rightSidebar.sections.templates.heading')} />
+
+      <div className={styles.container}>
+        {Object.values(templateMap).map((template) => (
+          <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" />
+              </ButtonBase>
+            </div>
+
+            <p className={styles.label}>{template.name}</p>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default Templates;

client/components/build/RightSidebar/sections/Theme.module.scss

@@ -0,0 +1,8 @@
+.container {
+  @apply grid sm:grid-cols-2 gap-4;
+}
+
+.colorOptions {
+  @apply col-span-2 mb-4;
+  @apply grid grid-cols-8 gap-y-2 justify-items-center;
+}

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

@@ -0,0 +1,57 @@
+import { Theme } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+
+import ColorAvatar from '@/components/shared/ColorAvatar';
+import ColorPicker from '@/components/shared/ColorPicker';
+import Heading from '@/components/shared/Heading';
+import { colorOptions } from '@/config/colors';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+import styles from './Theme.module.scss';
+
+const Theme = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const { background, text, primary } = useAppSelector<Theme>((state) => get(state.resume, 'metadata.theme'));
+
+  const handleChange = (property: string, color: string) => {
+    dispatch(setResumeState({ path: `metadata.theme.${property}`, value: color }));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.theme" name={t('builder.rightSidebar.sections.theme.heading')} />
+
+      <div className={styles.container}>
+        <div className={styles.colorOptions}>
+          {colorOptions.map((color) => (
+            <ColorAvatar key={color} color={color} onClick={(color) => handleChange('primary', color)} />
+          ))}
+        </div>
+
+        <ColorPicker
+          label={t('builder.rightSidebar.sections.theme.form.primary.label')}
+          color={primary}
+          className="col-span-2"
+          onChange={(color) => handleChange('primary', color)}
+        />
+        <ColorPicker
+          label={t('builder.rightSidebar.sections.theme.form.background.label')}
+          color={background}
+          onChange={(color) => handleChange('background', color)}
+        />
+        <ColorPicker
+          label={t('builder.rightSidebar.sections.theme.form.text.label')}
+          color={text}
+          onChange={(color) => handleChange('text', color)}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Theme;