feat: initial commit

2023-12-28 18:40:16 +01:00 · 2023-12-28 18:40:16 +01:00 · 166e65b8a6
commit 166e65b8a6
86 changed files with 9921 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
 defaults
 >1% and not dead
 last 2 versions
--- a/.eslintrc.cjs
+++ b/.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/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
 }
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,28 @@
 # Logs
 logs
 *.log
 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
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,8 @@
 {
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
 }
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,8 @@
 {
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,46 @@
 # sebin-nyshkim.net
 This template should help get you started developing with Vue 3 in Vite.
 ## 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
 ```
 ### Compile and Hot-Reload for Development
 ```sh
 npm run dev
 ```
 ### Type-Check, Compile and Minify for Production
 ```sh
 npm run build
 ```
 ### Lint with [ESLint](https://eslint.org/)
 ```sh
 npm run lint
 ```
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/globals.d.ts
+++ b/globals.d.ts
@ -0,0 +1,9 @@
 declare module "*&imagetools" {
  /**
   * actual types
   * - code https://github.com/JonasKruckenberg/imagetools/blob/main/packages/core/src/output-formats.ts
   * - docs https://github.com/JonasKruckenberg/imagetools/blob/main/docs/guide/getting-started.md#metadata
   */
  const out;
  export default out;
 }
--- a/index.html
+++ b/index.html
@ -0,0 +1,33 @@
 <!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" />
  <link rel="me" href="https://meow.social/@SebinNyshkim">
  <title>Sebin Nyshkim</title>
  <meta name="theme-color" content="#1a1a1a">
  <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" />
  <meta name="twitter:description" content="Hi! I'm Sebin! I'm a web dev pretending to be a dragon online" />
  <meta name="twitter:image" content="https://sebin-nyshkim.net/preview.png" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Sebin Nyshkim" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:url" content="https://sebin-nyshkim.net/" />
  <meta property="og:image" content="https://sebin-nyshkim.net/preview.png" />
  <meta property="og:description" content="Hi! I'm Sebin! I'm a web dev pretending to be a dragon online" />
  <script type="module" src="/src/main.ts"></script>
 </head>
 <body></body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,39 @@
 {
  "name": "sebin-nyshkim.net",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite --host",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "dotenv": "^16.3.1",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.6.0",
    "@tsconfig/node20": "^20.1.2",
    "@types/node": "^20.10.3",
    "@vitejs/plugin-vue": "^4.5.1",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.4.0",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.55.0",
    "eslint-plugin-vue": "^9.19.2",
    "lightningcss": "^1.22.1",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.1.0",
    "sass": "^1.69.5",
    "typescript": "~5.3.2",
    "vite": "^5.0.6",
    "vite-imagetools": "^6.2.7",
    "vue-tsc": "^1.8.25"
  }
 }
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/preview.png
+++ b/public/preview.png
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,40 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { RouterView } from 'vue-router'
 import { debounce } from '@/helper'
 import SiteNav from '@/components/SiteNav.vue'
 import HeroHeader from '@/components/HeroHeader.vue'
 const scrollContainer = ref<HTMLElement | any>()
 const scrollBlur = (el: any): any => {
  el.addEventListener('scroll', (e: any) => {
    e.target.scrollTop > 150
      ? document.body.classList.add('scroll-blur')
      : document.body.classList.remove('scroll-blur')
  })
 }
 </script>
 <template>
  <div
    class="scroll-container"
    ref="scrollContainer"
    @scroll="debounce(scrollBlur(scrollContainer))"
  >
    <HeroHeader>
      <template #headline>Hey! I'm Sebin</template>
      <template #subline>Web Dev Dragon</template>
    </HeroHeader>
    <main>
      <SiteNav />
      <RouterView v-slot="{ Component }">
        <Transition name="fade" mode="out-in">
          <component :is="Component" :key="$route.path" />
        </Transition>
      </RouterView>
    </main>
  </div>
 </template>
--- a/src/assets/background.svg
+++ b/src/assets/background.svg
@ -0,0 +1,125 @@
 <svg viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style>
    .st1  { fill: #ddd; stroke-width: 0; }
    .st2  { fill: #ccc; stroke-width: 0; }
    .st3  { fill: #aaa; stroke-width: 0; }
    .st4  { fill: #999; stroke-width: 0; }
    .st5  { fill: #888; stroke-width: 0; }
    .st6  { fill: #777; stroke-width: 0; }
    .st7  { fill: #666; stroke-width: 0; }
    .st8  { fill: #555; stroke-width: 0; }
    .st9  { fill: #444; stroke-width: 0; }
    .st10 { fill: #333; stroke-width: 0; }
    .st11 { fill: #222; stroke-width: 0; }
  </style>
  <g fill-opacity="0.1">
    <path d="M483 322L523 374L585 322Z" class="st1"></path>
    <path d="M523 374L581 392L585 322Z" class="st2"></path>
    <path d="M585 322L512 191L483 322Z" class="st2"></path>
    <path d="M483 322L426 411L523 374Z" class="st3"></path>
    <path d="M513 525L606 501L581 392Z" class="st2"></path>
    <path d="M382 323L426 411L483 322Z" class="st1"></path>
    <path d="M689 294L596 196L585 322Z" class="st2"></path>
    <path d="M585 322L596 196L512 191Z" class="st4"></path>
    <path d="M425 174L382 323L483 322Z" class="st5"></path>
    <path d="M581 392L689 294L585 322Z" class="st4"></path>
    <path d="M689 294L689 227L596 196Z" class="st2"></path>
    <path d="M526 92L425 174L512 191Z" class="st1"></path>
    <path d="M512 191L425 174L483 322Z" class="st6"></path>
    <path d="M513 525L581 392L523 374Z" class="st1"></path>
    <path d="M581 392L715 421L689 294Z" class="st7"></path>
    <path d="M299 420L416 475L426 411Z" class="st3"></path>
    <path d="M426 411L513 525L523 374Z" class="st8"></path>
    <path d="M416 475L513 525L426 411Z" class="st5"></path>
    <path d="M688 488L715 421L581 392Z" class="st4"></path>
    <path d="M689 294L821 290L689 227Z" class="st2"></path>
    <path d="M689 227L602 118L596 196Z" class="st3"></path>
    <path d="M596 196L602 118L512 191Z" class="st1"></path>
    <path d="M425 174L316 315L382 323Z" class="st8"></path>
    <path d="M382 323L299 420L426 411Z" class="st3"></path>
    <path d="M606 501L688 488L581 392Z" class="st8"></path>
    <path d="M604 600L688 488L606 501Z" class="st7"></path>
    <path d="M602 118L526 92L512 191Z" class="st9"></path>
    <path d="M316 315L299 420L382 323Z" class="st4"></path>
    <path d="M416 475L484 600L513 525Z" class="st4"></path>
    <path d="M688 488L777 415L715 421Z" class="st2"></path>
    <path d="M715 421L777 415L689 294Z" class="st8"></path>
    <path d="M526 92L421 75L425 174Z" class="st10"></path>
    <path d="M425 174L273 188L316 315Z" class="st10"></path>
    <path d="M785 100L675 86L689 227Z" class="st5"></path>
    <path d="M689 227L675 86L602 118Z" class="st11"></path>
    <path d="M588 0L493 0L526 92Z" class="st4"></path>
    <path d="M526 92L493 0L421 75Z" class="st8"></path>
    <path d="M375 600L484 600L416 475Z" class="st5"></path>
    <path d="M513 525L604 600L606 501Z" class="st8"></path>
    <path d="M484 600L604 600L513 525Z" class="st8"></path>
    <path d="M688 488L817 473L777 415Z" class="st4"></path>
    <path d="M777 415L821 290L689 294Z" class="st8"></path>
    <path d="M279 81L273 188L425 174Z" class="st6"></path>
    <path d="M316 315L209 403L299 420Z" class="st4"></path>
    <path d="M209 403L299 508L299 420Z" class="st5"></path>
    <path d="M299 420L299 508L416 475Z" class="st8"></path>
    <path d="M821 290L811 189L689 227Z" class="st5"></path>
    <path d="M299 508L375 600L416 475Z" class="st9"></path>
    <path d="M712 600L817 473L688 488Z" class="st4"></path>
    <path d="M777 415L900 322L821 290Z" class="st5"></path>
    <path d="M588 0L526 92L602 118Z" class="st10"></path>
    <path d="M421 75L279 81L425 174Z" class="st10"></path>
    <path d="M604 600L712 600L688 488Z" class="st4"></path>
    <path d="M697 0L588 0L675 86Z" class="st3"></path>
    <path d="M675 86L588 0L602 118Z" class="st1"></path>
    <path d="M273 188L203 300L316 315Z" class="st11"></path>
    <path d="M203 300L209 403L316 315Z" class="st3"></path>
    <path d="M299 508L273 600L375 600Z" class="st8"></path>
    <path d="M811 189L785 100L689 227Z" class="st2"></path>
    <path d="M392 0L279 81L421 75Z" class="st3"></path>
    <path d="M273 188L196 223L203 300Z" class="st6"></path>
    <path d="M172 116L196 223L273 188Z" class="st1"></path>
    <path d="M81 402L196 523L209 403Z" class="st10"></path>
    <path d="M493 0L392 0L421 75Z" class="st2"></path>
    <path d="M785 100L697 0L675 86Z" class="st4"></path>
    <path d="M900 419L900 322L777 415Z" class="st8"></path>
    <path d="M821 290L900 173L811 189Z" class="st1"></path>
    <path d="M811 189L900 111L785 100Z" class="st9"></path>
    <path d="M817 473L900 419L777 415Z" class="st3"></path>
    <path d="M900 491L900 419L817 473Z" class="st2"></path>
    <path d="M196 523L273 600L299 508Z" class="st1"></path>
    <path d="M110 301L209 403L203 300Z" class="st4"></path>
    <path d="M209 403L196 523L299 508Z" class="st1"></path>
    <path d="M900 322L900 173L821 290Z" class="st9"></path>
    <path d="M785 100L803 0L697 0Z" class="st8"></path>
    <path d="M712 600L825 600L817 473Z" class="st8"></path>
    <path d="M392 0L297 0L279 81Z" class="st9"></path>
    <path d="M279 81L172 116L273 188Z" class="st7"></path>
    <path d="M825 600L900 491L817 473Z" class="st8"></path>
    <path d="M227 0L172 116L279 81Z" class="st8"></path>
    <path d="M196 223L110 301L203 300Z" class="st11"></path>
    <path d="M900 111L803 0L785 100Z" class="st6"></path>
    <path d="M900 173L900 111L811 189Z" class="st7"></path>
    <path d="M125 193L110 301L196 223Z" class="st4"></path>
    <path d="M172 116L125 193L196 223Z" class="st2"></path>
    <path d="M196 523L198 600L273 600Z" class="st2"></path>
    <path d="M108 600L198 600L196 523Z" class="st10"></path>
    <path d="M297 0L227 0L279 81Z" class="st4"></path>
    <path d="M172 116L125 104L125 193Z" class="st9"></path>
    <path d="M825 600L900 600L900 491Z" class="st7"></path>
    <path d="M0 283L81 402L110 301Z" class="st5"></path>
    <path d="M110 301L81 402L209 403Z" class="st10"></path>
    <path d="M227 0L125 104L172 116Z" class="st3"></path>
    <path d="M125 193L0 283L110 301Z" class="st10"></path>
    <path d="M900 111L900 0L803 0Z" class="st2"></path>
    <path d="M81 402L87 524L196 523Z" class="st1"></path>
    <path d="M87 524L108 600L196 523Z" class="st10"></path>
    <path d="M0 185L0 283L125 193Z" class="st10"></path>
    <path d="M81 402L0 514L87 524Z" class="st1"></path>
    <path d="M87 524L0 600L108 600Z" class="st3"></path>
    <path d="M0 283L0 404L81 402Z" class="st3"></path>
    <path d="M125 104L0 185L125 193Z" class="st5"></path>
    <path d="M0 100L0 185L125 104Z" class="st7"></path>
    <path d="M227 0L84 0L125 104Z" class="st4"></path>
    <path d="M0 404L0 514L81 402Z" class="st10"></path>
    <path d="M84 0L0 100L125 104Z" class="st2"></path>
    <path d="M0 514L0 600L87 524Z" class="st2"></path>
    <path d="M84 0L0 0L0 100Z" class="st6"></path>
  </g>
 </svg>
--- a/src/assets/fonts/righteous/righteous-latin.woff2
+++ b/src/assets/fonts/righteous/righteous-latin.woff2
--- a/src/assets/fonts/righteous/righteous.css
+++ b/src/assets/fonts/righteous/righteous.css
@ -0,0 +1,13 @@
 /* righteous-latin */
@font-face {
  font-family: Righteous;
  font-style: normal;
  font-weight: 400;
  src:
    local('Righteous'),
    local('Righteous-Regular'),
    url(righteous-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;
 }
--- a/src/assets/fonts/work-sans/work-sans-bold-italic.woff2
+++ b/src/assets/fonts/work-sans/work-sans-bold-italic.woff2
--- a/src/assets/fonts/work-sans/work-sans-bold.woff2
+++ b/src/assets/fonts/work-sans/work-sans-bold.woff2
--- a/src/assets/fonts/work-sans/work-sans-italic.woff2
+++ b/src/assets/fonts/work-sans/work-sans-italic.woff2
--- a/src/assets/fonts/work-sans/work-sans-light-italic.woff2
+++ b/src/assets/fonts/work-sans/work-sans-light-italic.woff2
--- a/src/assets/fonts/work-sans/work-sans-light.woff2
+++ b/src/assets/fonts/work-sans/work-sans-light.woff2
--- a/src/assets/fonts/work-sans/work-sans-regular.woff2
+++ b/src/assets/fonts/work-sans/work-sans-regular.woff2
--- a/src/assets/fonts/work-sans/work-sans.css
+++ b/src/assets/fonts/work-sans/work-sans.css
@ -0,0 +1,66 @@
 /* work-sans-light */
@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 300;
  src:
    local('Work Sans Light'),
    local('WorkSans-Light'),
    url(work-sans-light.woff2) format('woff2');
  font-display: swap;
 }
 /* work-sans-regular */
@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 400;
  src:
    local('Work Sans Regular'),
    local('WorkSans-Regular'),
    url(work-sans-regular.woff2) format('woff2');
  font-display: swap;
 }
 /* work-sans-bold */
@font-face {
  font-family: Work Sans;
  font-style: normal;
  font-weight: 700;
  src:
    local('Work Sans Bold'),
    local('WorkSans-Bold'),
    url(work-sans-bold.woff2) format('woff2');
  font-display: swap;
 }
 /* work-sans-light-italic */
@font-face {
  font-family: Work Sans;
  font-style: italic;
  font-weight: 300;
  src:
    local('Work Sans Light Italic'),
    local('WorkSans-LightItalic'),
    url(work-sans-light-italic.woff2) format('woff2');
  font-display: swap;
 }
 /* work-sans-italic */
@font-face {
  font-family: Work Sans;
  font-style: italic;
  font-weight: 400;
  src:
    local('Work Sans Italic'),
    local('WorkSans-Italic'),
    url(work-sans-italic.woff2) format('woff2');
  font-display: swap;
 }
 /* work-sans-bold-italic */
@font-face {
  font-family: Work Sans;
  font-style: italic;
  font-weight: 700;
  src:
    local('Work Sans Bold Italic'),
    local('WorkSans-BoldItalic'),
    url(work-sans-bold-italic.woff2) format('woff2');
  font-display: swap;
 }
--- a/src/assets/icons/IconArchLinux.vue
+++ b/src/assets/icons/IconArchLinux.vue
@ -0,0 +1,7 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 256 256">
    <path
      d="M128 0c-11.4 28-18.3 46.2-31 73.3a200 200 0 0 0 32.8 28.7c-16.6-6.9-28-13.7-36.5-20.9C77.1 115 51.6 163.2 0 256c40.6-23.4 72-37.9 101.3-43.4-1.2-5.4-2-11.3-1.9-17.3V194c.7-26 14.2-46 30.3-44.7 16 1.4 28.4 23.6 27.8 49.6-.1 4.9-.7 9.6-1.7 14 29 5.6 60.2 20 100.2 43.1l-21.7-40c-10.6-8.3-21.6-19-44.2-30.6a132 132 0 0 1 35.3 14C157 72 151.4 55 128 0z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconBattleNet.vue
+++ b/src/assets/icons/IconBattleNet.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
    <path
      d="M448.6 225.6c26.9 .2 35.6-7.4 38.9-12.4 12.5-16.3-7.1-47.6-52.9-71.3 17.8-33.6 30.1-63.7 36.3-85.3 3.4-11.8 1.1-19 .5-20.3-1.7 10.5-15.9 48.5-48.2 100.1-25-11.2-56.5-20.1-93.8-23.8-8.9-16.9-34.9-63.9-60.5-88.9C252.2 7.1 238.7 1.1 228.2 .2h-.1c-13.8-1.6-22.7 5.9-27.4 11-17.2 18.5-24.3 48.9-25 84.1-7.2-12.4-17.2-24.6-28.5-25.9h-.2c-20.7-3.5-38.4 29.2-36 81.3-38.4 1.4-71 5.8-93 11.2-9.9 2.5-16.2 7.3-17.8 9.7 1-.4 22.4-9.2 111.6-9.2 5.2 53 29.8 101.8 26 93.2-9.7 15.4-38.2 62.4-47.3 97.7-5.9 22.9-4.4 37.6 .2 47.1 5.6 12.8 16.4 16.7 23.2 18.3 25 5.7 55.4-3.6 86.7-21.1-7.5 12.8-13.9 28.5-9.1 39.3 7.3 19.7 44.5 18.7 88.4-9.5 20.2 32.2 40.1 57.9 55.7 74.1a39.8 39.8 0 0 0 8.8 7.1c5.1 3.2 8.6 3.4 8.6 3.4-8.2-6.8-34-38-62.5-91.8 22.2-16 45.7-38.9 67.5-69.3 122.8 4.6 143.3-24.8 148-31.6 14.7-19.9 3.4-57.4-57.3-93.7zm-77.9 106.2c23.8-37.7 30.3-67.8 29.5-92.3 27.9 17.6 47.2 37.6 49.1 58.8 1.1 12.9-8.1 29.1-78.5 33.5zM216.9 387.7c9.8-6.2 19.5-13.1 29.2-20.5 6.7 13.3 13.6 26.1 20.6 38.2-40.6 21.9-68.8 12.8-49.8-17.7zm215-171.4c-10.3-5.3-21.2-10.3-32.4-15.1a722.5 722.5 0 0 0 22.7-36.9c39.1 24.1 45.9 53.2 9.6 52zM279.2 398c-5.5-11.4-11-23.5-16.5-36.4 43.3 1.3 62.4-18.7 63.3-20.4 0 .1-25 15.6-62.5 12.3a718.8 718.8 0 0 0 85.1-84q13.1-15.3 24.9-31.1c-.4-.3-1.5-3-16.5-12-51.7 60.3-102.3 98-132.8 115.9-20.6-11.2-40.8-31.8-55.7-61.5-20-39.9-30-82.4-31.6-116.1 12.3 .9 25.3 2.2 38.9 3.9-22.3 36.8-14.4 63-13.5 64.2 0-.1-1-29.2 20.1-59.6a695.2 695.2 0 0 0 44.7 152.8c.9-.4 1.8 .9 18.7-8.3-26.3-74.5-33.8-138.2-34-173.4 20-12.4 48.2-19.8 81.6-17.8 44.6 2.7 86.4 15.3 116.3 30.7q-10.7 15.7-23.3 32.5C365.6 152 339.1 145.8 337.5 146c.1 0 25.9 14.1 41.5 47.2a717.6 717.6 0 0 0 -115.3-31.7 646.6 646.6 0 0 0 -39.4-6.1c-.1 .5-1.8 1.9-2.2 20.3C300 190.3 358.8 215.7 389.4 233c.7 23.6-7 51.6-25.4 79.6-24.6 37.3-56.4 67.2-84.8 85.4zm27.4-287c-44.6-1.7-73.6 7.4-94.7 20.7 2-52.3 21.3-76.4 38.2-75.3C267 52.2 305 108.6 306.6 111zm-130.7 3.1c.5 12.1 1.6 24.6 3.2 37.3-14.6-.9-28.7-1.3-42.4-1.3-.1 3.2-.1-51 24.7-49.6h.1c5.8 1.1 10.6 6.9 14.4 13.6zm-28.1 162c20.8 39.7 43.3 60.6 65.3 72.3-46.8 24.8-77.5 20-84.9 4.5-.2-.2-11.1-15.3 19.7-76.8zm210.1 74.8"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconCSS.vue
+++ b/src/assets/icons/IconCSS.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconCloud.vue
+++ b/src/assets/icons/IconCloud.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M0 336c0 79.5 64.5 144 144 144H512c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconDiscord.vue
+++ b/src/assets/icons/IconDiscord.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 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>
 </template>
--- a/src/assets/icons/IconFfxiv.vue
+++ b/src/assets/icons/IconFfxiv.vue
@ -0,0 +1,10 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" viewBox="0 0 2048 2048">
    <path
      d="M1610 1107c-10-5-17-2-20 8-2 14-1 29 4 44 2 4 4 8 9 11 4-1 6 0 8 5-6 33 3 62 29 85l26 19 9 2c19 1 38 0 57-2 25-7 45-22 57-45 15-32 25-64 31-98h8l1 3c3 26 8 53 15 79 3 10 9 20 16 29 1 12 1 24-1 36a427 427 0 0 0-119 84l-38 25c-9 8-17 17-24 27l-4 10-5 25c-4 8-10 15-17 21a92 92 0 0 1-40 19l-27 1c-11 4-20 10-27 20l-15 20c-6 19-11 40-13 61 7 25 10 51 11 78l-20 8c-28 6-55 14-80 24-61 27-99 73-115 138l-8 41c-3 3-6 5-11 5l-9-2-53-20-18 1c-4-2-7-6-9-9-15-33-39-57-71-72-15-7-31-12-46-16-25 2-47 11-66 24-15 14-25 31-31 51-11 21-29 29-52 24-17-3-32-8-46-17l-51-30-17-5c-9 0-18 2-26 6-23 13-45 24-68 35l-35 11c-9 2-16-1-19-9l-5-46c-1-9-4-18-9-25-30-35-66-59-108-74-37-12-74-21-111-26a4511 4511 0 0 0-90-10l-10-9c-2-7-2-13 2-19l3-3c26-2 44-16 52-41 9-52-4-97-38-135a88 88 0 0 0-47-28h-25c-37-32-66-68-89-110l-9-25c-1-8 0-14 3-21 23 2 46 0 69-5 39-11 64-37 76-75 12-55 7-108-17-158 10-14 11-29 4-44l-12-12-40-23c-12-12-14-26-4-40 23-14 43-32 61-52 17-28 10-47-19-59-13-4-26-7-38-7-7 0-14 1-20 4-5-1-8-4-9-8-2-9-2-18 0-26 2-11 5-22 10-32l-19-34c-2-7-3-14-2-20 2-5 6-7 11-7l10 5c20 15 41 27 64 38 44 18 82 8 114-27 14-17 25-35 34-54h7c8 8 18 15 29 20 16 5 30 0 40-13 4-7 3-14-1-19l-20-18-1-9 4-33c-1-18-8-32-20-44-8-8-17-15-27-20-8-13-13-27-14-42-1-9 3-14 12-14h8l40 2c10-4 18-10 24-19 11-17 20-34 28-51 18-34 39-64 65-91 5-6 11-6 17-1 14 13 18 29 14 48 2 21 14 34 35 38l39 4c5 4 9 9 10 16 2 9 1 19-4 28-11 5-21 11-31 18-7 5-12 10-17 17-6 9-6 18 0 27 10 10 22 19 37 24 19 8 40 14 62 17 10-2 19-6 28-13 14-14 26-29 35-46 17-35 31-71 41-108 17-25 41-34 71-28 19 4 39 10 58 16 14 4 28 3 42-2 24-6 47-17 68-31 9-8 16-17 23-26 12-23 26-45 42-65 7-8 15-15 23-21 5-3 10-3 15 0l18 12c21 13 44 15 69 6 18-8 34-18 50-30l27-23h11c12 5 24 9 37 12 19 3 37-1 54-10 18-12 35-26 50-43 9-13 19-24 29-36 5-4 9-3 12 3 1 28-1 57-6 86-4 19-11 36-22 53l-33 36c-21 26-38 54-51 86-4 3-8 6-13 7l-52 1c-14 2-24 8-30 20-19-10-39-15-59-14l-16 4-25 16c-7 1-14 0-20-2l-42-16c-19-4-37-1-53 7-20 11-37 25-51 42-8 15-12 31-11 48-1 26 6 50 20 73l9 8 11 4h31c12-1 23 2 33 9l14 10c4 2 9 2 14 0 10-7 20-14 32-20 5-2 10-3 16-2-2-13-2-25 1-37 2-7 5-11 11-14h7c10 4 18 11 25 20 1 8 0 16-3 24v19c3 2 5 4 7 8 5 14 12 28 20 42 7 8 16 14 28 17 13-4 25-10 35-19 7-11 10-22 10-34 1-5 2-9 5-12 11 5 22 8 35 9l64-2 4 3c6 11 15 20 27 26h19c12-4 24-7 37-8l3-25c1-10 5-18 12-24 1-2 4-3 6-3l1-4-4-35c0-9 2-17 7-25 15-2 30-1 45 2l8 5c21-22 44-42 70-59 1 0 2 0 3 2 2 14 1 28-2 43l-10 19c-2 11-4 23-4 35-39 3-70 21-92 54 0 7 2 13 9 17 6 4 14 7 23 7 2 11 0 22-6 32l-9 6c-17 4-34 8-50 14a97 97 0 0 0-50 69c-3 18 0 35 9 51l13 18c15 14 28 30 40 47l5 14c-2 7-6 12-12 15-11 2-21 6-30 11-5 5-7 11-5 18 1 7 4 13 9 18l4 2 24 1 3 4c3 11 4 23 2 36l-14 21c-6 11-10 24-13 37l-4 30c-22 0-33 11-33 32l3 18ZM964 634c116 1 223 31 322 91a489 489 0 0 1 206 284c19 70 27 142 23 215a479 479 0 0 1-151 309 574 574 0 0 1-386 157 535 535 0 0 1-479-326c-26-65-38-131-36-200-3-156 53-285 167-389a571 571 0 0 1 334-141Z"
    />
    <path
      d="M1852 943c8-1 13 3 15 12-5 11-9 23-12 35l-10 60c-2 7-7 9-13 5a91 91 0 0 1-22-49l1-6c8-11 14-23 17-36 5-11 13-18 24-21Z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconFirefox.vue
+++ b/src/assets/icons/IconFirefox.vue
@ -0,0 +1,245 @@
 <template>
  <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
  <svg
    width="77.42"
    height="79.97"
    version="1.1"
    viewBox="0 0 77.42 79.97"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  >
    <title>Firefox Browser logo</title>
    <defs>
      <linearGradient
        id="a"
        x1="70.79"
        x2="6.447"
        y1="12.39"
        y2="74.47"
        gradientTransform="translate(-1.3 -.004086)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#fff44f" offset=".048" />
        <stop stop-color="#ffe847" offset=".111" />
        <stop stop-color="#ffc830" offset=".225" />
        <stop stop-color="#ff980e" offset=".368" />
        <stop stop-color="#ff8b16" offset=".401" />
        <stop stop-color="#ff672a" offset=".462" />
        <stop stop-color="#ff3647" offset=".534" />
        <stop stop-color="#e31587" offset=".705" />
      </linearGradient>
      <radialGradient
        id="b"
        cx="-7907"
        cy="-8515"
        r="80.8"
        gradientTransform="translate(7974,8524)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#ffbd4f" offset=".129" />
        <stop stop-color="#ffac31" offset=".186" />
        <stop stop-color="#ff9d17" offset=".247" />
        <stop stop-color="#ff980e" offset=".283" />
        <stop stop-color="#ff563b" offset=".403" />
        <stop stop-color="#ff3750" offset=".467" />
        <stop stop-color="#f5156c" offset=".71" />
        <stop stop-color="#eb0878" offset=".782" />
        <stop stop-color="#e50080" offset=".86" />
      </radialGradient>
      <radialGradient
        id="c"
        cx="-7937"
        cy="-8482"
        r="80.8"
        gradientTransform="translate(7974,8524)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#960e18" offset=".3" />
        <stop stop-color="#b11927" stop-opacity=".74" offset=".351" />
        <stop stop-color="#db293d" stop-opacity=".343" offset=".435" />
        <stop stop-color="#f5334b" stop-opacity=".094" offset=".497" />
        <stop stop-color="#ff3750" stop-opacity="0" offset=".53" />
      </radialGradient>
      <radialGradient
        id="d"
        cx="-7927"
        cy="-8533"
        r="58.53"
        gradientTransform="translate(7974,8524)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#fff44f" offset=".132" />
        <stop stop-color="#ffdc3e" offset=".252" />
        <stop stop-color="#ff9d12" offset=".506" />
        <stop stop-color="#ff980e" offset=".526" />
      </radialGradient>
      <radialGradient
        id="e"
        cx="-7946"
        cy="-8461"
        r="38.47"
        gradientTransform="translate(7974,8524)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#3a8ee6" offset=".353" />
        <stop stop-color="#5c79f0" offset=".472" />
        <stop stop-color="#9059ff" offset=".669" />
        <stop stop-color="#c139e6" offset="1" />
      </radialGradient>
      <radialGradient
        id="f"
        cx="-7936"
        cy="-8492"
        r="20.4"
        gradientTransform="matrix(.972 -.235 .275 1.138 10090 7834)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#9059ff" stop-opacity="0" offset=".206" />
        <stop stop-color="#8c4ff3" stop-opacity=".064" offset=".278" />
        <stop stop-color="#7716a8" stop-opacity=".45" offset=".747" />
        <stop stop-color="#6e008b" stop-opacity=".6" offset=".975" />
      </radialGradient>
      <radialGradient
        id="g"
        cx="-7938"
        cy="-8518"
        r="27.68"
        gradientTransform="translate(7974,8524)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#ffe226" offset="0" />
        <stop stop-color="#ffdb27" offset=".121" />
        <stop stop-color="#ffc82a" offset=".295" />
        <stop stop-color="#ffa930" offset=".502" />
        <stop stop-color="#ff7e37" offset=".732" />
        <stop stop-color="#ff7139" offset=".792" />
      </radialGradient>
      <radialGradient
        id="h"
        cx="-7916"
        cy="-8536"
        r="118.1"
        gradientTransform="translate(7974,8524)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#fff44f" offset=".113" />
        <stop stop-color="#ff980e" offset=".456" />
        <stop stop-color="#ff5634" offset=".622" />
        <stop stop-color="#ff3647" offset=".716" />
        <stop stop-color="#e31587" offset=".904" />
      </radialGradient>
      <radialGradient
        id="i"
        cx="-7927"
        cy="-8523"
        r="86.5"
        gradientTransform="matrix(.105 .995 -.653 .069 -4685 8470)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#fff44f" offset="0" />
        <stop stop-color="#ffe847" offset=".06" />
        <stop stop-color="#ffc830" offset=".168" />
        <stop stop-color="#ff980e" offset=".304" />
        <stop stop-color="#ff8b16" offset=".356" />
        <stop stop-color="#ff672a" offset=".455" />
        <stop stop-color="#ff3647" offset=".57" />
        <stop stop-color="#e31587" offset=".737" />
      </radialGradient>
      <radialGradient
        id="j"
        cx="-7938"
        cy="-8508"
        r="73.72"
        gradientTransform="translate(7974,8524)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#fff44f" offset=".137" />
        <stop stop-color="#ff980e" offset=".48" />
        <stop stop-color="#ff5634" offset=".592" />
        <stop stop-color="#ff3647" offset=".655" />
        <stop stop-color="#e31587" offset=".904" />
      </radialGradient>
      <radialGradient
        id="k"
        cx="-7919"
        cy="-8504"
        r="80.69"
        gradientTransform="translate(7974,8524)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#fff44f" offset=".094" />
        <stop stop-color="#ffe141" offset=".231" />
        <stop stop-color="#ffaf1e" offset=".509" />
        <stop stop-color="#ff980e" offset=".626" />
      </radialGradient>
      <linearGradient
        id="l"
        x1="70.01"
        x2="15.27"
        y1="12.06"
        y2="66.81"
        gradientTransform="translate(-1.3 -.004086)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#fff44f" stop-opacity=".8" offset=".167" />
        <stop stop-color="#fff44f" stop-opacity=".634" offset=".266" />
        <stop stop-color="#fff44f" stop-opacity=".217" offset=".489" />
        <stop stop-color="#fff44f" stop-opacity="0" offset=".6" />
      </linearGradient>
    </defs>
    <g transform="matrix(.9819843 0 0 .9819843 .6974849 .7199239)">
      <path
        d="m74.62 26.83c-1.684-4.052-5.1-8.427-7.775-9.81a40.27 40.27 0 0 1 3.925 11.76l7e-3 0.065c-4.382-10.92-11.81-15.33-17.88-24.92-0.307-0.485-0.614-0.971-0.913-1.484-0.171-0.293-0.308-0.557-0.427-0.8a7.053 7.053 0 0 1-0.578-1.535 0.1 0.1 0 0 0-0.088-0.1 0.138 0.138 0 0 0-0.073 0c-5e-3 0-0.013 9e-3 -0.019 0.011s-0.019 0.011-0.028 0.015l0.015-0.026c-9.735 5.7-13.04 16.25-13.34 21.53a19.39 19.39 0 0 0-10.67 4.111 11.59 11.59 0 0 0-1-0.758 17.97 17.97 0 0 1-0.109-9.473 28.7 28.7 0 0 0-9.329 7.21h-0.018c-1.536-1.947-1.428-8.367-1.34-9.708a6.928 6.928 0 0 0-1.294 0.687 28.22 28.22 0 0 0-3.788 3.245 33.84 33.84 0 0 0-3.623 4.347v6e-3 -7e-3a32.73 32.73 0 0 0-5.2 11.74l-0.052 0.256c-0.073 0.341-0.336 2.049-0.381 2.42 0 0.029-6e-3 0.056-9e-3 0.085a36.94 36.94 0 0 0-0.629 5.343v0.2a38.76 38.76 0 0 0 76.95 6.554c0.065-0.5 0.118-0.995 0.176-1.5a39.86 39.86 0 0 0-2.514-19.47zm-44.67 30.34c0.181 0.087 0.351 0.181 0.537 0.264l0.027 0.017q-0.282-0.135-0.564-0.281zm8.878-23.38m31.95-4.934v-0.037l7e-3 0.041z"
        fill="url(#a)"
      />
      <path
        d="m74.62 26.83c-1.684-4.052-5.1-8.427-7.775-9.81a40.27 40.27 0 0 1 3.925 11.76v0.037l7e-3 0.041a35.1 35.1 0 0 1-1.206 26.16c-4.442 9.531-15.19 19.3-32.02 18.82-18.18-0.515-34.2-14.01-37.19-31.68-0.545-2.787 0-4.2 0.274-6.465a28.88 28.88 0 0 0-0.623 5.348v0.2a38.76 38.76 0 0 0 76.95 6.554c0.065-0.5 0.118-0.995 0.176-1.5a39.86 39.86 0 0 0-2.514-19.47z"
        fill="url(#b)"
      />
      <path
        d="m74.62 26.83c-1.684-4.052-5.1-8.427-7.775-9.81a40.27 40.27 0 0 1 3.925 11.76v0.037l7e-3 0.041a35.1 35.1 0 0 1-1.206 26.16c-4.442 9.531-15.19 19.3-32.02 18.82-18.18-0.515-34.2-14.01-37.19-31.68-0.545-2.787 0-4.2 0.274-6.465a28.88 28.88 0 0 0-0.623 5.348v0.2a38.76 38.76 0 0 0 76.95 6.554c0.065-0.5 0.118-0.995 0.176-1.5a39.86 39.86 0 0 0-2.514-19.47z"
        fill="url(#c)"
      />
      <path
        d="m55.78 31.38c0.084 0.059 0.162 0.118 0.241 0.177a21.1 21.1 0 0 0-3.6-4.695c-12.05-12.05-3.157-26.12-1.658-26.84l0.015-0.022c-9.735 5.7-13.04 16.25-13.34 21.53 0.452-0.031 0.9-0.069 1.362-0.069a19.56 19.56 0 0 1 16.98 9.917z"
        fill="url(#d)"
      />
      <path
        d="m38.82 33.79c-0.064 0.964-3.47 4.289-4.661 4.289-11.02 0-12.81 6.667-12.81 6.667 0.488 5.614 4.4 10.24 9.129 12.68 0.216 0.112 0.435 0.213 0.654 0.312q0.569 0.252 1.138 0.466a17.24 17.24 0 0 0 5.043 0.973c19.32 0.906 23.06-23.1 9.119-30.07a13.38 13.38 0 0 1 9.345 2.269 19.56 19.56 0 0 0-16.98-9.917c-0.46 0-0.91 0.038-1.362 0.069a19.39 19.39 0 0 0-10.67 4.111c0.591 0.5 1.258 1.168 2.663 2.553 2.63 2.591 9.375 5.275 9.39 5.59z"
        fill="url(#e)"
      />
      <path
        d="m38.82 33.79c-0.064 0.964-3.47 4.289-4.661 4.289-11.02 0-12.81 6.667-12.81 6.667 0.488 5.614 4.4 10.24 9.129 12.68 0.216 0.112 0.435 0.213 0.654 0.312q0.569 0.252 1.138 0.466a17.24 17.24 0 0 0 5.043 0.973c19.32 0.906 23.06-23.1 9.119-30.07a13.38 13.38 0 0 1 9.345 2.269 19.56 19.56 0 0 0-16.98-9.917c-0.46 0-0.91 0.038-1.362 0.069a19.39 19.39 0 0 0-10.67 4.111c0.591 0.5 1.258 1.168 2.663 2.553 2.63 2.591 9.375 5.275 9.39 5.59z"
        fill="url(#f)"
      />
      <path
        d="m24.96 24.36c0.314 0.2 0.573 0.374 0.8 0.531a17.97 17.97 0 0 1-0.109-9.473 28.7 28.7 0 0 0-9.329 7.21c0.189-5e-3 5.811-0.106 8.638 1.732z"
        fill="url(#g)"
      />
      <path
        d="m0.354 42.16c2.991 17.67 19.01 31.17 37.19 31.68 16.83 0.476 27.58-9.294 32.02-18.82a35.1 35.1 0 0 0 1.206-26.16v-0.037c0-0.029-6e-3 -0.046 0-0.037l7e-3 0.065c1.375 8.977-3.191 17.67-10.33 23.56l-0.022 0.05c-13.91 11.33-27.22 6.834-29.91 5q-0.282-0.135-0.564-0.281c-8.109-3.876-11.46-11.26-10.74-17.6a9.953 9.953 0 0 1-9.181-5.775 14.62 14.62 0 0 1 14.25-0.572 19.3 19.3 0 0 0 14.55 0.572c-0.015-0.315-6.76-3-9.39-5.59-1.405-1.385-2.072-2.052-2.663-2.553a11.59 11.59 0 0 0-1-0.758c-0.23-0.157-0.489-0.327-0.8-0.531-2.827-1.838-8.449-1.737-8.635-1.732h-0.018c-1.536-1.947-1.428-8.367-1.34-9.708a6.928 6.928 0 0 0-1.294 0.687 28.22 28.22 0 0 0-3.788 3.245 33.84 33.84 0 0 0-3.638 4.337v6e-3 -7e-3a32.73 32.73 0 0 0-5.2 11.74c-0.019 0.079-1.396 6.099-0.717 9.221z"
        fill="url(#h)"
      />
      <path
        d="m52.42 26.86a21.1 21.1 0 0 1 3.6 4.7c0.213 0.161 0.412 0.321 0.581 0.476 8.787 8.1 4.183 19.55 3.84 20.36 7.138-5.881 11.7-14.58 10.33-23.56-4.384-10.93-11.82-15.34-17.88-24.93-0.307-0.485-0.614-0.971-0.913-1.484-0.171-0.293-0.308-0.557-0.427-0.8a7.053 7.053 0 0 1-0.578-1.535 0.1 0.1 0 0 0-0.088-0.1 0.138 0.138 0 0 0-0.073 0c-5e-3 0-0.013 9e-3 -0.019 0.011s-0.019 0.011-0.028 0.015c-1.499 0.711-10.39 14.79 1.66 26.83z"
        fill="url(#i)"
      />
      <path
        d="m56.6 32.04c-0.169-0.155-0.368-0.315-0.581-0.476-0.079-0.059-0.157-0.118-0.241-0.177a13.38 13.38 0 0 0-9.345-2.269c13.94 6.97 10.2 30.97-9.119 30.07a17.24 17.24 0 0 1-5.043-0.973q-0.569-0.213-1.138-0.466c-0.219-0.1-0.438-0.2-0.654-0.312l0.027 0.017c2.694 1.839 16 6.332 29.91-5l0.022-0.05c0.347-0.81 4.951-12.26-3.84-20.36z"
        fill="url(#j)"
      />
      <path
        d="m21.35 44.74s1.789-6.667 12.81-6.667c1.191 0 4.6-3.325 4.661-4.289a19.3 19.3 0 0 1-14.55-0.572 14.62 14.62 0 0 0-14.25 0.572 9.953 9.953 0 0 0 9.181 5.775c-0.718 6.337 2.632 13.72 10.74 17.6 0.181 0.087 0.351 0.181 0.537 0.264-4.733-2.445-8.641-7.069-9.129-12.68z"
        fill="url(#k)"
      />
      <path
        d="m74.62 26.83c-1.684-4.052-5.1-8.427-7.775-9.81a40.27 40.27 0 0 1 3.925 11.76l7e-3 0.065c-4.382-10.92-11.81-15.33-17.88-24.92-0.307-0.485-0.614-0.971-0.913-1.484-0.171-0.293-0.308-0.557-0.427-0.8a7.053 7.053 0 0 1-0.578-1.535 0.1 0.1 0 0 0-0.088-0.1 0.138 0.138 0 0 0-0.073 0c-5e-3 0-0.013 9e-3 -0.019 0.011s-0.019 0.011-0.028 0.015l0.015-0.026c-9.735 5.7-13.04 16.25-13.34 21.53 0.452-0.031 0.9-0.069 1.362-0.069a19.56 19.56 0 0 1 16.98 9.917 13.38 13.38 0 0 0-9.345-2.269c13.94 6.97 10.2 30.97-9.119 30.07a17.24 17.24 0 0 1-5.043-0.973q-0.569-0.213-1.138-0.466c-0.219-0.1-0.438-0.2-0.654-0.312l0.027 0.017q-0.282-0.135-0.564-0.281c0.181 0.087 0.351 0.181 0.537 0.264-4.733-2.446-8.641-7.07-9.129-12.68 0 0 1.789-6.667 12.81-6.667 1.191 0 4.6-3.325 4.661-4.289-0.015-0.315-6.76-3-9.39-5.59-1.405-1.385-2.072-2.052-2.663-2.553a11.59 11.59 0 0 0-1-0.758 17.97 17.97 0 0 1-0.109-9.473 28.7 28.7 0 0 0-9.329 7.21h-0.018c-1.536-1.947-1.428-8.367-1.34-9.708a6.928 6.928 0 0 0-1.294 0.687 28.22 28.22 0 0 0-3.788 3.245 33.84 33.84 0 0 0-3.623 4.347v6e-3 -7e-3a32.73 32.73 0 0 0-5.2 11.74l-0.052 0.256c-0.073 0.341-0.4 2.073-0.447 2.445a45.09 45.09 0 0 0-0.572 5.403v0.2a38.76 38.76 0 0 0 76.95 6.554c0.065-0.5 0.118-0.995 0.176-1.5a39.86 39.86 0 0 0-2.514-19.47zm-3.845 1.991 7e-3 0.041z"
        fill="url(#l)"
      />
    </g>
  </svg>
 </template>
--- a/src/assets/icons/IconFuraffinity.vue
+++ b/src/assets/icons/IconFuraffinity.vue
@ -0,0 +1,10 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.77 38.3">
    <path
      d="M15.43 38.49a1.8 1.8 0 0 1-.44-1.67c.24-1.3.28-2.64.67-3.93.33-1.09-.29-2.17-1.33-2.65-.29-.13-.4-.11-.4.22 0 .41.02.83-.05 1.23-.09.46-.22 1.02-.88.89-.58-.11-.55-.63-.51-1.07.04-.44.16-.88.19-1.32.02-.38.02-.8-.33-1.04-.37-.25-.65.05-.92.26-.45.36-.88.27-1.1-.2-.29-.6-.53-.26-.76-.03-.85.88-1.85 1.54-2.92 2.1a4.3 4.3 0 0 0-2.11 2.47c-.2.56-.37 1.15-.77 1.63-.44.53-.99.62-1.56.39-.55-.23-.63-.75-.57-1.29.04-.35.14-.7.38-.96C3.6 31.85 4.88 29.87 7 28.77c.39-.2.76-.48 1.07-.79.3-.3 1-.66.05-1.07-.21-.09-.14-.32-.06-.51.04-.08.06-.17.09-.26-1.12.09-.63-.84-.87-1.32-.2-.41-.7-.39-1.1-.37-.39.01-.72.22-1.03.45-.28.21-.56.43-.87.58-.9.43-2.05.09-2.31-.65-.24-.66.46-1.66 1.36-1.9.4-.1.81-.12 1.22-.16.35-.04.7-.03 1.04-.1.54-.11 1.15-.36 1.19-.91.04-.51-.61-.66-1.05-.81a8.16 8.16 0 0 0-4.13-.27c-.4.08-.76.13-1.04-.22a.71.71 0 0 1-.09-.8c.21-.45.66-.61 1.04-.46 1.5.59 2.93-.01 4.38-.19 1.17-.15 1.48-.7 1.03-1.8-.07-.17-.23-.37-.09-.53 1.01-1.14-.01-2.12-.31-3.11-.2-.65-.15-.96.51-1.1.31-.06.64-.06.94-.15.36-.11.88.03.99-.54.1-.47-.03-.87-.38-1.21a14.07 14.07 0 0 0-3.4-2.58 8.3 8.3 0 0 1-1.2-.75c-.36-.27-.65-.65-.47-1.15.18-.51.54-.85 1.1-.94.45-.07.89-.01 1.29.22 1.29.75 2.56 1.54 3.45 2.79.17.23.34.52.62.57.67.12 1.05.5 1.26 1.12.14.42.47.72.94.63.5-.09.33-.55.32-.86-.01-.44.07-.73.59-.78.73-.06.67-.43.41-.99-.39-.87-.88-1.68-1.31-2.53-.32-.63-.74-1.37-.06-2 .36-.33 1.2.36 1.58 1.33.24.62.39 1.27.63 1.89.11.3.23.77.68.61.37-.13.27-.58.17-.85-.47-1.28-.99-2.53-1.5-3.79-.14-.35-.32-.69-.45-1.04-.1-.28-.08-.6.23-.74.35-.15.52.13.63.4.15.38.31.77.39 1.17.39 1.91 1.58 3.36 2.77 4.81.24.29.48.42.77.05.06-.07.13-.2.19-.2 1.41.01 1.06-1.03 1.03-1.8-.04-1.24-.16-2.47-.23-3.7C19 .97 19 .41 19.67.42c.62.01.59.55.57 1-.03.98-.18 1.97.05 2.94.29 1.28.85 1.51 1.95.79.62-.4 1.28-.69 2.01-.83.88-.16 1.2.16 1.02 1.01-.04.18-.13.36-.19.54-.14.44-.84.77-.55 1.2a7.58 7.58 0 0 0 1.85 1.9c.07.05.21.09.26.06.73-.46 1.17-.34 1.4.55.11.41.49.31.76.04l1.34-1.35c.12-.11.25-.35.45-.2.14.11-.02.29-.07.43-.27.68-.58 1.34-.98 1.95-.64.99-.43 1.65.69 2.02.42.14.87.16 1.3.27.81.21.97.62.39 1.18-.67.65-.67 1.08.23 1.45.3.12.6.29.45.71-.34.95.27 1.64.78 2.22.49.56.49.89-.03 1.32l-.44.36c-1.09.85-1.14 1.04-.52 2.3.2.42-.06.64-.3.9-.74.82-.67 1.1.34 1.57.23.11.45.24.63.42.27.27.56.61.36 1-.22.44-.66.27-1.02.18-.31-.08-.6-.2-.9-.31-.21-.08-.44-.18-.58.08-.13.24.01.44.17.59.23.21.51.38.73.6.19.19.29.43.07.68-.2.22-.4.09-.6 0l-.25-.14c-.35-.2-.87-.76-.97-.62-.27.39.25.75.41 1.14.14.35.38.67.5 1.02.12.34.32.81-.16 1-.4.15-.71-.18-.92-.52-.27-.43-.49-.89-.78-1.3-.21-.3-.42-.78-.82-.71-.49.09-.27.63-.32.98-.06.35-.04.72-.57.68-.46-.03-.36.35-.39.61a5.06 5.06 0 0 0 .9 3.33c.35.53.7 1.06 1.03 1.6.23.38.4.79.43 1.25.03.47-.02.91-.53 1.1-.57.22-.92-.13-1.17-.56-.2-.35-.36-.75-.44-1.14-.3-1.48-.94-2.82-1.64-4.14-.09-.17-.18-.34-.31-.47-.55-.54-1.2-1.15-1.98-.81-.79.34-.54 1.19-.43 1.87.08.53.26 1.05.34 1.58.08.59.25 1.3-.69 1.35-.87.05-.79-.64-.81-1.2-.01-.44.04-.89.04-1.33-.01-.92-.87-1.96-1.82-2.19-.82-.2-1.97.43-2.34 1.32-.6 1.43-.6 2.97-.83 4.48-.12.82-.19 1.64-.77 2.3-.19.02-.38.02-.57.02zm-4.6-14.1c.01 1.76.86 2.64 2.61 2.68.76.02 1.52.04 2.28 0a3.48 3.48 0 0 1 2.76 1.03c.59.6 1.32 1 2.14 1.17.8.16 1.65.21 2.21-.48 1.61-1.99 1.83-3.57.22-5.45-.6-.7-.98-1.41-1.19-2.31-.46-2.03-1.95-3.17-3.63-2.88a4.33 4.33 0 0 0-2.71 1.45 2.6 2.6 0 0 1-1.58.93 3.73 3.73 0 0 0-3.11 3.86zm10.14-13.23c-.02-1.07-.17-2.05-1.07-2.6-.68-.41-1.46-.17-2.06.27a7.67 7.67 0 0 0-3.05 4.13 2.91 2.91 0 0 0 1.58 3.33c1.18.55 2.26.23 3.14-.98a7.43 7.43 0 0 0 1.46-4.15zm5.52 3.15a6.99 6.99 0 0 0-.8-3.32c-.81-1.44-2.05-1.61-3.14-.36a6.48 6.48 0 0 0-1.53 5.48c.16.98.68 1.8 1.71 2.09 1.03.29 1.93-.05 2.69-.78.89-.86 1.04-1.98 1.07-3.11zm-14.66 5.87c1.73.01 2.67-.82 2.76-2.37.05-1-.22-1.94-.74-2.8-.34-.55-.82-.74-1.46-.53-1.06.36-1.9.98-2.49 1.93a2.63 2.63 0 0 0-.02 2.79c.44.85 1.28.94 1.95.98zm16.58 1.61a5.37 5.37 0 0 0-.82-2.78c-.4-.69-.98-.86-1.69-.51a4.92 4.92 0 0 0-2.11 1.98c-.58.98-.53 1.99.09 2.74.68.81 2.12 1.36 2.87 1.09 1.05-.38 1.65-1.29 1.66-2.52zm-15.1-9.1c-.03-.23-.14-.38-.36-.33-.35.07-.52.33-.52.67 0 .19.13.37.36.33.34-.07.46-.36.52-.67zm10.98-4.56c-.33.14-.29.44-.29.71.01.22.05.49.35.44.29-.05.37-.34.34-.59-.01-.24-.07-.5-.4-.56zm3.91 8.85c-.01-.2-.03-.42-.29-.38-.34.05-.43.33-.4.62.02.18.09.42.31.39.34-.04.35-.36.38-.63zm-7.39-9.6c-.01-.19-.09-.34-.27-.29-.37.09-.57.35-.59.73-.01.14.02.36.23.28a.96.96 0 0 0 .63-.72zM.19 30.68l.09-.01c.3-.12.61-.2.82.13.11.17.11.39-.05.51-.39.31-.61-.06-.86-.26v-.37z"
    />
    <path
      d="M34.68 17.36c-.52-.16-1.32.24-1.44-.36-.08-.42.77-.22 1.19-.39.49-.2 1.03-.29 1.55-.36.3-.04.7 0 .73.4.02.31-.27.48-.57.52-.49.09-.99.14-1.46.19zm-4.07 15.78c.61.03 1.39.87 1.31 1.43-.06.43-.39.84-.74.7-.71-.29-.73-1.1-.93-1.74-.09-.29.08-.42.36-.39zM3.23 12.15c.61.12.85.59.91 1.13.05.46-.35.55-.7.55-.67 0-.82-.45-.8-1.01 0-.38.09-.69.59-.67zm2.29 16.02c-.41-.07-.49-.4-.44-.65.13-.62.77-.74 1.21-1.02.19-.12.45.11.38.38-.18.62-.64.99-1.15 1.29zM23.55 3.24c-.13.5-.55.59-.96.62-.41.03-.3-.32-.31-.55-.01-.42.19-.64.64-.64.38.02.6.18.63.57zm10.67 23.64c.34.08.72.22.71.68-.01.28-.26.43-.54.41-.38-.04-.64-.26-.68-.66-.03-.32.16-.45.51-.43zM31.33 7.41c-.37-.04-.31-.29-.31-.5.01-.43.27-.6.67-.61.28-.01.42.14.38.4-.07.44-.42.59-.74.71zM18.9 34.18c-.23-.04-.35-.17-.29-.39.09-.34.25-.69.62-.73.3-.03.24.3.22.5-.03.33-.19.58-.55.62zm14.03-22.19c-.06.27-.28.34-.5.35-.25.02-.43-.12-.4-.4.03-.25.2-.4.45-.36.23.03.41.16.45.41zm-27.88.22c-.17-.05-.27-.16-.23-.33.04-.23.16-.42.41-.43.17-.01.29.11.24.3-.07.21-.19.39-.42.46zm29.12-.22c-.03.19-.08.37-.32.4-.19.02-.3-.08-.32-.26-.03-.23.08-.36.31-.38.17-.02.29.06.33.24z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconFurryNetwork.vue
+++ b/src/assets/icons/IconFurryNetwork.vue
@ -0,0 +1,32 @@
 <template>
  <svg data-reactid=".0.1.0.0.0" viewBox="0 5 38 39">
    <path
      d="M9.96 18a2.3 2.3 0 0 0-1.8.95 4.58 4.58 0 0 0-.78 2.6c-.04.94.22 1.8.6 2.63.35.69.78 1.3 1.46 1.73.86.56 1.85.56 2.58.04.43-.3.73-.73.95-1.21a4.4 4.4 0 0 0 .25-3.15 5.35 5.35 0 0 0-1.67-2.94 2.3 2.3 0 0 0-1.59-.64m16.66 11.78c.52 0 .86-.08 1.25-.26a5.75 5.75 0 0 0 2.02-1.64 4.52 4.52 0 0 0 .98-3.88c-.17-.95-.73-1.6-1.71-1.77a2.88 2.88 0 0 0-1.9.26 5.66 5.66 0 0 0-2.87 3.1c-.3.82-.43 1.64-.17 2.5.21.74.64 1.35 1.42 1.56.34.13.64.13.98.13m-6.74-13.08c0-.44-.04-.91-.13-1.34a4.46 4.46 0 0 0-.99-2.2c-1.03-1.17-2.36-1.34-3.56-.3-.47.38-.77.9-.99 1.42a6.38 6.38 0 0 0-.34 3.8c.22 1 .69 1.86 1.46 2.5.82.65 1.76.74 2.62.3.52-.3.9-.68 1.2-1.2.52-.95.69-1.95.73-2.98m.95 2.76c0 .6.08 1.17.3 1.73.43 1.03 1.24 1.6 2.27 1.6a3.1 3.1 0 0 0 1.9-.7 5.94 5.94 0 0 0 2.35-4.05c.1-.74.05-1.52-.25-2.2-.26-.65-.6-1.17-1.3-1.47a2.95 2.95 0 0 0-1.92-.05c-.73.22-1.25.65-1.76 1.17-.43.43-.73 1.03-1.03 1.55a6.42 6.42 0 0 0-.56 2.42m-3.35 5.31c-.13 0-.35 0-.52.05-.81.08-1.63.26-2.36.64a10.2 10.2 0 0 0-2.49 1.99c-.82.9-1.55 1.86-2.19 2.9-.34.6-.56 1.25-.52 1.94.05.34.05.73.26 1.03a2.91 2.91 0 0 0 1.9 1.21c.72.13 1.45.05 2.18-.04.77-.09 1.55-.17 2.36-.13a5.9 5.9 0 0 1 3.35 1.25c.39.3.78.7 1.16.95a3.3 3.3 0 0 0 2.66.6 1.87 1.87 0 0 0 1.55-1.5c.17-.65.13-1.34.04-2.03a17.94 17.94 0 0 0-2.19-5.96 6.69 6.69 0 0 0-1.8-1.99 6.27 6.27 0 0 0-3.4-.9M.05 29.18v-2.07c.09.17.09.34.13.47a13.7 13.7 0 0 0 1.72 3.8 12.58 12.58 0 0 0 3.86 3.93c-.04-.04-.04-.09-.08-.13-.39-.52-.73-1.08-1.08-1.64a14.18 14.18 0 0 1-2.02-8.8 15.96 15.96 0 0 1 2.7-7.17 33.74 33.74 0 0 1 5.76-6.61 19.47 19.47 0 0 1 5.16-3.41c2.23-1 4.55-1.43 7-1.26 1.07.09 2.19.26 3.26.43.09 0 .22.04.3.04.09 0 .17.05.35.05-.6-.3-1.2-.52-1.8-.7-.1-.04-.18-.04-.27-.12h9.88c.04 0 .04.04.09.04.86.13 1.5.52 2.02 1.17.34.43.6.95.6 1.5v8.6c0 .04 0 .09-.05.13-.04-.04-.04-.09-.04-.13a18.45 18.45 0 0 0-2.4-4.32A15.44 15.44 0 0 0 20.36 7.2c-1.16.22-2.28.52-3.4.91a8.3 8.3 0 0 0-2.27 1c-.05.04-.09.04-.13.08.04.04.04 0 .08 0 1.6-.26 3.22-.43 4.81-.52a9.65 9.65 0 0 1 2.5.13c1.2.22 2.31.65 3.34 1.21a16.59 16.59 0 0 1 6.96 7.43 23.14 23.14 0 0 1 2.19 8.6c.08 1.07.08 2.15.04 3.19l-.13 1.81c-.04.52-.13 1.04-.21 1.56a9.1 9.1 0 0 1-.43 1.85 16.45 16.45 0 0 1-2.45 4.32c-.77 1.04-1.67 1.99-2.53 2.94a1.7 1.7 0 0 0-.3.34c.08 0 .08-.04.12-.04a22.9 22.9 0 0 0 3.65-2.55 17.2 17.2 0 0 0 5.07-7.04l.26-.64h.04v9.41a3.02 3.02 0 0 1-2.14 2.46c-.18.05-.35.1-.56.13H22.93c.04 0 .04-.04.09-.04a13.8 13.8 0 0 0 3.13-1.42 18.14 18.14 0 0 0 6.74-7.6c.7-1.6 1.03-3.33 1.12-5.05 0-.13.04-.26 0-.4-.04.05-.04.1-.09.14-.13.39-.25.73-.34 1.12a11.6 11.6 0 0 1-2.96 5.05 12.79 12.79 0 0 1-4.51 3.02c-1.5.6-3.1.91-4.72.95-1.16.05-2.37 0-3.52-.08a38.48 38.48 0 0 1-4.9-.7 23.83 23.83 0 0 1-5.93-2.15 14.13 14.13 0 0 1-5.1-4.15 11.49 11.49 0 0 1-1.9-3.28"
      data-reactid=".0.1.0.0.0.0.3.0"
    />
    <path
      fill="none"
      d="M37.62 41.15v-9.28h-.05l-.25.64a17.2 17.2 0 0 1-5.07 7.04 26.49 26.49 0 0 1-3.65 2.55c-.05 0-.05.04-.13.04.08-.13.17-.21.3-.34.86-.95 1.76-1.9 2.53-2.94a18.57 18.57 0 0 0 2.45-4.32c.22-.6.34-1.25.43-1.85.09-.52.17-1.04.21-1.56l.13-1.81c.05-1.08.05-2.16-.04-3.2a23.8 23.8 0 0 0-2.19-8.59 17.06 17.06 0 0 0-6.95-7.43 9.22 9.22 0 0 0-3.35-1.2c-.82-.13-1.68-.18-2.5-.13-1.63.08-3.21.26-4.8.51h-.09c0-.08.09-.08.13-.08.73-.43 1.5-.74 2.27-1 1.12-.34 2.24-.69 3.4-.9a15.44 15.44 0 0 1 14.77 5.79 17.01 17.01 0 0 1 2.4 4.31c0 .04.05.09.05.13.04-.04.04-.09.04-.13V8.8c-.04-.64-.04 32.4-.04 32.35M.04 29.19c.43 1.2 1.12 2.29 1.9 3.28a16.03 16.03 0 0 0 5.23 4.36c1.9 1 3.87 1.69 5.93 2.16 1.63.35 3.26.56 4.9.7 1.15.08 2.31.12 3.51.08 1.64-.09 3.22-.35 4.73-.95a12.79 12.79 0 0 0 4.5-3.03 13.1 13.1 0 0 0 2.97-5.05c.13-.39.21-.73.34-1.12 0-.04.05-.09.09-.13a14.42 14.42 0 0 1-1.12 5.44A14.95 14.95 0 0 1 30.4 39a17.98 17.98 0 0 1-4.12 3.54c-.99.6-2.02 1.08-3.14 1.43-.04 0-.04 0-.08.04H10.39c-.04 0-.08-.04-.13-.04a15.18 15.18 0 0 1-6.05-4.06 20.3 20.3 0 0 1-3.82-6.6c-.09-.27-.17-.53-.35-.74V29.2"
      data-reactid=".0.1.0.0.0.0.3.1"
    />
    <path
      fill="none"
      d="M25.04 6.04c.08.09.17.09.25.13.6.18 1.2.44 1.8.7-.12 0-.2 0-.34-.05-.08 0-.21-.04-.3-.04a38.17 38.17 0 0 0-3.26-.44c-2.45-.17-4.77.22-7 1.26-1.89.86-3.6 2.03-5.15 3.4a36.49 36.49 0 0 0-5.76 6.62 15.97 15.97 0 0 0-2.7 7.16 12.3 12.3 0 0 0-.05 2.5c.17 2.25.9 4.37 2.06 6.31.35.56.7 1.08 1.08 1.64.04.05.04.09.08.13-.08.05-.13-.04-.17-.08a13.65 13.65 0 0 1-3.7-3.85 17.7 17.7 0 0 1-1.7-3.8c-.05-.17-.05-.34-.14-.47V17.3c.13-.08.17-.26.22-.39.25-.65.55-1.3.85-1.9a19.12 19.12 0 0 1 3.27-4.75 16.61 16.61 0 0 1 5.8-4.06c.04-.04.13-.04.13-.13 4.89-.04 9.79-.04 14.72-.04"
      data-reactid=".0.1.0.0.0.0.3.2"
    />
    <path
      d="M10.26 6.04c-.04.09-.08.09-.13.13a18.08 18.08 0 0 0-9.06 8.81c-.3.6-.6 1.25-.86 1.9a1.5 1.5 0 0 1-.21.39V8.72c.04 0 .04-.04.04-.09.22-1.12.82-1.9 1.8-2.37.3-.13.6-.17.95-.26a433 433 0 0 0 7.47.04M.04 32.38c.17.22.22.48.35.74a19.29 19.29 0 0 0 3.82 6.6 14.9 14.9 0 0 0 6.05 4.07c.05 0 .09.04.13.04H2.88c-.05 0-.09 0-.09-.05a3.06 3.06 0 0 1-2.45-1.85c-.13-.3-.17-.6-.21-.91-.09-2.85-.09-5.74-.09-8.64"
      data-reactid=".0.1.0.0.0.0.3.3"
    />
    <path
      fill="none"
      d="M17.48 24.78c1.24.05 2.32.26 3.3.95a6.14 6.14 0 0 1 1.8 1.99c.7 1.12 1.21 2.33 1.6 3.58.25.78.47 1.56.6 2.38.08.69.13 1.34-.05 2.03a1.87 1.87 0 0 1-1.54 1.51 3.27 3.27 0 0 1-2.66-.6c-.43-.3-.78-.65-1.16-.95a5.91 5.91 0 0 0-3.35-1.26c-.78-.04-1.55.05-2.36.13-.73.09-1.46.18-2.2.05a3.28 3.28 0 0 1-1.88-1.21c-.18-.35-.18-.7-.22-1.08-.04-.7.17-1.34.52-1.95.6-1.03 1.37-2.03 2.19-2.89a9.75 9.75 0 0 1 2.49-1.98 5.6 5.6 0 0 1 2.36-.65c.21-.05.43-.05.56-.05"
      data-reactid=".0.1.0.0.0.0.3.4"
    />
    <path
      fill="none"
      d="M20.83 19.47c0-.86.17-1.64.6-2.42.3-.56.56-1.12 1.03-1.55.51-.52 1.03-1 1.76-1.17a2.96 2.96 0 0 1 1.93.05c.65.26 1.03.82 1.29 1.46.26.74.34 1.47.26 2.2a5.94 5.94 0 0 1-2.36 4.07 3 3 0 0 1-1.9.69c-1.02 0-1.84-.56-2.27-1.6a4.01 4.01 0 0 1-.34-1.73m-.95-2.76c0 1.03-.21 2.03-.73 2.94-.3.52-.68.9-1.2 1.2-.86.48-1.8.4-2.62-.3a3.97 3.97 0 0 1-1.46-2.5 6.4 6.4 0 0 1 .34-3.8 3.7 3.7 0 0 1 1-1.43c1.2-1.03 2.57-.82 3.56.3.56.65.86 1.43.98 2.2.09.48.13.91.13 1.39m6.74 13.08c-.3 0-.64-.04-.94-.13-.78-.21-1.2-.77-1.42-1.55a3.85 3.85 0 0 1 .17-2.5 5.52 5.52 0 0 1 2.88-3.12 2.9 2.9 0 0 1 1.89-.26c.99.22 1.55.83 1.72 1.78a4.6 4.6 0 0 1-.99 3.88 5.75 5.75 0 0 1-2.02 1.64c-.43.22-.77.26-1.29.26M9.96 18c.65 0 1.16.26 1.63.65a5.2 5.2 0 0 1 1.68 2.94 4.94 4.94 0 0 1-.26 3.15c-.21.47-.51.9-.94 1.2-.73.53-1.76.53-2.58-.03a4.38 4.38 0 0 1-1.46-1.73 5.05 5.05 0 0 1-.6-2.64c.04-.9.21-1.8.77-2.59A2.2 2.2 0 0 1 9.96 18"
      data-reactid=".0.1.0.0.0.0.3.5"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconGithub.vue
+++ b/src/assets/icons/IconGithub.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 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>
 </template>
--- a/src/assets/icons/IconGitlab.vue
+++ b/src/assets/icons/IconGitlab.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 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>
 </template>
--- a/src/assets/icons/IconHTML.vue
+++ b/src/assets/icons/IconHTML.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconItaku.vue
+++ b/src/assets/icons/IconItaku.vue
@ -0,0 +1,35 @@
 <template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 197.13 86.84"
    height="100%"
    width="100%"
    preserveAspectRatio="xMidYMid meet"
    focusable="false"
  >
    <path
      d="M9.89,6.33A6,6,0,0,1,14.1,7.91a4.93,4.93,0,0,1,0,7.52A5.94,5.94,0,0,1,9.89,17,6.05,6.05,0,0,1,5.6,15.43a4.93,4.93,0,0,1,0-7.52A6.16,6.16,0,0,1,9.89,6.33Zm0,19.72A7.7,7.7,0,0,1,13.8,27a2.78,2.78,0,0,1,1.62,2.46V62.94a3,3,0,0,1-1.62,2.38,6.72,6.72,0,0,1-3.91,1.11A6.51,6.51,0,0,1,6,65.32a3,3,0,0,1-1.53-2.38V29.45A2.79,2.79,0,0,1,6,27,7.45,7.45,0,0,1,9.89,26.05Z"
      transform="translate(-3.86 19.65)"
    ></path>
    <path
      d="M34.8,52.66a4.82,4.82,0,0,0,1,3.48c.68.68,1.92,1,3.74,1h3.31a4.25,4.25,0,0,1,3.53,1.45,5,5,0,0,1,1.15,3.14A5.09,5.09,0,0,1,46.4,65a4.22,4.22,0,0,1-3.53,1.45H39.56q-7.74,0-11.73-3.27t-4-10.5V11.43A2.77,2.77,0,0,1,25.57,9,7.76,7.76,0,0,1,29.27,8,7.87,7.87,0,0,1,33.1,9a2.78,2.78,0,0,1,1.7,2.46V26.05h10a2.28,2.28,0,0,1,2.08,1.28,5.45,5.45,0,0,1,.72,2.72,5.36,5.36,0,0,1-.72,2.76A2.29,2.29,0,0,1,44.83,34h-10Z"
      transform="translate(-3.86 19.65)"
    ></path>
    <path
      d="M67,25.54A22.48,22.48,0,0,1,75.43,27a16,16,0,0,1,5.69,3.69,13.71,13.71,0,0,1,3.19,5.27,19.83,19.83,0,0,1,1,6.21V62.94a2.93,2.93,0,0,1-1.54,2.47,6.71,6.71,0,0,1-3.82,1,5.85,5.85,0,0,1-3.53-1A3,3,0,0,1,75,62.94V60.48a26,26,0,0,1-5.4,4.67,13.38,13.38,0,0,1-7.52,2,13,13,0,0,1-4.29-.68,9.36,9.36,0,0,1-3.49-2.08,10.22,10.22,0,0,1-2.38-3.53,12.93,12.93,0,0,1-.89-5,11.65,11.65,0,0,1,1.45-6.08,10.23,10.23,0,0,1,4-3.82,19.47,19.47,0,0,1,6.25-2,50.06,50.06,0,0,1,8.07-.6h3.49v-1.1a10.61,10.61,0,0,0-.38-2.76A6.79,6.79,0,0,0,72.66,37a7,7,0,0,0-2.29-1.83,7.7,7.7,0,0,0-3.53-.72,15.5,15.5,0,0,0-4,.42,19,19,0,0,0-2.56.9,15.91,15.91,0,0,0-1.69.89,2.74,2.74,0,0,1-1.45.42,3,3,0,0,1-2.8-1.78,7.73,7.73,0,0,1-.94-3.66,3.26,3.26,0,0,1,1.28-2.42A10.94,10.94,0,0,1,58,27.29,23.79,23.79,0,0,1,62.33,26,24.43,24.43,0,0,1,67,25.54Zm7.31,23.55H73c-1.41,0-2.79.06-4.12.17A13.6,13.6,0,0,0,65.4,50a5.86,5.86,0,0,0-2.47,1.62A4.14,4.14,0,0,0,62,54.44a4.38,4.38,0,0,0,1.27,3.49A4.74,4.74,0,0,0,66.5,59a6.08,6.08,0,0,0,2.68-.68,9.54,9.54,0,0,0,2.55-1.82,9.88,9.88,0,0,0,1.87-2.64,6.87,6.87,0,0,0,.72-3Z"
      transform="translate(-3.86 19.65)"
    ></path>
    <path
      d="M117.07,42l12.5,17.85a3.11,3.11,0,0,1,.59,1.79,3.72,3.72,0,0,1-.59,1.91A7,7,0,0,1,128,65.32a9.84,9.84,0,0,1-2,1.28,4.79,4.79,0,0,1-2.08.51,3.17,3.17,0,0,1-2.72-1.45L109.76,48.75l-5.27,4.84v9.35a3,3,0,0,1-1.65,2.38,7,7,0,0,1-4,1.11A6.29,6.29,0,0,1,95,65.32a3,3,0,0,1-1.49-2.38v-57A2.82,2.82,0,0,1,95,3.44a7.19,7.19,0,0,1,3.86-.93,8,8,0,0,1,4,.93,2.8,2.8,0,0,1,1.65,2.47V41.52l16-15a3.37,3.37,0,0,1,2.21-.85,4.28,4.28,0,0,1,1.83.47,6.25,6.25,0,0,1,1.74,1.23,7.51,7.51,0,0,1,1.28,1.7A3.87,3.87,0,0,1,128,30.9a2.81,2.81,0,0,1-.94,2Z"
      transform="translate(-3.86 19.65)"
    ></path>
    <path
      d="M152.94,67.19a18.35,18.35,0,0,1-7.18-1.4A18.93,18.93,0,0,1,139.9,62a17.8,17.8,0,0,1-4-5.53,15.49,15.49,0,0,1-1.44-6.54V29.54a3,3,0,0,1,1.61-2.38A6.74,6.74,0,0,1,140,26.05a6.59,6.59,0,0,1,3.83,1.11,3,3,0,0,1,1.61,2.38v20.4a6.85,6.85,0,0,0,.6,2.8,8.91,8.91,0,0,0,1.61,2.47A7.54,7.54,0,0,0,150.05,57a6.85,6.85,0,0,0,5.78,0,7.78,7.78,0,0,0,2.38-1.7,7.57,7.57,0,0,0,1.58-2.46,7.93,7.93,0,0,0,.55-2.85V29.45A2.87,2.87,0,0,1,162,27.07a7.2,7.2,0,0,1,3.86-1,6.9,6.9,0,0,1,4,1,2.9,2.9,0,0,1,1.48,2.38V49.94a15.49,15.49,0,0,1-1.44,6.59,18.21,18.21,0,0,1-4,5.48A19.09,19.09,0,0,1,160,65.79,18.13,18.13,0,0,1,152.94,67.19Z"
      transform="translate(-3.86 19.65)"
    ></path>
    <path
      d="M161.64,24.38A22,22,0,0,0,159.49,23c-4.64-2.56-6.33-2.74-13.61-2.69-11.16-.7-16.69-4.14-16.69-4.14a25.52,25.52,0,0,0-5.13-1.69,21.49,21.49,0,0,0-3.93-.42l-1.56,0a32.35,32.35,0,0,1,3-2.6,8.12,8.12,0,0,1,3.2-2.73c.06,0-1.9-3.12-14-6.5C106.89.86,95-.33,92.43-1.8a17.9,17.9,0,0,1-9.86-10.78,6.61,6.61,0,0,1-.44-3.52,14.83,14.83,0,0,0,5.45,5.19A4,4,0,0,1,86-12a4.34,4.34,0,0,1-.92-3.51c.28.6,4.14,4.88,5.12,5.07,0,0-1.82-1.52-1.39-3.33a31.48,31.48,0,0,0,12.94,8.26c8.07,2.62,8.86,3.1,8.86,3.1A86.66,86.66,0,0,0,126,1.28a9.11,9.11,0,0,1,4.3,3.07,3.87,3.87,0,0,0,2.17,1,29.44,29.44,0,0,1,10.28.53S154.45-5.95,170.87-8c-.3.16,23.35-4.91,30.12-11.6a23.74,23.74,0,0,1-1.36,2.22,22.67,22.67,0,0,1-7.55,6.83c.44-.1.9-.21,1.39-.35s1.19-.36,1.71-.56a39,39,0,0,1-11.6,7.81,39,39,0,0,1-10.5,2.9,8,8,0,0,0,2.51,0S157.4,7,158,12.07c.16,1.3,1.59,2.21,2.72,2.77a73.4,73.4,0,0,0,8,1.56c-1.38,1-5.12,2.6-7.25,2.37a11,11,0,0,0,3.83,1.95,11.52,11.52,0,0,1-5.58-.48S162.2,23.13,161.64,24.38Z"
      transform="translate(-3.86 19.65)"
    ></path>
  </svg>
 </template>
--- a/src/assets/icons/IconJavaScript.vue
+++ b/src/assets/icons/IconJavaScript.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconMastodon.vue
+++ b/src/assets/icons/IconMastodon.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 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>
 </template>
--- a/src/assets/icons/IconMatrix.vue
+++ b/src/assets/icons/IconMatrix.vue
@ -0,0 +1,7 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path
      d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033a3.312 3.312 0 0 1 1.117-1.024c.433-.245.936-.365 1.5-.365c.54 0 1.033.107 1.481.314c.448.208.785.582 1.02 1.108c.254-.374.6-.706 1.034-.992c.434-.287.95-.43 1.546-.43c.453 0 .872.056 1.26.167c.388.11.716.286.993.53c.276.245.489.559.646.951c.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66a1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166c-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499a1.946 1.946 0 0 0-.231.696a5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688a1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19c-.111 0-.259.024-.439.074c-.18.051-.36.143-.53.282a1.637 1.637 0 0 0-.439.595c-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconMinecraft.vue
+++ b/src/assets/icons/IconMinecraft.vue
@ -0,0 +1,7 @@
 <template>
  <svg viewBox="0 0 853 853">
    <path
      d="M85 0h683a85 85 0 0 1 85 85v683a85 85 0 0 1-85 85H85a85 85 0 0 1-85-85V85A85 85 0 0 1 85 0m86 171v170h170v86h-85v256h85v-86h171v86h85V427h-85v-86h171V171H512v170H341V171Z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconNintendoSwitch.vue
+++ b/src/assets/icons/IconNintendoSwitch.vue
@ -0,0 +1,7 @@
 <template>
  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M18.901 32h4.901c4.5 0 8.198-3.698 8.198-8.198v-15.604c0-4.5-3.698-8.198-8.198-8.198h-5c-0.099 0-0.203 0.099-0.203 0.198v31.604c0 0.099 0.099 0.198 0.302 0.198zM25 14.401c1.802 0 3.198 1.5 3.198 3.198 0 1.802-1.5 3.198-3.198 3.198-1.802 0-3.198-1.396-3.198-3.198-0.104-1.797 1.396-3.198 3.198-3.198zM15.198 0h-7c-4.5 0-8.198 3.698-8.198 8.198v15.604c0 4.5 3.698 8.198 8.198 8.198h7c0.099 0 0.203-0.099 0.203-0.198v-31.604c0-0.099-0.099-0.198-0.203-0.198zM12.901 29.401h-4.703c-3.099 0-5.599-2.5-5.599-5.599v-15.604c0-3.099 2.5-5.599 5.599-5.599h4.604zM5 9.599c0 1.698 1.302 3 3 3s3-1.302 3-3c0-1.698-1.302-3-3-3s-3 1.302-3 3z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconNodeJs.vue
+++ b/src/assets/icons/IconNodeJs.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconPillowfort.vue
+++ b/src/assets/icons/IconPillowfort.vue
@ -0,0 +1,7 @@
 <template>
  <svg viewBox="0 0 207.9 226.2">
    <path
      d="M116.2 0H108C97 1 86 2.6 75 4.7a146.2 146.2 0 0 0-57 25C-1.7 46.3-5.2 65.8 7.5 88l1-8c3.2-8.2 8.4-15 15.5-20.5a135.9 135.9 0 0 1 51-23c-36.4 56-60.4 117-72 183 .5 6.6 3.9 8.2 10 5a42 42 0 0 0 9.5-11.5A628.4 628.4 0 0 1 113 29.6c9.8-.5 19.4.5 29 3A33.4 33.4 0 0 1 164.5 50c6 19.5 1.8 36.7-12.5 51.5-24.3-.3-48 3.3-71 11A50 50 0 0 0 61.5 126c-6.2 11-4 19.8 6.5 26.5 11 3.1 22 3.1 33 0a183.9 183.9 0 0 0 68.5-36.5c9.6 1.2 19 2.8 28.5 5a16 16 0 0 0 9.5-4c.8-2.7.3-5-1.5-7-8.2-3.3-16.5-5.8-25-7.5 8-9.9 13.5-21 16.5-33.5 4-25.1-4.9-44-26.5-56.5A139.2 139.2 0 0 0 116.2 0Zm18.6 116a5 5 0 0 1 2.2.6A109.2 109.2 0 0 1 84.5 141c-6 1.3-9-1-9-7a21 21 0 0 1 10.5-7.5 207.1 207.1 0 0 1 48.8-10.6z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconPlayStation.vue
+++ b/src/assets/icons/IconPlayStation.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M570.9 372.3c-11.3 14.2-38.8 24.3-38.8 24.3L327 470.2v-54.3l150.9-53.8c17.1-6.1 19.8-14.8 5.8-19.4-13.9-4.6-39.1-3.3-56.2 2.9L327 381.1v-56.4c23.2-7.8 47.1-13.6 75.7-16.8 40.9-4.5 90.9.6 130.2 15.5 44.2 14 49.2 34.7 38 48.9zm-224.4-92.5v-139c0-16.3-3-31.3-18.3-35.6-11.7-3.8-19 7.1-19 23.4v347.9l-93.8-29.8V32c39.9 7.4 98 24.9 129.2 35.4C424.1 94.7 451 128.7 451 205.2c0 74.5-46 102.8-104.5 74.6zM43.2 410.2c-45.4-12.8-53-39.5-32.3-54.8 19.1-14.2 51.7-24.9 51.7-24.9l134.5-47.8v54.5l-96.8 34.6c-17.1 6.1-19.7 14.8-5.8 19.4 13.9 4.6 39.1 3.3 56.2-2.9l46.4-16.9v48.8c-51.6 9.3-101.4 7.3-153.9-10z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconReddit.vue
+++ b/src/assets/icons/IconReddit.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconSoFurry.vue
+++ b/src/assets/icons/IconSoFurry.vue
@ -0,0 +1,39 @@
 <template>
  <svg
    fill-rule="evenodd"
    clip-rule="evenodd"
    image-rendering="optimizeQuality"
    shape-rendering="geometricPrecision"
    text-rendering="geometricPrecision"
    viewBox="0 0 512 512"
  >
    <path
      fill="#040302"
      d="M511.5 278.5v23c-2.6 34-16.3 63-41 86.5a96.9 96.9 0 0 1-39 19 242.4 242.4 0 0 1-67 5c-51.9-6.2-85-34.4-99.5-84.5a270 270 0 0 1-6.5-91c-.5-16.7-9.2-25.9-26-27.5-9.9-1.1-19.2.5-28 5-4.5 3.1-6 7.3-4.5 12.5 1.2 4.7 3.2 9 6 13l21 23a121.2 121.2 0 0 1 13 98 103 103 0 0 1-75.5 58.5c-26 6.9-51.7 5.9-77-3a2402.7 2402.7 0 0 0-57-33c-10-4.9-20.4-9-31-12.5v-3c2-5.8 4.5-11.4 7.5-17a32.8 32.8 0 0 1 31.5-12 8.3 8.3 0 0 0-6-4.5 61 61 0 0 0-17 .5c0-3.7 1.2-7 3.5-10 8.4-7 17.9-9 28.5-5.5a428 428 0 0 1 31 11 58.1 58.1 0 0 0 17 2.5c20.7-.4 32.7-10.7 36-31a45.3 45.3 0 0 0-17-31.5c-11-7.4-21.2-15.9-30.5-25.5a82.7 82.7 0 0 1-23-47 109.2 109.2 0 0 1 50.5-91.5 58 58 0 0 1 59.5-5.5c.3-1.4 0-2.7-1-4-4.8-4-10.3-6.5-16.5-7.5 13.7-2 27.3-2 41 0a104 104 0 0 1 83.5 59.5 43.4 43.4 0 0 0-11.5-28.5c.7-.7 1.3-.7 2 0a72.3 72.3 0 0 1 26 55.5 142.6 142.6 0 0 1 127-15.5c52.2 22.7 82.2 62.2 90 118.5z"
    />
    <path
      fill="#bf5c00"
      d="M491.5 262.5a953.3 953.3 0 0 1-18.5-38c-1.6-2-3.4-2.7-5.5-2a368 368 0 0 1 1.5 26c2 8.5 4.7 16.9 8 25 .7 2 .7 4 0 6a115 115 0 0 0-16-20 51.4 51.4 0 0 1-3-11c-5 5-6.7 11-5 18 1.1 9 4 17.2 8.5 25-4.5-3-8.8-6.8-13-11.5-.8-.7-1.5-.5-2 .5 6 14 4.5 27.4-4.5 40 .5-3 .5-6 0-9-2-4.2-3.6-8.6-5-13a149 149 0 0 1-9 27l-1 8a33 33 0 0 0-14.5-12.5c-15.2-4-30.4-8.2-45.5-12.5 0 4.6 1.6 8.6 5 12 10 7.2 19.7 14.9 29 23 .7.7.7 1.3 0 2a25.7 25.7 0 0 0-7.5-3.5c-11-1-22-2.3-33-4-4-1.3-7.5-3.5-10.5-6.5-.3 1.4 0 2.7 1 4 5 6 10.8 10.8 17.5 14.5-20.5-.5-32.4-11-35.5-31.5a20.5 20.5 0 0 0-4.5 11.5c1 5.8 2.4 11.3 4.5 16.5a75.3 75.3 0 0 1-22-48 26.2 26.2 0 0 0-4 21c1.9 6.7 5 12.7 9.5 18a7 7 0 0 1-7-1.5 28 28 0 0 1-9.5-13.5l-9-35c-2-6.4-6.2-10.3-12.5-11.5 2.2 3.2 3.7 6.7 4.5 10.5.4 13.7.3 27.3-.5 41a237.4 237.4 0 0 1-12.5-94 58 58 0 0 0-4.5-18c0-12.4-2.8-24-8.5-35a24.3 24.3 0 0 0-20.5-12 70.4 70.4 0 0 0 6.5 18 62.1 62.1 0 0 0-59.5-12.5 33.9 33.9 0 0 0-14 11.5l.5 1c4.2-2.5 8.7-3.3 13.5-2.5-18.6 11.3-24.7 27.5-18.5 48.5l4 6c1.4-4.9 3.4-9.6 6-14a33 33 0 0 0 22.5 26.5c1.6.8 2.9.6 4-.5 9.2 9.7 15.9 21 20 34-3.1.3-5.3 2-6.5 5a145 145 0 0 1-11 54 56.3 56.3 0 0 1-10.5 14.5 9.3 9.3 0 0 1-6 2.5c1-3.7 2.2-7.3 3.5-11a24 24 0 0 0 0-10 88.4 88.4 0 0 1-18.5 23c.1-.7 0-1.4-.5-2a51.8 51.8 0 0 1-29.5 9.5 53 53 0 0 0 9.5-15.5 104 104 0 0 0 6-29 42.4 42.4 0 0 1-30.5 7.5 49.2 49.2 0 0 0 9.5-60.5l-9.5-9.5A124.7 124.7 0 0 1 77 208.5a55.6 55.6 0 0 1 2-48c21.6-51 58.1-66 109.5-45 1.5-7-.5-13-6-18 50.8 2.1 82.2 28.1 94 78 3.2-4.6 5.7-9.6 7.5-15a95.5 95.5 0 0 1 5.5 30 240 240 0 0 1 77-23.5c55-3.6 93.8 19.6 116.5 69.5 3.7 8.4 6.6 17 8.5 26z"
    />
    <path
      fill="#913d00"
      d="M265.5 215.5c-8-9.8-18-17-30-21.5-23-5.2-39.2 3-48.5 24.5a24.6 24.6 0 0 0 3 18c4 4.6 7.9 9.2 11.5 14-1.1 1.1-2.4 1.3-4 .5a32.9 32.9 0 0 1-22.5-26.5 64.9 64.9 0 0 0-6 14l-4-6c-6.2-21 0-37.2 18.5-48.5-4.8-.8-9.3 0-13.5 2.5l-.5-1c3.6-5 8.2-8.9 14-11.5 22-6.2 41.8-2 59.5 12.5a69 69 0 0 1-6.5-18 24 24 0 0 1 20.5 12c5.7 11 8.5 22.6 8.5 35zm226 47c10.3 44.6-1 82.8-34 114.5a118.4 118.4 0 0 1-86 24c-46.5-4.2-76.2-28.7-89-73.5.8-13.7 1-27.3.5-41-.8-3.8-2.3-7.3-4.5-10.5 6.3 1.2 10.4 5 12.5 11.5l9 35a28 28 0 0 0 9.5 13.5 7 7 0 0 0 7 1.5 46.8 46.8 0 0 1-9.5-18 26.2 26.2 0 0 1 4-21 75.3 75.3 0 0 0 22 48c-2-5.2-3.6-10.7-4.5-16.5.3-4.3 1.8-8.1 4.5-11.5 3.1 20.5 15 31 35.5 31.5a60.8 60.8 0 0 1-17.5-14.5 4.6 4.6 0 0 1-1-4c3 3 6.5 5.2 10.5 6.5 11 1.7 22 3 33 4 2.7.8 5.2 2 7.5 3.5.7-.7.7-1.3 0-2-9.3-8.1-19-15.8-29-23-3.4-3.4-5-7.4-5-12 15.1 4.3 30.3 8.5 45.5 12.5a33 33 0 0 1 14.5 12.5l1-8a149 149 0 0 0 9-27c1.4 4.4 3 8.8 5 13 .5 3 .5 6 0 9 9-12.6 10.5-26 4.5-40 .5-1 1.2-1.2 2-.5a65 65 0 0 0 13 11.5c-4.5-7.8-7.4-16-8.5-25-1.7-7 0-13 5-18 .6 3.8 1.6 7.4 3 11 6 6 11.4 12.8 16 20 .7-2 .7-4 0-6-3.3-8.1-6-16.5-8-25a368 368 0 0 0-1.5-26c2.1-.7 4 0 5.5 2 6 12.8 12 25.5 18.5 38z"
    />
    <path
      fill="#903c00"
      d="M221.5 284.5a155.9 155.9 0 0 1 9.5 63 54.5 54.5 0 0 1-12 23 199.2 199.2 0 0 0-6-30c-.8 3.5-2.1 6.9-4 10a136 136 0 0 1-47.5 31.5c3.8-6.5 7.5-13 11-19.5a88.4 88.4 0 0 0 18.5-23 24 24 0 0 1 0 10 233 233 0 0 0-3.5 11c2.3-.1 4.3-1 6-2.5 4.3-4.3 7.8-9.1 10.5-14.5a145 145 0 0 0 11-54c1.2-3 3.4-4.7 6.5-5z"
    />
    <path
      fill="#fdfdfd"
      d="M155.5 376.5c-20 15-42 19-66 11.5-3-1.3-5.6-3-8-5 9 .5 18 .5 27 0a23 23 0 0 0 5-2 73.1 73.1 0 0 1-19-3 652 652 0 0 0-44-20 92 92 0 0 0-27-5.5c2.8-2.6 6.2-4.4 10-5.5 8.1-1 16.1-.4 24 1.5a19.8 19.8 0 0 0-12.5-19l-.5-1 2.5-1A344 344 0 0 1 84.5 340c11 3.8 22 4.2 33 1l8-6c8.4-.1 16.7.4 25 1.5a42 42 0 0 1-5.5 14 562 562 0 0 1-18.5 26c9.1 1.5 18.1.8 27-2 1.2.2 1.9 1 2 2z"
    />
    <path
      fill="#be5b00"
      d="M321.5 343.5a100 100 0 0 0 17 8.5l30 26a92 92 0 0 1-36-15c-6.4-5-10-11.5-11-19.5z"
    />
    <path
      fill="#a1adb2"
      d="M23.5 352.5a92 92 0 0 1 27 5.5 652 652 0 0 1 44 20 73.1 73.1 0 0 0 19 3 23 23 0 0 1-5 2c-9 .5-18 .5-27 0 2.4 2 5 3.7 8 5 24 7.4 46 3.6 66-11.5a34 34 0 0 1-9 17.5c8.7-.7 17-3 25-7a665.2 665.2 0 0 0 37.5-19.5c2.6 7 1.1 12.8-4.5 17.5-29 23-62 32.7-99 29a67 67 0 0 1-17-7 421.4 421.4 0 0 0-76-42c2.6-4.3 5.6-8.3 9-12 .6-.5 1.3-.6 2-.5z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconSoundcloud.vue
+++ b/src/assets/icons/IconSoundcloud.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512">
    <!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
    <path
      d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2 .8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1 .6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7 .6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3 .1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconSteam.vue
+++ b/src/assets/icons/IconSteam.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M496 256c0 137-111.2 248-248.4 248-113.8 0-209.6-76.3-239-180.4l95.2 39.3c6.4 32.1 34.9 56.4 68.9 56.4 39.2 0 71.9-32.4 70.2-73.5l84.5-60.2c52.1 1.3 95.8-40.9 95.8-93.5 0-51.6-42-93.5-93.7-93.5s-93.7 42-93.7 93.5v1.2L176.6 279c-15.5-.9-30.7 3.4-43.5 12.1L0 236.1C10.2 108.4 117.1 8 247.6 8 384.8 8 496 119 496 256zM155.7 384.3l-30.5-12.6a52.79 52.79 0 0 0 27.2 25.8c26.9 11.2 57.8-1.6 69-28.4 5.4-13 5.5-27.3.1-40.3-5.4-13-15.5-23.2-28.5-28.6-12.9-5.4-26.7-5.2-38.9-.6l31.5 13c19.8 8.2 29.2 30.9 20.9 50.7-8.3 19.9-31 29.2-50.8 21zm173.8-129.9c-34.4 0-62.4-28-62.4-62.3s28-62.3 62.4-62.3 62.4 28 62.4 62.3-27.9 62.3-62.4 62.3zm.1-15.6c25.9 0 46.9-21 46.9-46.8 0-25.9-21-46.8-46.9-46.8s-46.9 21-46.9 46.8c.1 25.8 21.1 46.8 46.9 46.8z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconTelegram.vue
+++ b/src/assets/icons/IconTelegram.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 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>
 </template>
--- a/src/assets/icons/IconTwitch.vue
+++ b/src/assets/icons/IconTwitch.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <path
      d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconTwitter.vue
+++ b/src/assets/icons/IconTwitter.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 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>
 </template>
--- a/src/assets/icons/IconTypeScript.vue
+++ b/src/assets/icons/IconTypeScript.vue
@ -0,0 +1,18 @@
 <template>
  <svg
    fill="none"
    height="512"
    viewBox="0 0 512 512"
    width="512"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect height="512" rx="50" width="512" />
    <rect fill="#3178c6" height="512" rx="50" width="512" />
    <path
      clip-rule="evenodd"
      d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z"
      fill="#fff"
      fill-rule="evenodd"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconVSCode.vue
+++ b/src/assets/icons/IconVSCode.vue
@ -0,0 +1,107 @@
 <template>
  <svg
    width="100"
    height="100"
    viewBox="0 0 100 100"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <mask
      id="mask0"
      mask-type="alpha"
      maskUnits="userSpaceOnUse"
      x="0"
      y="0"
      width="100"
      height="100"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z"
        fill="white"
      />
    </mask>
    <g mask="url(#mask0)">
      <path
        d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z"
        fill="#0065A9"
      />
      <g filter="url(#filter0_d)">
        <path
          d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z"
          fill="#007ACC"
        />
      </g>
      <g filter="url(#filter1_d)">
        <path
          d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z"
          fill="#1F9CF0"
        />
      </g>
      <g style="mix-blend-mode: overlay" opacity="0.25">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z"
          fill="url(#paint0_linear)"
        />
      </g>
    </g>
    <defs>
      <filter
        id="filter0_d"
        x="-8.39411"
        y="15.8291"
        width="116.727"
        height="92.2456"
        filterUnits="userSpaceOnUse"
        color-interpolation-filters="sRGB"
      >
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation="4.16667" />
        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
        <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
      </filter>
      <filter
        id="filter1_d"
        x="60.4167"
        y="-8.07558"
        width="47.9167"
        height="116.151"
        filterUnits="userSpaceOnUse"
        color-interpolation-filters="sRGB"
      >
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
        />
        <feOffset />
        <feGaussianBlur stdDeviation="4.16667" />
        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
        <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
      </filter>
      <linearGradient
        id="paint0_linear"
        x1="49.9392"
        y1="0.257812"
        x2="49.9392"
        y2="99.7423"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="white" />
        <stop offset="1" stop-color="white" stop-opacity="0" />
      </linearGradient>
    </defs>
  </svg>
 </template>
--- a/src/assets/icons/IconVue.vue
+++ b/src/assets/icons/IconVue.vue
@ -0,0 +1,18 @@
 <template>
  <svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg">
    <g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)">
      <g transform="translate(178.06 235.01)">
        <path
          d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z"
          fill="#41b883"
        />
      </g>
      <g transform="translate(178.06 235.01)">
        <path
          d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z"
          fill="#34495e"
        />
      </g>
    </g>
  </svg>
 </template>
--- a/src/assets/icons/IconWeasyl.vue
+++ b/src/assets/icons/IconWeasyl.vue
@ -0,0 +1,7 @@
 <template>
  <svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <path
      d="m11.3 1.33c-2.25-0.0471-4.66 1.2-5.66 4.29-1.43-2.26-1.47-3.82-1.47-3.82l-1.37 0.835s-0.0403 2.14 2.04 3.62c-6.64 1.19-6.27 8.02 0.157 7.74 0.737-0.0317-0.807 0.981 1.29 0.579 3.82-0.729 6.21-2.08 8.26-4.28 0.946-1.02-0.52-0.59 0.0766-1.37 3.28-4.3 0.18-7.52-3.32-7.59zm2.68 1.26-0.279 7.6-2.38 1.88-2.66-4.2-0.00982 5.49-1.94 0.623-4.11-6.44 1.75-0.672 2.82 4.44 0.0511-6.89 1.07-0.33 3.75 5.82 0.0354-6.75z"
    />
  </svg>
 </template>
--- a/src/assets/icons/IconYouTube.vue
+++ b/src/assets/icons/IconYouTube.vue
@ -0,0 +1,8 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512">
    <!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
    <path
      d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"
    />
  </svg>
 </template>
--- a/src/assets/sebin-avatar.png
+++ b/src/assets/sebin-avatar.png
--- a/src/assets/sebin-bust.avif
+++ b/src/assets/sebin-bust.avif
--- a/src/assets/sebin-bust.png
+++ b/src/assets/sebin-bust.png
--- a/src/assets/sebin-bust.resized.png
+++ b/src/assets/sebin-bust.resized.png
--- a/src/assets/sebin-bust.src.png
+++ b/src/assets/sebin-bust.src.png
--- a/src/assets/sebin-bust.webp
+++ b/src/assets/sebin-bust.webp
--- a/src/components/DeviceFrame.vue
+++ b/src/components/DeviceFrame.vue
@ -0,0 +1,83 @@
 <template>
  <div class="device">
    <div class="device__screen">
      <slot></slot>
    </div>
    <div class="device__bottom" />
  </div>
 </template>
 <style lang="scss">
 .device {
  --screen-margin: 1.75em;
  --screen-radius: 0.75rem;
  --screen-padding: 0.75rem;
  &__screen {
    position: relative;
    background-color: var(--clr-page-black);
    margin: var(--screen-margin) var(--screen-margin) 0 var(--screen-margin);
    border: 0.0625rem solid var(--clr-page-black-light);
    border-bottom: none;
    border-radius: var(--screen-radius) var(--screen-radius) 0 0;
    padding: var(--screen-padding) var(--screen-padding) 1.375rem var(--screen-padding);
    &::before {
      position: absolute;
      content: 'ThinkDerg';
      inset: auto 0 0 0;
      font-family: var(--page-heading-font);
      font-size: 0.75rem;
      text-align: center;
      line-height: 1.75;
      background: linear-gradient(
        oklch(62.68% 0 0) 30%,
        oklch(94.91% 0 0) 40%,
        oklch(62.68% 0 0) 60%
      );
      background-clip: text;
      color: transparent;
    }
    > * {
      display: block;
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    a {
      transition: all 0.3s linear;
      @media (hover: hover) {
        &:hover > * {
          filter: brightness(0.75);
        }
      }
    }
  }
  &__bottom {
    position: relative;
    background-color: var(--clr-page-black);
    width: 100%;
    height: 1.25rem;
    margin: 0 0 1.75rem 0;
    border-top: 0.0625rem solid var(--clr-page-black-light);
    border-radius: 0.125rem 0.125rem 1rem 1rem;
    overflow: hidden;
    &::before {
      position: absolute;
      content: '';
      inset: -0.75rem 38% 50%;
      box-shadow: inset 0 0 0.875rem var(--clr-page-black-light);
      border-radius: 0 0 0.25rem 0.25rem;
    }
  }
 }
 </style>
--- a/src/components/FilteredList.vue
+++ b/src/components/FilteredList.vue
@ -0,0 +1,162 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { Platform } from '@/enums'
 import type { Game } from '@/types'
 interface Props {
  data: Game[]
 }
 const props = defineProps<Props>()
 const model = ref('NES')
 const filterByPlatform = ({ platform }: { platform: Platform }) =>
  platform === Platform[model.value as keyof typeof Platform]
 const sortByTitle = (a: Game, b: Game) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0)
 const filteredData = computed(() => props.data.filter(filterByPlatform).sort(sortByTitle))
 </script>
 <template>
  <div class="filter-list">
    <div class="filter-list__head">
      <label class="filter-list__label" for="filter-list">Platform:</label>
      <select class="filter-list__dropdown" name="platform" id="filter-list" v-model="model">
        <option v-for="(plat, idx) in Platform" :key="idx" :value="idx">
          {{ plat }}
        </option>
      </select>
    </div>
    <ul class="filter-list__body" ref="gameList">
      <li class="filter-list__item" v-for="(game, idx) in filteredData" :key="idx">
        <a class="filter-list__link" :href="game.link.href" target="_blank">
          {{ game.title }}
        </a>
      </li>
    </ul>
  </div>
 </template>
 <style lang="scss">
 .filter-list {
  display: flex;
  flex-flow: column nowrap;
  border: 0.125em solid var(--clr-page-black-light);
  border-radius: 1em;
  background-image: linear-gradient(
    to bottom right,
    var(--clr-page-black-light-clear) 0,
    var(--clr-page-black-clear) 100%
  );
  transition: all 0.3s linear;
  &__head {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.5em;
    border-bottom: 0.125em solid var(--clr-page-black-light);
    padding: 1em;
  }
  &__label,
  &__dropdown {
    flex: 0 0 auto;
  }
  &__dropdown {
    flex: 1 1 auto;
    max-width: 100%;
    background-color: var(--clr-page-black);
    font-size: 1em;
    color: #fff;
    border: 0.125em solid var(--clr-page-black-light);
    border-radius: 0.5em;
    padding: 0.5em 0.75em;
    transition: background-color 0.2s linear;
  }
  &__body {
    height: 17em;
    margin: 1em;
    padding: 0;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    &--placeholder {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }
  }
  &__item {
    list-style: '🎮️';
    margin: 0 0 0 1.25em;
    padding: 0 0 0 0.5em;
    scroll-snap-align: end;
  }
  &__link {
    display: inline flex;
    text-decoration: none;
    transition: all 0.3s linear;
    @media (hover: hover) {
      &:hover {
        color: var(--clr-sebin-yellow);
        text-shadow: 0 0 0.5em var(--clr-sebin-yellow);
      }
    }
  }
  &__placeholder {
    text-align: center;
    font-size: 1.5em;
  }
  &__pagination {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
    li {
      flex: 0 0 1.5em;
      width: 1.5em;
      height: 1.5em;
      background-color: var(--clr-page-black);
      border: 0.125em solid var(--clr-page-black);
      border-radius: 10em;
      text-align: center;
      transition: all 0.1s linear;
      line-height: 1.25;
      @media (hover: hover) {
        &:hover {
          cursor: pointer;
          border: 0.125em solid var(--clr-page-black-light);
        }
      }
      &.active {
        background-color: var(--clr-page-black-light);
        border: 0.125em solid var(--clr-page-black-light);
      }
    }
  }
 }
 </style>
--- a/src/components/HeroHeader.vue
+++ b/src/components/HeroHeader.vue
@ -0,0 +1,83 @@
 <script setup lang="ts">
 import ScrollIndicator from './ScrollIndicator.vue'
 </script>
 <template>
  <header class="hero">
    <div class="hero__group">
      <div class="hero__mainline">
        <slot name="headline" />
      </div>
      <div class="hero__subline">
        <slot name="subline" />
      </div>
    </div>
    <div class="hero__indicator">
      <ScrollIndicator />
    </div>
  </header>
 </template>
 <style lang="scss">
 .hero {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  position: relative;
  height: 100dvh;
  &__group {
    display: flex;
    flex-flow: column nowrap;
    padding: 0 max(clamp(1em, 2vw, 4em), env(safe-area-inset-right)) 0
      max(clamp(1em, 2vw, 4em), env(safe-area-inset-left));
    .scroll-blur & {
      justify-content: flex-start;
      position: sticky;
      top: 0;
    }
  }
  &__mainline {
    font-family: var(--page-copy-font);
    font-size: clamp(1.5em, 4vw, 3.5em);
    color: transparent;
    background-image: linear-gradient(
      var(--clr-sebin-blue-dark) 50%,
      var(--clr-sebin-blue-light) 100%
    );
    background-clip: text;
    filter: drop-shadow(0 0 0.125rem #000);
  }
  &__subline {
    font-family: var(--page-heading-font);
    font-size: clamp(3em, 8vw, 7em);
    font-weight: 400;
    color: transparent;
    background-image: linear-gradient(var(--clr-sebin-red) 35%, var(--clr-sebin-yellow) 100%);
    background-clip: text;
    line-height: 1.25;
    filter: drop-shadow(0 0 0.25rem #000);
  }
  &__indicator {
    align-self: center;
    position: absolute;
    inset: auto auto 1em auto;
    transition: opacity 0.3s linear;
    svg {
      width: clamp(1.5em, 5vw, 2em);
    }
    .scroll-blur & {
      opacity: 0;
    }
  }
 }
 </style>
--- a/src/components/IconLink.vue
+++ b/src/components/IconLink.vue
@ -0,0 +1,98 @@
 <script setup lang="ts">
 export interface Props {
  icon: object
  title: string
  href?: string
  color?: string
  tags?: string[]
 }
 defineProps<Props>()
 </script>
 <template>
  <li class="icon-link">
    <a class="icon-link__link" :href="href" target="_blank">
      <component class="icon-link__icon" :is="icon" />
      <span class="icon-link__title">
        {{ title }}
      </span>
      <span class="icon-link__tags">
        <span class="icon-link__tag" v-for="tag in tags">
          {{ tag }}
        </span>
      </span>
    </a>
  </li>
 </template>
 <style lang="scss">
 .icon-link {
  margin: 0.75em 0;
  &__link {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--clr-page-black);
    text-decoration: none;
    border: 0.125em solid var(--clr-page-black-light);
    border-radius: 0.5em;
    transition: background-color 0.3s linear;
    @media (hover: hover) {
      &:hover {
        background-color: var(--clr-page-black-light);
      }
    }
  }
  @media (hover: hover) {
    &__link:hover &__tag {
      background-color: var(--clr-page-black);
    }
  }
  &__icon {
    flex: 0 0 2.5em;
    width: 2.5em;
    height: 2.5em;
    fill: var(--color);
    transition: 0.5s;
    margin: 0.5em;
    padding: 0.25em;
  }
  &__title {
    flex: 1 1 100%;
    text-align: left;
    @media (min-width: 25em) {
      text-align: center;
    }
  }
  &__tags {
    position: absolute;
    inset: 0.25em 0.25em auto auto;
    display: block;
    font-size: 0.625em;
  }
  &__tag {
    background-color: var(--clr-page-black-light);
    border-radius: 0.25rem;
    padding: 0.125em 0.25em;
    transition: background-color 0.3s linear;
    & + & {
      margin: 0 0 0 0.25em;
    }
  }
 }
 </style>
--- a/src/components/IconLinkList.vue
+++ b/src/components/IconLinkList.vue
@ -0,0 +1,13 @@
 <template>
  <ul class="icon-link-list">
    <slot />
  </ul>
 </template>
 <style lang="scss">
 .icon-link-list {
  list-style: none;
  margin: 0.75em 0;
  padding: 0;
 }
 </style>
--- a/src/components/ScrollIndicator.vue
+++ b/src/components/ScrollIndicator.vue
@ -0,0 +1,39 @@
 <template>
  <svg version="1.1" viewBox="0 0 360 680">
    <path
      id="mouse"
      d="M180 660S20 660 20 500m0 0V180m0 0S20 20 180 20m0 0s160 0 160 160m0 0v320m0 0s0 160-160 160"
    />
    <path id="wheel" d="M 180 140 L 180 220 " />
  </svg>
 </template>
 <style>
 #mouse,
 #wheel {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 1em;
 }
 #wheel {
  animation: wheel 2s ease-in-out infinite;
 }
@keyframes wheel {
  0% {
    transform: translateY(0%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
  }
 }
 </style>
--- a/src/components/SiteNav.vue
+++ b/src/components/SiteNav.vue
@ -0,0 +1,75 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 </script>
 <template>
  <nav class="site-nav">
    <RouterLink
      v-for="(route, idx) in $router.getRoutes()"
      :key="idx"
      :to="route.path"
      class="site-nav__link"
    >
      {{ route.name }}
    </RouterLink>
  </nav>
 </template>
 <style lang="scss">
 .site-nav {
  display: flex;
  flex-flow: row nowrap;
  height: auto;
  margin: 0 0 1em 0;
  overflow-x: scroll;
  scrollbar-width: none;
  padding: max(var(--page-padding), env(safe-area-inset-top))
    max(var(--page-padding), env(safe-area-inset-right))
    max(var(--page-padding), env(safe-area-inset-bottom))
    max(var(--page-padding), env(safe-area-inset-left));
  &::-webkit-scrollbar {
    display: none;
  }
  &__link {
    font-weight: 300;
    text-decoration: none;
    text-transform: capitalize;
    padding: 0.5em 1em;
    transition: box-shadow 0.2s ease-in-out;
    @media (hover: hover) {
      &:hover {
        box-shadow: inset 0 calc(1em * -0.125) 0 0 rgba(#fff, 1);
      }
    }
    &.router-link-exact-active {
      box-shadow:
        inset 0 calc(1em * -0.125) 0 0 rgba(#fff, 1),
        inset 0 calc(2.5em * -1) 0 0 rgba(#fff, 0.2);
    }
  }
  &__underline {
    position: relative;
    display: block;
    width: 100%;
    &::before,
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 0;
      height: 0.125rem;
      transition: all 0.2s ease-in-out;
    }
    &::before {
      left: 50%;
    }
  }
 }
 </style>
--- a/src/enums.ts
+++ b/src/enums.ts
@ -0,0 +1,25 @@
 export enum Platform {
  NES = 'Nintendo Entertainment System',
  SNES = 'Super Nintendo',
  N64 = 'Nintendo 64',
  GameCube = 'GameCube',
  Wii = 'Wii',
  WiiU = 'Wii U',
  Switch = 'Nintendo Switch',
  GB = 'Game Boy',
  GBC = 'Game Boy Color',
  GBA = 'Game Boy Advance',
  NDS = 'Nintendo DS',
  N3DS = 'Nintendo 3DS',
  PSP = 'PlayStation Portable',
  PSVita = 'PlayStation Vita',
  PS1 = 'PlayStation',
  PS2 = 'PlayStation 2',
  PS3 = 'PlayStation 3',
  PS4 = 'PlayStation 4',
  PS5 = 'PlayStation 5',
  Xbox360 = 'Xbox 360',
  MegaDrive = 'Sega MegaDrive/Genesis',
  Amiga = 'Amiga',
  PC = 'PC'
 }
--- a/src/games.ts
+++ b/src/games.ts
--- a/src/helper.ts
+++ b/src/helper.ts
@ -0,0 +1,13 @@
 export const debounce = (fn: Function, delay: number = 300): any => {
  let timer = 0
  const debounced = (...args: any[]): void => {
    if (!args) args = []
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(fn, args)
    }, delay)
  }
  return debounced
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,11 @@
 import '@/scss/main.scss'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 const app = createApp(App)
 app.use(router)
 app.mount('body')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,30 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/AboutView.vue')
    },
    {
      path: '/projects',
      name: 'projects',
      component: () => import('@/views/ProjectsView.vue')
    },
    {
      path: '/contact',
      name: 'contact',
      component: () => import('@/views/ContactView.vue')
    }
  ]
 })
 export default router
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@ -0,0 +1,24 @@
 /* color palette */
 :root {
  --clr-sebin-red: oklch(57.67% 0.161 32.69);
  --clr-sebin-yellow: oklch(78.43% 0.126 68.88);
  --clr-sebin-blue-dark: oklch(49.29% 0.08 265.23);
  --clr-sebin-blue-light: oklch(61.56% 0.098 263.47);
  --clr-sebin-green: oklch(71.11% 0.229 141.29);
  --clr-sebin-black: oklch(35.57% 0.01 17.62);
  --clr-sebin-brown: oklch(45.81% 0.083 32.71);
  --clr-page-black: oklch(21.78% 0 0);
  --clr-page-black-clear: oklch(21.78% 0 0 / 50%);
  --clr-page-black-light: oklch(32.11% 0 0);
  --clr-page-black-light-clear: oklch(32.11% 0 0 / 75%);
 }
 /* semantic color variables for this project */
 :root {
  --page-heading-font: 'Righteous', sans-serif;
  --page-copy-font: 'Work Sans', sans-serif;
  --page-transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --page-transform: translateY(5em);
  --page-padding: clamp(1em, 2vw, 1.5em);
 }
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@ -0,0 +1,152 @@
@import '@/assets/fonts/righteous/righteous.css';
@import '@/assets/fonts/work-sans/work-sans.css';
@import '@/scss/base';
 *,
 *::before,
 *::after {
  box-sizing: border-box;
  margin: 0;
 }
 *::selection {
  background: var(--clr-sebin-red);
 }
 :root {
  font-size: 16px;
 }
 body {
  position: relative;
  color: #fff;
  font-family: var(--page-copy-font);
  font-size: 1.25rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &::before,
  &::after {
    content: '';
    position: fixed;
    inset: 0;
    transition: filter 0.3s linear;
  }
  &::before {
    background-image: url(@/assets/sebin-bust.png);
    background-image: image-set(
      '@/assets/sebin-bust.avif' type('image/avif'),
      '@/assets/sebin-bust.webp' type('image/webp'),
      '@/assets/sebin-bust.png' type('image/png')
    );
    background-size: 80dvh;
    background-position: clamp(max(50% + 10rem, min(50% + 20vw, 50% + 30vw)), 100%, 100%) bottom;
    background-repeat: no-repeat;
    z-index: -1;
  }
  &::after {
    background: url(@/assets/background.svg) center/cover;
    background-color: var(--clr-page-black);
    z-index: -2;
  }
  &.scroll-blur {
    &::before {
      @media (max-width: 62.5em) and (min-height: 22em) {
        filter: blur(0.375rem) brightness(0.75);
      }
    }
  }
 }
 .scroll-container {
  height: 100dvh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  transition: 0.3s;
 }
 main {
  min-height: 100dvh;
  max-width: clamp(30em, 100vw, 40em);
  filter: drop-shadow(0 0 0.125rem #000);
 }
 section {
  padding: 0 max(var(--page-padding), env(safe-area-inset-right))
    max(var(--page-padding), env(safe-area-inset-bottom))
    max(var(--page-padding), env(safe-area-inset-left));
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
  font-family: var(--page-heading-font);
 }
 h1 {
  font-size: clamp(3.125rem, 5vw, 4.5rem);
 }
 h2 {
  font-size: clamp(2.625rem, 4.25vw, 3.875rem);
 }
 h3 {
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
 }
 p {
  margin: 0.75em 0;
 }
 a {
  color: inherit;
  text-shadow: 0 0 0 #fff;
  p & {
    transition:
      color 0.3s linear,
      text-shadow 0.3s linear;
    @media (hover: hover) {
      &:hover {
        color: var(--clr-sebin-yellow);
        text-shadow: 0 0 0.5em var(--clr-sebin-yellow);
      }
    }
  }
 }
 code {
  font-size: 0.875em;
  background-color: var(--clr-page-black);
  border: 0.0625em solid var(--clr-page-black-light);
  border-radius: 0.5em;
  padding: 0.125em 0.25em;
  white-space: nowrap;
 }
 img {
  max-width: 100%;
  max-height: 100%;
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: var(--page-transition);
 }
 .fade-enter-from,
 .fade-leave-to {
  opacity: 0;
  transform: var(--page-transform);
 }
--- a/src/types.ts
+++ b/src/types.ts
@ -0,0 +1,7 @@
 import { Platform } from '@/enums'
 export type Game = {
  platform: Platform
  title: string
  link: URL
 }
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@ -0,0 +1,136 @@
 <script setup lang="ts">
 import IconLink from '@/components/IconLink.vue'
 import IconLinkList from '@/components/IconLinkList.vue'
 import { games } from '@/games'
 import FFXIV from '@/assets/icons/IconFfxiv.vue'
 import Minecraft from '@/assets/icons/IconMinecraft.vue'
 import Steam from '@/assets/icons/IconSteam.vue'
 import BattleNet from '@/assets/icons/IconBattleNet.vue'
 import PlayStation from '@/assets/icons/IconPlayStation.vue'
 import Switch from '@/assets/icons/IconNintendoSwitch.vue'
 import FilteredList from '@/components/FilteredList.vue'
 const dob = new Date('1988-04-25')
 const getAge = (dateOfBirth: Date): number => {
  const today = new Date()
  const thisYear = today.getFullYear()
  const thisMonth = today.getMonth()
  const thisDay = today.getDate()
  const dobYear = dateOfBirth.getFullYear()
  const dobMonth = dateOfBirth.getMonth()
  const dobDay = dateOfBirth.getDate()
  let age = thisYear - dobYear
  if (thisMonth < dobMonth) age--
  if (thisMonth === dobMonth && thisDay < dobDay) age--
  return age
 }
 </script>
 <template>
  <section>
    <h1>About me</h1>
    <p>
      I'm a chill {{ getAge(dob) }} year old dude from the south of Germany pretending to be a
      dragon online.
    </p>
    <p>
      I've been in the furry fandom for over 20 years now. I became aware of it through a search in
      <a href="https://en.wikipedia.org/wiki/Kazaa" target="_blank">Kazaa</a> for
      <em>“dragon”</em> images to use as desktop wallpaper for my computer. I blindly downloaded
      everything I could get my hands on, and a not-so-innocent image with a very specific term had
      crept in when I went over all the downloads. Adolescent cruiosity got the better of me and I
      searched for it and life has never been the same 😉
    </p>
    <p>
      I quickly learned about the
      <a href="https://en.wikifur.com/wiki/Vcl" target="_blank">VCL</a> (not to be confused with the
      <a href="https://www.videolan.org/vlc/" target="_blank">media player</a>) and frequented it
      regularly. I loved the comic
      <a href="https://vixencontrolled.net/Artists/AraKaraath%20AKA%20Adrian-Maus/" target="_blank">
        <em>In a Perfect World</em>
      </a>
      by Adrian Maus (aka Arakaraath, RIP 🪦💐). I soon stumbled upon
      <a href="https://www.furaffinity.net/">Fur Affinity</a> and it has been my mainstay for many,
      many years.
    </p>
    <p>
      Being in the fandom allowed me to feel comfortable with myself and eventually come out as gay,
      not in small part to a furry comic by the name of
      <a href="https://en.wikifur.com/wiki/Associated_Student_Bodies" target="_blank">
        <em>Associated Student Bodies</em>
      </a>
      (ASB for short) a good soul lended to me which was about the very subject matter of coming out
      and navigating a world outside of its norms. Holding this physical comic in my very hands made
      the fandom all the more real to me.
    </p>
    <p>
      I couldn't imagine being the person I am today without the fandom. It was a very formative
      part of my teens and keeps being a formative part of my everyday life. I formed friendships
      for life and found the love of my life through it. I wouldn't have it any other way.
    </p>
    <h2>Tech</h2>
    <p>
      I've been coding for the web professionally since around 2012 when I started an apprenticeship
      for a small agency. Back then HTML5 was the hot new stuff and Chrome hadn't taken over the web
      yet. I'm largely self-taught with no formal education in infromation technology. In fact, my
      first steps in handling computers was issuing <code>format C:</code> without any idea how to
      reinstall my operating system. We all have to start somewhere, right?
    </p>
    <p>
      Since then I went on to fulfill my childhood dream of working with computers. It wasn't as
      streightforward a road as I would've liked. But my perseverance would eventually pay off.
      Never say Never 😃
    </p>
    <p>
      I believe in the power of the web, which is why I have dedicated myself to web development for
      over 10 years now. The field may be chaotic, but constantly moving ahead. Anyone can make the
      web their own and there is inspiration at every corner. There is practically no barrier to
      entry. A little HTML, a pinch of CSS and very beautiful things can be created.
    </p>
    <h2>Games</h2>
    <p>When I'm not making fancy websites for myself I do enjoy some fun video games.</p>
    <p>Below you'll find a selection of games I've played:</p>
    <FilteredList :data="games" />
    <h3>Games & Platforms</h3>
    <p>You'll find me playing these games and on these platforms.</p>
    <IconLinkList>
      <IconLink
        title="Sebin Nyshkim (Chaos/Cerberus)"
        href="https://eu.finalfantasyxiv.com/lodestone/character/32926097/"
        :icon="FFXIV"
        style="--color: #9f2536"
      />
      <IconLink title="SebinNyshkim" :icon="Minecraft" style="--color: #44b136" />
      <IconLink
        title="Sebin Nyshkim"
        href="https://steamcommunity.com/id/SebinNyshkim/"
        :icon="Steam"
        style="--color: #c5c3c0"
      />
      <IconLink title="SebinNyshkim#2250" :icon="BattleNet" style="--color: #148eff" />
      <IconLink title="sonofdragons" :icon="PlayStation" style="--color: #0070d1" />
      <IconLink title="SW-0267-8499-8685" :icon="Switch" style="--color: #e60012" />
    </IconLinkList>
  </section>
 </template>
--- a/src/views/ContactView.vue
+++ b/src/views/ContactView.vue
@ -0,0 +1,218 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import IconLink from '@/components/IconLink.vue'
 import IconLinkList from '@/components/IconLinkList.vue'
 import FurAffinity from '@/assets/icons/IconFuraffinity.vue'
 import Weasyl from '@/assets/icons/IconWeasyl.vue'
 import SoFurry from '@/assets/icons/IconSoFurry.vue'
 import FurryNetwork from '@/assets/icons/IconFurryNetwork.vue'
 import Mastodon from '@/assets/icons/IconMastodon.vue'
 import Twitter from '@/assets/icons/IconTwitter.vue'
 import Bluesky from '@/assets/icons/IconCloud.vue'
 import Reddit from '@/assets/icons/IconReddit.vue'
 import Itaku from '@/assets/icons/IconItaku.vue'
 import Pillowfort from '@/assets/icons/IconPillowfort.vue'
 import YouTube from '@/assets/icons/IconYouTube.vue'
 import Twitch from '@/assets/icons/IconTwitch.vue'
 import Soundcloud from '@/assets/icons/IconSoundcloud.vue'
 import Telegram from '@/assets/icons/IconTelegram.vue'
 import Discord from '@/assets/icons/IconDiscord.vue'
 import Matrix from '@/assets/icons/IconMatrix.vue'
 const noHello = ref(false)
 </script>
 <template>
  <section>
    <h1>Get in touch</h1>
    <p>Some people make Linktrees. I made this entire website, like a well-adjusted person.</p>
    <h2>Socials</h2>
    <p>You can find me on all kinds of places on the internet.</p>
    <IconLinkList>
      <IconLink
        title="Fur Affinity"
        href="https://www.furaffinity.net/user/sonofdragons"
        :icon="FurAffinity"
        style="--color: #faaf3a"
      />
      <IconLink
        title="Weasyl"
        href="https://www.weasyl.com/~sebinnyshkim"
        :icon="Weasyl"
        style="--color: #a10000"
        :tags="['dormant']"
      />
      <IconLink
        title="SoFurry"
        href="https://sebin-nyshkim.sofurry.com/"
        :icon="SoFurry"
        style="--color: #f7931e"
        :tags="['dormant']"
      />
      <IconLink
        title="Furry Network"
        href="https://furrynetwork.com/sebinnyshkim/"
        :icon="FurryNetwork"
        style="--color: #2e76b4"
        :tags="['dormant']"
      />
      <IconLink
        title="Mastodon"
        href="https://meow.social/@SebinNyshkim"
        :icon="Mastodon"
        style="--color: #6364ff"
      />
      <IconLink
        title="Bluesky"
        href="https://bsky.app/profile/sebin-nyshkim.net"
        :icon="Bluesky"
        style="--color: #0085ff"
      />
      <IconLink
        title="Twitter"
        href="https://twitter.com/SebinNyshkim"
        :icon="Twitter"
        style="--color: #1da1f2"
      />
      <IconLink
        title="Reddit"
        href="https://www.reddit.com/user/SebinNyshkim"
        :icon="Reddit"
        style="--color: #ff4500"
        :tags="['dormant']"
      />
      <IconLink
        title="Itaku"
        href="https://itaku.ee/profile/sebinnyshkim"
        :icon="Itaku"
        style="--color: #ffeb3b"
        :tags="['dormant']"
      />
      <IconLink
        title="Pillowfort"
        href="https://www.pillowfort.social/SebinNyshkim"
        :icon="Pillowfort"
        style="--color: #fff"
        :tags="['dormant']"
      />
      <IconLink
        title="YouTube"
        href="https://www.youtube.com/@SebinNyshkim"
        :icon="YouTube"
        style="--color: #f00"
      />
      <IconLink
        title="Twitch"
        href="https://www.twitch.tv/SebinNyshkim"
        :icon="Twitch"
        style="--color: #a970ff"
      />
      <IconLink
        title="Soundcloud"
        href="https://soundcloud.com/sebin-nyshkim"
        :icon="Soundcloud"
        style="--color: #f50"
      />
    </IconLinkList>
    <h2>Chat</h2>
    <template v-if="noHello">
      <p>Here's the messenger services I use:</p>
      <IconLinkList>
        <IconLink
          title="Telegram"
          href="https://t.me/SebinNyshkim"
          :icon="Telegram"
          style="--color: #25a3e0"
        />
        <IconLink
          title="Discord"
          href="https://discordapp.com/users/227753049530040321"
          :icon="Discord"
          style="--color: #5865f2"
        />
        <IconLink
          title="Matrix"
          href="https://matrix.to/#/@SebinNyshkim:chat.sebin-nyshkim.net"
          :icon="Matrix"
          style="--color: #fff"
        />
      </IconLinkList>
    </template>
    <template v-else>
      <p>
        Before I show you more direct ways to get in touch with me, I want you to keep a few things
        in mind:
      </p>
      <ol>
        <li>
          <p>
            <strong>Introduce yourself!</strong> Tell me who you are, how you found me and what
            you're about. <a href="https://nohello.net" target="_blank">Don't just say “hi”</a> and
            leave me hanging!
          </p>
        </li>
        <li>
          <p>
            <strong>I don't RP!</strong> If you can't talk to me like we were having a normal
            face-to-face conversation, we won't be talking much to begin with.
          </p>
        </li>
        <li>
          <p>
            <strong>Don't spam stickers!</strong> Stickers are cool and expressive, but too much of
            them and I assure you our conversations will be short-lived.
          </p>
        </li>
        <li>
          <p>
            <strong>I don't do small talk!</strong> Talk to me about your hobbies, your pets (if
            any), your latest accomplishments, what game you're currently obsessed with or looking
            forward to, art you got, artists whose work you enjoy, music you like listening to, some
            new fancy tech gizmo you bought, some funny memes you found. <em>Anything, but</em> “how
            r u”.
          </p>
        </li>
        <li>
          <p>
            <strong>Don't freak out,</strong> if I don't respond immediately! I might be working on
            and/or researching something on the side and I need my focus. I'll get back to you as
            soon as I take a break.
          </p>
        </li>
        <li>
          <p>
            <strong>Don't gatling message me!</strong> I won't respond quicker if you send me seven
            one-liners in a row, spamming me with notifications. I'll promise you it'll get you the
            entirely wrong kind of attention from me.
          </p>
        </li>
      </ol>
      <button @click="noHello = !noHello">Pinky-swear</button>
    </template>
  </section>
 </template>
 <style lang="scss">
 button {
  display: block;
  width: 100%;
  font-size: 1.5em;
  color: #fff;
  background-color: var(--clr-sebin-red);
  border: 0;
  border-radius: 0.5em;
  padding: 0.5em;
 }
 </style>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,15 @@
 <template>
  <section>
    <h1>Rawr there!</h1>
    <p>Servus!<br />Hello!<br />Salut!</p>
    <p>
      Glad you could make it. On this page you can learn more about the person behind the dragon!
    </p>
    <p>
      That handsome fella was drawn by <a href="https://nirhere.carrd.co/" target="_blank">Rin</a>,
      btw! 👉️
    </p>
  </section>
 </template>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@ -0,0 +1,100 @@
 <script setup lang="ts">
 import DeviceFrame from '@/components/DeviceFrame.vue'
 import IconLink from '@/components/IconLink.vue'
 import IconLinkList from '@/components/IconLinkList.vue'
 import ArchLinux from '@/assets/icons/IconArchLinux.vue'
 import Firefox from '@/assets/icons/IconFirefox.vue'
 import VSCode from '@/assets/icons/IconVSCode.vue'
 import HTML from '@/assets/icons/IconHTML.vue'
 import CSS from '@/assets/icons/IconCSS.vue'
 import JavaScript from '@/assets/icons/IconJavaScript.vue'
 import TypeScript from '@/assets/icons/IconTypeScript.vue'
 import NodeJS from '@/assets/icons/IconNodeJs.vue'
 import VueJS from '@/assets/icons/IconVue.vue'
 import Github from '@/assets/icons/IconGithub.vue'
 import Gitlab from '@/assets/icons/IconGitlab.vue'
 </script>
 <template>
  <section>
    <h1>Projects</h1>
    <p>I code for work but also for fun. See below for my own personal projects.</p>
    <h2>Tools of the trade</h2>
    <IconLinkList>
      <IconLink
        title="Arch Linux (btw)"
        href="https://archlinux.org/"
        :icon="ArchLinux"
        style="--color: #1793d1"
      />
      <IconLink title="Firefox" href="https://www.mozilla.org/firefox" :icon="Firefox" />
      <IconLink title="Visual Studio Code" href="https://code.visualstudio.com/" :icon="VSCode" />
      <IconLink
        title="HTML5"
        href="https://developer.mozilla.org/en-US/docs/Glossary/HTML5"
        :icon="HTML"
        style="--color: #e54c21"
      />
      <IconLink
        title="CSS3"
        href="https://developer.mozilla.org/en-US/docs/Web/CSS"
        :icon="CSS"
        style="--color: #2965f1"
      />
      <IconLink
        title="JavaScript"
        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
        :icon="JavaScript"
        style="--color: #f7df1e"
      />
      <IconLink
        title="TypeScript"
        href="https://www.typescriptlang.org/"
        :icon="TypeScript"
        style="--color: #3178c6"
      />
      <IconLink
        title="Node.js"
        href="https://nodejs.org/"
        :icon="NodeJS"
        style="--color: #5fa04e"
      />
      <IconLink title="Vue" href="https://vuejs.org/" :icon="VueJS" />
    </IconLinkList>
    <h2>Code Places</h2>
    <IconLinkList>
      <IconLink
        title="GitHub"
        href="https://github.com/SebinNyshkim"
        :icon="Github"
        style="--color: #ffffff"
      />
      <IconLink
        title="GitLab"
        href="https://gitlab.com/SebinNyshkim"
        :icon="Gitlab"
        style="--color: #e24329"
      />
    </IconLinkList>
    <h2>My works</h2>
    <p>Click on the screen to be taken to the page!</p>
    <h3>Sebin Nyshkim Ref Page</h3>
    <DeviceFrame>
      <a href="https://ref.sebin-nyshkim.net/sebin/" target="_blank">
        <img src="https://ref.sebin-nyshkim.net/sebin/preview.png" alt="Sebin Reference Page" />
      </a>
    </DeviceFrame>
    <h3>Viktor Krastav Ref Page</h3>
    <DeviceFrame>
      <a href="https://ref.sebin-nyshkim.net/viktor/" target="_blank">
        <img src="https://ref.sebin-nyshkim.net/viktor/preview.png" alt="Viktor Reference Page" />
      </a>
    </DeviceFrame>
  </section>
 </template>
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,12 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["globals.d.ts", "env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,11 @@
 {
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,17 @@
 {
  "extends": "@tsconfig/node20/tsconfig.json",
  "include": [
    "globals.d.ts",
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
 }
--- a/vite.config.mts
+++ b/vite.config.mts
@ -0,0 +1,22 @@
 import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import { imagetools } from 'vite-imagetools'
 import autoprefixer from 'autoprefixer'
 import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [vue(), imagetools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    devSourcemap: true,
    postcss: {
      plugins: [autoprefixer({})]
    }
  }
 })