chore: bump version number

Starting with v5 vite-imagetools has removed shorthands

.browserslistrc

@@ -1,2 +1,3 @@
-> 1%
+defaults
+>1% and not dead
 last 2 versions

.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

.eslintrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
-  },
-  parserOptions: {
-    parser: "babel-eslint"
-  }
-};

.gitignore

@@ -1,21 +1,30 @@
-.DS_Store
+# Logs
-node_modules
+logs
-/dist
+*.log
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

README.md

@@ -1,24 +1,55 @@
-# sebin-reference
+# Sebin Reference Page
 
-## Project setup
+The official reference page of Sebin Nyshkim, the anthro dragon.
-```
+
+This page is primarily targeted at artists commissioned to draw Sebin. The idea is to have a single point of truth to easily point to.
+
+The benefit of this is two-fold:
+
+* Lack of attachments in Fur Affinity notes
+* Participating in art raffles on Twitter without cluttering up the media tab with the same image over and over again
+
+Furthermore, this page serves both for the development of Sebin as an independent character as well as a training ground for learning various new web technologies fitting such a project.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
 npm install
 ```
 
-### Compiles and hot-reloads for development
+### Compile and Hot-Reload for Development
-```
+
-npm run serve
+```sh
+npm run dev
 ```
 
-### Compiles and minifies for production
+### Type-Check, Compile and Minify for Production
-```
+
+```sh
 npm run build
 ```
 
-### Lints and fixes files
+### Lint with [ESLint](https://eslint.org/)
-```
+
+```sh
 npm run lint
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

Sebin.md

@@ -102,7 +102,7 @@ Since Sebin is a fire dragon there’s a myriad of abilities he has at his dispo
 
 Sebin can enter an Overdrive Form which greatly increases his strength and abilities but it comes at a cost.
 
-He enters Overdrive by engulfing himself in a pillar of flames which transforms his exterior physique. During Overdrive transformation his hair ignites and flickers with blue flames. The corners of his eyes flicker with with long green flames. His arms and legs become [3/4 carbon black and are crossed by several glowing veins which pulsate like flowing lava](https://www.furaffinity.net/view/31065788/). Fire in this form burns several degrees hotter than usual because his body becomes a living blast furnace, which is why his limbs have to be of more fire-proof material to withstand the increased heat.
+He enters Overdrive by engulfing himself in a pillar of flames which transforms his exterior physique. During Overdrive transformation his hair ignites and flickers with blue flames. The corners of his eyes flicker with long green flames. His arms and legs become part carbon black and are crossed by several glowing veins which pulsate like flowing lava. Fire in this form burns several degrees hotter than usual because his body becomes a living blast furnace, which is why his limbs have to be of more fire-proof material to withstand the increased heat.
 
 To complete the transformation he inhales the flames from the pillar surrounding him which heats up his body from within. Even if Sebin is a fire dragon who can sustain high degrees of heat he is essentially overheating himself from the inside. Because of this he can't maintain this form for more than a few hours before he does permanent damage to his own body.
 

babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};

card/header/furaffinity/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Sebin Nyshkim</h1>
+      <h2>
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
+          <span class="handle">SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
+          <span class="handle">@SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
+          <span class="handle">@SebinNyshkim@meow.social</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
+          <span class="handle">Sebin Nyshkim#8877</span>
+        </span>
+      </h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>

card/header/furaffinity/style.css

