Compare commits

..

No commits in common. "master" and "0.5.3" have entirely different histories.

153 changed files with 17616 additions and 8684 deletions

View file

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

View file

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

14
.eslintrc.js Normal file
View file

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

28
.gitignore vendored
View file

@ -1,30 +1,20 @@
# Logs .DS_Store
logs node_modules
*.log /dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.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 # Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea .idea
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
*.tsbuildinfo

3
.jshintrc Normal file
View file

@ -0,0 +1,3 @@
{
"esversion": 9
}

View file

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

View file

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

15
.vscode/sftp.json vendored Normal file
View file

@ -0,0 +1,15 @@
{
"name": "sebin-reference",
"protocol": "sftp",
"port": 22,
"host": "sebin-ref",
"username": "sebin",
"privateKeyPath": "~/.ssh/id_sebin",
"passphrase": "HeyImGrump20!6",
"remotePath": "sebin-ref",
"watcher": {
"files": "dist/**",
"autoUpload": true,
"autoDelete": true
}
}

View file

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

3
babel.config.js Normal file
View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

1
env.d.ts vendored
View file

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

View file

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

0
jsconfig.json Normal file
View file

18878
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,38 +1,32 @@
{ {
"name": "sebin-reference", "name": "sebin-reference",
"version": "0.10.7", "version": "0.5.3",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite --host", "serve": "vue-cli-service serve",
"build": "run-p type-check \"build-only {@}\" --", "build": "vue-cli-service build",
"preview": "vite preview", "lint": "vue-cli-service lint"
"build-only": "vite build",
"type-check": "vue-tsc --build --force",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"vue": "^3.4.38", "core-js": "^3.9.1",
"vue-router": "^4.4.3" "normalize.css": "^8.0.1",
"vue": "^2.6.12",
"vue-scrollto": "^2.20.0"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.10.4", "@vue/cli-plugin-babel": "^4.5.12",
"@tsconfig/node20": "^20.1.4", "@vue/cli-plugin-eslint": "^4.5.12",
"@types/node": "^20.16.3", "@vue/cli-service": "^4.5.12",
"@vitejs/plugin-vue": "^5.1.3", "@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-prettier": "^9.0.0", "babel-eslint": "^10.1.0",
"@vue/eslint-config-typescript": "^13.0.0", "eslint": "^6.7.2",
"@vue/tsconfig": "^0.5.1", "eslint-plugin-prettier": "^3.3.1",
"autoprefixer": "^10.4.20", "eslint-plugin-vue": "^6.2.2",
"eslint": "^8.57.0", "image-webpack-loader": "^6.0.0",
"eslint-plugin-vue": "^9.28.0", "lodash": "^4.17.21",
"normalize.css": "^8.0.1", "node-sass": "^4.14.1",
"npm-run-all2": "^6.2.2", "prettier": "^1.19.1",
"prettier": "^3.3.3", "sass-loader": "^8.0.2",
"sass": "^1.77.8", "vue-template-compiler": "^2.6.12"
"typescript": "~5.5.0",
"vite": "^5.4.2",
"vite-imagetools": "^6.2.9",
"vue-tsc": "^2.1.4"
} }
} }

5
postcss.config.js Normal file
View file

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

View file

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

19
public/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="<%= htmlWebpackPlugin.options.links.favicon.rel %>" href="<%= htmlWebpackPlugin.options.links.favicon.href %>" type="<%= htmlWebpackPlugin.options.links.favicon.type %>">
<link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="bubbles"></div>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

BIN
public/preview.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 MiB

View file

