replace JSON.parse(JSON.stringify({})) with structuredClone({})

- pull the latest crowdin language artifacts

.dockerignore

@@ -1,21 +1,62 @@
-# Build Artifacts
+# Compiled Output
 dist
-.next
-
-# IDEs
-.vscode
-
-# Project Metadata
-README.md
-CHANGELOG.md
+tmp
+/out-tsc
 
 # Project Dependencies
+.git
+.gitignore
 node_modules
 
 # Docker
+compose*.yml
 Dockerfile
-.dockerignore
-docker-compose.yml
 
-# Android App
-/app
+# IDEs and Editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vs/*
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# Miscellaneous
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+.editorconfig
+.eslint*
+
+# Generated Files
+.nx
+.swc
+fly.toml
+stats.html
+tools/compose/*
+tools/scripts/*
+
+# Environment Variables
+*.env*
+!.env.example
+
+# Lingui Compiled Messages
+apps/client/src/locales/_build/
+apps/client/src/locales/*/messages.mjs

.editorconfig

@@ -2,7 +2,11 @@ root = true
 
 [*]
 charset = utf-8
-indent_size = 2
 indent_style = space
+indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.env.example

@@ -1,30 +1,73 @@
-# App
-TZ=UTC
-SECRET_KEY=change-me
+# Environment
+NODE_ENV=development
+
+# Ports
+PORT=3000
 
 # URLs
+# These URLs must reference a publicly accessible domain or IP address, not a docker container ID (depending on your compose setup)
 PUBLIC_URL=http://localhost:3000
-PUBLIC_SERVER_URL=http://localhost:3100
+STORAGE_URL=http://localhost:9000/default # default is the bucket name specified in the STORAGE_BUCKET variable
 
-# Database
-POSTGRES_HOST=localhost
+# Database (Prisma/PostgreSQL)
+# This can be swapped out to use any other database, like MySQL
+# Note: This is used only in the compose.yml file
 POSTGRES_PORT=5432
-POSTGRES_USERNAME=postgres
+POSTGRES_DB=postgres
+POSTGRES_USER=postgres
 POSTGRES_PASSWORD=postgres
-POSTGRES_DATABASE=reactive_resume
-POSTGRES_SSL_CERT=
 
-# Auth
-JWT_SECRET=change-me
-JWT_EXPIRY_TIME=604800
+# Database (Prisma/PostgreSQL)
+DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres?schema=public
 
-# Google
-PUBLIC_GOOGLE_CLIENT_ID=change-me
-GOOGLE_CLIENT_SECRET=change-me
-GOOGLE_API_KEY=change-me
+# Authentication Secrets
+# generated with `openssl rand -base64 64`
+ACCESS_TOKEN_SECRET=access_token_secret
+REFRESH_TOKEN_SECRET=refresh_token_secret
 
-# SendGrid (Optional)
-SENDGRID_API_KEY=
-SENDGRID_FORGOT_PASSWORD_TEMPLATE_ID=
-SENDGRID_FROM_NAME=
-SENDGRID_FROM_EMAIL=
+# Chrome Browser (for printing)
+# generated with `openssl rand -hex 32`
+CHROME_PORT=8080
+CHROME_TOKEN=chrome_token
+CHROME_URL=ws://localhost:8080
+
+# Mail Server (for e-mails)
+# For testing, you can use https://ethereal.email/create
+MAIL_FROM=noreply@localhost
+# SMTP_URL=smtp://username:password@smtp.ethereal.email:587
+
+# Storage
+STORAGE_ENDPOINT=localhost
+STORAGE_PORT=9000
+STORAGE_REGION=us-east-1
+STORAGE_BUCKET=default
+STORAGE_ACCESS_KEY=minioadmin
+STORAGE_SECRET_KEY=minioadmin
+STORAGE_USE_SSL=false
+
+# Sentry (for error reporting, Optional)
+# SENTRY_AUTH_TOKEN=
+# SERVER_SENTRY_DSN=
+# VITE_CLIENT_SENTRY_DSN=
+
+# Nx Cloud (Optional)
+# NX_CLOUD_ACCESS_TOKEN=
+
+# Crowdin (Optional)
+# CROWDIN_PROJECT_ID=
+# CROWDIN_PERSONAL_TOKEN=
+
+# Flags (Optional)
+# DISABLE_EMAIL_AUTH=true
+# VITE_DISABLE_SIGNUPS=false
+# SKIP_STORAGE_BUCKET_CHECK=false
+
+# GitHub (OAuth, Optional)
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
+# GITHUB_CALLBACK_URL=http://localhost:5173/api/auth/github/callback
+
+# Google (OAuth, Optional)
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
+# GOOGLE_CALLBACK_URL=http://localhost:5173/api/auth/google/callback

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -1,37 +1,91 @@
 {
   "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": "^_"
-      }
-    ]
-  },
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
   "overrides": [
     {
-      "files": ["*.js"],
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "extends": ["plugin:prettier/recommended"],
+      "plugins": ["simple-import-sort", "unused-imports"],
       "rules": {
-        "@typescript-eslint/no-var-requires": "off"
+        // eslint
+        "no-return-await": "off",
+
+        // simple-import-sort
+        "simple-import-sort/imports": "error",
+        "simple-import-sort/exports": "error",
+
+        // unused-imports
+        "unused-imports/no-unused-imports": "error",
+        "unused-imports/no-unused-vars": [
+          "warn",
+          {
+            "vars": "all",
+            "varsIgnorePattern": "^_",
+            "args": "after-used",
+            "argsIgnorePattern": "^_"
+          }
+        ],
+
+        // nx
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "allowCircularSelfDependency": true,
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": "latest",
+        "project": ["tsconfig.*?.json"]
+      },
+      "extends": [
+        "plugin:@nx/typescript",
+        "plugin:@typescript-eslint/strict-type-checked",
+        "plugin:@typescript-eslint/stylistic-type-checked",
+        "plugin:unicorn/recommended"
+      ],
+      "plugins": ["@typescript-eslint", "unicorn"],
+      "rules": {
+        // typescript-eslint
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/return-await": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/restrict-template-expressions": "off",
+        "@typescript-eslint/no-redundant-type-constituents": "off",
+        "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+
+        // unicorn
+        "unicorn/no-null": "off",
+        "unicorn/prevent-abbreviations": "off",
+        "unicorn/prefer-string-replace-all": "off"
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {
+        // eslint
+        "no-console": "warn",
+        "no-unused-vars": "off"
       }
     }
   ]

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: AmruthPillai
+open_collective: reactive-resume

.github/ISSUE_TEMPLATE/bug-report.md

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

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,95 @@
+name: 🐞 Bug Report
+
+description: Create a bug report to help improve Reactive Resume
+
+title: "[Bug] <title>"
+labels: [bug, v4, needs triage]
+assignees: "AmruthPillai"
+
+body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: Yes, I have searched the existing issues and none of them match my problem.
+          required: true
+
+  - type: dropdown
+    id: variant
+    attributes:
+      label: Product Variant
+      description: What variant of Reactive Resume are you using?
+      options:
+        - Cloud (https://rxresu.me)
+        - Self-Hosted
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Current Behavior
+      description: A concise description of what you're experiencing.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A concise description of what you expected to happen.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Detailed steps to reproduce the behavior, so that it can be easily diagnosed.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: false
+
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+    validations:
+      required: false
+
+  - type: dropdown
+    id: template
+    attributes:
+      label: What template are you using?
+      description: Leave blank if the issue applies to all templates, or is not template-specific.
+      multiple: false
+      options:
+        - Azurill
+        - Bronzor
+        - Chikorita
+        - Ditto
+        - Kakuna
+        - Nosepass
+        - Onyx
+        - Pikachu
+        - Rhyhorn
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Links? References? Anything that will give us more context about the issue you are encountering!
+
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature-request.md

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

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,23 @@
+name: ✨ Feature Request
+
+description: Suggest an feature or idea that you would like to see in Reactive Resume
+
+title: "[Feature] <title>"
+labels: [enhancement, v4, needs triage]
+assignees: "AmruthPillai"
+
+body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this feature?
+      description: Please search to see if an issue already exists for the feature you requested.
+      options:
+        - label: Yes, I have searched the existing issues and it doesn't exist.
+          required: true
+
+  - type: textarea
+    attributes:
+      label: Feature Description
+      description: A concise description of what feature you would like to see in Reactive Resume.
+    validations:
+      required: true

.github/workflows/close-stale.yml

@@ -1,16 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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/lint-test-build.yml

@@ -0,0 +1,54 @@
+name: Lint, Test & Build
+
+concurrency:
+  group: "${{ github.workflow }}-${{ github.ref }}"
+  cancel-in-progress: true
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.1
+        with:
+          fetch-depth: 2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3.0.0
+        with:
+          version: 9.1.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4.0.2
+        with:
+          cache: "pnpm"
+          node-version: 20.12.2
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Format
+        run: pnpm format:check
+
+      - name: Test
+        run: pnpm test
+
+      - name: Build
+        run: pnpm build
+        env:
+          NODE_ENV: production
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}

.github/workflows/publish-docker-image.yml

@@ -0,0 +1,163 @@
+name: Publish Docker Image
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "*"
+
+concurrency:
+  group: "${{ github.workflow }}-${{ github.ref }}"
+  cancel-in-progress: true
+
+env:
+  IMAGE: amruthpillai/reactive-resume
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+
+    strategy:
+      max-parallel: 1
+      matrix:
+        platform:
+          - linux/amd64
+          - linux/arm64
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.4
+
+      - name: Extract version from package.json
+        id: version
+        run: echo "version=$(jq -r '.version' package.json)" >> "$GITHUB_OUTPUT"
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3.0.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3.1.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+
+      - name: Login to GitHub Container Registery
+        uses: docker/login-action@v3.1.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ github.token }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3.3.0
+        with:
+          driver: cloud
+          version: "lab:latest"
+          endpoint: "amruthpillai/default"
+
+      - name: Extract Docker Metadata
+        id: meta
+        uses: docker/metadata-action@v5.5.1
+        with:
+          tags: type=semver,pattern={{version}},prefix=v,value=${{ steps.version.outputs.version }}
+          images: |
+            ${{ env.IMAGE }}
+            ghcr.io/${{ env.IMAGE }}
+
+      - name: Prepare a unique name for Artifacts
+        id: artifact_name
+        run: |
+          name=$(echo -n "${{ matrix.platform }}" | sed -e 's/[ \t:\/\\"<>|*?]/-/g' -e 's/--*/-/g')
+          echo "name=$name" >> "$GITHUB_OUTPUT"
+
+      - name: Build and Push by Digest
+        uses: docker/build-push-action@v5.3.0
+        id: build
+        with:
+          context: .
+          platforms: ${{ matrix.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,name=${{ env.IMAGE }},push-by-digest=true,name-canonical=true,push=true
+          build-args: |
+            SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
+            NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+
+      - name: Export Digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload Digest
+        uses: actions/upload-artifact@v4.3.3
+        with:
+          name: digests-${{ steps.artifact_name.outputs.name }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+
+    needs:
+      - build
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.4
+
+      - name: Download Digest
+        uses: actions/download-artifact@v4.1.7
+        with:
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3.1.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+
+      - name: Login to GitHub Container Registery
+        uses: docker/login-action@v3.1.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ github.token }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3.3.0
+        with:
+          driver: cloud
+          version: "lab:latest"
+          endpoint: "amruthpillai/default"
+
+      - name: Extract Docker Metadata
+        id: meta
+        uses: docker/metadata-action@v5.5.1
+        with:
+          tags: type=semver,pattern={{version}},prefix=v,value=${{ needs.build.outputs.version }}
+          images: |
+            ${{ env.IMAGE }}
+            ghcr.io/${{ env.IMAGE }}
+
+      - name: Create Docker Manifest List and Push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.IMAGE }}@sha256:%s ' *)
+
+      - name: Inspect Image
+        run: |
+          docker buildx imagetools inspect ${{ env.IMAGE }}:${{ steps.meta.outputs.version }}
+
+      - name: Update Repository Description
+        uses: peter-evans/dockerhub-description@v4.0.0
+        with:
+          repository: ${{ github.repository }}
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}