@@ -0,0 +1,139 @@
+@import "../../../src/assets/fonts/exo/exo.css";
+
+:root {
+  font-size: 20px;
+  color: #fff;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 25vh;
+  --welcome-header-subline-font-size: 10vh;
+
+  --icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
+
+  --page-background: radial-gradient(circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%),
+    radial-gradient(circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%);
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+  /* line-height: 1.5; */
+}
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+main::before,
+main::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+main::before {
+  background: url(../../../src/assets/subtle-prism.svg);
+  mix-blend-mode: multiply;
+  z-index: -1;
+  transform: scale(1.5);
+}
+
+main::after {
+  background: var(--page-background);
+  z-index: -2;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  flex: 0 0 50vw;
+  padding: 0 2vw;
+}
+
+.flex > * {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  border-radius: 100%;
+  border: 3vh solid #fff;  box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+  flex: 0 1 45vw;
+  margin: 0;
+  padding: 0 1vw;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Exo", sans-serif;
+  text-align: center;
+  font-style: italic;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  line-height: 1.75;
+}
+
+.headings .contact {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.headings .icon,
+.headings .handle {
+  flex: 0 0 auto;
+}
+
+.headings .icon {
+  flex: 0 0 var(--icon-size);
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin: 0 0.375em 0 0;
+}
+
+.headings .icon {
+  fill: #fff;
+}

card/header/mastodon/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Sebin Nyshkim</h1>
+      <h2>
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
+          <span class="handle">SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
+          <span class="handle">@SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
+          <span class="handle">@SebinNyshkim@meow.social</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
+          <span class="handle">Sebin Nyshkim#8877</span>
+        </span>
+      </h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>

card/header/mastodon/style.css

@@ -0,0 +1,139 @@
+@import "../../../src/assets/fonts/exo/exo.css";
+
+:root {
+  font-size: 20px;
+  color: #fff;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 6vw;
+  --welcome-header-subline-font-size: 2vw;
+
+  --icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
+
+  --page-background: radial-gradient(circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%),
+    radial-gradient(circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%);
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+  /* line-height: 1.5; */
+}
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+main::before,
+main::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+main::before {
+  background: url(../../../src/assets/subtle-prism.svg);
+  mix-blend-mode: multiply;
+  z-index: -1;
+  transform: scale(1.5);
+}
+
+main::after {
+  background: var(--page-background);
+  z-index: -2;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  flex: 0 0 72vw;
+}
+
+.flex>* {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  border-radius: 100%;
+  border: 1vw solid #fff;
+  box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+  flex: 0 0 50vw;
+  margin: 0;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Exo", sans-serif;
+  text-align: center;
+  font-style: italic;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+  line-height: 1.75;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  line-height: 1.75;
+}
+
+.headings .contact {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.headings .icon,
+.headings .handle {
+  flex: 0 0 auto;
+}
+
+.headings .icon {
+  flex: 0 0 var(--icon-size);
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin: 0 0.375em 0 0;
+}
+
+.headings .icon {
+  fill: #fff;
+}

card/header/twitter/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../../../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Sebin Nyshkim</h1>
+      <h2>
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
+          <span class="handle">SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
+          <span class="handle">@SebinNyshkim</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
+          <span class="handle">@SebinNyshkim@meow.social</span>
+        </span>
+
+        <span class="contact">
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
+          <span class="handle">Sebin Nyshkim#8877</span>
+        </span>
+      </h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>

card/header/twitter/style.css

@@ -0,0 +1,143 @@
+@import "../../../src/assets/fonts/exo/exo.css";
+
+:root {
+  font-size: 20px;
+  color: #fff;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 8vw;
+  --welcome-header-subline-font-size: 2.5vw;
+
+  --icon-size: calc(var(--welcome-header-subline-font-size) * 1.25);
+
+  --page-background: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%
+    );
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+  /* line-height: 1.5; */
+}
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+main::before,
+main::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+main::before {
+  background: url(../../../src/assets/subtle-prism.svg);
+  mix-blend-mode: multiply;
+  z-index: -1;
+  transform: scale(1.5);
+}
+
+main::after {
+  background: var(--page-background);
+  z-index: -2;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  align-items: center;
+
+  flex: 0 0 100%;
+}
+
+.flex > * {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  border-radius: 100%;
+  border: 1vw solid #fff;
+  box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+  flex: 0 0 60vw;
+  margin: 0;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Exo", sans-serif;
+  text-align: center;
+  font-style: italic;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+  line-height: 1.75;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  line-height: 1.75;
+}
+
+.headings .contact {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.headings .icon,
+.headings .handle {
+  flex: 0 0 auto;
+}
+
+.headings .icon {
+  flex: 0 0 var(--icon-size);
+  width: var(--icon-size);
+  height: var(--icon-size);
+  margin: 0 0.375em 0 0;
+}
+
+.headings .icon {
+  fill: #fff;
+}

card/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="flex">
+    <div class="image">
+      <img src="../src/assets/sebin-smug-icon.png" alt="Sebin Smug Icon" />
+    </div>
+    <div class="headings">
+      <h1>Sebin Nyshkim</h1>
+      <h2>Character Reference Page</h2>
+    </div>
+  </main>
+  <!-- Open in browser and set mobile view to 2048x1072 with DPR: 2 and take screenshot -->
+</body>
+</html>

card/style.css

@@ -0,0 +1,112 @@
+@import "../src/assets/fonts/exo/exo.css";
+
+:root {
+  font-size: 20px;
+  color: #fff;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+  --welcome-header-mainline-font-size: 8vw;
+  --welcome-header-subline-font-size: 3.5vw;
+
+  --page-background: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%
+    );
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  min-height: 100vh;
+}
+
+main::before,
+main::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+main::before {
+  background: url(../src/assets/subtle-prism.svg);
+  mix-blend-mode: multiply;
+  z-index: -1;
+  transform: scale(1.5);
+}
+
+main::after {
+  background: var(--page-background);
+  z-index: -2;
+}
+
+.flex {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  align-items: center;
+
+  flex: 0 0 100%;
+}
+
+.flex > * {
+  flex: 0 0 auto;
+}
+
+.image {
+  flex: 0 0 60vh;
+  max-height: 100vh;
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  border-radius: 100%;
+  border: 1vw solid #fff;
+  box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+  flex: 0 0 60vw;
+  margin: 0;
+}
+
+.headings :where(h1, h2) {
+  font-family: "Exo", sans-serif;
+  text-align: center;
+  font-style: italic;
+  margin: 0;
+}
+
+.headings h1 {
+  font-size: var(--welcome-header-mainline-font-size);
+  font-weight: 900;
+}
+
+.headings h2 {
+  font-size: var(--welcome-header-subline-font-size);
+  font-weight: 300;
+}

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="favicon" href="favicon.png" type="image/png" />
+    <link rel="icon" href="favicon.png" type="image/png" />
+    <title>Sebin Nyshkim - Reference Page</title>
+
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#22759d" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#195673" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@SebinNyshkim" />
+    <meta name="twitter:creator" content="@SebinNyshkim" />
+    <meta name="twitter:title" content="Sebin Nyshkim - Reference Page" />
+    <meta name="twitter:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
+    <meta name="twitter:image" content="https://ref.sebin-nyshkim.net/sebin/preview.png" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Sebin Nyshkim - Reference Page" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:url" content="https://ref.sebin-nyshkim.net/sebin/" />
+    <meta property="og:image" content="https://ref.sebin-nyshkim.net/sebin/preview.png" />
+    <meta property="og:description" content="The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions" />
+  </head>
+  <body>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -1,29 +1,38 @@
 {
   "name": "sebin-reference",
-  "version": "0.2.1",
+  "version": "0.10.7",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite --host",
-    "build": "vue-cli-service build",
+    "build": "run-p type-check \"build-only {@}\" --",
-    "lint": "vue-cli-service lint"
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
   },
   "dependencies": {
-    "core-js": "^3.6.4",
+    "vue": "^3.4.38",
-    "vue": "^2.6.11",
+    "vue-router": "^4.4.3"
-    "vue-meta": "^2.3.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.3",
+    "@rushstack/eslint-patch": "^1.10.4",
-    "@vue/cli-plugin-eslint": "^4.2.3",
+    "@tsconfig/node20": "^20.1.4",
-    "@vue/cli-service": "^4.2.3",
+    "@types/node": "^20.16.3",
-    "@vue/eslint-config-prettier": "^5.1.0",
+    "@vitejs/plugin-vue": "^5.1.3",
-    "babel-eslint": "^10.1.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
-    "eslint": "^5.16.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "@vue/tsconfig": "^0.5.1",
-    "eslint-plugin-vue": "^5.0.0",
+    "autoprefixer": "^10.4.20",
-    "node-sass": "^4.13.1",
+    "eslint": "^8.57.0",
-    "prettier": "^1.19.1",
+    "eslint-plugin-vue": "^9.28.0",
-    "sass-loader": "^8.0.2",
+    "normalize.css": "^8.0.1",
-    "vue-template-compiler": "^2.6.11"
+    "npm-run-all2": "^6.2.2",
+    "prettier": "^3.3.3",
+    "sass": "^1.77.8",
+    "typescript": "~5.5.0",
+    "vite": "^5.4.2",
+    "vite-imagetools": "^6.2.9",
+    "vue-tsc": "^2.1.4"
   }
 }

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-};

