diff --git a/.eslintrc.json b/.eslintrc.json
index 9e26eca..9638426 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,27 +1,26 @@
 {
   "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "extraFileExtensions": [".astro"]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": { "project": "./tsconfig.eslint.json" }
+    }
+  },
   "overrides": [
     {
-      // Files containing TypeScript code.
       "files": ["*.ts", "*.tsx", "*.astro"],
       "extends": ["plugin:@typescript-eslint/recommended"],
-      "parser": "@typescript-eslint/parser",
-      "parserOptions": {
-        "project": "./tsconfig.eslint.json",
-        "extraFileExtensions": [".astro"]
-      },
-      "settings": {
-        "import/resolver": {
-          "typescript": { "project": "./tsconfig.eslint.json" }
-        }
-      },
       "rules": {
         // Create empty interface only when it extends other interface.
         "@typescript-eslint/no-empty-interface": [2, { "allowSingleExtends": true }]
       }
     },
     {
-      "files": ["*.tsx"],
+      "files": ["*.ts", "*.tsx"],
       "extends": [
         "airbnb",
         "airbnb-typescript",
@@ -43,20 +42,17 @@
         "react/require-default-props": [2, { "functions": "defaultArguments" }]
       }
     },
-    {
-      "files": ["*.ts"],
-      "extends": [
-        "airbnb/base",
-        "airbnb-typescript/base",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking"
-      ]
-    },
     {
       "files": ["*.astro"],
       "globals": {
         "astroHTML": true
       },
-      "extends": ["airbnb/base", "airbnb-typescript/base", "plugin:astro/all", "plugin:astro/jsx-a11y-strict"],
+      "extends": [
+        "airbnb/base",
+        "airbnb-typescript/base",
+        "plugin:astro/recommended",
+        "plugin:astro/jsx-a11y-recommended"
+      ],
       "parser": "astro-eslint-parser",
       "parserOptions": {
         "parser": "@typescript-eslint/parser"
@@ -70,10 +66,9 @@
       "extends": ["airbnb/base"]
     },
     {
-      // All linted files.
       "files": ["*.ts", "*.tsx", "*.astro", "*.cjs"],
       "plugins": ["file-progress", "simple-import-sort"],
-      "extends": ["plugin:eslint-comments/recommended", "plugin:prettier/recommended"],
+      "extends": ["plugin:eslint-comments/recommended", "prettier"],
       "rules": {
         // Shows information about currently processing file in the console.
         "file-progress/activate": 1,
@@ -88,25 +83,9 @@
         "import/no-extraneous-dependencies": [2, { "devDependencies": ["astro.config.ts", "tailwind.config.cjs"] }],
 
         // Imports and exports order.
-        "simple-import-sort/imports": [
-          2,
-          {
-            "groups": [
-              ["^\\u0000"], // Side effects
-              ["^@?\\w"], // Packages
-              ["^"], // Absolute imports
-              ["^\\."] // Relative imports
-            ]
-          }
-        ],
+        "simple-import-sort/imports": 2,
         "simple-import-sort/exports": 2
       }
-    },
-    {
-      "files": ["**/constants/*.ts"],
-      "rules": {
-        "import/prefer-default-export": 0
-      }
     }
   ]
 }
diff --git a/.github/workflows/check-code-quality.yml b/.github/workflows/check-code-quality.yml
index ec1514e..1d92912 100644
--- a/.github/workflows/check-code-quality.yml
+++ b/.github/workflows/check-code-quality.yml
@@ -8,18 +8,32 @@ on:
 
 jobs:
   eslint:
-    name: Run ESlint
+    name: Run ESlint check
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: "npm"
+          cache: 'npm'
       - name: Install dependencies
         run: npm ci
       - name: Run ESLint
-        run: npm run lint
+        run: npm run eslint:check
+
+  prettier:
+    name: Run Prettier check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run ESLint
+        run: npm run prettier:check
 
   typescript:
     name: Check TypeScript types
@@ -29,11 +43,11 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: "npm"
+          cache: 'npm'
       - name: Install dependencies
         run: npm ci
       - name: Run TypeScript types check
-        run: npm run lint:ts
+        run: npm run ts:check
 
   build:
     name: Build project
@@ -43,8 +57,8 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: "npm"
+          cache: 'npm'
       - name: Install dependencies
         run: npm ci
-      - name: Run TypeScript types check
+      - name: Run Astro build command
         run: npm run build
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index d3793d0..f82509d 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -2,4 +2,9 @@
 # See: https://prettier.io/docs/en/configuration.html#editorconfig
 
 singleQuote: true
-endOfLine: auto
+endOfLine: 'auto'
+
+pluginSearchDirs: false
+plugins:
+  - 'prettier-plugin-astro'
+  - 'prettier-plugin-tailwindcss'
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8c88839..bda4585 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,11 +8,10 @@
   "tailwindCSS.classAttributes": ["class", "className", "class:list"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "[astro]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
+  "[astro]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
   "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
-  "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
-  "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  }
+  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "prettier.documentSelectors": ["**/*.astro"]
 }
diff --git a/README.md b/README.md
index 1c9681c..b649c2a 100644
--- a/README.md
+++ b/README.md
@@ -2,13 +2,13 @@
 
 Template for creating a comprehensive virtual CV for developers.
 
-
 ## 🚀 How to use