.github/workflows/sync-crowdin-translations.yml

@@ -0,0 +1,30 @@
+name: Sync Crowdin Translations
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: 0 0 * * * # everyday at midnight (UTC)
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.1.1
+
+      - name: Sync Translations
+        uses: crowdin/github-action@v1.15.2
+        with:
+          upload_sources: true
+          upload_translations: true
+          download_translations: true
+          create_pull_request: true
+          localization_branch_name: "l10n"
+          pull_request_base_branch_name: "main"
+          pull_request_title: "New Translations from Crowdin"
+          pull_request_body: "You've got new translations to be merged into the app from contributors on Crowdin.\n\n_This pull request was automatically created by the [Crowdin Action](https://github.com/marketplace/actions/crowdin-action)._"
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.gitignore

@@ -1,10 +1,52 @@
-# Environment Variables
-.env
-.env.*
-!.env.example
+# Compiled Output
+dist
+tmp
+/out-tsc
 
 # Project Dependencies
 node_modules
 
-# macOS
-.DS_Store
+# IDEs and Editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vs/*
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# Miscellaneous
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# Generated Files
+.nx
+.swc
+fly.toml
+stats.html
+
+# Environment Variables
+*.env*
+!.env.example
+
+# Lingui Compiled Messages
+apps/client/src/locales/_build/
+apps/client/src/locales/*/messages.mjs

.husky/pre-commit

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

.ncurc.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://raw.githubusercontent.com/raineorshine/npm-check-updates/main/src/types/RunOptions.json",
+  "upgrade": true,
+  "install": "always",
+  "packageManager": "pnpm",
+  "reject": ["eslint", "vite-plugin-chunk-split", "@reactive-resume/*"]
+}

.npmrc

@@ -0,0 +1,3 @@
+auto-install-peers=true
+enable-pre-post-scripts=true
+strict-peer-dependencies=false

.nvmrc

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

.prettierignore

@@ -1,32 +1,7 @@
-# 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
+/dist
+/coverage
+/.nx/cache
+stats.html
+pnpm-lock.yaml
+compose-dev.yml
+compose.yml

.prettierrc

@@ -1,4 +1,3 @@
 {
-  "printWidth": 120,
-  "singleQuote": true
+  "printWidth": 100
 }

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "lokalise.i18n-ally"]
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "firsttris.vscode-jest-runner"
+  ]
 }

.vscode/launch.json

@@ -1,26 +0,0 @@
-{
-  "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,25 +1,15 @@
 {
-  "css.validate": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "yaml.schemas": {
+    "https://json.schemastore.org/github-workflow.json": ".github/workflows/*.yml",
+    "https://raw.githubusercontent.com/compose-spec/compose-spec/master/schema/compose-spec.json": [
+      "tools/compose/*"
+    ]
   },
-  "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
-}
+  "i18n-ally.localesPaths": ["apps/client/src/locales"],
+  "vitest.disableWorkspaceWarning": true
+}

CHANGELOG.md

@@ -1,52 +1,19 @@
 # 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.
+### What’s changed from v3 to v4?
 
-### [3.1.1](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.1.0...v3.1.1) (2022-03-12)
+**The entire app has been rebuilt and reimagined from the ground up.**
 
+The **user interface** has been greatly streamlined to prioritise your content and resume. The design of templates has also undergone a major overhaul. Previously, we utilised TailwindCSS for creating templates, but now you can rely on CSS (styled-components) to build any design you prefer. With this change, I hope to offer a **much wider variety of templates** compared to the previous version.
 
-### Features
+When it comes to features, there are many to mention, but some highlights include the **ability to use your own OpenAI API key** (stored on your browser) and leverage GPTs to enhance your resume writing skills. With this, you can improve your writing, correct spelling and grammar, and even adjust the tone of the text to be more confident or casual.
 
-* **client:** add product hunt announcement banner ([b515fc3](https://github.com/AmruthPillai/Reactive-Resume/commit/b515fc36e7f282db92e8eb509b6c5004a944fa95))
+When you make your resume publicly available, you are provided with a link that you can share with potential recruiters and employers. This change allows you to **track the number of views or downloads your resume has received**, so you can stay informed about when someone has checked out your resume.
 
-## [3.1.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0...v3.1.0) (2022-03-12)
+When it comes to **security**, you now have the option to protect your account with **two-factor authentication**. This means that whenever you log in to Reactive Resume, you will also need to enter a one-time code generated on your phone. This additional step ensures that only you have access to your account.
 
+From a **design** perspective, the motivation behind this is to ensure that Reactive Resume is taken more seriously and not perceived as just another subpar side-project, which is often associated with free software. My goal is to demonstrate that this is not the case, and that **free and open source software can be just as good**, if not better, than paid alternatives.
 
-### Features
+From a **self-hosting perspective**, it has never been simpler. Instead of running two separate services on your Docker (one for the client and one for the server) and struggling to establish communication between them, now you only need to pull a single image. Additionally, there are a few dependent services available on Docker (such as Postgres, Minio etc.) that you can also pull and have them all working together seamlessly.
 
-* **client:** add "spanish (es)" language to i18n locales ([bf167f8](https://github.com/AmruthPillai/Reactive-Resume/commit/bf167f81a3659677dada55856f5eaf0fc469e697))
-* **client:** add mm/yyyy date option to date format options ([82bf44d](https://github.com/AmruthPillai/Reactive-Resume/commit/82bf44daa24422156779e9b38d3dc695176eaa09)), closes [#656](https://github.com/AmruthPillai/Reactive-Resume/issues/656)
-* **client:** add sitemap generation to next app ([2cbc582](https://github.com/AmruthPillai/Reactive-Resume/commit/2cbc582a12b72b3012246022d4b518ed657d4c08))
-* **client:** disable "Toggle Page Orientation" when there's only one page on the artboard ([01da1a0](https://github.com/AmruthPillai/Reactive-Resume/commit/01da1a06b802f1063a41d7a9a682e76b1daf9461)), closes [#655](https://github.com/AmruthPillai/Reactive-Resume/issues/655)
-
-
-### Bug Fixes
-
-* **client:** remove hard-coded "keywords:" in certain templates ([dda42b4](https://github.com/AmruthPillai/Reactive-Resume/commit/dda42b4c6b3bc359ac4f2bb91ca8118ddc84ec07)), closes [#650](https://github.com/AmruthPillai/Reactive-Resume/issues/650)
-* **client:** show "present" string if end date is not entered, also add to i18n locales ([b5cd6c4](https://github.com/AmruthPillai/Reactive-Resume/commit/b5cd6c412b5b6b6ca7bb43c3801762de451f06b4)), closes [#653](https://github.com/AmruthPillai/Reactive-Resume/issues/653)
-* **server:** photo uploads not working, fix save location and returned url ([799f208](https://github.com/AmruthPillai/Reactive-Resume/commit/799f20823e6d97a1ff0ba2c45c61d56304d0fa58)), closes [#658](https://github.com/AmruthPillai/Reactive-Resume/issues/658)
-
-## [3.0.0](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.6...v3.0.0) (2022-03-11)
-
-
-### Features
-
-* **lang**: add German, Kannada and Tamil languages to the app ([3a524f9](https://github.com/AmruthPillai/Reactive-Resume/commit/3a524f9c9c7a0e446491265b2242ad3dfeae188c))
-* **docs:** add docusaurus workspace, initial setup of docs ([dc4aa0b](https://github.com/AmruthPillai/Reactive-Resume/commit/dc4aa0b496096bd59c45426bfcea6ba7db5f5c01))
-
-## [3.0.0-beta.6](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2022-03-11)
-
-### Features
-
-* **lang:** add language switcher on the landing page, in the footer ([8bc7d25](https://github.com/AmruthPillai/Reactive-Resume/commit/8bc7d2599ef6af7a07bfbe886c43844152b0d9f7))
-
-### Bug Fixes
-
-* **i18n:** add missing translation keys, update lang/locale logic ([7d8828a](https://github.com/AmruthPillai/Reactive-Resume/commit/7d8828a358d653bb162877a64c75028eb82678cd))
-* **webkit:** fix issue with webkit not supporting .at() ([2654cba](https://github.com/AmruthPillai/Reactive-Resume/commit/2654cba039eb73d33257c36fa90a52cabc9fda96))
-
-## [3.0.0-beta.5](https://github.com/AmruthPillai/Reactive-Resume/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2022-03-10)
-
-### Bug Fixes
-
-* **app:** fix issue with using swipelayout ([972e8b1](https://github.com/AmruthPillai/Reactive-Resume/commit/972e8b1bcf9ad44d8915bf23d189711672937bc0))
+I'm excited for you to try out the app, as I've spent months building it to perfection. If you enjoy the experience of building your resume using the app, please consider supporting by [becoming a GitHub Sponsor](https://github.com/sponsors/AmruthPillai).

CONTRIBUTING.md

@@ -0,0 +1,85 @@
+# Contributing to Reactive Resume
+
+## Getting the project set up locally
+
+There are a number of Docker Compose examples that are suitable for a wide variety of deployment strategies depending on your use-case. All the examples can be found in the `tools/compose` folder.
+
+To run the development environment of the application locally on your computer, please follow these steps:
+
+#### Requirements
+
+- Docker (with Docker Compose)
+- Node.js 18 or higher (with pnpm)
+
+### 1. Fork and Clone the Repository
+
+```sh
+git clone https://github.com/{your-github-username}/Reactive-Resume.git
+cd Reactive-Resume
+```
+
+### 2. Install dependencies
+
+```sh
+pnpm install
+```
+
+### 3. Copy .env.example to .env
+
+```sh
+cp .env.example .env
+```
+
+Please have a brief look over the environment variables and change them if necessary, for example, change the ports if you have a conflicting service running on your machine already.
+
+### 4. Fire up all the required services through Docker Compose
+
+```sh
+docker compose -f tools/compose/development.yml --env-file .env -p reactive-resume up -d
+```
+
+It should take just under half a minute for all the services to be booted up correctly. You can check the status of all services by running `docker compose -p reactive-resume ps`
+
+### 5. Run the development server
+
+```sh
+pnpm prisma:migrate:dev
+pnpm dev
+```
+
+If everything went well, the frontend should be running on `http://localhost:5173` and the backend api should be accessible through `http://localhost:3000`. There is a proxy present to also route all requests to `http://localhost:5173/api` directly to the API. If you need to change the `PORT` environment variable for the server, please make sure to update the `apps/client/proxy.conf.json` file as well with the new endpoint.
+
+You can also visit `http://localhost:3000/api/health`, the health check endpoint of the server to check if the server is running correctly, and it is able to connect to all it's dependent services. The output of the health check endpoint should look like this:
+
+```json
+{
+  "status": "ok",
+  "info": {
+    "database": { "status": "up" },
+    "storage": { "status": "up" },
+    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" }
+  },
+  "error": {},
+  "details": {
+    "database": { "status": "up" },
+    "storage": { "status": "up" },
+    "browser": { "status": "up", "version": "Chrome/119.0.6045.9" }
+  }
+}
+```
+
+---
+
+## Pushing changes to the app
+
+Firstly, ensure that there is a GitHub Issue created for the feature or bugfix you are working on. If it does not exist, create an issue and assign it to yourself.
+
+Once you are happy with the changes you've made locally, commit it to your repository. Note that the project makes use of Conventional Commits, so commit messages would have to be in a specific format for it to be accepted. For example, a commit message to fix the translation on the homepage could look like:
+
+```
+git commit -m "fix(homepage): fix typo on homepage in the faq section"
+```
+
+It helps to be as descriptive as possible in commit messages so that users can be aware of the changes made by you.
+
+Finally, create a pull request to merge the changes on your forked repository to the original repository hosted on AmruthPillai/Reactive-Resume. I can take a look at the changes you've made when I have the time and have it merged onto the app.

Dockerfile

@@ -0,0 +1,51 @@
+ARG SENTRY_AUTH_TOKEN
+ARG NX_CLOUD_ACCESS_TOKEN
+
+# --- Base Image ---
+FROM node:lts-bullseye-slim AS base
+ARG SENTRY_AUTH_TOKEN
+ARG NX_CLOUD_ACCESS_TOKEN
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+RUN corepack enable pnpm && corepack prepare pnpm@9.0.6 --activate
+
+WORKDIR /app
+
+# --- Build Image ---
+FROM base AS build
+ARG SENTRY_AUTH_TOKEN
+ARG NX_CLOUD_ACCESS_TOKEN
+
+COPY .npmrc package.json pnpm-lock.yaml ./
+COPY ./tools/prisma /app/tools/prisma
+RUN pnpm install --frozen-lockfile
+
+COPY . .
+
+ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
+ENV NX_CLOUD_ACCESS_TOKEN=$NX_CLOUD_ACCESS_TOKEN
+
+RUN pnpm run build
+
+# --- Release Image ---
+FROM base AS release
+ARG NX_CLOUD_ACCESS_TOKEN
+
+RUN apt update && apt install -y dumb-init --no-install-recommends && rm -rf /var/lib/apt/lists/*
+
+COPY --chown=node:node --from=build /app/.npmrc /app/package.json /app/pnpm-lock.yaml ./
+RUN pnpm install --prod --frozen-lockfile
+
+COPY --chown=node:node --from=build /app/dist ./dist
+COPY --chown=node:node --from=build /app/tools/prisma ./tools/prisma
+RUN pnpm run prisma:generate
+
+ENV TZ=UTC
+ENV PORT=3000
+ENV NODE_ENV=production
+
+EXPOSE 3000
+
+CMD [ "dumb-init", "pnpm", "run", "start" ]

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Amruth Pillai
+Copyright (c) 2023 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

README.md

@@ -1,96 +1,100 @@
-<img src="https://i.imgur.com/pc8Ingg.png" alt="Reactive Resume" width="256px" height="256px" />
+![Reactive Resume](https://i.imgur.com/FFc4nyZ.jpg)
+
+![App Version](https://img.shields.io/github/package-json/version/AmruthPillai/Reactive-Resume?label=version)
+[![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume)](https://hub.docker.com/repository/docker/amruthpillai/reactive-resume)
+[![GitHub Sponsors](https://img.shields.io/github/sponsors/AmruthPillai)](https://github.com/sponsors/AmruthPillai)
+[![Crowdin](https://badges.crowdin.net/reactive-resume/localized.svg)](https://crowdin.com/project/reactive-resume)
+[![Discord](https://img.shields.io/discord/1173518977851473940?label=discord&link=https%3A%2F%2Fdiscord.gg%2FhzwkZbyvUW)](https://discord.gg/hzwkZbyvUW)
 
 # Reactive Resume
 
-![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 simplifies the process of creating, updating, and sharing your resume.
 
-## [Go to App](https://rxresu.me) | [Docs](https://docs.rxresu.me)
+### [Go to App](https://rxresu.me/) | [Docs](https://docs.rxresu.me/)
 
-Reactive Resume is a free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3. With this app, you can create multiple resumes, share them with recruiters through a unique link and print as PDF, all for free, no advertisements, without losing the integrity and privacy of your data.
+## Description
 
-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.
+Reactive Resume is a free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume. With zero user tracking or advertising, your privacy is a top priority. The platform is extremely user-friendly and can be self-hosted in less than 30 seconds if you wish to own your data completely.
+
+It's available in multiple languages and comes packed with features such as real-time editing, dozens of templates, drag-and-drop customisation, and integration with OpenAI for enhancing your writing.
+
+You can share a personalised link of your resume to potential employers, track its views or downloads, and customise your page layout by dragging-and-dropping sections. The platform also supports various font options and provides dozens of templates to choose from. And yes, there's even a dark mode for a more comfortable viewing experience.
+
+Start creating your standout resume with Reactive Resume today!
+
+## Templates
+
+| Azurill                                                      | Bronzor                                                     | Chikorita                                                   |
+| ------------------------------------------------------------ | ----------------------------------------------------------- | ----------------------------------------------------------- |
+| <img src="https://i.imgur.com/jKgo04C.jpeg" width="200px" /> | <img src="https://i.imgur.com/DFNQZP2.jpg" width="200px" /> | <img src="https://i.imgur.com/Dwv8Y7f.jpg" width="200px" /> |
+
+| Ditto                                                       | Kakuna                                                      | Nosepass                                                    |
+| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
+| <img src="https://i.imgur.com/6c5lASL.jpg" width="200px" /> | <img src="https://i.imgur.com/268ML3t.jpg" width="200px" /> | <img src="https://i.imgur.com/npRLsPS.jpg" width="200px" /> |
+
+| Onyx                                                        | Pikachu                                                     | Rhyhorn                                                     |
+| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
+| <img src="https://i.imgur.com/cxplXOW.jpg" width="200px" /> | <img src="https://i.imgur.com/Y9f7qsh.jpg" width="200px" /> | <img src="https://i.imgur.com/h4kQxy2.jpg" width="200px" /> |
 
 ## 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?**
+- **Free, forever** and open-source
+- No telemetry, user tracking or advertising
+- You can self-host the application in less than 30 seconds
+- **Available in multiple languages** ([help add/improve your language here](https://translate.rxresu.me/))
+- Use your email address (or a throw-away address, no problem) to create an account
+- You can also sign in with your GitHub or Google account, and even set up two-factor authentication for extra security
+- Create as many resumes as you like under a single account, optimising each resume for every job application based on its description for a higher ATS score
+- **Bring your own OpenAI API key** and unlock features such as improving your writing, fixing spelling and grammar or changing the tone of your text in one-click
+- Translate your resume into any language using ChatGPT and import it back for easier editing
+- Create single page resumes or a resume that spans multiple pages easily
+- Customize the colours and layouts to add a personal touch to your resume.
+- Customise your page layout as you like just by dragging-and-dropping sections
+- Create custom sections that are specific to your industry if the existing ones don't fit
+- Jot down personal notes specific to your resume that's only visible to you
+- Lock a resume to prevent making any further edits (useful for master templates)
+- **Dozens of templates** to choose from, ranging from professional to modern
+- Design your resume using the standardised EuroPass design template
+- Supports printing resumes in A4 or Letter page formats
+- Design your resume with any font that's available on [Google Fonts](https://fonts.google.com/)
+- **Share a personalised link of your resume** to companies or recruiters for them to get the latest updates
+- You can track the number of views or downloads your public resume has received
+- Built with state-of-the-art (at the moment) and dependable technologies that's battle tested and peer reviewed by the open-source community on GitHub
+- **MIT License**, so do what you like with the code as long as you credit the original author
+- And yes, there’s a dark mode too 🌓
 
-## Languages
+## Built With
 
-- English
-- German (Deutsch)
-- Hindi (हिन्दी)
-- Kannada (ಕನ್ನಡ) (@aksh1251)
-- Spanish (Español) (@seba11998)
-- Tamil (தமிழ்)
+- React (Vite), for the frontend
+- NestJS, for the backend
+- Postgres (primary database)
+- Prisma ORM, which frees you to switch to any other relational database with a few minor changes in the code
+- Minio (for object storage: to store avatars, resume PDFs and previews)
+- Browserless (for headless chrome, to print PDFs and generate previews)
+- SMTP Server (to send password recovery emails)
+- Sentry (for error tracing and performance monitoring)
+- GitHub/Google OAuth (for quickly authenticating users)
+- LinguiJS and Crowdin (for translation management and localization)
 
-Help by [translating Reactive Resume](https://translate.rxresu.me) to your language!
+## Star History
 
-## 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 href="https://star-history.com/#AmruthPillai/Reactive-Resume&Date">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date&theme=dark" />
+    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date" />
+    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date" />
+  </picture>
 </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.
+Reactive Resume is packaged and distributed using the [MIT License](/LICENSE.md) 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/)
+A passion project by [Amruth Pillai](https://www.amruthpillai.com/)
+
+<p>
+  <a href="https://www.digitalocean.com/?utm_medium=opensource&utm_source=Reactive-Resume">
+    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="200px">
+  </a>
+</p>

SECURITY.md

@@ -0,0 +1,14 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 4.x.x   | :white_check_mark: |
+| 3.x.x   | :x:                |
+| 2.x.x   | :x:                |
+| 1.x.x   | :x:                |
+
+## Reporting a Vulnerability
+
+Please raise an issue on GitHub to report any security vulnerabilities in the app. If the vulnerability is potentially lethal, email me about it on hello@amruthpillai.com.

app/.gitignore

@@ -1,33 +0,0 @@
-# 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

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

app/app/.gitignore

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

app/app/build.gradle

@@ -1,46 +0,0 @@
-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

@@ -1,21 +0,0 @@
-# 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

@@ -1,26 +0,0 @@
-<?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

@@ -1,76 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<?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

@@ -1,18 +0,0 @@
-<?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

@@ -1,5 +0,0 @@
-<?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

@@ -1,5 +0,0 @@
-<?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

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

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

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

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

@@ -1,12 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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

@@ -1,23 +0,0 @@
-# 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

@@ -1,6 +0,0 @@
-#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

@@ -1,185 +0,0 @@
-#!/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

@@ -1,89 +0,0 @@
-@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

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

apps/artboard/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "extends": ["plugin:tailwindcss/recommended"],
+      "settings": {
+        "tailwindcss": {
+          "callees": ["cn", "clsx", "cva"],
+          "config": "tailwind.config.js"
+        }
+      },
+      "rules": {
+        // react
+        "react/no-unescaped-entities": "off",
+        "react/jsx-sort-props": [
+          "error",
+          {
+            "reservedFirst": true,
+            "callbacksLast": true,
+            "shorthandFirst": true,
+            "noSortAlphabetically": true
+          }
+        ],
+
+        // react-hooks
+        "react-hooks/exhaustive-deps": "off",
+
+        // tailwindcss
+        "tailwindcss/no-custom-classname": "off"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/artboard/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en-US" translate="no">
+  <head>
+    <base href="/" />
+
+    <!-- SEO -->
+    <title>Reactive Resume - A free and open-source resume builder</title>
+    <meta
+      name="description"
+      content="A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume."
+    />
+
+    <!-- Meta -->
+    <meta charset="utf-8" />
+    <meta name="googlebot" content="notranslate" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Favicon -->
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/icon/dark.svg"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/icon/light.svg"
+      media="(prefers-color-scheme: dark)"
+    />
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="/src/styles/main.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <!-- Scripts -->
+    <script type="module" src="/src/main.tsx"></script>
+
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+  </body>
+</html>

apps/artboard/postcss.config.js

@@ -0,0 +1,10 @@
+const path = require("node:path");
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: path.join(__dirname, "tailwind.config.js"),
+    },
+    autoprefixer: {},
+  },
+};

apps/artboard/project.json

@@ -0,0 +1,64 @@
+{
+  "name": "artboard",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/artboard/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/apps/artboard"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "artboard:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "artboard:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "artboard:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "artboard:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "artboard:build:development"
+        },
+        "production": {
+          "buildTarget": "artboard:build:production"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/artboard/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  },
+  "tags": ["frontend"]
+}

apps/artboard/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none"><rect width="256" height="256" rx="80" style="fill:#000;stroke:none;stroke-width:.396357"/><g fill="#09090b" fill-rule="evenodd" clip-rule="evenodd"><path d="m282.857 257.192-37.64 50.15 39.21.004 17.95-23.88 17.95 23.876h39.21l-75.11-100.256-39.21-.003zm23.775-31.764 13.696-18.345h39.21l-33.234 44.435zM119.537 135.21v129.485h36.626V230.29h19.993c17.99-.01 40.841-3.946 52.762-21.828 4.686-7.152 7.03-15.6 7.03-25.342 0-9.865-2.344-18.374-7.03-25.527-4.687-7.276-11.346-12.825-19.978-16.648-8.51-3.823-18.37-5.735-30.21-5.735zm90.963 95.183s-14.972 6.285-34.681 6.047l21.162 28.255h39.21zm-54.337-28.405h20.348c7.646 0 13.319-1.665 17.018-4.995 3.823-3.33 5.735-7.954 5.735-13.874 0-6.042-1.912-10.729-5.735-14.058-3.7-3.33-9.372-4.995-17.018-4.995h-20.348z" style="fill:#fafafa;fill-opacity:1;stroke-width:.9375" transform="matrix(.91667 0 0 .91667 -91.576 -74.838)"/></g></svg>

apps/artboard/public/icon/dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#09090b" fill-rule="evenodd" d="m16.332 15.592-3.764 5.015h3.921l1.795-2.388 1.795 2.388H24L16.489 10.58h-3.921Zm2.377-3.177 1.37-1.834H24l-3.323 4.443zM0 3.393v12.949h3.663v-3.44h1.999c1.799-.002 4.084-.395 5.276-2.183.469-.716.703-1.56.703-2.535 0-.986-.234-1.837-.703-2.552-.469-.728-1.135-1.283-1.998-1.665-.85-.382-1.837-.574-3.02-.574Zm9.096 9.519s-1.497.628-3.468.604l2.116 2.826h3.921zm-5.433-2.84h2.034c.765 0 1.332-.167 1.702-.5.382-.333.574-.796.574-1.388 0-.604-.192-1.073-.574-1.405-.37-.333-.937-.5-1.702-.5H3.663Z" clip-rule="evenodd" style="stroke-width:.09375"/></svg>

apps/artboard/public/icon/light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#09090b" fill-rule="evenodd" d="m16.332 15.592-3.764 5.015h3.921l1.795-2.388 1.795 2.388H24L16.489 10.58h-3.921Zm2.377-3.177 1.37-1.834H24l-3.323 4.443zM0 3.393v12.949h3.663v-3.44h1.999c1.799-.002 4.084-.395 5.276-2.183.469-.716.703-1.56.703-2.535 0-.986-.234-1.837-.703-2.552-.469-.728-1.135-1.283-1.998-1.665-.85-.382-1.837-.574-3.02-.574Zm9.096 9.519s-1.497.628-3.468.604l2.116 2.826h3.921zm-5.433-2.84h2.034c.765 0 1.332-.167 1.702-.5.382-.333.574-.796.574-1.388 0-.604-.192-1.073-.574-1.405-.37-.333-.937-.5-1.702-.5H3.663Z" clip-rule="evenodd" style="stroke-width:.09375;fill:#fafafa;fill-opacity:1"/></svg>

apps/artboard/src/components/page.tsx

@@ -0,0 +1,48 @@
+import { useTheme } from "@reactive-resume/hooks";
+import { cn, pageSizeMap } from "@reactive-resume/utils";
+
+import { useArtboardStore } from "../store/artboard";
+
+type Props = {
+  mode?: "preview" | "builder";
+  pageNumber: number;
+  children: React.ReactNode;
+};
+
+export const MM_TO_PX = 3.78;
+
+export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
+  const { isDarkMode } = useTheme();
+
+  const page = useArtboardStore((state) => state.resume.metadata.page);
+  const fontFamily = useArtboardStore((state) => state.resume.metadata.typography.font.family);
+
+  return (
+    <div
+      data-page={pageNumber}
+      className={cn("relative bg-white", mode === "builder" && "shadow-2xl")}
+      style={{
+        fontFamily,
+        width: `${pageSizeMap[page.format].width * MM_TO_PX}px`,
+        minHeight: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
+      }}
+    >
+      {mode === "builder" && page.options.pageNumbers && (
+        <div className={cn("absolute -top-7 left-0 font-bold", isDarkMode && "text-white")}>
+          Page {pageNumber}
+        </div>
+      )}
+
+      {children}
+
+      {mode === "builder" && page.options.breakLine && (
+        <div
+          className="absolute inset-x-0 border-b border-dashed"
+          style={{
+            top: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
+          }}
+        />
+      )}
+    </div>
+  );
+};

apps/artboard/src/components/picture.tsx

@@ -0,0 +1,33 @@
+import { cn, isUrl } from "@reactive-resume/utils";
+
+import { useArtboardStore } from "../store/artboard";
+
+type PictureProps = {
+  className?: string;
+};
+
+export const Picture = ({ className }: PictureProps) => {
+  const picture = useArtboardStore((state) => state.resume.basics.picture);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  if (!isUrl(picture.url) || picture.effects.hidden) return null;
+
+  return (
+    <img
+      src={picture.url}
+      alt="Profile"
+      className={cn(
+        "relative z-20 object-cover",
+        picture.effects.border && "border-primary",
+        picture.effects.grayscale && "grayscale",
+        className,
+      )}
+      style={{
+        maxWidth: `${picture.size}px`,
+        aspectRatio: `${picture.aspectRatio}`,
+        borderRadius: `${picture.borderRadius}px`,
+        borderWidth: `${picture.effects.border ? fontSize / 3 : 0}px`,
+      }}
+    />
+  );
+};

apps/artboard/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from "react";
+import * as ReactDOM from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
+
+import { router } from "./router";
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const root = ReactDOM.createRoot(document.querySelector("#root")!);
+
+root.render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

apps/artboard/src/pages/artboard.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useMemo } from "react";
+import { Outlet } from "react-router-dom";
+import webfontloader from "webfontloader";
+
+import { useArtboardStore } from "../store/artboard";
+
+export const ArtboardPage = () => {
+  const metadata = useArtboardStore((state) => state.resume.metadata);
+
+  const fontString = useMemo(() => {
+    const family = metadata.typography.font.family;
+    const variants = metadata.typography.font.variants.join(",");
+    const subset = metadata.typography.font.subset;
+
+    return `${family}:${variants}:${subset}`;
+  }, [metadata.typography.font]);
+
+  useEffect(() => {
+    webfontloader.load({
+      google: { families: [fontString] },
+      active: () => {
+        const width = window.document.body.offsetWidth;
+        const height = window.document.body.offsetHeight;
+        const message = { type: "PAGE_LOADED", payload: { width, height } };
+        window.postMessage(message, "*");
+      },
+    });
+  }, [fontString]);
+
+  // Font Size & Line Height
+  useEffect(() => {
+    document.documentElement.style.setProperty("font-size", `${metadata.typography.font.size}px`);
+    document.documentElement.style.setProperty("line-height", `${metadata.typography.lineHeight}`);
+
+    document.documentElement.style.setProperty("--margin", `${metadata.page.margin}px`);
+    document.documentElement.style.setProperty("--font-size", `${metadata.typography.font.size}px`);
+    document.documentElement.style.setProperty(
+      "--line-height",
+      `${metadata.typography.lineHeight}`,
+    );
+
+    document.documentElement.style.setProperty("--color-text", metadata.theme.text);
+    document.documentElement.style.setProperty("--color-primary", metadata.theme.primary);
+    document.documentElement.style.setProperty("--color-background", metadata.theme.background);
+  }, [metadata]);
+
+  // Typography Options
+  useEffect(() => {
+    // eslint-disable-next-line unicorn/prefer-spread
+    const elements = Array.from(document.querySelectorAll(`[data-page]`));
+
+    for (const el of elements) {
+      el.classList.toggle("hide-icons", metadata.typography.hideIcons);
+      el.classList.toggle("underline-links", metadata.typography.underlineLinks);
+    }
+  }, [metadata]);
+
+  return <Outlet />;
+};

apps/artboard/src/pages/builder.tsx

@@ -0,0 +1,74 @@
+import { SectionKey } from "@reactive-resume/schema";
+import { pageSizeMap, Template } from "@reactive-resume/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useMemo, useRef } from "react";
+import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+
+import { MM_TO_PX, Page } from "../components/page";
+import { useArtboardStore } from "../store/artboard";
+import { getTemplate } from "../templates";
+
+export const BuilderLayout = () => {
+  const transformRef = useRef<ReactZoomPanPinchRef>(null);
+  const format = useArtboardStore((state) => state.resume.metadata.page.format);
+  const layout = useArtboardStore((state) => state.resume.metadata.layout);
+  const template = useArtboardStore((state) => state.resume.metadata.template as Template);
+
+  const Template = useMemo(() => getTemplate(template), [template]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data.type === "ZOOM_IN") transformRef.current?.zoomIn(0.2);
+      if (event.data.type === "ZOOM_OUT") transformRef.current?.zoomOut(0.2);
+      if (event.data.type === "CENTER_VIEW") transformRef.current?.centerView();
+      if (event.data.type === "RESET_VIEW") {
+        transformRef.current?.resetTransform(0);
+        setTimeout(() => transformRef.current?.centerView(0.8, 0), 10);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [transformRef]);
+
+  return (
+    <TransformWrapper
+      ref={transformRef}
+      centerOnInit
+      maxScale={2}
+      minScale={0.4}
+      initialScale={0.8}
+      limitToBounds={false}
+    >
+      <TransformComponent
+        wrapperClass="!w-screen !h-screen"
+        contentClass="grid items-start justify-center space-x-12 pointer-events-none"
+        contentStyle={{
+          width: `${layout.length * (pageSizeMap[format].width * MM_TO_PX + 42)}px`,
+          gridTemplateColumns: `repeat(${layout.length}, 1fr)`,
+        }}
+      >
+        <AnimatePresence>
+          {layout.map((columns, pageIndex) => (
+            <motion.div
+              key={pageIndex}
+              layout
+              initial={{ opacity: 0, x: -200, y: 0 }}
+              animate={{ opacity: 1, x: 0, transition: { delay: pageIndex * 0.3 } }}
+              exit={{ opacity: 0, x: -200 }}
+            >
+              <Page mode="builder" pageNumber={pageIndex + 1}>
+                <Template isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
+              </Page>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </TransformComponent>
+    </TransformWrapper>
+  );
+};

apps/artboard/src/pages/preview.tsx

@@ -0,0 +1,24 @@
+import { SectionKey } from "@reactive-resume/schema";
+import { Template } from "@reactive-resume/utils";
+import { useMemo } from "react";
+
+import { Page } from "../components/page";
+import { useArtboardStore } from "../store/artboard";
+import { getTemplate } from "../templates";
+
+export const PreviewLayout = () => {
+  const layout = useArtboardStore((state) => state.resume.metadata.layout);
+  const template = useArtboardStore((state) => state.resume.metadata.template as Template);
+
+  const Template = useMemo(() => getTemplate(template), [template]);
+
+  return (
+    <>
+      {layout.map((columns, pageIndex) => (
+        <Page key={pageIndex} mode="preview" pageNumber={pageIndex + 1}>
+          <Template isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
+        </Page>
+      ))}
+    </>
+  );
+};

apps/artboard/src/providers/index.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+import { Outlet } from "react-router-dom";
+
+import { useArtboardStore } from "../store/artboard";
+
+export const Providers = () => {
+  const resume = useArtboardStore((state) => state.resume);
+  const setResume = useArtboardStore((state) => state.setResume);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data.type === "SET_RESUME") setResume(event.data.payload);
+      if (event.data.type === "SET_THEME") {
+        event.data.payload === "dark"
+          ? document.documentElement.classList.add("dark")
+          : document.documentElement.classList.remove("dark");
+      }
+    };
+
+    const resumeData = window.localStorage.getItem("resume");
+    if (resumeData) {
+      setResume(JSON.parse(resumeData));
+      return;
+    }
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [setResume]);
+
+  // Only for testing, in production this will be fetched from window.postMessage
+  // useEffect(() => {
+  //   setResume(sampleResume);
+  // }, [setResume]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!resume) return null;
+
+  return <Outlet />;
+};

apps/artboard/src/router/index.tsx

@@ -0,0 +1,17 @@
+import { createBrowserRouter, createRoutesFromChildren, Route } from "react-router-dom";
+
+import { ArtboardPage } from "../pages/artboard";
+import { BuilderLayout } from "../pages/builder";
+import { PreviewLayout } from "../pages/preview";
+import { Providers } from "../providers";
+
+export const routes = createRoutesFromChildren(
+  <Route element={<Providers />}>
+    <Route path="artboard" element={<ArtboardPage />}>
+      <Route path="builder" element={<BuilderLayout />} />
+      <Route path="preview" element={<PreviewLayout />} />
+    </Route>
+  </Route>,
+);
+
+export const router = createBrowserRouter(routes);

apps/artboard/src/store/artboard.ts

@@ -0,0 +1,14 @@
+import { ResumeData } from "@reactive-resume/schema";
+import { create } from "zustand";
+
+export type ArtboardStore = {
+  resume: ResumeData;
+  setResume: (resume: ResumeData) => void;
+};
+
+export const useArtboardStore = create<ArtboardStore>()((set) => ({
+  resume: null as unknown as ResumeData,
+  setResume: (resume) => {
+    set({ resume });
+  },
+}));

apps/artboard/src/styles/main.css

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  font-variant-ligatures: none;
+
+  @apply border-current;
+}
+
+#root {
+  @apply antialiased;
+}
+
+[data-page].hide-icons .ph {
+  @apply hidden;
+}
+
+[data-page].underline-links a {
+  @apply underline underline-offset-2;
+}
+
+.wysiwyg {
+  @apply prose max-w-none text-current prose-headings:mt-0 prose-headings:mb-2 prose-p:mt-0 prose-p:mb-2 prose-ul:mt-0 prose-ul:mb-2 prose-li:mt-0 prose-li:mb-2 prose-ol:mt-0 prose-ol:mb-2 prose-img:mt-0 prose-img:mb-2 prose-hr:mt-0 prose-hr:mb-2 prose-p:leading-normal prose-li:leading-normal prose-a:break-all;
+}

apps/artboard/src/templates/azurill.tsx

@@ -0,0 +1,521 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-2 pb-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <div className="mb-2 hidden font-bold text-primary group-[.main]:block">
+        <h4>{section.name}</h4>
+      </div>
+
+      <div className="mb-2 hidden items-center gap-x-2 text-center font-bold text-primary group-[.sidebar]:flex">
+        <div className="size-1.5 rounded-full border border-primary" />
+        <h4>{section.name}</h4>
+        <div className="size-1.5 rounded-full border border-primary" />
+      </div>
+
+      <main className={cn("relative space-y-2", "border-l border-primary pl-4")}>
+        <div className="absolute left-[-4.5px] top-[8px] hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
+
+        <div
+          dangerouslySetInnerHTML={{ __html: section.content }}
+          className="wysiwyg"
+          style={{ columns: section.columns }}
+        />
+      </main>
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="relative h-1 w-[128px] group-[.sidebar]:mx-auto">
+    <div className="absolute inset-0 h-1 w-[128px] rounded bg-primary opacity-25" />
+    <div
+      className="absolute inset-0 h-1 rounded bg-primary"
+      style={{ width: linearTransform(level, 0, 5, 0, 128) }}
+    />
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <div className="mb-2 hidden font-bold text-primary group-[.main]:block">
+        <h4>{section.name}</h4>
+      </div>
+
+      <div className="mx-auto mb-2 hidden items-center gap-x-2 text-center font-bold text-primary group-[.sidebar]:flex">
+        <div className="size-1.5 rounded-full border border-primary" />
+        <h4>{section.name}</h4>
+        <div className="size-1.5 rounded-full border border-primary" />
+      </div>
+
+      <div
+        className="grid gap-x-6 gap-y-3 group-[.sidebar]:mx-auto group-[.sidebar]:text-center"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div
+                key={item.id}
+                className={cn(
+                  "relative space-y-2",
+                  "border-primary group-[.main]:border-l group-[.main]:pl-4",
+                  className,
+                )}
+              >
+                <div>{children?.(item as T)}</div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url !== undefined && <Link url={url} />}
+
+                <div className="absolute left-[-4.5px] top-px hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.score}</div>
+          <div>{item.studyType}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles": {
+      return <Profiles />;
+    }
+    case "summary": {
+      return <Summary />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Azurill = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-3">
+      {isFirstPage && <Header />}
+
+      <div className="grid grid-cols-3 gap-x-4">
+        <div className="sidebar group space-y-4">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="main group col-span-2 space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/bronzor.tsx

@@ -0,0 +1,528 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex flex-col items-center space-y-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
+      <div>
+        <h4 className="text-base font-bold">{section.name}</h4>
+      </div>
+
+      <div
+        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg col-span-4"
+        style={{ columns: section.columns }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("size-2 rounded-full border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
+      <div>
+        <h4 className="text-base font-bold">{section.name}</h4>
+      </div>
+
+      <div
+        className="col-span-4 grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles": {
+      return <Profiles />;
+    }
+    case "summary": {
+      return <Summary />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Bronzor = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-4">
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/chikorita.tsx

@@ -0,0 +1,531 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex items-center space-x-4">
+      <Picture />
+
+      <div className="space-y-2">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
+
+      <div
+        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn(
+          "size-2 rounded-full border border-primary group-[.sidebar]:border-background",
+          level > index && "bg-primary group-[.sidebar]:bg-background",
+        )}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles": {
+      return <Profiles />;
+    }
+    case "summary": {
+      return <Summary />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="grid h-full grid-cols-3">
+      <div className="main p-custom group col-span-2 space-y-4">
+        {isFirstPage && <Header />}
+
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+
+      <div className="sidebar p-custom group h-full space-y-4 bg-primary text-background">
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/ditto.tsx

@@ -0,0 +1,564 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="p-custom relative grid grid-cols-3 space-x-4 pb-0">
+      <Picture className="mx-auto" />
+
+      <div className="relative z-10 col-span-2 text-background">
+        <div className="space-y-0.5">
+          <h2 className="text-3xl font-bold">{basics.name}</h2>
+          <p>{basics.headline}</p>
+        </div>
+
+        <div className="text-text col-span-2 col-start-2 mt-10">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+            {basics.location && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-map-pin text-primary" />
+                  <div>{basics.location}</div>
+                </div>
+                <div className="bg-text size-1 rounded-full last:hidden" />
+              </>
+            )}
+
+            {basics.phone && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-phone text-primary" />
+                  <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                    {basics.phone}
+                  </a>
+                </div>
+                <div className="bg-text size-1 rounded-full last:hidden" />
+              </>
+            )}
+            {basics.email && (
+              <>
+                <div className="flex items-center gap-x-1.5">
+                  <i className="ph ph-bold ph-at text-primary" />
+                  <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                    {basics.email}
+                  </a>
+                </div>
+                <div className="bg-text size-1 rounded-full last:hidden" />
+              </>
+            )}
+            {isUrl(basics.url.href) && (
+              <>
+                <Link url={basics.url} />
+                <div className="bg-text size-1 rounded-full last:hidden" />
+              </>
+            )}
+            {basics.customFields.map((item) => (
+              <Fragment key={item.id}>
+                <div className="flex items-center gap-x-1.5">
+                  <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+                  <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                </div>
+                <div className="bg-text size-1 rounded-full last:hidden" />
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 text-base font-bold">{section.name}</h4>
+
+      <div
+        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2 w-4 border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 text-base font-bold">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div
+                key={item.id}
+                className={cn("relative space-y-2 pl-4 group-[.sidebar]:pl-0", className)}
+              >
+                <div className="relative -ml-4 group-[.sidebar]:ml-0">
+                  <div className="pl-4 group-[.sidebar]:pl-0">
+                    {children?.(item as T)}
+                    {url !== undefined && <Link url={url} />}
+                  </div>
+
+                  <div className="absolute inset-y-0 -left-px border-l-4 border-primary group-[.sidebar]:hidden" />
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                <div className="absolute inset-y-0 left-0 border-l border-primary group-[.sidebar]:hidden" />
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} className="space-y-0" keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles": {
+      return <Profiles />;
+    }
+    case "summary": {
+      return <Summary />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Ditto = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div>
+      {isFirstPage && (
+        <div className="relative">
+          <Header />
+          <div className="absolute inset-x-0 top-0 h-[85px] w-full bg-primary" />
+        </div>
+      )}
+
+      <div className="grid grid-cols-3">
+        <div className="sidebar p-custom group space-y-4">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="main p-custom group col-span-2 space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/gengar.tsx

@@ -0,0 +1,546 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, hexToRgb, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="p-custom space-y-4 bg-primary text-background">
+      <Picture className="border-background" />
+
+      <div>
+        <h2 className="text-2xl font-bold">{basics.name}</h2>
+        <p>{basics.headline}</p>
+      </div>
+
+      <div className="flex flex-col items-start gap-y-2 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        {isUrl(basics.url.href) && <Link url={basics.url} />}
+        {basics.customFields.map((item) => (
+          <Fragment key={item.id}>
+            <div className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`)} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <div
+        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-2.5 w-5 border border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-background" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-base font-bold">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} className="space-y-1" keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right group-[.sidebar]:text-left">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles": {
+      return <Profiles />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Gengar = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+
+  return (
+    <div className="grid min-h-[inherit] grid-cols-3">
+      <div
+        className={cn(
+          "sidebar group flex flex-col",
+          !(isFirstPage || sidebar.length > 0) && "hidden",
+        )}
+      >
+        {isFirstPage && <Header />}
+
+        <div
+          className="p-custom flex-1 space-y-4"
+          style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+        >
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+
+      <div className="main group col-span-2">
+        {isFirstPage && (
+          <div
+            className="p-custom space-y-4"
+            style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+          >
+            <Summary />
+          </div>
+        )}
+
+        <div className="p-custom space-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/glalie.tsx

@@ -0,0 +1,541 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, hexToRgb, isEmptyString, isUrl, linearTransform } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="flex flex-col items-center space-y-4 text-center">
+      <Picture />
+
+      <div className="space-y-4">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="flex flex-col items-start gap-y-1.5 rounded border border-primary px-3 py-4 text-left text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon} text-primary`)} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
+
+      <div
+        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => {
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+
+  return (
+    <div className="relative">
+      <div
+        className="h-2.5 w-full rounded-sm"
+        style={{ backgroundColor: hexToRgb(primaryColor, 0.4) }}
+      />
+      <div
+        className="absolute inset-y-0 left-0 h-2.5 w-full rounded-sm bg-primary"
+        style={{ width: `${linearTransform(level, 0, 5, 0, 100)}%` }}
+      />
+    </div>
+  );
+};
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b pb-0.5 text-sm font-bold group-[.sidebar]:text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-start justify-between group-[.sidebar]:flex-col group-[.sidebar]:items-start">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles": {
+      return <Profiles />;
+    }
+    case "summary": {
+      return <Summary />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Glalie = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+
+  return (
+    <div className="grid min-h-[inherit] grid-cols-3">
+      <div
+        className="sidebar p-custom group space-y-4"
+        style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+      >
+        {isFirstPage && <Header />}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+
+      <div className="main p-custom group col-span-2 space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/index.tsx

@@ -0,0 +1,58 @@
+import { Template } from "@reactive-resume/utils";
+
+import { Azurill } from "./azurill";
+import { Bronzor } from "./bronzor";
+import { Chikorita } from "./chikorita";
+import { Ditto } from "./ditto";
+import { Gengar } from "./gengar";
+import { Glalie } from "./glalie";
+import { Kakuna } from "./kakuna";
+import { Leafish } from "./leafish";
+import { Nosepass } from "./nosepass";
+import { Onyx } from "./onyx";
+import { Pikachu } from "./pikachu";
+import { Rhyhorn } from "./rhyhorn";
+
+export const getTemplate = (template: Template) => {
+  switch (template) {
+    case "azurill": {
+      return Azurill;
+    }
+    case "bronzor": {
+      return Bronzor;
+    }
+    case "chikorita": {
+      return Chikorita;
+    }
+    case "ditto": {
+      return Ditto;
+    }
+    case "gengar": {
+      return Gengar;
+    }
+    case "glalie": {
+      return Glalie;
+    }
+    case "kakuna": {
+      return Kakuna;
+    }
+    case "leafish": {
+      return Leafish;
+    }
+    case "nosepass": {
+      return Nosepass;
+    }
+    case "onyx": {
+      return Onyx;
+    }
+    case "pikachu": {
+      return Pikachu;
+    }
+    case "rhyhorn": {
+      return Rhyhorn;
+    }
+    default: {
+      return Onyx;
+    }
+  }
+};

apps/artboard/src/templates/kakuna.tsx

@@ -0,0 +1,482 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <div className="flex flex-col items-center justify-center space-y-2 pb-2 text-center">
+      <Picture />
+
+      <div>
+        <div className="text-2xl font-bold">{basics.name}</div>
+        <div className="text-base">{basics.headline}</div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+        {basics.location && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-map-pin text-primary" />
+            <div>{basics.location}</div>
+          </div>
+        )}
+        {basics.phone && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-phone text-primary" />
+            <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+              {basics.phone}
+            </a>
+          </div>
+        )}
+        {basics.email && (
+          <div className="flex items-center gap-x-1.5">
+            <i className="ph ph-bold ph-at text-primary" />
+            <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+              {basics.email}
+            </a>
+          </div>
+        )}
+        <Link url={basics.url} />
+        {basics.customFields.map((item) => (
+          <div key={item.id} className="flex items-center gap-x-1.5">
+            <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+            <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+          </div>
+        ))}
+      </div>
+
+      {profiles.visible && profiles.items.length > 0 && (
+        <div className="flex items-center gap-x-3 gap-y-0.5">
+          {profiles.items
+            .filter((item) => item.visible)
+            .map((item) => (
+              <div key={item.id} className="flex items-center gap-x-2">
+                <Link
+                  url={item.url}
+                  label={item.username}
+                  className="text-sm"
+                  icon={
+                    <img
+                      className="ph"
+                      width={fontSize}
+                      height={fontSize}
+                      alt={item.network}
+                      src={`https://cdn.simpleicons.org/${item.icon}`}
+                    />
+                  }
+                />
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="mb-2 border-b border-primary text-center font-bold text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-3 w-5 rounded border-2 border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-center font-bold text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>{children?.(item as T)}</div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url !== undefined && <Link url={url} />}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.score}</div>
+          <div>{item.studyType}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div>{item.location}</div>
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "summary": {
+      return <Summary />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Kakuna = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-4">
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/leafish.tsx

@@ -0,0 +1,480 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, hexToRgb, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+  const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <div>
+      <div
+        className="p-custom flex items-center space-x-8"
+        style={{ backgroundColor: hexToRgb(primaryColor, 0.2) }}
+      >
+        <div className="space-y-3">
+          <div>
+            <div className="text-3xl font-bold">{basics.name}</div>
+            <div className="text-base font-medium text-primary">{basics.headline}</div>
+          </div>
+
+          <div
+            dangerouslySetInnerHTML={{ __html: section.content }}
+            className="wysiwyg"
+            style={{ columns: section.columns }}
+          />
+        </div>
+
+        <Picture />
+      </div>
+
+      <div className="p-custom space-y-3" style={{ backgroundColor: hexToRgb(primaryColor, 0.4) }}>
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+
+        {profiles.visible && profiles.items.length > 0 && (
+          <div className="flex items-center gap-x-3 gap-y-0.5">
+            {profiles.items
+              .filter((item) => item.visible)
+              .map((item) => (
+                <div key={item.id} className="flex items-center gap-x-2">
+                  <Link
+                    url={item.url}
+                    label={item.username}
+                    className="text-sm"
+                    icon={
+                      <img
+                        className="ph"
+                        width={fontSize}
+                        height={fontSize}
+                        alt={item.network}
+                        src={`https://cdn.simpleicons.org/${item.icon}`}
+                      />
+                    }
+                  />
+                </div>
+              ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("h-3 w-6 border-2 border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="mb-2 border-b border-primary text-left font-bold text-primary">
+        {section.name}
+      </h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>{children?.(item as T)}</div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+
+                {url !== undefined && <Link url={url} />}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.score}</div>
+          <div>{item.studyType}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+          <div className="font-bold">{item.date}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div>
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+            <div>{item.location}</div>
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Leafish = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div>
+      {isFirstPage && <Header />}
+
+      <div className="p-custom grid grid-cols-2 items-start space-x-6">
+        <div className="grid gap-y-4">
+          {main.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+
+        <div className="grid gap-y-4">
+          {sidebar.map((section) => (
+            <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/nosepass.tsx

@@ -0,0 +1,542 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Profile,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+
+  return (
+    <div className="grid grid-cols-4 gap-x-6">
+      <div className="mt-1 space-y-2 text-right">
+        <Picture className="ml-auto" />
+      </div>
+
+      <div className="col-span-3 space-y-2">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="space-y-1 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+        </div>
+
+        <div className="flex flex-wrap gap-x-3 text-sm">
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span className="text-primary">{item.name}</span>
+              <span>{item.value}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id} className="grid grid-cols-4 gap-x-6">
+      <div className="text-right">
+        <h4 className="font-medium text-primary">{section.name}</h4>
+      </div>
+
+      <div className="col-span-3">
+        <div className="relative">
+          <hr className="mt-3 border-primary pb-3" />
+          <div className="absolute bottom-3 right-0 size-3 bg-primary" />
+        </div>
+
+        <div
+          dangerouslySetInnerHTML={{ __html: section.content }}
+          className="wysiwyg"
+          style={{ columns: section.columns }}
+        />
+      </div>
+    </section>
+  );
+};
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  urlKey?: keyof T;
+  dateKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  urlKey,
+  dateKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className={cn("grid", dateKey !== undefined && "gap-y-4")}>
+      <div className="grid grid-cols-4 gap-x-6">
+        <div className="text-right">
+          <h4 className="font-medium text-primary">{section.name}</h4>
+        </div>
+
+        <div className="col-span-3">
+          <div className="relative">
+            <hr className="mt-3 border-primary" />
+            <div className="absolute bottom-0 right-0 size-3 bg-primary" />
+          </div>
+        </div>
+      </div>
+
+      {dateKey !== undefined && (
+        <div className="grid grid-cols-4 gap-x-6 gap-y-4">
+          {section.items
+            .filter((item) => item.visible)
+            .map((item) => {
+              const url = (urlKey && get(item, urlKey)) as URL | undefined;
+              const date = (dateKey && get(item, dateKey, "")) as string | undefined;
+              const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+              const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+              return (
+                <Fragment key={item.id}>
+                  <div className="text-right font-medium text-primary">{date}</div>
+
+                  <div className="col-span-3 space-y-1">
+                    {children?.(item as T)}
+
+                    {url !== undefined && <Link url={url} />}
+
+                    {summary !== undefined && !isEmptyString(summary) && (
+                      <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                    )}
+
+                    {keywords !== undefined && keywords.length > 0 && (
+                      <p className="text-sm">{keywords.join(", ")}</p>
+                    )}
+                  </div>
+                </Fragment>
+              );
+            })}
+        </div>
+      )}
+
+      {dateKey === undefined && (
+        <div className="grid grid-cols-4 gap-x-6">
+          <div
+            className="col-span-3 col-start-2 grid gap-x-6 gap-y-3"
+            style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+          >
+            {section.items
+              .filter((item) => item.visible)
+              .map((item) => {
+                const url = (urlKey && get(item, urlKey)) as URL | undefined;
+                const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+                const keywords = (keywordsKey && get(item, keywordsKey, [])) as
+                  | string[]
+                  | undefined;
+
+                return (
+                  <div key={item.id}>
+                    {children?.(item as T)}
+
+                    {url !== undefined && <Link url={url} />}
+
+                    {summary !== undefined && !isEmptyString(summary) && (
+                      <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                    )}
+
+                    {keywords !== undefined && keywords.length > 0 && (
+                      <p className="text-sm">{keywords.join(", ")}</p>
+                    )}
+                  </div>
+                );
+              })}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};
+
+const Profiles = () => {
+  const section = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <Section<Profile> section={section}>
+      {(item) => (
+        <div>
+          {isUrl(item.url.href) ? (
+            <Link
+              url={item.url}
+              label={item.username}
+              icon={
+                <img
+                  className="ph"
+                  width={fontSize}
+                  height={fontSize}
+                  alt={item.network}
+                  src={`https://cdn.simpleicons.org/${item.icon}`}
+                />
+              }
+            />
+          ) : (
+            <p>{item.username}</p>
+          )}
+          <p className="text-sm">{item.network}</p>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.company}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.institution}</div>
+          <div>{item.area}</div>
+          <div>{item.studyType}</div>
+          <div>{item.score}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.title}</div>
+          <div>{item.awarder}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.issuer}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.publisher}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" dateKey="date" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.organization}</div>
+          <div>{item.position}</div>
+          <div>{item.location}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project>
+      section={section}
+      urlKey="url"
+      dateKey="date"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      dateKey="date"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+          <div>{item.location}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "profiles": {
+      return <Profiles />;
+    }
+    case "summary": {
+      return <Summary />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Nosepass = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const name = useArtboardStore((state) => state.resume.basics.name);
+
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-6">
+      <div className="flex items-center justify-between">
+        <img alt="Europass Logo" className="h-[42px]" src="https://i.imgur.com/eRK005p.png" />
+
+        <p className="font-medium text-primary">Curriculum Vitae</p>
+
+        <p className="font-medium text-primary">{name}</p>
+      </div>
+
+      {isFirstPage && <Header />}
+
+      <div className="space-y-4">
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/artboard/src/templates/onyx.tsx

@@ -0,0 +1,518 @@
+import {
+  Award,
+  Certification,
+  CustomSection,
+  CustomSectionGroup,
+  Education,
+  Experience,
+  Interest,
+  Language,
+  Project,
+  Publication,
+  Reference,
+  SectionKey,
+  SectionWithItem,
+  Skill,
+  URL,
+  Volunteer,
+} from "@reactive-resume/schema";
+import { cn, isEmptyString, isUrl } from "@reactive-resume/utils";
+import get from "lodash.get";
+import React, { Fragment } from "react";
+
+import { Picture } from "../components/picture";
+import { useArtboardStore } from "../store/artboard";
+import { TemplateProps } from "../types/template";
+
+const Header = () => {
+  const basics = useArtboardStore((state) => state.resume.basics);
+  const profiles = useArtboardStore((state) => state.resume.sections.profiles);
+  const fontSize = useArtboardStore((state) => state.resume.metadata.typography.font.size);
+
+  return (
+    <div className="flex items-center justify-between space-x-4 border-b border-primary pb-5">
+      <Picture />
+
+      <div className="flex-1 space-y-2">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {profiles.visible && profiles.items.length > 0 && (
+        <div
+          className="grid gap-x-4 gap-y-1 text-right"
+          style={{ gridTemplateColumns: `repeat(${profiles.columns}, auto)` }}
+        >
+          {profiles.items
+            .filter((item) => item.visible)
+            .map((item) => (
+              <div key={item.id} className="flex items-center gap-x-2">
+                <Link
+                  url={item.url}
+                  label={item.username}
+                  className="text-sm"
+                  icon={
+                    <img
+                      className="ph"
+                      width={fontSize}
+                      height={fontSize}
+                      alt={item.network}
+                      src={`https://cdn.simpleicons.org/${item.icon}`}
+                    />
+                  }
+                />
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const Summary = () => {
+  const section = useArtboardStore((state) => state.resume.sections.summary);
+
+  if (!section.visible || isEmptyString(section.content)) return null;
+
+  return (
+    <section id={section.id}>
+      <h4 className="font-bold text-primary">{section.name}</h4>
+
+      <div
+        dangerouslySetInnerHTML={{ __html: section.content }}
+        className="wysiwyg"
+        style={{ columns: section.columns }}
+      />
+    </section>
+  );
+};
+
+type RatingProps = { level: number };
+
+const Rating = ({ level }: RatingProps) => (
+  <div className="flex items-center gap-x-1.5">
+    {Array.from({ length: 5 }).map((_, index) => (
+      <div
+        key={index}
+        className={cn("size-3 rounded border-2 border-primary", level > index && "bg-primary")}
+      />
+    ))}
+  </div>
+);
+
+type LinkProps = {
+  url: URL;
+  icon?: React.ReactNode;
+  label?: string;
+  className?: string;
+};
+
+const Link = ({ url, icon, label, className }: LinkProps) => {
+  if (!isUrl(url.href)) return null;
+
+  return (
+    <div className="flex items-center gap-x-1.5">
+      {icon ?? <i className="ph ph-bold ph-link text-primary" />}
+      <a
+        href={url.href}
+        target="_blank"
+        rel="noreferrer noopener nofollow"
+        className={cn("inline-block", className)}
+      >
+        {label ?? (url.label || url.href)}
+      </a>
+    </div>
+  );
+};
+
+type SectionProps<T> = {
+  section: SectionWithItem<T> | CustomSectionGroup;
+  children?: (item: T) => React.ReactNode;
+  className?: string;
+  urlKey?: keyof T;
+  levelKey?: keyof T;
+  summaryKey?: keyof T;
+  keywordsKey?: keyof T;
+};
+
+const Section = <T,>({
+  section,
+  children,
+  className,
+  urlKey,
+  levelKey,
+  summaryKey,
+  keywordsKey,
+}: SectionProps<T>) => {
+  if (!section.visible || section.items.length === 0) return null;
+
+  return (
+    <section id={section.id} className="grid">
+      <h4 className="font-bold text-primary">{section.name}</h4>
+
+      <div
+        className="grid gap-x-6 gap-y-3"
+        style={{ gridTemplateColumns: `repeat(${section.columns}, 1fr)` }}
+      >
+        {section.items
+          .filter((item) => item.visible)
+          .map((item) => {
+            const url = (urlKey && get(item, urlKey)) as URL | undefined;
+            const level = (levelKey && get(item, levelKey, 0)) as number | undefined;
+            const summary = (summaryKey && get(item, summaryKey, "")) as string | undefined;
+            const keywords = (keywordsKey && get(item, keywordsKey, [])) as string[] | undefined;
+
+            return (
+              <div key={item.id} className={cn("space-y-2", className)}>
+                <div>
+                  {children?.(item as T)}
+                  {url !== undefined && <Link url={url} />}
+                </div>
+
+                {summary !== undefined && !isEmptyString(summary) && (
+                  <div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
+                )}
+
+                {level !== undefined && level > 0 && <Rating level={level} />}
+
+                {keywords !== undefined && keywords.length > 0 && (
+                  <p className="text-sm">{keywords.join(", ")}</p>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </section>
+  );
+};
+
+const Experience = () => {
+  const section = useArtboardStore((state) => state.resume.sections.experience);
+
+  return (
+    <Section<Experience> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.company}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Education = () => {
+  const section = useArtboardStore((state) => state.resume.sections.education);
+
+  return (
+    <Section<Education> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.institution}</div>
+            <div>{item.area}</div>
+            <div>{item.score}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.studyType}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Awards = () => {
+  const section = useArtboardStore((state) => state.resume.sections.awards);
+
+  return (
+    <Section<Award> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.title}</div>
+            <div>{item.awarder}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Certifications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.certifications);
+
+  return (
+    <Section<Certification> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.issuer}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Skills = () => {
+  const section = useArtboardStore((state) => state.resume.sections.skills);
+
+  return (
+    <Section<Skill> section={section} levelKey="level" keywordsKey="keywords">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Interests = () => {
+  const section = useArtboardStore((state) => state.resume.sections.interests);
+
+  return (
+    <Section<Interest> section={section} keywordsKey="keywords" className="space-y-0.5">
+      {(item) => <div className="font-bold">{item.name}</div>}
+    </Section>
+  );
+};
+
+const Publications = () => {
+  const section = useArtboardStore((state) => state.resume.sections.publications);
+
+  return (
+    <Section<Publication> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.publisher}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Volunteer = () => {
+  const section = useArtboardStore((state) => state.resume.sections.volunteer);
+
+  return (
+    <Section<Volunteer> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.organization}</div>
+            <div>{item.position}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Languages = () => {
+  const section = useArtboardStore((state) => state.resume.sections.languages);
+
+  return (
+    <Section<Language> section={section} levelKey="level">
+      {(item) => (
+        <div className="space-y-0.5">
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Projects = () => {
+  const section = useArtboardStore((state) => state.resume.sections.projects);
+
+  return (
+    <Section<Project> section={section} urlKey="url" summaryKey="summary" keywordsKey="keywords">
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const References = () => {
+  const section = useArtboardStore((state) => state.resume.sections.references);
+
+  return (
+    <Section<Reference> section={section} urlKey="url" summaryKey="summary">
+      {(item) => (
+        <div>
+          <div className="font-bold">{item.name}</div>
+          <div>{item.description}</div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const Custom = ({ id }: { id: string }) => {
+  const section = useArtboardStore((state) => state.resume.sections.custom[id]);
+
+  return (
+    <Section<CustomSection>
+      section={section}
+      urlKey="url"
+      summaryKey="summary"
+      keywordsKey="keywords"
+    >
+      {(item) => (
+        <div className="flex items-start justify-between">
+          <div className="text-left">
+            <div className="font-bold">{item.name}</div>
+            <div>{item.description}</div>
+          </div>
+
+          <div className="shrink-0 text-right">
+            <div className="font-bold">{item.date}</div>
+            <div>{item.location}</div>
+          </div>
+        </div>
+      )}
+    </Section>
+  );
+};
+
+const mapSectionToComponent = (section: SectionKey) => {
+  switch (section) {
+    case "summary": {
+      return <Summary />;
+    }
+    case "experience": {
+      return <Experience />;
+    }
+    case "education": {
+      return <Education />;
+    }
+    case "awards": {
+      return <Awards />;
+    }
+    case "certifications": {
+      return <Certifications />;
+    }
+    case "skills": {
+      return <Skills />;
+    }
+    case "interests": {
+      return <Interests />;
+    }
+    case "publications": {
+      return <Publications />;
+    }
+    case "volunteer": {
+      return <Volunteer />;
+    }
+    case "languages": {
+      return <Languages />;
+    }
+    case "projects": {
+      return <Projects />;
+    }
+    case "references": {
+      return <References />;
+    }
+    default: {
+      if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
+
+      return null;
+    }
+  }
+};
+
+export const Onyx = ({ columns, isFirstPage = false }: TemplateProps) => {
+  const [main, sidebar] = columns;
+
+  return (
+    <div className="p-custom space-y-4">
+      {isFirstPage && <Header />}
+
+      {main.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
+
+      {sidebar.map((section) => (
+        <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+      ))}
+    </div>
+  );
+};