public/.htaccess

@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /sebin/index.html [L]
+</IfModule>

public/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but sebin-reference doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/App.vue

@@ -1,576 +1,99 @@
-<template>
+<script setup lang="ts">
-  <div id="app">
+import { ref, provide } from 'vue'
-    <label class="nsfw-switch" for="nsfw-switch">
+import { RouterView } from 'vue-router'
-      <div>😇</div>
+import { modalResultKey, nsfwKey, showModalKey } from '@/keys'
-      <div class="toggle-wrap">
+import { version } from '../package.json'
-        <input v-model="nsfw" type="checkbox" name="nsfw" id="nsfw-switch" />
+import RefModal from '@/components/RefModal.vue'
-        <div class="toggle"></div>
+import ButtonGroup from '@/components/ButtonGroup.vue'
-      </div>
+import Button from '@/components/RefButton.vue'
-      <div>😈</div>
+import SiteHeader from '@/components/SiteHeader.vue'
-    </label>
+import SiteFooter from '@/components/SiteFooter.vue'
-    <header>
+import SiteNavigation from '@/components/SiteNavigation.vue'
-      <div>
-        <img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" />
-      </div>
-      <div>
-        <h1>{{ appName }}</h1>
-        <h2>{{ appSubtitle }}</h2>
-      </div>
-    </header>
 