@ -1,99 +1,715 @@
<script setup lang="ts"> <template>
import { ref, provide } from 'vue' <div id="app">
import { RouterView } from 'vue-router' <nsfw-warning v-show="isWarn">
import { modalResultKey, nsfwKey, showModalKey } from '@/keys' <template #heading>
import { version } from '../package.json' <br />
import RefModal from '@/components/RefModal.vue' Whoa, Nelly!
import ButtonGroup from '@/components/ButtonGroup.vue' </template>
import Button from '@/components/RefButton.vue'
import SiteHeader from '@/components/SiteHeader.vue'
import SiteFooter from '@/components/SiteFooter.vue'
import SiteNavigation from '@/components/SiteNavigation.vue'
const isNsfw = ref(false) <template #message>
const isConfirmedHorny = ref(false) By enabling NSFW mode you confirm that you are of legal age to view
adult content.
</template>
const nsfwmodal = ref<InstanceType<typeof RefModal>>() <template #yes>Yes, show me the goods 👀</template>
<template #no>NO, STAHP 😱</template>
</nsfw-warning>
const showModal = (): void => { <ref-header
if (!isConfirmedHorny.value) { mainHeading="Sebin Nyshkim"
nsfwmodal.value?.showModal() subHeading="Character Reference Page"
/>
setTimeout(() => { <main>
isNsfw.value = false <section id="general">
}, 1) <h2>General</h2>
} else { <data-table class="prose" :dataset="getSebinData.generic" />
isNsfw.value = !isNsfw.value </section>
<section id="anatomy">
<h2>Anatomy</h2>
<ref-figure>
<template #img>
<div>
<img
v-if="nsfw"
src="@img/sebin-ref-body-NSFW.png"
alt="Sebin Full Body Ref"
/>
<img
v-else
src="@img/sebin-ref-body-SFW.png"
alt="Sebin Full Body Ref"
/>
</div>
</template>
<template #caption>
<label>Sebin Full Body Reference</label>
</template>
<template #copyright>
<a href="https://twitter.com/draftgon">
draftgon
</a>
</template>
</ref-figure>
<data-table class="prose" :dataset="getSebinData.colors" />
<div class="prose">
<quick-facts>
<ul>
<li>Bipedal plantigrade</li>
<li>
Red scales, yellow chest-plates running from underneath chin,
over torso, between legs, underside of tail
</li>
<li>Athletic to body builder physique</li>
<li>Sharp, black claws on fingers and toes</li>
<li>Brown spikes running over back and top-side of tail</li>
<li>Tail about 1 meter in length</li>
</ul>
</quick-facts>
<p>
Sebin is a bipedal plantigrade. His body is mostly covered by red
scales with yellow chest plates running from below his chin over his
torso all the way down between his legs and underside of his tail.
His physique is athletic to muscular. His fingers and toes are
equipped sharp black claws. Brown spikes run along his spine down to
the tip of his tail. His tail is about one meter in length.
</p>
</div>
<h3 id="wings">Wings</h3>
<div class="prose">
<quick-facts>
<ul>
<li>Wingspan 3-4 meters</li>
<li>Closed when on the ground</li>
<li>Function like a second pair of arms</li>
<li>Pointy talon on end of "hand"</li>
</ul>
</quick-facts>
<p>
His wing span is around 3-4 meters. He has them closed when on the
ground. His wings function like a second pair of arms, at which ends
are hand-like limbs with a black talon on top and finger-like
extensions, in between which are the membranes of his wings. He can
use his wings to fly short distances. Longer distances become
difficult due to fatigue of having to carry his own weight with his
wings alone.
</p>
</div>
<h3 id="head">Head</h3>
<ref-figure>
<template #img>
<div>
<img
src="@img/sebin-ref-expressions.png"
alt="Sebin's Expressions"
/>
</div>
</template>
<template #caption>
<label>Sebin's Expressions</label>
</template>
<template #copyright>
<a href="https://twitter.com/draftgon">
draftgon
</a>
</template>
</ref-figure>
<div class="prose">
<quick-facts>
<ul>
<li>
Round pupils, green iris. Yellow spikes on cheeks, as well as
for eyebrows
</li>
<li>Black horns with slight curve downwards</li>
<li>Blue hair, different styles; short style preferred</li>
<li>Long, pointy, movable ears</li>
<li>Very sharp teeth</li>
<li>Tongue with pointy tip</li>
</ul>
</quick-facts>
<p>
He has round pupils instead of the slit ones typical for reptilians.
He has short yellow spikes above his eyes that resemble eyebrows, as
well as spikes along the jawline of his cheeks. He has black horns
growing out of his head which are mostly straight but slightly curve
downwards. His hair is blue and he wears it in varying styles. He
has long pointy ears which he can move to determine the origin of
sounds around him. He also uses them to express emotion. His teeth
are very sharp. In his throat are glands that produce a mixture that
allows him to breathe fire. His tongue has a pointy tip.
</p>
</div>
<h3 id="upperbody">Upper Body</h3>
<div class="prose">
<quick-facts>
<ul>
<li>Strong upper body, lush pecs, defined abs, black nipples</li>
<li>
Any muscle mass from athletic to body builder is fine, with a
preference towards body builder
</li>
</ul>
</quick-facts>
<p>
Sebin started working out at the age of 17. Being in top shape is
very important to him. His favorite workouts are weight-lifting
(dumbbells as well as barbells), lat pulldown, leg press, straight
arm pulldown and cable pull. He works out three times a week with
one day in between workout days for rest, switching body regions
each workout day.
</p>
</div>
<ref-figure>
<template #img>
<div>
<img
src="@img/upper-body-ref.png"
alt="Sebin's upper body closeup"
/>
</div>
</template>
<template #caption>
<label>Sebin's upper body closeup</label>
</template>
<template #copyright>
<a href="https://twitter.com/NidtheDragon">
NidtheDragon
</a>
</template>
</ref-figure>
<div class="prose">
<p>
Sebin is very focused on evenly distributed muscle mass but pays
special attention to his back, chest and arms. This is so his fire
breath doesn't get weak and he can throw fire projectiles farther. A
strong back ensures his wings continue to carry him so he can stay
airbourne for extended periods of time.
</p>
</div>
<h3>Additional Muscle References</h3>
<div class="prose" v-show="!nsfw">
<div class="nsfw-bar">
<div class="nsfw-bar__content flex flex--row flex--nowrap">
<div>
<strong>
Some of these additional references are NSFW. Please enable
NSFW mode to reveal them.
</strong>
</div>
<nsfw-switch
id="nsfw-switch-muscle"
v-model="nsfw"
@change="showWarning()"
/>
</div>
</div>
</div>
<ref-gallery v-show="nsfw">
<figure>
<img src="@img/muscle-ref/muscle-ref1.png" />
<figcaption>
By <a href="https://twitter.com/GrisserArt">Grisser</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref2.png" />
<figcaption>
By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref3.png" />
<figcaption>
By
<a href="https://www.furaffinity.net/user/Marsel-Defender">
Marsel-Defender
</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref4.png" />
<figcaption>
By
<a href="https://www.furaffinity.net/user/sirboburto">
SirBoburto
</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref5.jpeg" />
<figcaption>
By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref6.png" />
<figcaption>
By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref7.png" />
<figcaption>
By
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref8.jpeg" />
<figcaption>
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref9.jpeg" />
<figcaption>
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref10.png" />
<figcaption>
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
</figcaption>
</figure>
<figure>
<img src="@img/muscle-ref/muscle-ref11.jpeg" />
<figcaption>
By
<a href="https://www.furaffinity.net/user/Marsel-Defender">
Marsel-Defender
</a>
</figcaption>
</figure>
</ref-gallery>
<h3 v-show="nsfw" id="penis">Penis</h3>
<ref-figure v-show="nsfw">
<template #img>
<div>
<img src="@img/sebin-ref-penis.png" alt="Sebin's manly parts" />
</div>
</template>
<template #caption>
<label>Sebin's manly parts</label>
</template>
<template #copyright>
<a href="https://twitter.com/draftgon">
draftgon
</a>
</template>
</ref-figure>
<data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
<div class="prose" v-show="nsfw">
<quick-facts>
<ul>
<li>Human-shaped with ridges</li>
<li>Ring-like sheath surrounding shaft</li>
<li>
Extends from sheath when erect, lives inside sheath when not
erect
</li>
<li>External balls</li>
</ul>
</quick-facts>
<p>
Despite his majorly reptilian appearance he has nipples, a feature
of the human side of his family, which also shows with his external
testicles. Rather than a slit which houses his penis he has a
pouch-like sheath, with the tip slightly peeking out of it when not
aroused. His penis is mainly humanoid in shape but is surrounded by
several ridges. He can take it out of its pouch while it's still
soft (e.g. for passing water). When aroused his charcoal black shaft
pushes out from the sheath, its base girded by the sheath like a
ring.
</p>
</div>
</section>
<section id="clothes">
<h2>Clothing Styles</h2>
<div class="prose">
<p>
<strong>
The following photos are for illustration purposes only. The
clothing shown is not to be taken literally. The design may
differ!
</strong>
</p>
</div>
<h3>Casual Wear</h3>
<ref-gallery>
<figure>
<img src="@img/clothes-ref/warm/tank-top.jpg" alt="Tank Top" />
<figcaption>Loose Tank Top</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/warm/shorts.jpg" alt="Shorts" />
<figcaption>
Short shorts with dangling bands
</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/warm/hoodie.jpg" alt="Hoodie" />
<figcaption>Tong sleeve top tied around waist</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/warm/sneakers.jpg" alt="Sneakers" />
<figcaption>Sneakers (Air Jordan style)</figcaption>
</figure>
</ref-gallery>
<h3>Cold Weather</h3>
<ref-gallery>
<figure>
<img src="@img/clothes-ref/cold/coat.jpg" alt="Coat" />
<figcaption>Coat</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/cold/scarf.jpg" alt="Scarf" />
<figcaption>Checkered scarf with short cords</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" />
<figcaption>Hoodie</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/cold/jeans.jpg" alt="Jeans" />
<figcaption>Loose fit Jeans</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
<figcaption>Boots</figcaption>
</figure>
</ref-gallery>
<h3>Workout</h3>
<ref-gallery>
<figure>
<img src="@img/clothes-ref/workout/fullbody.png" alt="Full Body" />
<figcaption>
<p>Full Body</p>
<p>Snapback hat, tank top, fingerless gloves, shorts, sneakers</p>
<p>By <a href="https://twitter.com/turquoize_art">Atlas</a></p>
</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/workout/closeup.png" alt="Close-up" />
<figcaption>
<p>Close-up</p>
<p>
Snapback hat, headphones, tank top, fingerless gloves, shorts,
smartwatch
</p>
<p>By <a href="https://twitter.com/purpledragonrei">Rei</a></p>
</figcaption>
</figure>
</ref-gallery>
<h3>"Doesn't need to leave the house today" Style</h3>
<ref-gallery>
<figure>
<img src="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
<figcaption>Tracksuit pants (optional)</figcaption>
</figure>
<figure>
<img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
<figcaption>Topless w/ jockstrap/boxer briefs</figcaption>
</figure>
</ref-gallery>
</section>
<section id="abilities">
<h2>Abilities</h2>
<div class="prose">
<p>
Since Sebin is a fire dragon theres a myriad of abilities he has at
his disposal to defend himself.
</p>
</div>
<h3>Overdrive Form</h3>
<ref-figure>
<template #img>
<div>
<img
src="@img/sebin-overdrive_ref-hires.jpg"
alt="Sebin in Overdrive"
/>
</div>
</template>
<template #caption>
<label>Sebin in Overdrive</label>
</template>
<template #copyright>
<a href="https://twitter.com/CVictorrosso">
CVictorrosso
</a>
</template>
</ref-figure>
<div class="prose">
<p>
Sebin can enter an Overdrive Form which greatly increases his
strength and abilities but it comes at a cost.
</p>
<p>
He enters Overdrive by engulfing himself in a pillar of flames which
transforms his exterior physique. During Overdrive transformation
his hair ignites and flickers with blue flames. The corners of his
eyes flicker with long green flames. His arms and legs become part
carbon black and are crossed by several glowing veins which pulsate
like flowing lava. Fire in this form burns several degrees hotter
than usual because his body becomes a living blast furnace, which is
why his limbs have to be of more fire-proof material to withstand
the increased heat.
</p>
<p>
To complete the transformation he inhales the flames from the pillar
surrounding him which heats up his body from within. Even if Sebin
is a fire dragon who can sustain high degrees of heat he is
essentially overheating himself from the inside. Because of this he
can't maintain this form for more than a few hours before he does
permanent damage to his own body.
</p>
<p>
Direct body contact with Sebin during overdrive causes 3rd degree
burns as he emits an extreme temperature, although less than he
keeps inside his body. His immediate surroundings are likely to burn
or melt.
</p>
</div>
<h2>Attacks</h2>
<h3>Normal Form</h3>
<div class="prose">
<p>
<strong>Fire Breath:</strong> Either a long breath of fire or short
bursts fired directly from Sebin's mouth.
</p>
<p>
<strong>Flame Toss:</strong> Sebin spits fireballs into his hands to
throw them at his opponents. His scales are fireproof and can
withstand the high temperatures. On impact these fireballs explode
into a bigger fire bursts with a diameter of 1-2 meters. He can also
combine two fireballs into a bigger one for bigger impact.
</p>
<p>
<strong>Kindled Fist:</strong> Besides throwing fireballs Sebin can
also greatly increase the speed of the projectiles by a strong punch
or kick.
</p>
<p>
<strong>Burning Twister:</strong> An attack for aerial combat, Sebin
can use his fire breath to engulf his body in flames while spinning
to become a fire tornado that singes opponents.
</p>
</div>
<h3>Attacks in Overdrive Form</h3>
<div class="prose">
<p>
<strong>Fire Breath:</strong> The reach of Sebin's Fire Breath
increases as well as the frequency at which he can fire shots from
his mouth.
</p>
<p>
<strong>Flame Toss:</strong> Overdrive Form eliminates the need for
Sebin to spit fire into his palms. It instead enables him to fire
the shots directly from the palm of his hands, as the firey veins
crossing his arms act as an orifice to do so. The explosion radius
of the burning projectiles that explode on impact is greatly
increased.
</p>
<p>
<strong>Searing Discus:</strong> Overdrive allows Sebin to form
rings of fire by igniting flames from his fingertips and swirling
them in a circle motion. He can use them for both close quarters or
ranged combat.
</p>
<p>
<strong>Combustion Flare:</strong> A devastating firestorm by
combining the power of both hands from his fire-infused arms. The
impact of the two carbon-like palms against each other is like the
clash of two flints, used to ignite the attack. A secure foothold is
needed to prevent Sebin from being thrown back by the recoil of the
attack. Using this technique in the air is therefore highly risky.
</p>
<p>
<strong>Blazing Pandemonium:</strong> A heavy impact into the ground
from a great height with both fists, tearing deep cracks in the
ground around the impact crater. Combined with
<em>Burning Twister</em>, the flames that previously surrounded
Sebin's body are forced through the newly created furrows,
transforming the scene into an inferno.
</p>
<p>
<strong>Scorching Edge:</strong> A fiery blade towering several
meters into the air that Sebin sends careening towards his enemies
from his fire-infused legs with a backflip kick, leaving a swath of
destruction in its wake. Upon impact the force of the attack is
distributed sideways.
</p>
<p>
<strong>Circling Fire Shield:</strong> A rather defensive technique.
By spinning around with stretched out arms Sebin creates fire balls,
which he usually hurls towards enemies, that circle around his body
diagonally. They act as a shield while he can still move his arms
relatively freely. Enemies would be well advised to keep their
distance to this spinning shield, as the fire balls will still
explode on contact.
</p>
</div>
</section>
</main>
<ref-footer />
</div>
</template>
<script>
import QuickFacts from "@components/QuickFacts.vue";
import DataTable from "@components/DataTable.vue";
import RefGallery from "@components/Gallery.vue";
import RefFigure from "@components/Figure.vue";
import RefHeader from "@components/Header.vue";
import RefFooter from "@components/Footer.vue";
import NsfwSwitch from "@components/NsfwSwitch.vue";
import NsfwWarning from "@components/NsfwWarning.vue";
import Sebin from "@mixins/Sebin.js";
import Helper from "@mixins/Helper.js";
export default {
name: "app",
components: {
QuickFacts,
DataTable,
RefGallery,
RefFigure,
RefHeader,
RefFooter,
NsfwSwitch,
NsfwWarning
},
data() {
return {
nsfw: false,
isWarn: false,
isConfirmedHorny: false,
version: require("../package.json").version
};
},
mixins: [Sebin, Helper],
methods: {
showWarning() {
if (!this.isConfirmedHorny) {
this.isWarn = true;
setTimeout(() => {
this.nsfw = false;
}, 1);
}
}
}
};
</script>
<style lang="scss">
@import "@scss/base.scss";
@import "~normalize.css";
#app {
color: $copy-color;
font-size: 1.125em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: all ease-in-out 0.25s;
@media (min-width: 50em) {
font-size: 1.25em;
}
@media (min-width: 125em) {
font-size: 1.5em;
} }
} }
const modalResult = (value: boolean): void => { main {
isNsfw.value = value h2,
isConfirmedHorny.value = value h3,
nsfwmodal.value?.close() p {
max-width: 45rem;
margin-left: auto;
margin-right: auto;
@media (min-width: 125em) {
max-width: 55rem;
}
}
.prose {
max-width: 45rem;
margin-left: auto;
margin-right: auto;
@media (min-width: 125em) {
max-width: 55rem;
}
}
@include mq-mobile {
h2,
h3,
p,
.quickfacts {
margin-left: 1rem;
margin-right: 1rem;
}
}
} }
provide(modalResultKey, modalResult) section {
provide(nsfwKey, isNsfw) h2 {
provide(showModalKey, showModal) border-bottom: 0.0625em $copy-color solid;
</script> }
<template> h3 {
<RefModal id="nsfw-warning" ref="nsfwmodal"> border-bottom: 0.125em $copy-color dotted;
<template #heading> }
<br /> }
Whoa, Nelly! </style>
</template>
<template #message>
By enabling NSFW mode you confirm that you are of legal age to view adult content.
</template>
<template #buttons>
<ButtonGroup col>
<Button positive @click.prevent="modalResult(true)"> Yes, show me the goods 👀 </Button>
<Button negative @click.prevent="modalResult(false)"> NO, STAHP 😱 </Button>
</ButtonGroup>
</template>
</RefModal>
<SiteHeader>
<!-- max 500px -->
<picture>
<source
srcset="
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=avif&quality=75&as=srcset
"
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
type="image/avif"
/>
<source
srcset="
@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=webp&quality=100&as=srcset
"
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
type="image/webp"
/>
<img
class="nav-logo"
srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&format=png&as=srcset"
sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
alt="Sebin Avatar"
/>
</picture>
<SiteNavigation />
</SiteHeader>
<main>
<RouterView />
</main>
<SiteFooter>
<p>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</p>
<p>
Background Pattern &copy;
<a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
</p>
</SiteFooter>
</template>

View file

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

View file

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

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 428 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View file

Before

Width:  |  Height:  |  Size: 3.9 MiB

After

Width:  |  Height:  |  Size: 3.9 MiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 102 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 393 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 619 KiB

View file

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 909 KiB

After

Width:  |  Height:  |  Size: 909 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 277 KiB

View file

Before

Width:  |  Height:  |  Size: 752 KiB

After

Width:  |  Height:  |  Size: 752 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 551 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 524 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 656 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 784 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 589 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 306 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 MiB

Some files were not shown because too many files have changed in this diff Show more