+
 Just click this button 👇
 
 [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/KonradSzwarc/devscard#NODE_VERSION=16)
 
-This will create your own copy of this repository and trigger the deployment. All you need to do now is to go to your repository, populate `src/data.ts` with your own resume and push the changes 🔼 
+This will create your own copy of this repository and trigger the deployment. All you need to do now is to go to your repository, populate `src/data.ts` with your own resume and push the changes 🔼
 
 ## 🧞 Commands
 
@@ -22,4 +22,3 @@ All commands are run from the root of the project, from a terminal:
 | `npm run preview`      | Preview your build locally, before deploying       |
 | `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
 | `npm run astro --help` | Get help using the Astro CLI                       |
-
diff --git a/package-lock.json b/package-lock.json
index 0cd7a76..65e7b42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
         "@iconify-icon/react": "1.0.2",
         "@tippyjs/react": "4.2.6",
         "clsx": "1.2.1",
-        "prettier-plugin-astro": "0.7.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-use": "17.4.0"
@@ -22,8 +21,8 @@
         "@astrojs/tailwind": "2.1.3",
         "@types/react": "18.0.26",
         "@types/react-dom": "18.0.9",
-        "@typescript-eslint/eslint-plugin": "5.45.1",
-        "@typescript-eslint/parser": "5.45.1",
+        "@typescript-eslint/eslint-plugin": "5.46.0",
+        "@typescript-eslint/parser": "5.46.0",
         "astro": "1.6.12",
         "eslint": "8.29.0",
         "eslint-config-airbnb": "19.0.4",
@@ -35,16 +34,17 @@
         "eslint-plugin-file-progress": "1.3.0",
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-jsx-a11y": "6.6.1",
-        "eslint-plugin-prettier": "4.2.1",
         "eslint-plugin-react": "7.31.11",
         "eslint-plugin-react-hooks": "4.6.0",
         "eslint-plugin-simple-import-sort": "8.0.0",
         "iconify-icon-names": "1.1.0",
         "locales-ts": "1.0.0",
         "postcss": "8.4.19",
-        "prettier": "2.8.0",
+        "prettier": "2.8.1",
+        "prettier-plugin-astro": "0.7.0",
+        "prettier-plugin-tailwindcss": "0.2.0",
         "tailwindcss": "3.2.4",
-        "typescript": "4.9.3"
+        "typescript": "4.9.4"
       },
       "engines": {
         "node": ">=14",
@@ -74,7 +74,8 @@
     "node_modules/@astrojs/compiler": {
       "version": "0.29.16",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.29.16.tgz",
-      "integrity": "sha512-1CCf+dktc8IQCdmsNNSIor3rcJE5OIirFnFtQWp1VUxqCacefqRRlsl9lH7JcKKpRvz1taL43yHYJP8dxNfVww=="
+      "integrity": "sha512-1CCf+dktc8IQCdmsNNSIor3rcJE5OIirFnFtQWp1VUxqCacefqRRlsl9lH7JcKKpRvz1taL43yHYJP8dxNfVww==",
+      "dev": true
     },
     "node_modules/@astrojs/image": {
       "version": "0.12.0",
@@ -864,6 +865,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
       "integrity": "sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==",
+      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.3",
         "is-glob": "^4.0.3",
@@ -1127,14 +1129,14 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.45.1.tgz",
-      "integrity": "sha512-cOizjPlKEh0bXdFrBLTrI/J6B/QMlhwE9auOov53tgB+qMukH6/h8YAK/qw+QJGct/PTbdh2lytGyipxCcEtAw==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.46.0.tgz",
+      "integrity": "sha512-QrZqaIOzJAjv0sfjY4EjbXUi3ZOFpKfzntx22gPGr9pmFcTjcFw/1sS1LJhEubfAGwuLjNrPV0rH+D1/XZFy7Q==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.45.1",
-        "@typescript-eslint/type-utils": "5.45.1",
-        "@typescript-eslint/utils": "5.45.1",
+        "@typescript-eslint/scope-manager": "5.46.0",
+        "@typescript-eslint/type-utils": "5.46.0",
+        "@typescript-eslint/utils": "5.46.0",
         "debug": "^4.3.4",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
@@ -1175,14 +1177,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.45.1.tgz",
-      "integrity": "sha512-JQ3Ep8bEOXu16q0ztsatp/iQfDCtvap7sp/DKo7DWltUquj5AfCOpX2zSzJ8YkAVnrQNqQ5R62PBz2UtrfmCkA==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.46.0.tgz",
+      "integrity": "sha512-joNO6zMGUZg+C73vwrKXCd8usnsmOYmgW/w5ZW0pG0RGvqeznjtGDk61EqqTpNrFLUYBW2RSBFrxdAZMqA4OZA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.45.1",
-        "@typescript-eslint/types": "5.45.1",
-        "@typescript-eslint/typescript-estree": "5.45.1",
+        "@typescript-eslint/scope-manager": "5.46.0",
+        "@typescript-eslint/types": "5.46.0",
+        "@typescript-eslint/typescript-estree": "5.46.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1202,13 +1204,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.45.1.tgz",
-      "integrity": "sha512-D6fCileR6Iai7E35Eb4Kp+k0iW7F1wxXYrOhX/3dywsOJpJAQ20Fwgcf+P/TDtvQ7zcsWsrJaglaQWDhOMsspQ==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.46.0.tgz",
+      "integrity": "sha512-7wWBq9d/GbPiIM6SqPK9tfynNxVbfpihoY5cSFMer19OYUA3l4powA2uv0AV2eAZV6KoAh6lkzxv4PoxOLh1oA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.45.1",
-        "@typescript-eslint/visitor-keys": "5.45.1"
+        "@typescript-eslint/types": "5.46.0",
+        "@typescript-eslint/visitor-keys": "5.46.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1219,13 +1221,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.45.1.tgz",
-      "integrity": "sha512-aosxFa+0CoYgYEl3aptLe1svP910DJq68nwEJzyQcrtRhC4BN0tJAvZGAe+D0tzjJmFXe+h4leSsiZhwBa2vrA==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.46.0.tgz",
+      "integrity": "sha512-dwv4nimVIAsVS2dTA0MekkWaRnoYNXY26dKz8AN5W3cBFYwYGFQEqm/cG+TOoooKlncJS4RTbFKgcFY/pOiBCg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.45.1",
-        "@typescript-eslint/utils": "5.45.1",
+        "@typescript-eslint/typescript-estree": "5.46.0",
+        "@typescript-eslint/utils": "5.46.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -1246,9 +1248,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.45.1.tgz",
-      "integrity": "sha512-HEW3U0E5dLjUT+nk7b4lLbOherS1U4ap+b9pfu2oGsW3oPu7genRaY9dDv3nMczC1rbnRY2W/D7SN05wYoGImg==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.46.0.tgz",
+      "integrity": "sha512-wHWgQHFB+qh6bu0IAPAJCdeCdI0wwzZnnWThlmHNY01XJ9Z97oKqKOzWYpR2I83QmshhQJl6LDM9TqMiMwJBTw==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1259,13 +1261,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.1.tgz",
-      "integrity": "sha512-76NZpmpCzWVrrb0XmYEpbwOz/FENBi+5W7ipVXAsG3OoFrQKJMiaqsBMbvGRyLtPotGqUfcY7Ur8j0dksDJDng==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.46.0.tgz",
+      "integrity": "sha512-kDLNn/tQP+Yp8Ro2dUpyyVV0Ksn2rmpPpB0/3MO874RNmXtypMwSeazjEN/Q6CTp8D7ExXAAekPEcCEB/vtJkw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.45.1",
-        "@typescript-eslint/visitor-keys": "5.45.1",
+        "@typescript-eslint/types": "5.46.0",
+        "@typescript-eslint/visitor-keys": "5.46.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -1301,16 +1303,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.45.1.tgz",
-      "integrity": "sha512-rlbC5VZz68+yjAzQBc4I7KDYVzWG2X/OrqoZrMahYq3u8FFtmQYc+9rovo/7wlJH5kugJ+jQXV5pJMnofGmPRw==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.46.0.tgz",
+      "integrity": "sha512-4O+Ps1CRDw+D+R40JYh5GlKLQERXRKW5yIQoNDpmXPJ+C7kaPF9R7GWl+PxGgXjB3PQCqsaaZUpZ9dG4U6DO7g==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.45.1",
-        "@typescript-eslint/types": "5.45.1",
-        "@typescript-eslint/typescript-estree": "5.45.1",
+        "@typescript-eslint/scope-manager": "5.46.0",
+        "@typescript-eslint/types": "5.46.0",
+        "@typescript-eslint/typescript-estree": "5.46.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0",
         "semver": "^7.3.7"
@@ -1342,12 +1344,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.1.tgz",
-      "integrity": "sha512-cy9ln+6rmthYWjH9fmx+5FU/JDpjQb586++x2FZlveq7GdGuLLW9a2Jcst2TGekH82bXpfmRNSwP9tyEs6RjvQ==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.46.0.tgz",
+      "integrity": "sha512-E13gBoIXmaNhwjipuvQg1ByqSAu/GbEpP/qzFihugJ+MomtoJtFAJG/+2DRPByf57B863m0/q7Zt16V9ohhANw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/types": "5.46.0",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -2460,6 +2462,7 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -2623,6 +2626,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
       "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3837,27 +3841,6 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
       }
     },
-    "node_modules/eslint-plugin-prettier": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
-      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
-      "dev": true,
-      "dependencies": {
-        "prettier-linter-helpers": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "eslint": ">=7.28.0",
-        "prettier": ">=2.0.0"
-      },
-      "peerDependenciesMeta": {
-        "eslint-config-prettier": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/eslint-plugin-react": {
       "version": "7.31.11",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.11.tgz",
@@ -4287,12 +4270,6 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
-    "node_modules/fast-diff": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
-      "dev": true
-    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -4693,7 +4670,8 @@
     "node_modules/globalyzer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
-      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
+      "dev": true
     },
     "node_modules/globby": {
       "version": "11.1.0",
@@ -4727,7 +4705,8 @@
     "node_modules/globrex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
     },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
@@ -5372,6 +5351,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5389,6 +5369,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -5573,6 +5554,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
       "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
       "dependencies": {
         "is-docker": "^2.0.0"
       },
@@ -5584,6 +5566,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
       "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
       "bin": {
         "is-docker": "cli.js"
       },
@@ -5597,7 +5580,8 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
     },
     "node_modules/isobject": {
       "version": "3.0.1",
@@ -7288,6 +7272,7 @@
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
       "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dev": true,
       "dependencies": {
         "define-lazy-prop": "^2.0.0",
         "is-docker": "^2.1.1",
@@ -7304,6 +7289,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
       "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
       "bin": {
         "is-docker": "cli.js"
       },
@@ -7486,6 +7472,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7514,7 +7501,8 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -7780,9 +7768,10 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
-      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
+      "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -7793,22 +7782,11 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/prettier-linter-helpers": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
-      "dev": true,
-      "dependencies": {
-        "fast-diff": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/prettier-plugin-astro": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.0.tgz",
       "integrity": "sha512-ehCUx7MqHWvkHwUmxxAWLsL35pFaCTM5YXQ8xjG/1W6dY2yBhvEks+2aCfjeI5zmMrZNCXkiMQtpznSlLSLrxw==",
+      "dev": true,
       "dependencies": {
         "@astrojs/compiler": "^0.29.3",
         "prettier": "^2.7.1",
@@ -7820,6 +7798,18 @@
         "npm": ">=6.14.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.0.tgz",
+      "integrity": "sha512-Ruqig/mdWCSpqdq9WK44nrmqM4BFWTzBPhPGwC5NK3coV9eZntEQPB84MGZbjAg0XQU02jVRHXNRPREBzxvM+A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "prettier": ">=2.2.0"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@@ -8494,7 +8484,8 @@
     "node_modules/s.color": {
       "version": "0.0.15",
       "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
-      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA=="
+      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
+      "dev": true
     },
     "node_modules/sade": {
       "version": "1.8.1",
@@ -8532,6 +8523,7 @@
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
       "integrity": "sha512-NKFP8ddjhUYi6A/iD1cEtzkEs91U61kzqe3lY9SVNuvX7LGc88xnEN0mmsWL7Ol//YTi2GL/ol7b9XZ2+hgXuA==",
+      "dev": true,
       "dependencies": {
         "suf-log": "^2.5.3"
       }
@@ -8662,6 +8654,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -8673,6 +8666,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9063,6 +9057,7 @@
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
       "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
+      "dev": true,
       "dependencies": {
         "s.color": "0.0.15"
       }
@@ -9104,6 +9099,7 @@
       "version": "0.8.4",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz",
       "integrity": "sha512-Dn2ZkzMdSX827QbowGbU/4yjWuvNaCoScLLoMo/yKbu+P4GBR6cRGKZH27k6a9bRzdqcyd1DE96pQtQ6uNkmyw==",
+      "dev": true,
       "dependencies": {
         "@pkgr/utils": "^2.3.1",
         "tslib": "^2.4.0"
@@ -9256,6 +9252,7 @@
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
       "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dev": true,
       "dependencies": {
         "globalyzer": "0.1.0",
         "globrex": "^0.1.2"
@@ -9476,9 +9473,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
-      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -10344,6 +10341,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -10535,7 +10533,8 @@
     "@astrojs/compiler": {
       "version": "0.29.16",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.29.16.tgz",
-      "integrity": "sha512-1CCf+dktc8IQCdmsNNSIor3rcJE5OIirFnFtQWp1VUxqCacefqRRlsl9lH7JcKKpRvz1taL43yHYJP8dxNfVww=="
+      "integrity": "sha512-1CCf+dktc8IQCdmsNNSIor3rcJE5OIirFnFtQWp1VUxqCacefqRRlsl9lH7JcKKpRvz1taL43yHYJP8dxNfVww==",
+      "dev": true
     },
     "@astrojs/image": {
       "version": "0.12.0",
@@ -11136,6 +11135,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
       "integrity": "sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==",
+      "dev": true,
       "requires": {
         "cross-spawn": "^7.0.3",
         "is-glob": "^4.0.3",
@@ -11382,14 +11382,14 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.45.1.tgz",
-      "integrity": "sha512-cOizjPlKEh0bXdFrBLTrI/J6B/QMlhwE9auOov53tgB+qMukH6/h8YAK/qw+QJGct/PTbdh2lytGyipxCcEtAw==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.46.0.tgz",
+      "integrity": "sha512-QrZqaIOzJAjv0sfjY4EjbXUi3ZOFpKfzntx22gPGr9pmFcTjcFw/1sS1LJhEubfAGwuLjNrPV0rH+D1/XZFy7Q==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.45.1",
-        "@typescript-eslint/type-utils": "5.45.1",
-        "@typescript-eslint/utils": "5.45.1",
+        "@typescript-eslint/scope-manager": "5.46.0",
+        "@typescript-eslint/type-utils": "5.46.0",
+        "@typescript-eslint/utils": "5.46.0",
         "debug": "^4.3.4",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
@@ -11410,53 +11410,53 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.45.1.tgz",
-      "integrity": "sha512-JQ3Ep8bEOXu16q0ztsatp/iQfDCtvap7sp/DKo7DWltUquj5AfCOpX2zSzJ8YkAVnrQNqQ5R62PBz2UtrfmCkA==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.46.0.tgz",
+      "integrity": "sha512-joNO6zMGUZg+C73vwrKXCd8usnsmOYmgW/w5ZW0pG0RGvqeznjtGDk61EqqTpNrFLUYBW2RSBFrxdAZMqA4OZA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.45.1",
-        "@typescript-eslint/types": "5.45.1",
-        "@typescript-eslint/typescript-estree": "5.45.1",
+        "@typescript-eslint/scope-manager": "5.46.0",
+        "@typescript-eslint/types": "5.46.0",
+        "@typescript-eslint/typescript-estree": "5.46.0",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.45.1.tgz",
-      "integrity": "sha512-D6fCileR6Iai7E35Eb4Kp+k0iW7F1wxXYrOhX/3dywsOJpJAQ20Fwgcf+P/TDtvQ7zcsWsrJaglaQWDhOMsspQ==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.46.0.tgz",
+      "integrity": "sha512-7wWBq9d/GbPiIM6SqPK9tfynNxVbfpihoY5cSFMer19OYUA3l4powA2uv0AV2eAZV6KoAh6lkzxv4PoxOLh1oA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.45.1",
-        "@typescript-eslint/visitor-keys": "5.45.1"
+        "@typescript-eslint/types": "5.46.0",
+        "@typescript-eslint/visitor-keys": "5.46.0"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.45.1.tgz",
-      "integrity": "sha512-aosxFa+0CoYgYEl3aptLe1svP910DJq68nwEJzyQcrtRhC4BN0tJAvZGAe+D0tzjJmFXe+h4leSsiZhwBa2vrA==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.46.0.tgz",
+      "integrity": "sha512-dwv4nimVIAsVS2dTA0MekkWaRnoYNXY26dKz8AN5W3cBFYwYGFQEqm/cG+TOoooKlncJS4RTbFKgcFY/pOiBCg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/typescript-estree": "5.45.1",
-        "@typescript-eslint/utils": "5.45.1",
+        "@typescript-eslint/typescript-estree": "5.46.0",
+        "@typescript-eslint/utils": "5.46.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.45.1.tgz",
-      "integrity": "sha512-HEW3U0E5dLjUT+nk7b4lLbOherS1U4ap+b9pfu2oGsW3oPu7genRaY9dDv3nMczC1rbnRY2W/D7SN05wYoGImg==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.46.0.tgz",
+      "integrity": "sha512-wHWgQHFB+qh6bu0IAPAJCdeCdI0wwzZnnWThlmHNY01XJ9Z97oKqKOzWYpR2I83QmshhQJl6LDM9TqMiMwJBTw==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.1.tgz",
-      "integrity": "sha512-76NZpmpCzWVrrb0XmYEpbwOz/FENBi+5W7ipVXAsG3OoFrQKJMiaqsBMbvGRyLtPotGqUfcY7Ur8j0dksDJDng==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.46.0.tgz",
+      "integrity": "sha512-kDLNn/tQP+Yp8Ro2dUpyyVV0Ksn2rmpPpB0/3MO874RNmXtypMwSeazjEN/Q6CTp8D7ExXAAekPEcCEB/vtJkw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.45.1",
-        "@typescript-eslint/visitor-keys": "5.45.1",
+        "@typescript-eslint/types": "5.46.0",
+        "@typescript-eslint/visitor-keys": "5.46.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -11476,16 +11476,16 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.45.1.tgz",
-      "integrity": "sha512-rlbC5VZz68+yjAzQBc4I7KDYVzWG2X/OrqoZrMahYq3u8FFtmQYc+9rovo/7wlJH5kugJ+jQXV5pJMnofGmPRw==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.46.0.tgz",
+      "integrity": "sha512-4O+Ps1CRDw+D+R40JYh5GlKLQERXRKW5yIQoNDpmXPJ+C7kaPF9R7GWl+PxGgXjB3PQCqsaaZUpZ9dG4U6DO7g==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.45.1",
-        "@typescript-eslint/types": "5.45.1",
-        "@typescript-eslint/typescript-estree": "5.45.1",
+        "@typescript-eslint/scope-manager": "5.46.0",
+        "@typescript-eslint/types": "5.46.0",
+        "@typescript-eslint/typescript-estree": "5.46.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0",
         "semver": "^7.3.7"
@@ -11503,12 +11503,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.45.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.1.tgz",
-      "integrity": "sha512-cy9ln+6rmthYWjH9fmx+5FU/JDpjQb586++x2FZlveq7GdGuLLW9a2Jcst2TGekH82bXpfmRNSwP9tyEs6RjvQ==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.46.0.tgz",
+      "integrity": "sha512-E13gBoIXmaNhwjipuvQg1ByqSAu/GbEpP/qzFihugJ+MomtoJtFAJG/+2DRPByf57B863m0/q7Zt16V9ohhANw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/types": "5.46.0",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -12313,6 +12313,7 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
       "requires": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -12432,7 +12433,8 @@
     "define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og=="
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true
     },
     "define-properties": {
       "version": "1.1.4",
@@ -13333,15 +13335,6 @@
         "semver": "^6.3.0"
       }
     },
-    "eslint-plugin-prettier": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
-      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
-      "dev": true,
-      "requires": {
-        "prettier-linter-helpers": "^1.0.0"
-      }
-    },
     "eslint-plugin-react": {
       "version": "7.31.11",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.11.tgz",
@@ -13555,12 +13548,6 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
-    "fast-diff": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
-      "dev": true
-    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -13857,7 +13844,8 @@
     "globalyzer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
-      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
+      "dev": true
     },
     "globby": {
       "version": "11.1.0",
@@ -13884,7 +13872,8 @@
     "globrex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
     },
     "graceful-fs": {
       "version": "4.2.10",
@@ -14344,7 +14333,8 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -14356,6 +14346,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -14467,6 +14458,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
       "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
       "requires": {
         "is-docker": "^2.0.0"
       },
@@ -14474,14 +14466,16 @@
         "is-docker": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-          "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="
+          "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+          "dev": true
         }
       }
     },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
     },
     "isobject": {
       "version": "3.0.1",
@@ -15633,6 +15627,7 @@
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
       "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dev": true,
       "requires": {
         "define-lazy-prop": "^2.0.0",
         "is-docker": "^2.1.1",
@@ -15642,7 +15637,8 @@
         "is-docker": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-          "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="
+          "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+          "dev": true
         }
       }
     },
@@ -15772,7 +15768,8 @@
     "path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
     },
     "path-parse": {
       "version": "1.0.7",
@@ -15795,7 +15792,8 @@
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
     },
     "picomatch": {
       "version": "2.3.1",
@@ -15963,23 +15961,16 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
-      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA=="
-    },
-    "prettier-linter-helpers": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
-      "dev": true,
-      "requires": {
-        "fast-diff": "^1.1.2"
-      }
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
+      "dev": true
     },
     "prettier-plugin-astro": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.7.0.tgz",
       "integrity": "sha512-ehCUx7MqHWvkHwUmxxAWLsL35pFaCTM5YXQ8xjG/1W6dY2yBhvEks+2aCfjeI5zmMrZNCXkiMQtpznSlLSLrxw==",
+      "dev": true,
       "requires": {
         "@astrojs/compiler": "^0.29.3",
         "prettier": "^2.7.1",
@@ -15987,6 +15978,13 @@
         "synckit": "^0.8.4"
       }
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.0.tgz",
+      "integrity": "sha512-Ruqig/mdWCSpqdq9WK44nrmqM4BFWTzBPhPGwC5NK3coV9eZntEQPB84MGZbjAg0XQU02jVRHXNRPREBzxvM+A==",
+      "dev": true,
+      "requires": {}
+    },
     "prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@@ -16484,7 +16482,8 @@
     "s.color": {
       "version": "0.0.15",
       "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
-      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA=="
+      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
+      "dev": true
     },
     "sade": {
       "version": "1.8.1",
@@ -16516,6 +16515,7 @@
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
       "integrity": "sha512-NKFP8ddjhUYi6A/iD1cEtzkEs91U61kzqe3lY9SVNuvX7LGc88xnEN0mmsWL7Ol//YTi2GL/ol7b9XZ2+hgXuA==",
+      "dev": true,
       "requires": {
         "suf-log": "^2.5.3"
       }
@@ -16610,6 +16610,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "requires": {
         "shebang-regex": "^3.0.0"
       }
@@ -16617,7 +16618,8 @@
     "shebang-regex": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
     },
     "shiki": {
       "version": "0.11.1",
@@ -16901,6 +16903,7 @@
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
       "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
+      "dev": true,
       "requires": {
         "s.color": "0.0.15"
       }
@@ -16933,6 +16936,7 @@
       "version": "0.8.4",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz",
       "integrity": "sha512-Dn2ZkzMdSX827QbowGbU/4yjWuvNaCoScLLoMo/yKbu+P4GBR6cRGKZH27k6a9bRzdqcyd1DE96pQtQ6uNkmyw==",
+      "dev": true,
       "requires": {
         "@pkgr/utils": "^2.3.1",
         "tslib": "^2.4.0"
@@ -17050,6 +17054,7 @@
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
       "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dev": true,
       "requires": {
         "globalyzer": "0.1.0",
         "globrex": "^0.1.2"
@@ -17220,9 +17225,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
-      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
       "dev": true
     },
     "unbox-primitive": {
@@ -17738,6 +17743,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
diff --git a/package.json b/package.json
index 45af9bf..d2b5785 100644
--- a/package.json
+++ b/package.json
@@ -13,17 +13,17 @@
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro",
-    "lint": "eslint . --ext .cjs,.ts,.tsx,.astro --ignore-path .gitignore",
-    "lint:fix": "eslint . --ext .cjs,.ts,.tsx,.astro --ignore-path .gitignore --fix",
-    "lint:ts": "tsc --jsx preserve --skipLibCheck"
+    "eslint:check": "eslint . --ext .cjs,.ts,.tsx,.astro --ignore-path .gitignore",
+    "eslint:write": "npm run eslint:check -- --fix",
+    "prettier:check": "prettier --check --ignore-path .gitignore .",
+    "prettier:write": "prettier --write --ignore-path .gitignore .",
+    "ts:check": "tsc --jsx preserve --skipLibCheck"
   },
   "dependencies": {
     "@astrojs/image": "0.12.0",
     "@iconify-icon/react": "1.0.2",
     "@tippyjs/react": "4.2.6",
     "clsx": "1.2.1",
-    "prettier-plugin-astro": "0.7.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-use": "17.4.0"
@@ -33,8 +33,8 @@
     "@astrojs/tailwind": "2.1.3",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
-    "@typescript-eslint/eslint-plugin": "5.45.1",
-    "@typescript-eslint/parser": "5.45.1",
+    "@typescript-eslint/eslint-plugin": "5.46.0",
+    "@typescript-eslint/parser": "5.46.0",
     "astro": "1.6.12",
     "eslint": "8.29.0",
     "eslint-config-airbnb": "19.0.4",
@@ -46,15 +46,16 @@
     "eslint-plugin-file-progress": "1.3.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-simple-import-sort": "8.0.0",
     "iconify-icon-names": "1.1.0",
     "locales-ts": "1.0.0",
     "postcss": "8.4.19",
-    "prettier": "2.8.0",
+    "prettier": "2.8.1",
+    "prettier-plugin-astro": "0.7.0",
+    "prettier-plugin-tailwindcss": "0.2.0",
     "tailwindcss": "3.2.4",
-    "typescript": "4.9.3"
+    "typescript": "4.9.4"
   }
 }
diff --git a/src/components/atoms/book-tile.astro b/src/components/atoms/book-tile.astro
index ce4c25c..c6b32ca 100644
--- a/src/components/atoms/book-tile.astro
+++ b/src/components/atoms/book-tile.astro
@@ -4,20 +4,16 @@ import { Image } from '@astrojs/image/components';
 import Typography from '@/atoms/typography.astro';
 import type { Book } from '@/types/favorites-section';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   value: Book;
 }
 
-const { value, ...props } = Astro.props;
-const BookTile = 'a';
+const { value } = Astro.props;
 ---
 
-<BookTile
-  href={value.url}
-  class:list={['flex', 'flex-col', 'gap-3', 'transition', 'duration-300', 'hover:translate-y-2', 'w-full', props.class]}
->
+<a href={value.url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
-    class:list={['rounded-lg', 'shadow-md', 'aspect-[3/4]', 'object-cover']}
+    class="rounded-lg shadow-md aspect-[3/4] object-cover"
     format="webp"
     fit={'cover'}
     aspectRatio={3 / 4}
@@ -25,12 +21,12 @@ const BookTile = 'a';
     src={value.cover}
     alt={value.title}
   />
-  <div class:list={['tile-content', 'gap-1', 'w-full']}>
-    <Typography class:list={['leading-5', 'hover:text-gray-900']} variant="tile-title">
+  <div class="tile-content w-full gap-1">
+    <Typography class="leading-5, hover:text-gray-900" variant="tile-title">
       {value.title}
     </Typography>
     <Typography variant="tile-subtitle">
       {value.author}
     </Typography>
   </div>
-</BookTile>
+</a>
diff --git a/src/components/atoms/button.astro b/src/components/atoms/button.astro
index 0831c25..46f668f 100644
--- a/src/components/atoms/button.astro
+++ b/src/components/atoms/button.astro
@@ -14,6 +14,6 @@ const classes = {
 };
 ---
 
-<a href={href} class:list={[classes.main, classes.hover, classes.active, classes.focus]} download={download}
-  ><slot />
+<a href={href} class:list={[classes.main, classes.hover, classes.active, classes.focus]} download={download}>
+  <slot />
 </a>
diff --git a/src/components/atoms/divided-list.astro b/src/components/atoms/divided-list.astro
index 8d82f58..bc3438d 100644
--- a/src/components/atoms/divided-list.astro
+++ b/src/components/atoms/divided-list.astro
@@ -1,3 +1,3 @@
-<div class:list={['flex', 'flex-col', 'gap-8']}>
+<div class="flex flex-col gap-8">
   <slot />
 </div>
diff --git a/src/components/atoms/divider.astro b/src/components/atoms/divider.astro
index 89f639e..cefb78b 100644
--- a/src/components/atoms/divider.astro
+++ b/src/components/atoms/divider.astro
@@ -1 +1 @@
-<div class="w-full h-px bg-gray-200 dark:bg-gray-600"></div>
+<div class="h-px w-full bg-gray-200 dark:bg-gray-600"></div>
diff --git a/src/components/atoms/icon-button.astro b/src/components/atoms/icon-button.astro
index 85909d2..54202c0 100644
--- a/src/components/atoms/icon-button.astro
+++ b/src/components/atoms/icon-button.astro
@@ -18,28 +18,14 @@ const sizeMap: Record<IconButtonSize, string> = {
 };
 
 const { icon, href, target, size, ...rest } = Astro.props;
+
+const classes = {
+  main: 'flex items-center justify-center rounded text-gray-400 bg-gray-100 dark:bg-gray-600 dark:text-gray-200',
+  active: 'active:translate-y-px',
+  focus: 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
+};
 ---
 
-<a
-  href={href}
-  target={target}
-  class:list={[
-    'flex',
-    'items-center',
-    'justify-center',
-    'rounded',
-    'text-gray-400',
-    'bg-gray-100',
-    'active:translate-y-px',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-offset-2',
-    'focus:ring-primary-500',
-    'dark:bg-gray-600',
-    'dark:text-gray-200',
-    sizeMap[size],
-  ]}
-  {...rest}
->
+<a href={href} target={target} class:list={[classes.main, classes.active, classes.focus, sizeMap[size]]} {...rest}>
   <Icon client:load name={icon} size={16} />
 </a>
diff --git a/src/components/atoms/media-tile.astro b/src/components/atoms/media-tile.astro
index 0a078b6..7663614 100644
--- a/src/components/atoms/media-tile.astro
+++ b/src/components/atoms/media-tile.astro
@@ -4,33 +4,29 @@ import { Image } from '@astrojs/image/components';
 import Typography from '@/atoms/typography.astro';
 import type { Media } from '@/types/favorites-section';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   value: Media;
 }
 
-const { value, ...props } = Astro.props;
-const MediaTile = 'a';
+const { value } = Astro.props;
 ---
 
-<MediaTile
-  href={value.url}
-  class:list={['flex', 'flex-col', 'gap-3', 'transition', 'duration-300', 'hover:translate-y-2', 'w-full', props.class]}
->
+<a href={value.url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
-    class:list={['rounded-lg', 'shadow-md', 'aspect-square', 'object-cover']}
-    fit={'cover'}
+    class="rounded-lg shadow-md aspect-square object-cover"
+    fit="cover"
     format="webp"
-    aspectRatio={1 / 1}
+    aspectRatio={1}
     quality={100}
     src={value.image}
     alt={value.title}
   />
-  <div class:list={['tile-content', 'gap-1']}>
-    <Typography class:list={['leading-5', 'hover:text-gray-900']} variant="tile-title">
+  <div class="tile-content gap-1">
+    <Typography class="leading-5 hover:text-gray-900" variant="tile-title">
       {value.title}
     </Typography>
     <Typography variant="tile-subtitle">
       {value.type}
     </Typography>
   </div>
-</MediaTile>
+</a>
diff --git a/src/components/atoms/person-tile.astro b/src/components/atoms/person-tile.astro
index b7b2d1c..c62c366 100644
--- a/src/components/atoms/person-tile.astro
+++ b/src/components/atoms/person-tile.astro
@@ -4,30 +4,26 @@ import { Image } from '@astrojs/image/components';
 import Typography from '@/atoms/typography.astro';
 import type { Person } from '@/types/favorites-section';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   value: Person;
 }
 
-const { value, ...props } = Astro.props;
-const PersonTile = 'a';
+const { value } = Astro.props;
 ---
 
-<PersonTile
-  href={value.url}
-  class:list={['flex', 'flex-col', 'gap-3', 'transition', 'duration-300', 'hover:translate-y-2', 'w-full', props.class]}
->
+<a href={value.url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
-    class:list={['rounded-lg', 'shadow-md', 'transition', 'duration-300', 'aspect-square', 'object-cover']}
+    class="rounded-lg shadow-md transition duration-300 aspect-square object-cover"
     format="webp"
-    fit={'cover'}
+    fit="cover"
     quality={100}
-    aspectRatio={1 / 1}
+    aspectRatio={1}
     src={value.image}
     alt={value.name}
   />
-  <div class:list={['tile-content', 'gap-1']}>
-    <Typography class:list={['leading-5', 'hover:text-gray-900']} variant="tile-title">
+  <div class="tile-content gap-1">
+    <Typography class="leading-5 hover:text-gray-900" variant="tile-title">
       {value.name}
     </Typography>
   </div>
-</PersonTile>
+</a>
diff --git a/src/components/atoms/section-card.astro b/src/components/atoms/section-card.astro
index f44e420..1db3013 100644
--- a/src/components/atoms/section-card.astro
+++ b/src/components/atoms/section-card.astro
@@ -11,7 +11,7 @@ export interface Props {
 const { section, title } = Astro.props;
 ---
 
-<div id={section} class="p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-md flex flex-col gap-6">
+<div id={section} class="flex flex-col gap-6 rounded-2xl bg-white p-8 shadow-md dark:bg-gray-800">
   {
     title && (
       <Typography variant="section-title" id={`${section}-heading`}>
diff --git a/src/components/atoms/sidebar-item.tsx b/src/components/atoms/sidebar-item.tsx
index d740325..85fe9e1 100644
--- a/src/components/atoms/sidebar-item.tsx
+++ b/src/components/atoms/sidebar-item.tsx
@@ -1,7 +1,6 @@
 import { useLocation } from 'react-use';
 
 import Icon from '@/atoms/icon';
-import { MAIN_SECTION } from '@/constants/section';
 import type { Section } from '@/types/data';
 import type { IconName } from '@/types/icon';
 
@@ -13,6 +12,8 @@ export interface SidebarItemProps {
   title?: string;
 }
 
+export const MAIN_SECTION: Section = 'main';
+
 const SidebarItem = ({ section, icon, title = '' }: SidebarItemProps) => {
   const { hash } = useLocation();
   const href = `#${section}`;
@@ -23,11 +24,11 @@ const SidebarItem = ({ section, icon, title = '' }: SidebarItemProps) => {
     <Tooltip content={`${title || section.charAt(0).toUpperCase() + section.slice(1)} section`} placement="left">
       <a
         href={href}
-        className={`inline-flex justify-center items-center h-10 w-10 rounded-lg transition
+        className={`inline-flex h-10 w-10 items-center justify-center rounded-lg transition
         ${
           active
             ? 'bg-primary-600 text-white'
-            : 'bg-white text-gray-400 dark:bg-gray-800 dark:text-gray-200 hover:bg-primary-600 hover:text-white'
+            : 'bg-white text-gray-400 hover:bg-primary-600 hover:text-white dark:bg-gray-800 dark:text-gray-200'
         }
         `}
         aria-current={active ? 'page' : undefined}
diff --git a/src/components/atoms/skill-level-tile.astro b/src/components/atoms/skill-level-tile.astro
index d420215..1b021b9 100644
--- a/src/components/atoms/skill-level-tile.astro
+++ b/src/components/atoms/skill-level-tile.astro
@@ -7,17 +7,8 @@ export interface Props {
 const { skillLevel, tileLevel } = Astro.props;
 
 const isFilled = skillLevel >= tileLevel;
+const filledClass = isFilled ? 'bg-gray-500 dark:bg-gray-300' : 'bg-gray-200 dark:bg-gray-500';
 ---
 
-<div
-  class:list={[
-    'w-9',
-    'h-2',
-    'last:rounded-l-none',
-    'last:rounded-r-sm',
-    'first:rounded-l-sm',
-    'first:rounded-r-none',
-    { 'dark:bg-gray-300': isFilled, 'dark:bg-gray-500': !isFilled, 'bg-gray-200': !isFilled, 'bg-gray-500': isFilled },
-  ]}
->
+<div class={`w-9 h-2 last:rounded-l-none last:rounded-r-sm first:rounded-l-sm first:rounded-r-none ${filledClass}`}>
 </div>
diff --git a/src/components/atoms/tag.astro b/src/components/atoms/tag.astro
index 54eebe7..eb1c835 100644
--- a/src/components/atoms/tag.astro
+++ b/src/components/atoms/tag.astro
@@ -11,7 +11,7 @@ const { name, color } = Astro.props;
 ---
 
 <div
-  class="flex items-center w-fit h-6 px-2.5 rounded text-sm font-medium tracking-wide text-gray-700 dark:text-gray-100 bg-gray-100 dark:bg-gray-700 gap-x-1.5"
+  class="flex h-6 w-fit items-center gap-x-1.5 rounded bg-gray-100 px-2.5 text-sm font-medium tracking-wide text-gray-700 dark:bg-gray-700 dark:text-gray-100"
 >
   <Icon client:load name={name} color={color} size={16} />
   <slot />
diff --git a/src/components/atoms/theme-icon.tsx b/src/components/atoms/theme-icon.tsx
index ebd2cf0..3933857 100644
--- a/src/components/atoms/theme-icon.tsx
+++ b/src/components/atoms/theme-icon.tsx
@@ -39,7 +39,7 @@ const ThemeToggle = () => {
     <button
       onClick={handleClick}
       type="button"
-      className="text-gray-400 bg-gray-100 focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200 inline-flex justify-center items-center h-10 w-10 transition fixed bottom-3 left-3 shadow-xl rounded-lg z-10"
+      className="fixed bottom-3 left-3 z-10 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 text-gray-400 shadow-xl transition focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200"
     >
       <Icon name={theme === DARK_THEME_KEY ? 'ri:moon-fill' : 'ri:sun-line'} size={20} />
     </button>
diff --git a/src/components/atoms/timestamp.astro b/src/components/atoms/timestamp.astro
index a2a7349..53adf7a 100644
--- a/src/components/atoms/timestamp.astro
+++ b/src/components/atoms/timestamp.astro
@@ -1,17 +1,17 @@
 ---
 import Typography from '@/atoms/typography.astro';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   startDate: Date;
   endDate: Date | null;
   locale: string;
   translationForNow: string;
 }
-const { startDate, endDate, locale, translationForNow, ...props } = Astro.props;
+const { startDate, endDate, locale, translationForNow } = Astro.props;
 const getFormattedDate = (date: Date): string =>
   new Intl.DateTimeFormat(locale, { month: 'long' }).format(date).concat(' ', date.getFullYear().toString());
 ---
 
-<Typography variant="item-subtitle" class:list={[props.class]}>
+<Typography variant="item-subtitle">
   {getFormattedDate(startDate).concat(' - ', endDate ? getFormattedDate(endDate) : translationForNow)}
 </Typography>
diff --git a/src/components/atoms/tooltip.tsx b/src/components/atoms/tooltip.tsx
index cbe8e6e..d2119db 100644
--- a/src/components/atoms/tooltip.tsx
+++ b/src/components/atoms/tooltip.tsx
@@ -7,22 +7,20 @@ export interface TooltipProps {
   placement?: TippyProps['placement'];
 }
 
-const Tooltip = ({ children, content, placement = 'top' }: TooltipProps) => {
-  return (
-    <Tippy
-      render={(attrs) => (
-        <div
-          {...attrs}
-          className="bg-gray-700  dark:bg-gray-100 dark:text-gray-800 rounded-lg px-2 py-1.5 text-white max-w-[95%] sm:max-w-xs"
-        >
-          {content}
-        </div>
-      )}
-      placement={placement}
-    >
-      {children}
-    </Tippy>
-  );
-};
+const Tooltip = ({ children, content, placement = 'top' }: TooltipProps) => (
+  <Tippy
+    render={(attrs) => (
+      <div
+        {...attrs}
+        className="max-w-[95%]  rounded-lg bg-gray-700 px-2 py-1.5 text-white dark:bg-gray-100 dark:text-gray-800 sm:max-w-xs"
+      >
+        {content}
+      </div>
+    )}
+    placement={placement}
+  >
+    {children}
+  </Tippy>
+);
 
 export default Tooltip;
diff --git a/src/components/atoms/video-tile.astro b/src/components/atoms/video-tile.astro
index 1c2d4e3..12f1ecd 100644
--- a/src/components/atoms/video-tile.astro
+++ b/src/components/atoms/video-tile.astro
@@ -4,35 +4,30 @@ import { Image } from '@astrojs/image/components';
 import Typography from '@/atoms/typography.astro';
 import type { Video } from '@/types/favorites-section';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   value: Video;
 }
 
 const {
   value: { title, url },
-  ...props
 } = Astro.props;
 
-const VideoTile = 'a';
 const id = url.split('/').pop();
 const thumbnail = `https://img.youtube.com/vi/${id}/0.jpg`;
 ---
 
-<VideoTile
-  href={url}
-  class:list={['flex', 'flex-col', 'gap-3', 'transition', 'duration-300', 'hover:translate-y-2', 'w-full', props.class]}
->
+<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
-    class:list={['rounded-lg', 'shadow-md', 'aspect-video', 'object-cover']}
+    class="rounded-lg shadow-md aspect-video object-cover"
     format="webp"
     width={240}
     height={180}
     src={thumbnail}
     alt={title}
   />
-  <div class:list={['tile-content', 'gap-1']}>
-    <Typography class:list={['leading-5', 'hover:text-gray-900']} variant="tile-title">
+  <div class="tile-content gap-1">
+    <Typography class="leading-5 hover:text-gray-900" variant="tile-title">
       {title}
     </Typography>
   </div>
-</VideoTile>
+</a>
diff --git a/src/components/organisms/levelled-skill-subsection.astro b/src/components/organisms/levelled-skill-subsection.astro
index 91f30a3..7ebc86a 100644
--- a/src/components/organisms/levelled-skill-subsection.astro
+++ b/src/components/organisms/levelled-skill-subsection.astro
@@ -10,6 +10,6 @@ export interface Props {
 const { skills } = Astro.props;
 ---
 
-<div class:list={['flex', 'flex-wrap', 'gap-8']}>
+<div class="flex flex-wrap gap-8">
   {skills.map((skill) => <Skill {...skill} />)}
 </div>
diff --git a/src/components/organisms/project-timeline-item.astro b/src/components/organisms/project-timeline-item.astro
index 2d19e4e..fb5c16e 100644
--- a/src/components/organisms/project-timeline-item.astro
+++ b/src/components/organisms/project-timeline-item.astro
@@ -20,22 +20,22 @@ const { description, details, endDate, name, socials, startDate, tags, image } =
 // the missing alt attribute on the Image component.
 const { alt, ...sharedImageProps } = {
   src: image,
-  aspectRatio: '1/1',
+  aspectRatio: 1,
   alt: `Thumbnail for ${name} project`,
   format: 'webp',
 } as const;
 ---
 
-<div class:list={['flex', 'flex-col', 'gap-6']}>
-  <div class:list={['flex', 'flex-col', 'gap-4']}>
-    <div class:list={['flex', 'gap-6']}>
+<div class="flex flex-col gap-6">
+  <div class="flex flex-col gap-4">
+    <div class="flex gap-6">
       <Image
-        class:list={['rounded-lg', 'object-cover', 'max-w-[120px]', 'overflow-hidden', 'sm:block', 'hidden']}
+        class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden"
         {...sharedImageProps}
         alt={alt}
       />
-      <div class:list={['flex', 'flex-col', 'gap-4', 'w-full']}>
-        <div class:list={['flex', 'justify-between']}>
+      <div class="flex w-full flex-col gap-4">
+        <div class="flex justify-between">
           <div>
             <Typography variant="item-title">{name}</Typography>
             <Timestamp
@@ -45,7 +45,7 @@ const { alt, ...sharedImageProps } = {
               translationForNow={i18n.translations.now}
             />
           </div>
-          <div class:list={['flex', 'gap-2']}>
+          <div class="flex gap-2">
             {
               socials?.map(({ icon, url, name: socialName }) => (
                 <IconButton icon={icon} href={url} target="_blank" size="small" aria-label={socialName} />
@@ -53,12 +53,8 @@ const { alt, ...sharedImageProps } = {
             }
           </div>
         </div>
-        <Image
-          class:list={['rounded-lg', 'object-cover', 'max-w-[120px]', 'sm:block', 'sm:hidden']}
-          {...sharedImageProps}
-          alt={alt}
-        />
-        <div class:list={['inline-grid', 'xl:grid-cols-[auto_auto]', 'w-full']}>
+        <Image class="rounded-lg object-cover max-w-[120px] sm:hidden" {...sharedImageProps} alt={alt} />
+        <div class="inline-grid w-full xl:grid-cols-[auto_auto]">
           {
             details.map(({ label: detailLabel, value: detailValue }) => (
               <LabelledValue
@@ -70,14 +66,14 @@ const { alt, ...sharedImageProps } = {
         </div>
       </div>
     </div>
-    <div class:list={['col-start-1 col-span-3']}>
+    <div class="col-span-3 col-start-1">
       <Typography variant="paragraph">{description}</Typography>
     </div>
   </div>
-  <div class:list={['flex', 'gap-3', 'flex-wrap']}>
+  <div class="flex flex-wrap gap-3">
     {
-      tags.map(({ name: tagName, icon, iconColor, url }) => {
-        return url ? (
+      tags.map(({ name: tagName, icon, iconColor, url }) =>
+        url ? (
           <a href={url} target="_blank" rel="noopener noreferrer">
             <Tag name={icon} color={iconColor}>
               {tagName}
@@ -87,8 +83,8 @@ const { alt, ...sharedImageProps } = {
           <Tag name={icon} color={iconColor}>
             {tagName}
           </Tag>
-        );
-      })
+        )
+      )
     }
   </div>
 </div>
diff --git a/src/components/organisms/skill-level.astro b/src/components/organisms/skill-level.astro
index 8e2a615..a5426eb 100644
--- a/src/components/organisms/skill-level.astro
+++ b/src/components/organisms/skill-level.astro
@@ -10,6 +10,6 @@ const { skillLevel } = Astro.props;
 const levels = [1, 2, 3, 4, 5];
 ---
 
-<div class:list={['flex', 'gap-1']}>
+<div class="flex gap-1">
   {levels.map((tileLevel) => <SkillLevelTile tileLevel={tileLevel} skillLevel={skillLevel} />)}
 </div>
diff --git a/src/components/organisms/skill-subsection.astro b/src/components/organisms/skill-subsection.astro
index a5d3963..cba728c 100644
--- a/src/components/organisms/skill-subsection.astro
+++ b/src/components/organisms/skill-subsection.astro
@@ -22,7 +22,7 @@ const isLevelledSkillSection = (skillsSectionData: Tag[] | LevelledSkill[]): ski
 };
 ---
 
-<div class:list={['flex', 'flex-col', 'gap-3']}>
+<div class="flex flex-col gap-3">
   <Typography variant="section-subtitle">{title}</Typography>
   {
     isLevelledSkillSection(skills) ? (
diff --git a/src/components/organisms/skill.astro b/src/components/organisms/skill.astro
index 55eceff..ab93c82 100644
--- a/src/components/organisms/skill.astro
+++ b/src/components/organisms/skill.astro
@@ -14,15 +14,12 @@ const { url, icon, iconColor, name, level, description } = Astro.props;
 const IconWrapper = url ? 'a' : 'div';
 ---
 
-<div class:list={['flex', 'flex-col', 'gap-2']}>
-  <div class:list={['flex', 'items-center', 'justify-between', 'h-5']}>
-    <IconWrapper
-      class:list={['flex', 'gap-2', 'h-5']}
-      {...(url && { href: url, target: "_blank", rel: "noopener noreferrer" })}
-    >
+<div class="flex flex-col gap-2">
+  <div class="flex h-5 items-center justify-between">
+    <IconWrapper class="flex gap-2 h-5" {...(url && { href: url, target: '_blank', rel: 'noopener noreferrer' })}>
       <Icon client:load name={icon} color={iconColor} size={20} />
       <Typography variant="tile-subtitle">
-        <span class:list={['text-gray-700', 'dark:text-gray-300']}>{name}</span>
+        <span class="text-gray-700 dark:text-gray-300">{name}</span>
       </Typography>
     </IconWrapper>
     {
diff --git a/src/components/organisms/tag-skill-subsection.astro b/src/components/organisms/tag-skill-subsection.astro
index 335a955..5b9b13d 100644
--- a/src/components/organisms/tag-skill-subsection.astro
+++ b/src/components/organisms/tag-skill-subsection.astro
@@ -9,7 +9,7 @@ export interface Props {
 const { skills } = Astro.props;
 ---
 
-<div class:list={['flex', 'flex-wrap', 'gap-3', 'items-center']}>
+<div class="flex flex-wrap items-center gap-3">
   {
     skills.map(({ name, icon, iconColor, url }) =>
       url ? (
diff --git a/src/components/organisms/testimonial.astro b/src/components/organisms/testimonial.astro
index e99559c..f7f0661 100644
--- a/src/components/organisms/testimonial.astro
+++ b/src/components/organisms/testimonial.astro
@@ -14,10 +14,10 @@ const {
 } = Astro.props;
 ---
 
-<div class:list={['w-full', 'flex', 'flex-col', 'gap-4']}>
-  <div class:list={['flex', 'justify-between']}>
-    <div class:list={['flex', 'gap-4', 'flex-col', 'sm:flex-row']}>
-      <Image src={image} alt={author} format="webp" class:list={['w-14', 'h-14', 'rounded-lg']} />
+<div class="flex w-full flex-col gap-4">
+  <div class="flex justify-between">
+    <div class="flex flex-col gap-4 sm:flex-row">
+      <Image src={image} alt={author} format="webp" class="w-14 h-14 rounded-lg" />
       <div>
         <Typography variant="item-title">{author}</Typography>
         <Typography variant="item-subtitle">{relation}</Typography>
@@ -25,7 +25,7 @@ const {
     </div>
     {
       socials && (
-        <div class:list={['flex', 'gap-3']}>
+        <div class="flex gap-3">
           {socials.map(({ icon, url, name }) => (
             <IconButton icon={icon} href={url} target="_blank" size="small" aria-label={name} />
           ))}
diff --git a/src/components/organisms/work-timeline-item.astro b/src/components/organisms/work-timeline-item.astro
index fc02acc..bd2153a 100644
--- a/src/components/organisms/work-timeline-item.astro
+++ b/src/components/organisms/work-timeline-item.astro
@@ -6,21 +6,21 @@ import Typography from '@/atoms/typography.astro';
 import type { Job } from '@/types/experience-section';
 import type { I18n } from '@/types/i18n';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   job: Job;
   i18n: I18n;
 }
-const { job, i18n, ...props } = Astro.props;
+const { job, i18n } = Astro.props;
 ---
 
-<div class:list={['flex', 'flex-col', 'gap-2', 'md:gap-0', props.class]}>
-  <div class:list={['flex', 'flex-row', 'justify-between', 'w-full']}>
+<div class="flex flex-col gap-2 md:gap-0">
+  <div class="flex w-full flex-row justify-between">
     <div>
       <Typography variant="item-title"
         >{job.role} <span class="font-medium"> &#8212;&nbsp;{job.company}</span>
       </Typography>
     </div>
-    <div class:list={['flex', 'flex-wrap', 'gap-2']}>
+    <div class="flex flex-wrap gap-2">
       {
         job.socials?.map(({ icon, url, name }) => (
           <IconButton icon={icon} href={url} target="_blank" size="small" aria-label={name} />
@@ -34,7 +34,7 @@ const { job, i18n, ...props } = Astro.props;
     locale={i18n.locale}
     translationForNow={i18n.translations.now}
   />
-  <ul class:list={['my-3']}>
+  <ul class="my-3">
     {
       Array.isArray(job.description) ? (
         job.description.map((d) => (
@@ -49,10 +49,10 @@ const { job, i18n, ...props } = Astro.props;
       )
     }
   </ul>
-  <div class:list={['flex', 'gap-3', 'flex-wrap', 'mt-3']}>
+  <div class="mt-3 flex flex-wrap gap-3">
     {
-      job.tags.map(({ icon, iconColor, name, url }) => {
-        return url ? (
+      job.tags.map(({ icon, iconColor, name, url }) =>
+        url ? (
           <a href={url} target="_blank" rel="noopener noreferrer">
             <Tag name={icon} color={iconColor}>
               {name}
@@ -62,8 +62,8 @@ const { job, i18n, ...props } = Astro.props;
           <Tag name={icon} color={iconColor}>
             {name}
           </Tag>
-        );
-      })
+        )
+      )
     }
   </div>
 </div>
diff --git a/src/components/sections/favorites-section.astro b/src/components/sections/favorites-section.astro
index d718d0d..3e54428 100644
--- a/src/components/sections/favorites-section.astro
+++ b/src/components/sections/favorites-section.astro
@@ -67,14 +67,14 @@ const section: Section = 'favorites';
 ---
 
 <SectionCard section={section} title={title}>
-  <div class:list={['flex', 'flex-col', 'gap-16']}>
+  <div class="flex flex-col gap-16">
     {
       subsections.map(({ Component, data, name, columnsLayout, title: subsectionTitle }) => (
-        <div class:list={['flex', 'flex-col', 'gap-6']}>
+        <div class="flex flex-col gap-6">
           <Typography variant="section-subtitle" id={`${section}-${name}-heading`}>
             {subsectionTitle}
           </Typography>
-          <div class:list={['grid', 'gap-8', columnsLayout]}>
+          <div class={`grid gap-8 ${columnsLayout}`}>
             {data.map((value) => (
               <Component value={value} />
             ))}
diff --git a/src/components/sections/main-section.astro b/src/components/sections/main-section.astro
index 945bf03..567df59 100644
--- a/src/components/sections/main-section.astro
+++ b/src/components/sections/main-section.astro
@@ -26,26 +26,26 @@ const section: Section = 'main';
 ---
 
 <SectionCard section={section}>
-  <div class:list={['flex', 'gap-6', 'flex-col', 'sm:flex-row', 'items-start']}>
-    <div class:list={['flex', 'sm:flex-col', 'gap-4', 'items-center']}>
+  <div class="flex flex-col items-start gap-6 sm:flex-row">
+    <div class="flex items-center gap-4 sm:flex-col">
       <Image
         src={image}
         alt={fullName}
-        class:list={['w-24', 'h-24', 'sm:w-36', 'sm:h-36', 'md:w-52', 'md:h-52', 'rounded-lg', 'max-w-none']}
+        class="w-24 h-24 sm:w-36 sm:h-36 md:w-52 md:h-52 rounded-lg max-w-none"
         format="webp"
-        aspectRatio="1/1"
+        aspectRatio={1}
       />
       <Button href={url} download={downloadedFileName}>{label}</Button>
     </div>
-    <div class:list={['w-full', 'flex', 'flex-col', 'gap-5']}>
-      <div class:list={['w-full', 'flex', 'flex-col', 'sm:flex-row', 'justify-between', 'gap-2']}>
-        <div class:list={['w-full']}>
+    <div class="flex w-full flex-col gap-5">
+      <div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
+        <div class="w-full">
           <Typography variant="main-title" id={`${section}-heading`}>{fullName}</Typography>
           <Typography variant="main-subtitle">{role}</Typography>
         </div>
         {
           socials.length > 0 && (
-            <div class:list={['flex', 'gap-3', 'flex-wrap', 'sm:flex-nowrap']}>
+            <div class="flex flex-wrap gap-3 sm:flex-nowrap">
               {socials.map(({ icon, url: iconUrl, name }) => (
                 <IconButton href={iconUrl} icon={icon} size="small" target="_blank" aria-label={name} />
               ))}
@@ -53,22 +53,22 @@ const section: Section = 'main';
           )
         }
       </div>
-      <div class:list={['flex', 'flex-col', 'gap-6']}>
-        <div class:list={['inline-grid', 'xl:grid-cols-[auto_auto]']}>
+      <div class="flex flex-col gap-6">
+        <div class="inline-grid xl:grid-cols-[auto_auto]">
           {
             details.map(({ label: detailLabel, value }) => (
               <div class="w-fit">
                 <Typography variant="paragraph">
-                  <span class:list={['text-gray-700', 'dark:text-gray-300']}>{detailLabel}: </span>
-                  <span class:list={['break-all', 'dark:text-gray-400']}>{value}</span>
+                  <span class="text-gray-700 dark:text-gray-300">{detailLabel}: </span>
+                  <span class="break-all dark:text-gray-400">{value}</span>
                 </Typography>
               </div>
             ))
           }
         </div>
-        <div class:list={['flex', 'flex-col', 'gap-4']}>
+        <div class="flex flex-col gap-4">
           <Typography variant="paragraph">{description}</Typography>
-          <div class:list={['flex', 'flex-wrap', 'gap-3']}>
+          <div class="flex flex-wrap gap-3">
             {
               tags.map(({ icon, iconColor, name, url: tagUrl }) =>
                 tagUrl ? (
diff --git a/src/components/sections/skills-section.astro b/src/components/sections/skills-section.astro
index 8f6ca35..b97c8be 100644
--- a/src/components/sections/skills-section.astro
+++ b/src/components/sections/skills-section.astro
@@ -15,7 +15,7 @@ const section: Section = 'skills';
 ---
 
 <SectionCard section={section} title={title}>
-  <div class:list={['flex', 'flex-col', 'gap-10']}>
+  <div class="flex flex-col gap-10">
     {skillSets.map((skillSet) => <SkillSubsection skillSet={skillSet} />)}
   </div>
 </SectionCard>
diff --git a/src/constants/section.ts b/src/constants/section.ts
deleted file mode 100644
index 25fa239..0000000
--- a/src/constants/section.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { Section } from '@/types/data';
-
-export const MAIN_SECTION: Section = 'main';
diff --git a/src/pages/_playground/icon-button.astro b/src/pages/_playground/icon-button.astro
index 7352760..4dfcec9 100644
--- a/src/pages/_playground/icon-button.astro
+++ b/src/pages/_playground/icon-button.astro
@@ -2,7 +2,7 @@
 import IconButton from '@/atoms/icon-button.astro';
 ---
 
-<div class:list={['p-5', 'flex', 'flex-col', 'gap-2']}>
+<div class="flex flex-col gap-2 p-5">
   <IconButton icon="fa6-brands:facebook-f" size="small" href="#" />
   <IconButton icon="fa6-brands:github" size="small" href="#" />
   <IconButton icon="fa6-brands:linkedin-in" size="large" href="#" />
diff --git a/src/pages/_playground/main-section.astro b/src/pages/_playground/main-section.astro
index 96ae368..5235be6 100644
--- a/src/pages/_playground/main-section.astro
+++ b/src/pages/_playground/main-section.astro
@@ -29,7 +29,7 @@ const mainSectionData: MainSectionData = {
 ---
 
 <body class="flex justify-center bg-gray-50">
-  <div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
+  <div class="flex w-full max-w-6xl gap-8 px-2 py-3 sm:px-8 sm:py-12 lg:ml-22 lg:px-16 lg:py-20">
     <main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
       <MainSection {...mainSectionData} />
     </main>
diff --git a/src/pages/_playground/skills-section.astro b/src/pages/_playground/skills-section.astro
index b23fe90..bad3ab8 100644
--- a/src/pages/_playground/skills-section.astro
+++ b/src/pages/_playground/skills-section.astro
@@ -152,7 +152,7 @@ const skills: SkillsSectionData = {
 ---
 
 <body class="flex justify-center bg-gray-50">
-  <div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
+  <div class="flex w-full max-w-6xl gap-8 px-2 py-3 sm:px-8 sm:py-12 lg:ml-22 lg:px-16 lg:py-20">
     <main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
       <SkillsSection config={skills.config} skillSets={skills.skillSets} />
     </main>
diff --git a/src/pages/_playground/testimonial.astro b/src/pages/_playground/testimonial.astro
index 46dbe12..cdc070e 100644
--- a/src/pages/_playground/testimonial.astro
+++ b/src/pages/_playground/testimonial.astro
@@ -15,6 +15,6 @@ const testimonial: TestimonialData = {
 };
 ---
 
-<div class:list={['flex', 'flex-col', 'gap-2', 'max-w-[896px]']}>
+<div class="flex max-w-[896px] flex-col gap-2">
   <Testimonial testimonial={testimonial} />
 </div>
diff --git a/src/pages/_playground/testimonials-section.astro b/src/pages/_playground/testimonials-section.astro
index 47cef67..602a293 100644
--- a/src/pages/_playground/testimonials-section.astro
+++ b/src/pages/_playground/testimonials-section.astro
@@ -37,7 +37,7 @@ const testimonials: Testimonial[] = [
 ---
 
 <body class="flex justify-center bg-gray-50">
-  <div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
+  <div class="flex w-full max-w-6xl gap-8 px-2 py-3 sm:px-8 sm:py-12 lg:ml-22 lg:px-16 lg:py-20">
     <main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
       <TestimonialsSection testimonials={testimonials} config={{ title: 'Testimonials', icon: 'fa6-solid:comment' }} />
     </main>
diff --git a/src/pages/_playground/typography.astro b/src/pages/_playground/typography.astro
index e45e9ba..c855488 100644
--- a/src/pages/_playground/typography.astro
+++ b/src/pages/_playground/typography.astro
@@ -4,7 +4,7 @@ import Typography from '@/atoms/typography.astro';
 const text = 'A quick brown fox jumps over the lazy dog';
 ---
 
-<div class="p-5 space-y-10">
+<div class="space-y-10 p-5">
   <div>
     <p class="mb-2 font-mono">paragraph (default)</p>
     <Typography>{text}</Typography>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a89f9bc..74e9ff8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -31,8 +31,8 @@ const seoImage = seo.image ? seo.image : '/favicon.svg';
   </head>
   <body class="flex justify-center bg-gray-50 dark:bg-gray-900">
     <ThemeToggle client:only="react" />
-    <div class="flex relative transform-none gap-8 w-full max-w-5xl px-2 py-3 sm:px-8 sm:py-12 lg:py-20">
-      <div class="absolute z-40 -right-2">
+    <div class="relative flex w-full max-w-5xl transform-none gap-8 px-2 py-3 sm:px-8 sm:py-12 lg:py-20">
+      <div class="absolute -right-2 z-40">
         <Sidebar className="hidden xl:flex fixed">
           {
             getObjectKeys(dataWithoutSeoAndI18n).map((key) => {
@@ -51,7 +51,7 @@ const seoImage = seo.image ? seo.image : '/favicon.svg';
           }
         </Sidebar>
       </div>
-      <main class="w-full relative space-y-4 sm:space-y-6 lg:space-y-8">
+      <main class="relative w-full space-y-4 sm:space-y-6 lg:space-y-8">
         <MainSection {...data.main} />
         {data.skills && <SkillsSection {...data.skills} />}
         {
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
deleted file mode 100644
index f5e4df2..0000000
--- a/tsconfig.eslint.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.astro"]
-}
diff --git a/tsconfig.json b/tsconfig.json
index cc5ade8..6692f33 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,5 +40,6 @@
       "@/constants/*": ["src/constants/*"],
       "@/utils/*": ["src/utils/*"]
     }
-  }
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.astro"]
 }