-    <section>
+const isNsfw = ref(false)
-      <h2>Quick info</h2>
+const isConfirmedHorny = ref(false)
-      <data-table :dataset="getSebinData.generic"></data-table>
-    </section>
 
-    <section>
+const nsfwmodal = ref<InstanceType<typeof RefModal>>()
-      <h2>Colors</h2>
-      <data-table :dataset="getSebinData.colors"></data-table>
-    </section>
 
-    <section v-if="nsfw">
+const showModal = (): void => {
-      <h2>Penis</h2>
+  if (!isConfirmedHorny.value) {
-      <data-table :dataset="getSebinData.penis"></data-table>
+    nsfwmodal.value?.showModal()
-    </section>
 
-    <section class="prose">
+    setTimeout(() => {
-      <h2>Anatomy</h2>
+      isNsfw.value = false
-
+    }, 1)
-      <rich-figure
+  } else {
-        imgSrc="/img/fullbody-ref.jpg"
+    isNsfw.value = !isNsfw.value
-        caption="Sebin Full Body reference"
-        copyright="FA:SirBoburto"
-      ></rich-figure>
-
-      <p>
-        Sebin is a bipedal plantigrade. His body is mostly covered by red scales
-        with yellow chest plates running from below his chin over his torso all
-        the way down between his legs and underside of his tail. His physique is
-        athletic to muscular. His fingers and toes are equipped sharp black
-        claws. Brown spikes run along his spine down to the tip of his tail. His
-        tail is about one meter in length.
-      </p>
-
-      <rich-figure
-        imgSrc="/img/head-ref.jpg"
-        caption="Sebin's Expressions"
-        copyright="FA:SirBoburto"
-      ></rich-figure>
-
-      <p>
-        His wing span is around 3-4 meters. He has them closed when on the
-        ground. His wings function like a second pair of arms, at which ends are
-        hand-like limbs with a black talon on top and finger-like extensions, in
-        between which are the membranes of his wings. He can use his wings to
-        fly short distances. Longer distances become difficult due to fatigue of
-        having to carry his own weight with his wings alone.
-      </p>
-
-      <rich-figure
-        imgSrc="/img/sebin-hairstyle-short.jpg"
-        caption="Sebin with short hair"
-        copyright="@LeoboArt"
-      ></rich-figure>
-
-      <p>
-        He has round pupils instead of the slit ones typical for reptilians. He
-        has short yellow spikes above his eyes that resemble eyebrows, as well
-        as spikes along the jawline of his cheeks. He has black horns growing
-        out of his head which are mostly straight but slightly curve downwards.
-        His hair is blue and he wears it in varying styles. He has long pointy
-        ears which he can move to determine the origin of sounds around him. He
-        also uses them to express emotion. His teeth are very sharp. In his
-        throat are glands that produce a mixture that allows him to breathe
-        fire. His tongue has a pointy tip.
-      </p>
-
-      <rich-figure
-        v-if="nsfw"
-        imgSrc="/img/penis-ref.jpg"
-        caption="Sebin's manly parts"
-        copyright="@Zodim87"
-      ></rich-figure>
-
-      <p v-if="nsfw">
-        Despite his majorly reptilian appearance he has nipples, a feature of
-        the human side of his family, which also shows with his external
-        testicles. Rather than a slit which houses his penis he has a pouch-like
-        sheath, with the tip slightly peeking out of it when not aroused. His
-        penis is mainly humanoid in shape but is surrounded by several ridges.
-        He can take it out of its pouch while it's still soft (e.g. for passing
-        water). When aroused his charcoal black shaft pushes out from the
-        sheath, its base girded by the sheath like a ring.
-      </p>
-    </section>
-
-    <section class="prose">
-      <h2>Muscle Reference</h2>
-      <p>
-        Sebin started working out at the age of 17. Being in top shape is very
-        important to him. His favorite workouts are weight-lifting (dumbbells as
-        well as barbells), lat pulldown, leg press, straight arm pulldown and
-        cable pull. He works out three times a week with one day in between
-        workout days for rest, switching body regions each workout day.
-      </p>
-
-      <rich-figure
-        imgSrc="/img/upper-body-ref.png"
-        caption="Sebin's upper body closeup"
-        copyright="@NidtheDragon"
-      ></rich-figure>
-
-      <p>
-        Sebin is very focused on evenly distributed muscle mass but pays special
-        attention to his back, chest and arms. This is so his fire breath
-        doesn't get weak and he can throw fire projectiles farther. A strong
-        back ensures his wings continue to carry him so he can stay airbourne
-        for extended periods of time.
-      </p>
-
-      <h3>Additional References</h3>
-      <gallery :images="muscleRefs"></gallery>
-    </section>
-
-    <section class="prose">
-      <h2>Personality</h2>
-      <p>
-        Sebin is a warmhearted guy who cares a lot about his loved ones. He has
-        a keen sense for bad vibes and is always willing to do something about
-        it, either by listening to the problems of others or with well-meant
-        advice. Not being able to help a friend in need is the same for him as
-        abandoning them.
-      </p>
-      <p>
-        He is open and honest with his feelings and does not mince his words.
-        However, some people may find this brazen or tactless.
-      </p>
-      <p>
-        Sebin likes to laugh and is therefore easy to amuse, often up to a point
-        where he becomes utterly childish and immature. He also doesn't take
-        himself too seriously and can laugh at himself -- even if only after a
-        while. His vocabulary is rather vulgar and he rarely shies away from
-        cursing. But he knows when a more diplomatic choice of words is
-        appropriate.
-      </p>
-      <p>
-        However, if he feels that his points of view are right, his ambition may
-        well run away with him. If he gets the feeling during ongoing
-        discussions that the other side is not paying any attention to his point
-        of view, he can go from persistent to stubborn to hot-headed and even
-        become downright rude.
-      </p>
-      <p>
-        Sebin is very enthusiastic about his hobbies. If he notices even the
-        slightest overlap of interests, he may chew your ear off. Sometimes he
-        is also very impatient.
-      </p>
-      <p>
-        But above all Sebin is a very naughty hornball. He knows what he’s got
-        and enjoys the reactions when he shows it off. He is a generally
-        dominant lover who likes to have it rough. But he is not lacking in
-        tenderness. However, that doesn't mean that he doesn't let others have
-        their fun with him too from time to time. It always depends on his
-        playmates. He loves to wear bottomless jockstraps and boxer briefs to
-        direct the attention of the viewer exactly where he wants it. After all
-        he is well endowed enough to peddle it around.
-      </p>
-    </section>
-
-    <section>
-      <h2>Clothing Styles</h2>
-      <template v-for="(style, index) in clothingStyles">
-        <h3 :key="style.name">{{ style.name }}</h3>
-
-        <gallery :key="style.name + index" :images="clothes[index]"></gallery>
-
-        <ul :key="index">
-          <li v-for="(part, index) in style.clothes" :key="index">
-            {{ part }}
-          </li>
-        </ul>
-      </template>
-    </section>
-
-    <section class="prose">
-      <h2>Abilities</h2>
-      <p>
-        Since Sebin is a fire dragon there’s a myriad of abilities he has at his
-        disposal to defend himself.
-      </p>
-
-      <h3>Overdrive Form</h3>
-      <p>
-        Sebin can enter an Overdrive Form which greatly increases his strength
-        and abilities but it comes at a cost.
-      </p>
-
-      <p>
-        He enters Overdrive by engulfing himself in a pillar of flames which
-        transforms his exterior physique. During Overdrive transformation his
-        hair ignites and flickers with blue flames. The corners of his eyes
-        flicker with with long green flames. His arms and legs become
-        <a href="https://www.furaffinity.net/view/31065788/"
-          >3/4 carbon black and are crossed by several glowing veins which
-          pulsate like flowing lava</a
-        >. Fire in this form burns several degrees hotter than usual because his
-        body becomes a living blast furnace, which is why his limbs have to be
-        of more fire-proof material to withstand the increased heat.
-      </p>
-
-      <p>
-        To complete the transformation he inhales the flames from the pillar
-        surrounding him which heats up his body from within. Even if Sebin is a
-        fire dragon who can sustain high degrees of heat he is essentially
-        overheating himself from the inside. Because of this he can't maintain
-        this form for more than a few hours before he does permanent damage to
-        his own body.
-      </p>
-
-      <p>
-        Direct body contact with Sebin during overdrive causes 3rd degree burns
-        as he emits an extreme temperature, although less than he keeps inside
-        his body. His immediate surroundings are likely to burn or melt.
-      </p>
-
-      <h2>Attacks</h2>
-      <h3>Normal Form</h3>
-      <p>
-        <strong>Fire Breath:</strong> Either a long breath of fire or short
-        bursts fired directly from Sebin's mouth.
-      </p>
-
-      <p>
-        <strong>Flame Toss:</strong> Sebin spits fireballs into his hands to
-        throw them at his opponents. His scales are fireproof and can withstand
-        the high temperatures. On impact these fireballs explode into a bigger
-        fire bursts with a diameter of 1-2 meters. He can also combine two
-        fireballs into a bigger one for bigger impact.
-      </p>
-
-      <p>
-        <strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can also
-        greatly increase the speed of the projectiles by a strong punch or kick.
-      </p>
-
-      <p>
-        <strong>Burning Twister:</strong> An attack for aerial combat, Sebin can
-        use his fire breath to engulf his body in flames while spinning to
-        become a fire tornado that singes opponents.
-      </p>
-
-      <h3>Attacks in Overdrive Form</h3>
-      <p>
-        <strong>Fire Breath:</strong> The reach of Sebin's Fire Breath increases
-        as well as the frequency at which he can fire shots from his mouth.
-      </p>
-
-      <p>
-        <strong>Flame Toss:</strong> Overdrive Form eliminates the need for
-        Sebin to spit fire into his palms. It instead enables him to fire the
-        shots directly from the palm of his hands, as the firey veins crossing
-        his arms act as an orifice to do so. The explosion radius of the burning
-        projectiles that explode on impact is greatly increased.
-      </p>
-
-      <p>
-        <strong>Searing Discus:</strong> Overdrive allows Sebin to form rings of
-        fire by igniting flames from his fingertips and swirling them in a
-        circle motion. He can use them for both close quarters or ranged combat.
-      </p>
-
-      <p>
-        <strong>Combustion Flare:</strong> A devastating firestorm by combining
-        the power of both hands from his fire-infused arms. The impact of the
-        two carbon-like palms against each other is like the clash of two
-        flints, used to ignite the attack. A secure foothold is needed to
-        prevent Sebin from being thrown back by the recoil of the attack. Using
-        this technique in the air is therefore highly risky.
-      </p>
-
-      <p>
-        <strong>Blazing Pandemonium:</strong> A heavy impact into the ground
-        from a great height with both fists, tearing deep cracks in the ground
-        around the impact crater. Combined with <em>Burning Twister</em>, the
-        flames that previously surrounded Sebin's body are forced through the
-        newly created furrows, transforming the scene into an inferno.
-      </p>
-
-      <p>
-        <strong>Scorching Edge:</strong> A fiery blade towering several meters
-        into the air that Sebin sends careening towards his enemies from his
-        fire-infused legs with a backflip kick, leaving a swath of destruction
-        in its wake. Upon impact the force of the attack is distributed
-        sideways.
-      </p>
-
-      <p>
-        <strong>Circling Fire Shield:</strong> A rather defensive technique. By
-        spinning around with stretched out arms Sebin creates fire balls, which
-        he usually hurls towards enemies, that circle around his body
-        diagonally. They act as a shield while he can still move his arms
-        relatively freely. Enemies would be well advised to keep their distance
-        to this spinning shield, as the fire balls will still explode on
-        contact.
-      </p>
-    </section>
-
-    <footer>
-      © 2020 Sebin Nyshkim
-    </footer>
-  </div>
-</template>
-
-<script>
-import DataTable from "./components/DataTable.vue";
-import Gallery from "./components/Gallery.vue";
-import RichFigure from "./components/RichFigure.vue";
-
-import Sebin from "./mixins/Sebin.js";
-import Helper from "./mixins/Helper.js";
-
-export default {
-  name: "app",
-  components: {
-    DataTable,
-    Gallery,
-    RichFigure
-  },
-  data() {
-    return {
-      appName: "Sebin Nyshkim",
-      appSubtitle: "Character Reference Page",
-      muscleRefs: this.getMuscleRefPics(17),
-      kittens: this.getKittens(17),
-      clothes: this.getClothesPics(),
-      nsfw: false
-    };
-  },
-  mixins: [Sebin, Helper],
-  metaInfo: {
-    title: "Sebin Nyshkim - Reference Page",
-    link: [
-      { rel: "favicon", href: "/img/sebin-smug-icon.png" },
-      { rel: "icon", href: "/img/sebin-smug-icon.png" }
-    ],
-    meta: Helper.methods.getMetaTags(),
-    htmlAttrs: {
-      lang: "en"
-    }
   }
-};
+}
+
+const modalResult = (value: boolean): void => {
+  isNsfw.value = value
+  isConfirmedHorny.value = value
+  nsfwmodal.value?.close()
+}
+
+provide(modalResultKey, modalResult)
+provide(nsfwKey, isNsfw)
+provide(showModalKey, showModal)
 </script>
 
-<style lang="scss">
+<template>
-@import url("https://fonts.googleapis.com/css?family=Exo:300,300i,900,900i|Fira+Sans+Extra+Condensed:300,700&display=swap");
+  <RefModal id="nsfw-warning" ref="nsfwmodal">
+    <template #heading>
+      ⚠️⚠️⚠️<br />
+      Whoa, Nelly!
+    </template>
 
-:root {
+    <template #message>
-  font-family: "Fira Sans Extra Condensed", sans-serif;
+      By enabling NSFW mode you confirm that you are of legal age to view adult content.
-  font-size: 16px;
+    </template>
-  line-height: 1.5;
-}
 
-#app {
+    <template #buttons>
-  font-size: 1.125em;
+      <ButtonGroup col>
-  -webkit-font-smoothing: antialiased;
+        <Button positive @click.prevent="modalResult(true)"> Yes, show me the goods 👀 </Button>
-  -moz-osx-font-smoothing: grayscale;
+        <Button negative @click.prevent="modalResult(false)"> NO, STAHP 😱 </Button>
-  max-width: 40em;
+      </ButtonGroup>
-  margin: auto;
+    </template>
-  transition: all ease-in-out 0.25s;
+  </RefModal>
 
-  @media (min-width: 50em) {
+  <SiteHeader>
-    font-size: 1.25em;
+    <!-- max 500px -->
-  }
+    <picture>
+      <source
+        srcset="
+          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=avif&quality=75&as=srcset
+        "
+        sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
+        type="image/avif"
+      />
+      <source
+        srcset="
+          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=webp&quality=100&as=srcset
+        "
+        sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
+        type="image/webp"
+      />
+      <img
+        class="nav-logo"
+        srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=png&as=srcset"
+        sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
+        alt="Sebin Avatar"
+      />
+    </picture>
 
-  @media (min-width: 160em) {
+    <SiteNavigation />
-    font-size: 1.5em;
+  </SiteHeader>
-  }
-}
 
-.nsfw-switch {
+  <main>
-  position: fixed;
+    <RouterView />
-  top: 0;
+  </main>
-  right: 0;
-  z-index: 1;
-  background-color: #fff;
-  border-radius: 0.5em;
-  box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
-  padding: 0.5em;
-  margin: 0.5em;
 
-  display: flex;
+  <SiteFooter>
-  justify-content: center;
+    <p>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</p>
-  align-items: center;
+    <p>
-  align-content: center;
+      Background Pattern &copy;
-
+      <a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
-  > div {
+    </p>
-    flex: 0 1 33%;
+  </SiteFooter>
-    align-self: center;
+</template>
-    line-height: 1;
-    text-align: center;
-  }
-
-  .toggle-wrap {
-    margin: 0 0.5em;
-  }
-
-  .toggle {
-    position: relative;
-    display: inline-block;
-    width: 46px;
-    height: 26px;
-    background-color: #e6e6e6;
-    border-radius: 23px;
-    vertical-align: text-bottom;
-    transition: all 0.3s linear;
-
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      width: 42px;
-      height: 22px;
-      background-color: #fff;
-      border-radius: 11px;
-      transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
-      transition: all 0.25s linear;
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      width: 22px;
-      height: 22px;
-      background-color: #fff;
-      border-radius: 11px;
-      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
-      transform: translate3d(2px, 2px, 0);
-      transition: all 0.2s ease-in-out;
-    }
-  }
-
-  &:active {
-    .toggle::after {
-      width: 28px;
-      transform: translate3d(2px, 2px, 0);
-    }
-
-    input {
-      &:checked + .toggle::after {
-        transform: translate3d(16px, 2px, 0);
-      }
-    }
-  }
-
-  input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-
-    &:checked + .toggle {
-      background-color: #4bd763;
-
-      &::before {
-        transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
-      }
-
-      &::after {
-        transform: translate3d(22px, 2px, 0);
-      }
-    }
-  }
-}
-
-header {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  align-items: center;
-
-  @media (min-width: 35em) {
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-  }
-
-  div {
-    flex: 0 1 100%;
-
-    &:first-child {
-      flex: 0 1 50%;
-
-      @media (min-width: 35em) {
-        flex: 0 1 30%;
-      }
-    }
-
-    img {
-      width: 100%;
-      border-radius: 5em;
-      border: 0.375em solid #fff;
-      box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
-    }
-  }
-
-  h1,
-  h2 {
-    font-family: "Exo", sans-serif;
-    margin: 0;
-    text-align: center;
-  }
-
-  h1 {
-    font-size: 2.125em;
-    font-weight: 900;
-    font-style: italic;
-
-    @media (min-width: 35em) {
-      font-size: 2.75em;
-    }
-  }
-
-  h2 {
-    font-size: 1em;
-    font-weight: 300;
-    font-style: italic;
-  }
-}
-
-.prose {
-  text-align: justify;
-  hyphens: auto;
-}
-
-section {
-  margin: 2em 0;
-  padding: 1em;
-  box-shadow: 0 0 2em rgba(#000, 0.3), 0 0 2em rgba(#000, 0.1) inset;
-  background-color: #fff;
-
-  h2 {
-    border-bottom: 0.0625em #000 solid;
-  }
-
-  h3 {
-    border-bottom: 0.125em #000 dotted;
-  }
-}
-
-footer {
-  margin: 2em 0;
-  text-align: center;
-}
-
-.float {
-  max-width: 15em;
-
-  &.left {
-    float: left;
-    margin: 0 1em 1em 0;
-  }
-
-  &.right {
-    float: right;
-    margin: 0 0 1em 1em;
-  }
-}
-</style>

src/assets/fonts/dosis/dosis.css

@@ -0,0 +1,19 @@
+/* dosis-regular-latin */
+@font-face {
+	font-family: Dosis;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Dosis Regular"), local("Dosis-Regular"), url(dosis-regular-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* dosis-bold-latin */
+@font-face {
+	font-family: Dosis;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Dosis Bold"), local("Dosis-Bold"), url(dosis-bold-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+

src/assets/fonts/exo/exo.css

@@ -0,0 +1,37 @@
+/* exo-light-latin */
+@font-face {
+	font-family: Exo;
+	font-style: normal;
+	font-weight: 300;
+	src: local("Exo Light"), local("Exo-Light"), url(exo-light-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* exo-black-latin */
+@font-face {
+	font-family: Exo;
+	font-style: normal;
+	font-weight: 900;
+	src: local("Exo Black"), local("Exo-Black"), url(exo-black-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* exo-light-italic-latin */
+@font-face {
+	font-family: Exo;
+	font-style: italic;
+	font-weight: 300;
+	src: local("Exo Light Italic"), local("Exo-LightItalic"), url(exo-light-italic-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* exo-black-italic-latin */
+@font-face {
+	font-family: Exo;
+	font-style: italic;
+	font-weight: 900;
+	src: local("Exo Black Italic"), local("Exo-BlackItalic"), url(exo-black-italic-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+

src/assets/fonts/permanent-marker/permanent-marker.css

@@ -0,0 +1,10 @@
+/* permanent-marker-regular-latin */
+@font-face {
+	font-family: Permanent Marker;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Permanent Marker Regular"), local("PermanentMarker-Regular"), url(permanent-marker-regular-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+

src/assets/fonts/zilla-slab/zilla-slab.css

@@ -0,0 +1,10 @@
+/* zilla-slab-bold-latin */
+@font-face {
+	font-family: Zilla Slab;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Zilla Slab Bold"), local("ZillaSlab-Bold"), url(zilla-slab-bold-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+