added public folder, vscode settings, and updated README

2021-05-15 12:44:46 +09:00 · 2021-05-15 12:44:46 +09:00 · ed62cf4399
commit ed62cf4399
parent dd4d0476a5
54 changed files with 1206 additions and 11 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,7 +1,7 @@
 # where I keep my notes
 _/

-# auto generated
+# auto generated files
 yarn.lock
 package-lock.json
 pages.json
@ -20,8 +20,8 @@ build/
 .DS_Store

 # unaltered
-# Created by https://www.toptal.com/developers/gitignore/api/firebase,node,hexo,git,visualstudiocode
-# Edit at https://www.toptal.com/developers/gitignore?templates=firebase,node,hexo,git,visualstudiocode
+# Created by https://www.toptal.com/developers/gitignore/api/firebase,node,git,visualstudiocode
+# Edit at https://www.toptal.com/developers/gitignore?templates=firebase,node,git,visualstudiocode

 ### Firebase ###
 .idea
@ -47,11 +47,6 @@ build/
 *_LOCAL_*.txt
 *_REMOTE_*.txt

-### Hexo ###
-db.json
-public/
-.deploy_git/
-
 ### Node ###
 # Logs
 logs
@ -108,6 +103,9 @@ typings/
 # Optional eslint cache
 .eslintcache

+# Optional stylelint cache
+.stylelintcache
+
 # Microbundle cache
 .rpt2_cache/
 .rts2_cache_cjs/
@ -139,6 +137,14 @@ typings/
 .nuxt
 dist

+# Storybook build outputs
+.out
+.storybook-out
+storybook-static
+
+# rollup.js default build output
+dist/
+
 # Gatsby files
 .cache/
 # Comment in the public line in if your project uses Gatsby and not Next.js
@ -163,10 +169,16 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test

+# Temporary folders
+tmp/
+temp/
+
 ### VisualStudioCode ###
 .vscode/*
+!.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
+!.vscode/extensions.json
 *.code-workspace

 ### VisualStudioCode Patch ###
@ -174,4 +186,4 @@ dist
 .history
 .ionide

-# End of https://www.toptal.com/developers/gitignore/api/firebase,node,hexo,git,visualstudiocode
+# End of https://www.toptal.com/developers/gitignore/api/firebase,node,git,visualstudiocode
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,13 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+"editor.detectIndentation": false,
+"editor.insertSpaces": false,
+"cSpell.words": [
+	"Fontawesome",
+	"developomp",
+	"developomp's",
+	"dompurify"
+]
+}
--- a/README.md
+++ b/README.md
@ -12,7 +12,7 @@ Tools/Frameworks/Packages used:
 |                                                  [react](https://reactjs.org) | Front end framework                                   |
 |         [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) | [Fontawesome](https://fontawesome.com) icons in react |
 |                           [react-helmet](https://github.com/nfl/react-helmet) | HTML head management                                  |
-|                              [dompurify](https://github.com/cure53/DOMPurify) | HTML sanitizer for markdown -> HTML page generation   |
+|                              [dompurify](https://github.com/cure53/DOMPurify) | HTML sanitizer for markdown-to-html page generation   |
 |                   [gray-matter](https://github.com/jonschlinkert/gray-matter) | parsing markdown                                      |
 | [local-storage-fallback](https://github.com/ripeworks/local-storage-fallback) | storing theme choice                                  |
 |                      [react-tooltip](https://github.com/wwayne/react-tooltip) | Tooltips                                              |
@ -20,7 +20,7 @@ Tools/Frameworks/Packages used:
 |         [styled-theming](https://github.com/styled-components/styled-theming) | Theming                                               |
 |                                    [eslint](https://github.com/eslint/eslint) | code analysis                                         |
 |                              [prettier](https://github.com/prettier/prettier) | code formatter                                        |
-|                              [ts-node](https://github.com/TypeStrong/ts-node) | running markdown->html generator                      |
+|                              [ts-node](https://github.com/TypeStrong/ts-node) | running markdown-to-html generator                    |
 |                                                     [jest](https://jestjs.io) | code testing                                          |
 |               [react-spinners](https://github.com/davidhu2000/react-spinners) | loading indicator                                     |

--- a/source/public/games/click/index.css
+++ b/source/public/games/click/index.css
@ -0,0 +1,53 @@
+*, *::after, *::before {
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+:root {
+    --main-color: white;
+    --background-color: black;
+}
+
+body {
+    margin: 0;
+    background-color: var(--background-color);
+}
+
+.menu {
+    margin: 0 auto;
+    padding: 10px;
+    position: relative;
+}
+
+.clicker {
+    border-radius: 50%;
+    background-color: var(--main-color);
+    position: absolute;
+}
+
+.winner.show {
+    display: flex;
+}
+
+#timer {
+    color: var(--main-color);
+    font-size: 5rem;
+}
+
+.gameArea {
+    border: 0;
+    margin: auto auto auto auto;
+}
+
+.primer {
+    border: 0;
+    width: 10vw;
+    height: 10vw;
+    margin: auto auto auto auto;
+    background-color: var(--main-color);
+}
--- a/source/public/games/click/index.html
+++ b/source/public/games/click/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Click!</title>
+		<link rel="stylesheet" href="/games/click/index.css" />
+		<script src="/games/click/index.js" defer></script>
+	</head>
+	<body>
+		<p id="timer"></p>
+		<div id="primer" class="primer"></div>
+		<div class="gameArea"></div>
+	</body>
+</html>
--- a/source/public/games/click/index.js
+++ b/source/public/games/click/index.js
@ -0,0 +1,96 @@
+// todo: add cross-hair
+// todo: continuous reaction speed reading
+// todo: better font
+// todo: average reaction speed
+// todo: reaction speed graph
+// todo: put mouse over to restart
+// todo: click order
+// todo: sound effect
+// todo: X if miss
+// todo: settings
+// todo: remaining clickers
+
+const gameArea = document.getElementsByClassName("gameArea")[0]
+const primer = document.getElementById("primer")
+const timerText = document.getElementById("timer")
+
+let clickerSize = 1.3
+let initClickerCount = 10
+let clickerCount = initClickerCount
+let timer, startTime, clickable
+
+primer.addEventListener("mousedown", () => {prime()})
+document.addEventListener("keydown", (event) => {
+    if ("zq".includes(event.key.toLowerCase())) {
+        removeClicker()
+    }
+
+    if (event.key.toLowerCase() === "a") {
+        // todo: pause
+    }
+    else if (event.key.toLowerCase() === "q") {
+        // todo: end measurement
+    }
+})
+
+function prime() {
+    primer.style.display = "none"
+    clearInterval(timer)
+    clearClicker()
+    initializeTimer()
+    addClicker()
+}
+
+function addClicker() {
+    let newClicker = document.createElement("div")
+    newClicker.addEventListener("mousedown", removeClicker, {once: true})
+    newClicker.addEventListener("mouseenter", () => {clickable = newClicker})
+    newClicker.addEventListener("mouseleave", clearClickable)
+
+    newClicker.classList.add("clicker")
+
+    newClicker.style.width = `${clickerSize}in`
+    newClicker.style.height = `${clickerSize}in`
+
+    let x = Math.random() * 100, y = Math.random() * 100
+    // todo: always make clicker appear in the screen
+    newClicker.style.top = `${x}%`
+    newClicker.style.left = `${y}%`
+
+    gameArea.appendChild(newClicker)
+}
+
+function removeClicker() {
+    if (clickable === undefined) return
+    clickerCount -= 1
+
+    if (clickerCount > 0) {
+        addClicker()
+    }
+    else if (clickerCount === 0) {
+        primer.style.display = "block"
+        clearInterval(timer)
+        clearClicker()
+        clickerCount = initClickerCount
+        clearClickable()
+        return
+    }
+    clickable.remove()
+    clearClickable()
+}
+
+function clearClicker() {
+    gameArea.textContent = "";
+    clearClickable()
+}
+
+function clearClickable() {
+    clickable = undefined
+}
+
+function initializeTimer() {
+    startTime = Date.now()
+    timer = setInterval(() => {
+        timerText.innerHTML = ((Date.now() - startTime) / 1000).toFixed(2)
+    }, 10)
+}
--- a/source/public/games/pong/Build/7.data.unityweb
+++ b/source/public/games/pong/Build/7.data.unityweb
--- a/source/public/games/pong/Build/7.json
+++ b/source/public/games/pong/Build/7.json
@ -0,0 +1,13 @@
+{
+"companyName": "AnonymousPomp",
+"productName": "PONG",
+"dataUrl": "7.data.unityweb",
+"wasmCodeUrl": "7.wasm.code.unityweb",
+"wasmFrameworkUrl": "7.wasm.framework.unityweb",
+"TOTAL_MEMORY": 268435456,
+"graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
+"webglContextAttributes": {"preserveDrawingBuffer": false},
+"splashScreenStyle": "Dark",
+"backgroundColor": "#231F20",
+"cacheControl": {"default": "must-revalidate"}
+}
--- a/source/public/games/pong/Build/7.wasm.code.unityweb
+++ b/source/public/games/pong/Build/7.wasm.code.unityweb
--- a/source/public/games/pong/Build/7.wasm.framework.unityweb
+++ b/source/public/games/pong/Build/7.wasm.framework.unityweb
--- a/source/public/games/pong/Build/UnityLoader.js
+++ b/source/public/games/pong/Build/UnityLoader.js
--- a/source/public/games/pong/TemplateData/UnityProgress.js
+++ b/source/public/games/pong/TemplateData/UnityProgress.js
@ -0,0 +1,24 @@
+function UnityProgress(gameInstance, progress) {
+  if (!gameInstance.Module)
+    return;
+  if (!gameInstance.logo) {
+    gameInstance.logo = document.createElement("div");
+    gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
+    gameInstance.container.appendChild(gameInstance.logo);
+  }
+  if (!gameInstance.progress) {    
+    gameInstance.progress = document.createElement("div");
+    gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
+    gameInstance.progress.empty = document.createElement("div");
+    gameInstance.progress.empty.className = "empty";
+    gameInstance.progress.appendChild(gameInstance.progress.empty);
+    gameInstance.progress.full = document.createElement("div");
+    gameInstance.progress.full.className = "full";
+    gameInstance.progress.appendChild(gameInstance.progress.full);
+    gameInstance.container.appendChild(gameInstance.progress);
+  }
+  gameInstance.progress.full.style.width = (100 * progress) + "%";
+  gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
+  if (progress == 1)
+    gameInstance.logo.style.display = gameInstance.progress.style.display = "none";
+}
--- a/source/public/games/pong/TemplateData/favicon.ico
+++ b/source/public/games/pong/TemplateData/favicon.ico
--- a/source/public/games/pong/TemplateData/fullscreen.png
+++ b/source/public/games/pong/TemplateData/fullscreen.png
--- a/source/public/games/pong/TemplateData/progressEmpty.Dark.png
+++ b/source/public/games/pong/TemplateData/progressEmpty.Dark.png
--- a/source/public/games/pong/TemplateData/progressEmpty.Light.png
+++ b/source/public/games/pong/TemplateData/progressEmpty.Light.png
--- a/source/public/games/pong/TemplateData/progressFull.Dark.png
+++ b/source/public/games/pong/TemplateData/progressFull.Dark.png
--- a/source/public/games/pong/TemplateData/progressFull.Light.png
+++ b/source/public/games/pong/TemplateData/progressFull.Light.png
--- a/source/public/games/pong/TemplateData/progressLogo.Dark.png
+++ b/source/public/games/pong/TemplateData/progressLogo.Dark.png
--- a/source/public/games/pong/TemplateData/progressLogo.Light.png
+++ b/source/public/games/pong/TemplateData/progressLogo.Light.png
--- a/source/public/games/pong/TemplateData/style.css
+++ b/source/public/games/pong/TemplateData/style.css
@ -0,0 +1,18 @@
+.webgl-content * {border: 0; margin: 0; padding: 0}
+.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
+
+.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
+.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
+.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
+.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
+.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
+
+.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
+.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
+.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
+
+.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
+.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
+.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
+.webgl-content .footer .title {margin-right: 10px; float: right;}
+.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
--- a/source/public/games/pong/TemplateData/webgl-logo.png
+++ b/source/public/games/pong/TemplateData/webgl-logo.png
--- a/source/public/games/pong/index.html
+++ b/source/public/games/pong/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>PONG</title>
+    <link rel="shortcut icon" href="/games/pong/TemplateData/favicon.ico">
+    <link rel="stylesheet" href="/games/pong/TemplateData/style.css">
+    <script src="/games/pong/TemplateData/UnityProgress.js"></script>
+    <script src="/games/pong/Build/UnityLoader.js"></script>
+    <script>
+      var gameInstance = UnityLoader.instantiate("gameContainer", "/games/pong/Build/7.json", {onProgress: UnityProgress});
+    </script>
+  </head>
+  <body>
+    <div class="webgl-content">
+      <div id="gameContainer" style="width: 960px; height: 600px"></div>
+      <div class="footer">
+        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
+        <div class="title">PONG v7</div>
+      </div>
+    </div>
+  </body>
+</html>
--- a/source/public/games/tictactoe/index.css
+++ b/source/public/games/tictactoe/index.css
@ -0,0 +1,176 @@
+/*---[ MAIN ]---*/
+*, *::after, *::before {
+    box-sizing: border-box;
+}
+
+:root {
+    --cell-size: 100px;
+    --mark-size: calc(var(--cell-size) * .9);
+    --background-color: black;
+    --main-color: white;
+}
+
+body {
+    margin: 0;
+    background-color: var(--background-color);
+}
+
+/*---[ Winner message ]---*/
+.winner {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .9);
+    justify-content: center;
+    align-items: center;
+    color: var(--main-color);
+    font-size: 5rem;
+    font-family: Arial, sans-serif;
+    flex-direction: column;
+}
+
+.winner button {
+    font-size: 3rem;
+    background-color: var(--background-color);
+    color: var(--main-color);
+    border: 1px solid var(--main-color);
+    padding: .25em .5em;
+    cursor: pointer;
+}
+
+.winner button:hover {
+    background-color: var(--main-color);
+    color: var(--background-color);
+    border-color: var(--background-color);
+}
+
+.winner.show {
+    display: flex;
+}
+
+/*---[ Board styling ]---*/
+.board {
+    width: 100vw;
+    height: 100vh;
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    justify-items: center;
+    align-items: center;
+    grid-template-columns: repeat(3, auto);
+}
+
+/*---[ Cell styling ]---*/
+.cell {
+    width: var(--cell-size);
+    height: var(--cell-size);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    background-color: var(--background-color);
+    border: 2px solid var(--main-color);
+    position: relative;
+    cursor: pointer;
+}
+
+.cell.x,
+.cell.o {
+    cursor: not-allowed;
+}
+
+/*---[ Remove edge border for edge cells ]---*/
+.cell:nth-child(1),
+.cell:nth-child(2),
+.cell:nth-child(3) {
+    border-top: none;
+}
+
+.cell:nth-child(1),
+.cell:nth-child(4),
+.cell:nth-child(7) {
+    border-left: none;
+}
+
+.cell:nth-child(3),
+.cell:nth-child(6),
+.cell:nth-child(9) {
+    border-right: none;
+}
+
+.cell:nth-child(7),
+.cell:nth-child(8),
+.cell:nth-child(9) {
+    border-bottom: none;
+}
+
+/*---[ X ]---*/
+.cell.x::before,
+.cell.x::after {
+    content: '';
+    position: absolute;
+    width: calc(var(--mark-size) * .1);
+    height: var(--mark-size);
+    background-color: var(--main-color);
+}
+
+.board.x .cell:not(.x):not(.o):hover::before,
+.board.x .cell:not(.x):not(.o):hover::after {
+    content: '';
+    position: absolute;
+    width: calc(var(--mark-size) * .1);
+    height: var(--mark-size);
+    background-color: dimgray;
+}
+
+.cell.x::before,
+.board.x .cell:hover::before {
+    transform: rotate(45deg);
+}
+
+.cell.x::after,
+.board.x .cell:hover::after {
+    transform: rotate(-45deg);
+}
+
+/*---[ O ]---*/
+.cell.o::before,
+.cell.o::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    width: var(--mark-size);
+    height: var(--mark-size);
+    background-color: var(--main-color);
+}
+
+.board.o .cell:not(.x):not(.o):hover::before,
+.board.o .cell:not(.x):not(.o):hover::after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    width: var(--mark-size);
+    height: var(--mark-size);
+    background-color: dimgray;
+}
+
+.cell.o::before {
+    height: calc(var(--mark-size) * .9);
+    width: calc(var(--mark-size) * .9);
+    background-color: var(--main-color);
+}
+
+.board.o .cell:not(.x):not(.o):hover::before {
+    height: calc(var(--mark-size) * .9);
+    width: calc(var(--mark-size) * .9);
+    background-color: dimgray;
+}
+
+.cell.o::after,
+.board.o .cell:not(.x):not(.o):hover::after{
+    height: calc(var(--mark-size) * .69);
+    width: calc(var(--mark-size) *.69);
+    background-color: var(--background-color);
+}
--- a/source/public/games/tictactoe/index.html
+++ b/source/public/games/tictactoe/index.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>TicTac Toe</title>
+		<link rel="icon" href="/icon/icon_circle.svg" />
+		<link rel="stylesheet" href="/games/tictactoe/index.css" />
+		<script src="/games/tictactoe/index.js" defer></script>
+	</head>
+	<body>
+		<div class="board x" id="board">
+			<div class="cell" data-cell></div>
+			<div class="cell" data-cell></div>
+			<div class="cell" data-cell></div>
+			<div class="cell" data-cell></div>
+			<div class="cell" data-cell></div>
+			<div class="cell" data-cell></div>
+			<div class="cell" data-cell></div>
+			<div class="cell" data-cell></div>
+			<div class="cell" data-cell></div>
+		</div>
+
+		<div class="winner" id="winner">
+			<div data-message></div>
+			<button id="restart">Restart</button>
+		</div>
+	</body>
+</html>
--- a/source/public/games/tictactoe/index.js
+++ b/source/public/games/tictactoe/index.js
@ -0,0 +1,89 @@
+const X_CLASS = "x"
+const O_CLASS = "o"
+
+const WINNING_PATTERN = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6]
+]
+
+const cellElements = document.querySelectorAll("[data-cell]")
+const board = document.getElementById("board")
+const winnerMessage = document.querySelector("[data-message]")
+const winner = document.getElementById("winner")
+const restartButton = document.getElementById("restart")
+
+let oTurn = false;
+
+restartButton.addEventListener("click", gameStart)
+
+function gameStart() {
+    function clickHandler(event) {
+        console.log(full())
+        const currentClass = oTurn ? O_CLASS : X_CLASS
+        event.target.classList.add(currentClass)  // add O or X to the grid
+
+        if (checkWin(currentClass)) {
+            gameOver(false)
+        } else if (full()) {
+            gameOver(true)
+        }
+        oTurn = !oTurn  // change tern
+        updateHover()
+    }
+
+    winner.classList.remove("show")
+    cellElements.forEach(cell => {
+        cell.classList.remove("o")
+        cell.classList.remove("x")
+    })
+
+    cellElements.forEach(cell => {
+        cell.addEventListener("click", clickHandler, {once: true})
+    })
+
+    updateHover()
+}
+
+function gameOver(draw) {
+    if (draw) {
+        // show draw message
+    }
+    else {
+        winnerMessage.innerText = `${oTurn ? "O" : "X"} won!!`
+    }
+    winner.classList.add("show")
+}
+
+function updateHover() {
+    board.classList.remove(X_CLASS)
+    board.classList.remove(O_CLASS)
+
+    if (oTurn) {
+        board.classList.add(O_CLASS)
+    }
+    else {
+        board.classList.add(X_CLASS)
+    }
+}
+
+function checkWin(currentClass) {
+    return WINNING_PATTERN.some(combination => {
+        return combination.every(index => {
+            return cellElements[index].classList.contains(currentClass)
+        })
+    })
+}
+
+function full() {
+    //todo: add when the game is a draw
+    return false
+}
+
+
+gameStart()
--- a/source/public/icon/icon.svg
+++ b/source/public/icon/icon.svg
@ -0,0 +1,4 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="800" height="800" fill="black"/>
+<path d="M217.617 226.262H184.863C180.632 226.262 176.23 226.77 171.66 227.785C167.259 228.632 163.197 230.07 159.473 232.102C155.749 234.133 152.702 236.757 150.332 239.973C147.962 243.189 146.777 247.082 146.777 251.652V252.16V341.281C146.777 354.315 144.915 365.826 141.191 375.812C137.467 385.63 132.643 394.178 126.719 401.457C133.828 410.598 138.822 420.415 141.699 430.91C144.746 441.405 146.27 451.223 146.27 460.363V550.246C146.27 556.171 147.793 560.91 150.84 564.465C153.887 567.85 157.526 570.474 161.758 572.336C165.99 574.029 170.221 575.129 174.453 575.637C178.685 575.975 181.986 576.145 184.355 576.145H217.109V642.922H183.848C176.908 642.922 169.46 642.16 161.504 640.637C153.717 639.283 145.931 636.997 138.145 633.781C130.527 630.734 123.164 626.757 116.055 621.848C109.115 616.939 102.936 611.014 97.5195 604.074C92.2721 597.134 88.0404 589.178 84.8242 580.207C81.7773 571.236 80.2539 561.079 80.2539 549.738V460.871C80.2539 451.9 77.8841 445.214 73.1445 440.812C68.5742 436.411 62.1419 434.211 53.8477 434.211C49.1081 434.211 44.707 433.365 40.6445 431.672C36.582 429.81 33.0273 427.44 29.9805 424.562C27.1029 421.516 24.8177 417.961 23.125 413.898C21.4323 409.836 20.5859 405.52 20.5859 400.949C20.5859 396.379 21.4323 392.147 23.125 388.254C24.8177 384.191 27.1029 380.721 29.9805 377.844C33.0273 374.797 36.4974 372.427 40.3906 370.734C44.4531 368.872 48.7695 367.857 53.3398 367.688C62.4805 367.688 69.3359 365.487 73.9062 361.086C78.4766 356.516 80.7617 349.914 80.7617 341.281V251.652C80.7617 237.095 83.724 224.146 89.6484 212.805C95.5729 201.464 103.444 191.9 113.262 184.113C123.079 176.327 134.167 170.402 146.523 166.34C159.049 162.277 171.829 160.246 184.863 160.246H217.617V226.262ZM595.47 371.242C595.47 386.307 593.608 399.764 589.884 411.613C586.16 423.462 581.082 433.957 574.65 443.098C568.387 452.069 561.108 459.771 552.814 466.203C544.52 472.635 535.802 477.883 526.662 481.945C517.69 486.008 508.55 488.97 499.24 490.832C490.099 492.694 481.466 493.625 473.341 493.625H324.045V427.609H473.341C481.805 426.932 489.422 425.24 496.193 422.531C503.133 419.654 509.058 415.845 513.966 411.105C518.875 406.366 522.684 400.695 525.392 394.094C528.101 387.323 529.455 379.706 529.455 371.242V341.281C528.608 332.987 526.831 325.37 524.123 318.43C521.414 311.49 517.69 305.565 512.951 300.656C508.38 295.747 502.795 291.939 496.193 289.23C489.591 286.353 481.974 284.914 473.341 284.914H324.552C315.75 284.914 309.064 287.199 304.494 291.77C299.923 296.34 297.638 302.941 297.638 311.574V583H231.623V311.574C231.623 294.647 234.67 280.259 240.763 268.41C247.026 256.561 254.728 246.997 263.869 239.719C273.179 232.44 283.25 227.193 294.084 223.977C304.917 220.591 314.904 218.898 324.045 218.898H473.341C488.237 218.898 501.61 220.845 513.459 224.738C525.308 228.462 535.718 233.54 544.689 239.973C553.83 246.236 561.532 253.514 567.795 261.809C574.227 270.103 579.474 278.82 583.537 287.961C587.768 296.932 590.815 306.073 592.677 315.383C594.539 324.523 595.47 333.156 595.47 341.281V371.242ZM778.07 400.949C778.07 405.52 777.223 409.836 775.53 413.898C773.838 417.961 771.468 421.516 768.421 424.562C765.543 427.44 762.073 429.81 758.011 431.672C754.118 433.365 749.886 434.211 745.316 434.211C736.683 434.211 729.997 436.411 725.257 440.812C720.687 445.214 718.402 451.9 718.402 460.871L718.909 549.738C718.909 561.079 717.301 571.236 714.085 580.207C710.869 589.178 706.553 597.134 701.136 604.074C695.719 611.014 689.456 616.939 682.347 621.848C675.407 626.757 668.043 630.734 660.257 633.781C652.64 636.997 644.853 639.283 636.898 640.637C629.111 642.16 621.748 642.922 614.808 642.922H582.054L581.546 576.145H614.808C617.008 576.145 620.224 575.975 624.456 575.637C628.688 575.129 632.835 574.029 636.898 572.336C641.129 570.474 644.769 567.85 647.816 564.465C650.862 560.91 652.386 556.171 652.386 550.246V460.363C652.386 451.223 653.909 441.405 656.956 430.91C660.172 420.415 665.166 410.598 671.937 401.457C666.012 394.178 661.103 385.63 657.21 375.812C653.486 365.826 651.624 354.315 651.624 341.281V252.16V251.652C650.778 246.913 649.17 242.935 646.8 239.719C644.599 236.503 641.806 233.879 638.421 231.848C635.036 229.816 631.227 228.378 626.995 227.531C622.933 226.685 618.701 226.262 614.3 226.262H581.038V160.246H614.3C628.011 160.246 641.129 162.447 653.655 166.848C666.181 171.079 677.184 177.258 686.663 185.383C696.312 193.339 703.929 202.987 709.515 214.328C715.101 225.5 717.894 237.941 717.894 251.652C717.894 252.837 717.978 260.878 718.148 275.773C718.317 290.5 718.402 312.336 718.402 341.281C718.402 349.914 720.602 356.516 725.003 361.086C729.404 365.487 736.175 367.688 745.316 367.688C749.886 367.857 754.118 368.872 758.011 370.734C762.073 372.427 765.543 374.797 768.421 377.844C771.468 380.721 773.838 384.191 775.53 388.254C777.223 392.147 778.07 396.379 778.07 400.949Z" fill="#F4F4F4"/>
+</svg>
--- a/source/public/icon/icon_circle.svg
+++ b/source/public/icon/icon_circle.svg
@ -0,0 +1,6 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<circle cx="400" cy="400" r="400" fill="black"/>
+<path d="M217.617 226.262H184.863C180.632 226.262 176.23 226.77 171.66 227.785C167.259 228.632 163.197 230.07 159.473 232.102C155.749 234.133 152.702 236.757 150.332 239.973C147.962 243.189 146.777 247.082 146.777 251.652V252.16V341.281C146.777 354.315 144.915 365.826 141.191 375.812C137.467 385.63 132.643 394.178 126.719 401.457C133.828 410.598 138.822 420.415 141.699 430.91C144.746 441.405 146.27 451.223 146.27 460.363V550.246C146.27 556.171 147.793 560.91 150.84 564.465C153.887 567.85 157.526 570.474 161.758 572.336C165.99 574.029 170.221 575.129 174.453 575.637C178.685 575.975 181.986 576.145 184.355 576.145H217.109V642.922H183.848C176.908 642.922 169.46 642.16 161.504 640.637C153.717 639.283 145.931 636.997 138.145 633.781C130.527 630.734 123.164 626.757 116.055 621.848C109.115 616.939 102.936 611.014 97.5195 604.074C92.2721 597.134 88.0404 589.178 84.8242 580.207C81.7773 571.236 80.2539 561.079 80.2539 549.738V460.871C80.2539 451.9 77.8841 445.214 73.1445 440.812C68.5742 436.411 62.1419 434.211 53.8477 434.211C49.1081 434.211 44.707 433.365 40.6445 431.672C36.582 429.81 33.0273 427.44 29.9805 424.562C27.1029 421.516 24.8177 417.961 23.125 413.898C21.4323 409.836 20.5859 405.52 20.5859 400.949C20.5859 396.379 21.4323 392.147 23.125 388.254C24.8177 384.191 27.1029 380.721 29.9805 377.844C33.0273 374.797 36.4974 372.427 40.3906 370.734C44.4531 368.872 48.7695 367.857 53.3398 367.688C62.4805 367.688 69.3359 365.487 73.9062 361.086C78.4766 356.516 80.7617 349.914 80.7617 341.281V251.652C80.7617 237.095 83.724 224.146 89.6484 212.805C95.5729 201.464 103.444 191.9 113.262 184.113C123.079 176.327 134.167 170.402 146.523 166.34C159.049 162.277 171.829 160.246 184.863 160.246H217.617V226.262ZM595.47 371.242C595.47 386.307 593.608 399.764 589.884 411.613C586.16 423.462 581.082 433.957 574.65 443.098C568.387 452.069 561.108 459.771 552.814 466.203C544.52 472.635 535.802 477.883 526.662 481.945C517.69 486.008 508.55 488.97 499.24 490.832C490.099 492.694 481.466 493.625 473.341 493.625H324.045V427.609H473.341C481.805 426.932 489.422 425.24 496.193 422.531C503.133 419.654 509.058 415.845 513.966 411.105C518.875 406.366 522.684 400.695 525.392 394.094C528.101 387.323 529.455 379.706 529.455 371.242V341.281C528.608 332.987 526.831 325.37 524.123 318.43C521.414 311.49 517.69 305.565 512.951 300.656C508.38 295.747 502.795 291.939 496.193 289.23C489.591 286.353 481.974 284.914 473.341 284.914H324.552C315.75 284.914 309.064 287.199 304.494 291.77C299.923 296.34 297.638 302.941 297.638 311.574V583H231.623V311.574C231.623 294.647 234.67 280.259 240.763 268.41C247.026 256.561 254.728 246.997 263.869 239.719C273.179 232.44 283.25 227.193 294.084 223.977C304.917 220.591 314.904 218.898 324.045 218.898H473.341C488.237 218.898 501.61 220.845 513.459 224.738C525.308 228.462 535.718 233.54 544.689 239.973C553.83 246.236 561.532 253.514 567.795 261.809C574.227 270.103 579.474 278.82 583.537 287.961C587.768 296.932 590.815 306.073 592.677 315.383C594.539 324.523 595.47 333.156 595.47 341.281V371.242ZM778.07 400.949C778.07 405.52 777.223 409.836 775.53 413.898C773.838 417.961 771.468 421.516 768.421 424.562C765.543 427.44 762.073 429.81 758.011 431.672C754.118 433.365 749.886 434.211 745.316 434.211C736.683 434.211 729.997 436.411 725.257 440.812C720.687 445.214 718.402 451.9 718.402 460.871L718.909 549.738C718.909 561.079 717.301 571.236 714.085 580.207C710.869 589.178 706.553 597.134 701.136 604.074C695.719 611.014 689.456 616.939 682.347 621.848C675.407 626.757 668.043 630.734 660.257 633.781C652.64 636.997 644.853 639.283 636.898 640.637C629.111 642.16 621.748 642.922 614.808 642.922H582.054L581.546 576.145H614.808C617.008 576.145 620.224 575.975 624.456 575.637C628.688 575.129 632.835 574.029 636.898 572.336C641.129 570.474 644.769 567.85 647.816 564.465C650.862 560.91 652.386 556.171 652.386 550.246V460.363C652.386 451.223 653.909 441.405 656.956 430.91C660.172 420.415 665.166 410.598 671.937 401.457C666.012 394.178 661.103 385.63 657.21 375.812C653.486 365.826 651.624 354.315 651.624 341.281V252.16V251.652C650.778 246.913 649.17 242.935 646.8 239.719C644.599 236.503 641.806 233.879 638.421 231.848C635.036 229.816 631.227 228.378 626.995 227.531C622.933 226.685 618.701 226.262 614.3 226.262H581.038V160.246H614.3C628.011 160.246 641.129 162.447 653.655 166.848C666.181 171.079 677.184 177.258 686.663 185.383C696.312 193.339 703.929 202.987 709.515 214.328C715.101 225.5 717.894 237.941 717.894 251.652C717.894 252.837 717.978 260.878 718.148 275.773C718.317 290.5 718.402 312.336 718.402 341.281C718.402 349.914 720.602 356.516 725.003 361.086C729.404 365.487 736.175 367.688 745.316 367.688C749.886 367.857 754.118 368.872 758.011 370.734C762.073 372.427 765.543 374.797 768.421 377.844C771.468 380.721 773.838 384.191 775.53 388.254C777.223 392.147 778.07 396.379 778.07 400.949Z" fill="#F4F4F4"/>
+</g>
+</svg>
--- a/source/public/icon/icon_no_bg.svg
+++ b/source/public/icon/icon_no_bg.svg
@ -0,0 +1,3 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M217.617 226.262H184.863C180.632 226.262 176.23 226.77 171.66 227.785C167.259 228.632 163.197 230.07 159.473 232.102C155.749 234.133 152.702 236.757 150.332 239.973C147.962 243.189 146.777 247.082 146.777 251.652V252.16V341.281C146.777 354.315 144.915 365.826 141.191 375.812C137.467 385.63 132.643 394.178 126.719 401.457C133.828 410.598 138.822 420.415 141.699 430.91C144.746 441.405 146.27 451.223 146.27 460.363V550.246C146.27 556.171 147.793 560.91 150.84 564.465C153.887 567.85 157.526 570.474 161.758 572.336C165.99 574.029 170.221 575.129 174.453 575.637C178.685 575.975 181.986 576.145 184.355 576.145H217.109V642.922H183.848C176.908 642.922 169.46 642.16 161.504 640.637C153.717 639.283 145.931 636.997 138.145 633.781C130.527 630.734 123.164 626.757 116.055 621.848C109.115 616.939 102.936 611.014 97.5195 604.074C92.2721 597.134 88.0404 589.178 84.8242 580.207C81.7773 571.236 80.2539 561.079 80.2539 549.738V460.871C80.2539 451.9 77.8841 445.214 73.1445 440.812C68.5742 436.411 62.1419 434.211 53.8477 434.211C49.1081 434.211 44.707 433.365 40.6445 431.672C36.582 429.81 33.0273 427.44 29.9805 424.562C27.1029 421.516 24.8177 417.961 23.125 413.898C21.4323 409.836 20.5859 405.52 20.5859 400.949C20.5859 396.379 21.4323 392.147 23.125 388.254C24.8177 384.191 27.1029 380.721 29.9805 377.844C33.0273 374.797 36.4974 372.427 40.3906 370.734C44.4531 368.872 48.7695 367.857 53.3398 367.688C62.4805 367.688 69.3359 365.487 73.9062 361.086C78.4766 356.516 80.7617 349.914 80.7617 341.281V251.652C80.7617 237.095 83.724 224.146 89.6484 212.805C95.5729 201.464 103.444 191.9 113.262 184.113C123.079 176.327 134.167 170.402 146.523 166.34C159.049 162.277 171.829 160.246 184.863 160.246H217.617V226.262ZM595.47 371.242C595.47 386.307 593.608 399.764 589.884 411.613C586.16 423.462 581.082 433.957 574.65 443.098C568.387 452.069 561.108 459.771 552.814 466.203C544.52 472.635 535.802 477.883 526.662 481.945C517.69 486.008 508.55 488.97 499.24 490.832C490.099 492.694 481.466 493.625 473.341 493.625H324.045V427.609H473.341C481.805 426.932 489.422 425.24 496.193 422.531C503.133 419.654 509.058 415.845 513.966 411.105C518.875 406.366 522.684 400.695 525.392 394.094C528.101 387.323 529.455 379.706 529.455 371.242V341.281C528.608 332.987 526.831 325.37 524.123 318.43C521.414 311.49 517.69 305.565 512.951 300.656C508.38 295.747 502.795 291.939 496.193 289.23C489.591 286.353 481.974 284.914 473.341 284.914H324.552C315.75 284.914 309.064 287.199 304.494 291.77C299.923 296.34 297.638 302.941 297.638 311.574V583H231.623V311.574C231.623 294.647 234.67 280.259 240.763 268.41C247.026 256.561 254.728 246.997 263.869 239.719C273.179 232.44 283.25 227.193 294.084 223.977C304.917 220.591 314.904 218.898 324.045 218.898H473.341C488.237 218.898 501.61 220.845 513.459 224.738C525.308 228.462 535.718 233.54 544.689 239.973C553.83 246.236 561.532 253.514 567.795 261.809C574.227 270.103 579.474 278.82 583.537 287.961C587.768 296.932 590.815 306.073 592.677 315.383C594.539 324.523 595.47 333.156 595.47 341.281V371.242ZM778.07 400.949C778.07 405.52 777.223 409.836 775.53 413.898C773.838 417.961 771.468 421.516 768.421 424.562C765.543 427.44 762.073 429.81 758.011 431.672C754.118 433.365 749.886 434.211 745.316 434.211C736.683 434.211 729.997 436.411 725.257 440.812C720.687 445.214 718.402 451.9 718.402 460.871L718.909 549.738C718.909 561.079 717.301 571.236 714.085 580.207C710.869 589.178 706.553 597.134 701.136 604.074C695.719 611.014 689.456 616.939 682.347 621.848C675.407 626.757 668.043 630.734 660.257 633.781C652.64 636.997 644.853 639.283 636.898 640.637C629.111 642.16 621.748 642.922 614.808 642.922H582.054L581.546 576.145H614.808C617.008 576.145 620.224 575.975 624.456 575.637C628.688 575.129 632.835 574.029 636.898 572.336C641.129 570.474 644.769 567.85 647.816 564.465C650.862 560.91 652.386 556.171 652.386 550.246V460.363C652.386 451.223 653.909 441.405 656.956 430.91C660.172 420.415 665.166 410.598 671.937 401.457C666.012 394.178 661.103 385.63 657.21 375.812C653.486 365.826 651.624 354.315 651.624 341.281V252.16V251.652C650.778 246.913 649.17 242.935 646.8 239.719C644.599 236.503 641.806 233.879 638.421 231.848C635.036 229.816 631.227 228.378 626.995 227.531C622.933 226.685 618.701 226.262 614.3 226.262H581.038V160.246H614.3C628.011 160.246 641.129 162.447 653.655 166.848C666.181 171.079 677.184 177.258 686.663 185.383C696.312 193.339 703.929 202.987 709.515 214.328C715.101 225.5 717.894 237.941 717.894 251.652C717.894 252.837 717.978 260.878 718.148 275.773C718.317 290.5 718.402 312.336 718.402 341.281C718.402 349.914 720.602 356.516 725.003 361.086C729.404 365.487 736.175 367.688 745.316 367.688C749.886 367.857 754.118 368.872 758.011 370.734C762.073 372.427 765.543 374.797 768.421 377.844C771.468 380.721 773.838 384.191 775.53 388.254C777.223 392.147 778.07 396.379 778.07 400.949Z" fill="#F4F4F4" />
+</svg>
--- a/source/public/icon/icon_outline.svg
+++ b/source/public/icon/icon_outline.svg
@ -0,0 +1,5 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="500" height="500" fill="black"/>
+<path d="M145.094 150.189H126.197C123.756 150.189 121.217 150.482 118.58 151.068C116.041 151.557 113.697 152.387 111.549 153.559C109.4 154.73 107.643 156.244 106.275 158.1C104.908 159.955 104.225 162.201 104.225 164.838V165.131V216.547C104.225 224.066 103.15 230.707 101.002 236.469C98.8535 242.133 96.0703 247.064 92.6523 251.264C96.7539 256.537 99.6348 262.201 101.295 268.256C103.053 274.311 103.932 279.975 103.932 285.248V337.104C103.932 340.521 104.811 343.256 106.568 345.307C108.326 347.26 110.426 348.773 112.867 349.848C115.309 350.824 117.75 351.459 120.191 351.752C122.633 351.947 124.537 352.045 125.904 352.045H144.801V390.57H125.611C121.607 390.57 117.311 390.131 112.721 389.252C108.229 388.471 103.736 387.152 99.2441 385.297C94.8496 383.539 90.6016 381.244 86.5 378.412C82.4961 375.58 78.9316 372.162 75.8066 368.158C72.7793 364.154 70.3379 359.564 68.4824 354.389C66.7246 349.213 65.8457 343.354 65.8457 336.811V285.541C65.8457 280.365 64.4785 276.508 61.7441 273.969C59.1074 271.43 55.3965 270.16 50.6113 270.16C47.877 270.16 45.3379 269.672 42.9941 268.695C40.6504 267.621 38.5996 266.254 36.8418 264.594C35.1816 262.836 33.8633 260.785 32.8867 258.441C31.9102 256.098 31.4219 253.607 31.4219 250.971C31.4219 248.334 31.9102 245.893 32.8867 243.646C33.8633 241.303 35.1816 239.301 36.8418 237.641C38.5996 235.883 40.6016 234.516 42.8477 233.539C45.1914 232.465 47.6816 231.879 50.3184 231.781C55.5918 231.781 59.5469 230.512 62.1836 227.973C64.8203 225.336 66.1387 221.527 66.1387 216.547V164.838C66.1387 156.439 67.8477 148.969 71.2656 142.426C74.6836 135.883 79.2246 130.365 84.8887 125.873C90.5527 121.381 96.9492 117.963 104.078 115.619C111.305 113.275 118.678 112.104 126.197 112.104H145.094V150.189ZM363.086 233.832C363.086 242.523 362.012 250.287 359.863 257.123C357.715 263.959 354.785 270.014 351.074 275.287C347.461 280.463 343.262 284.906 338.477 288.617C333.691 292.328 328.662 295.355 323.389 297.699C318.213 300.043 312.939 301.752 307.568 302.826C302.295 303.9 297.314 304.438 292.627 304.438H206.494V266.352H292.627C297.51 265.961 301.904 264.984 305.811 263.422C309.814 261.762 313.232 259.564 316.064 256.83C318.896 254.096 321.094 250.824 322.656 247.016C324.219 243.109 325 238.715 325 233.832V216.547C324.512 211.762 323.486 207.367 321.924 203.363C320.361 199.359 318.213 195.941 315.479 193.109C312.842 190.277 309.619 188.08 305.811 186.518C302.002 184.857 297.607 184.027 292.627 184.027H206.787C201.709 184.027 197.852 185.346 195.215 187.982C192.578 190.619 191.26 194.428 191.26 199.408V356H153.174V199.408C153.174 189.643 154.932 181.342 158.447 174.506C162.061 167.67 166.504 162.152 171.777 157.953C177.148 153.754 182.959 150.727 189.209 148.871C195.459 146.918 201.221 145.941 206.494 145.941H292.627C301.221 145.941 308.936 147.064 315.771 149.311C322.607 151.459 328.613 154.389 333.789 158.1C339.062 161.713 343.506 165.912 347.119 170.697C350.83 175.482 353.857 180.512 356.201 185.785C358.643 190.961 360.4 196.234 361.475 201.605C362.549 206.879 363.086 211.859 363.086 216.547V233.832ZM468.432 250.971C468.432 253.607 467.943 256.098 466.967 258.441C465.99 260.785 464.623 262.836 462.865 264.594C461.205 266.254 459.203 267.621 456.859 268.695C454.613 269.672 452.172 270.16 449.535 270.16C444.555 270.16 440.697 271.43 437.963 273.969C435.326 276.508 434.008 280.365 434.008 285.541L434.301 336.811C434.301 343.354 433.373 349.213 431.518 354.389C429.662 359.564 427.172 364.154 424.047 368.158C420.922 372.162 417.309 375.58 413.207 378.412C409.203 381.244 404.955 383.539 400.463 385.297C396.068 387.152 391.576 388.471 386.986 389.252C382.494 390.131 378.246 390.57 374.242 390.57H355.346L355.053 352.045H374.242C375.512 352.045 377.367 351.947 379.809 351.752C382.25 351.459 384.643 350.824 386.986 349.848C389.428 348.773 391.527 347.26 393.285 345.307C395.043 343.256 395.922 340.521 395.922 337.104V285.248C395.922 279.975 396.801 274.311 398.559 268.256C400.414 262.201 403.295 256.537 407.201 251.264C403.783 247.064 400.951 242.133 398.705 236.469C396.557 230.707 395.482 224.066 395.482 216.547V165.131V164.838C394.994 162.104 394.066 159.809 392.699 157.953C391.43 156.098 389.818 154.584 387.865 153.412C385.912 152.24 383.715 151.41 381.273 150.922C378.93 150.434 376.488 150.189 373.949 150.189H354.76V112.104H373.949C381.859 112.104 389.428 113.373 396.654 115.912C403.881 118.354 410.229 121.918 415.697 126.605C421.264 131.195 425.658 136.762 428.881 143.305C432.104 149.75 433.715 156.928 433.715 164.838C433.715 165.521 433.764 170.16 433.861 178.754C433.959 187.25 434.008 199.848 434.008 216.547C434.008 221.527 435.277 225.336 437.816 227.973C440.355 230.512 444.262 231.781 449.535 231.781C452.172 231.879 454.613 232.465 456.859 233.539C459.203 234.516 461.205 235.883 462.865 237.641C464.623 239.301 465.99 241.303 466.967 243.646C467.943 245.893 468.432 248.334 468.432 250.971Z" fill="#F4F4F4"/>
+<circle cx="250" cy="250" r="240" stroke="#F4F4F4" stroke-width="20"/>
+</svg>
--- a/source/public/img/LP_lama.gif
+++ b/source/public/img/LP_lama.gif
--- a/source/public/img/avatar.png
+++ b/source/public/img/avatar.png
--- a/source/public/img/d111.png
+++ b/source/public/img/d111.png
--- a/source/public/img/favicon.svg
+++ b/source/public/img/favicon.svg
@ -0,0 +1,6 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256" viewbox="0 0 949 256">
+    <path fill="#2366d1" d="M110.85125168440814 128L221.70250336881628 192L110.85125168440814 256L0 192Z"/>
+    <path fill="#609dff" d="M110.85125168440814 64L221.70250336881628 128L110.85125168440814 192L0 128Z"/>
+    <path fill="#a4c7ff" d="M110.85125168440814 0L221.70250336881628 64L110.85125168440814 128L0 64Z"/>
+</svg>
--- a/source/public/img/icon.png
+++ b/source/public/img/icon.png
--- a/source/public/img/icon.svg
+++ b/source/public/img/icon.svg
@ -0,0 +1,4 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="800" height="800" fill="black"/>
+<path d="M217.617 226.262H184.863C180.632 226.262 176.23 226.77 171.66 227.785C167.259 228.632 163.197 230.07 159.473 232.102C155.749 234.133 152.702 236.757 150.332 239.973C147.962 243.189 146.777 247.082 146.777 251.652V252.16V341.281C146.777 354.315 144.915 365.826 141.191 375.812C137.467 385.63 132.643 394.178 126.719 401.457C133.828 410.598 138.822 420.415 141.699 430.91C144.746 441.405 146.27 451.223 146.27 460.363V550.246C146.27 556.171 147.793 560.91 150.84 564.465C153.887 567.85 157.526 570.474 161.758 572.336C165.99 574.029 170.221 575.129 174.453 575.637C178.685 575.975 181.986 576.145 184.355 576.145H217.109V642.922H183.848C176.908 642.922 169.46 642.16 161.504 640.637C153.717 639.283 145.931 636.997 138.145 633.781C130.527 630.734 123.164 626.757 116.055 621.848C109.115 616.939 102.936 611.014 97.5195 604.074C92.2721 597.134 88.0404 589.178 84.8242 580.207C81.7773 571.236 80.2539 561.079 80.2539 549.738V460.871C80.2539 451.9 77.8841 445.214 73.1445 440.812C68.5742 436.411 62.1419 434.211 53.8477 434.211C49.1081 434.211 44.707 433.365 40.6445 431.672C36.582 429.81 33.0273 427.44 29.9805 424.562C27.1029 421.516 24.8177 417.961 23.125 413.898C21.4323 409.836 20.5859 405.52 20.5859 400.949C20.5859 396.379 21.4323 392.147 23.125 388.254C24.8177 384.191 27.1029 380.721 29.9805 377.844C33.0273 374.797 36.4974 372.427 40.3906 370.734C44.4531 368.872 48.7695 367.857 53.3398 367.688C62.4805 367.688 69.3359 365.487 73.9062 361.086C78.4766 356.516 80.7617 349.914 80.7617 341.281V251.652C80.7617 237.095 83.724 224.146 89.6484 212.805C95.5729 201.464 103.444 191.9 113.262 184.113C123.079 176.327 134.167 170.402 146.523 166.34C159.049 162.277 171.829 160.246 184.863 160.246H217.617V226.262ZM595.47 371.242C595.47 386.307 593.608 399.764 589.884 411.613C586.16 423.462 581.082 433.957 574.65 443.098C568.387 452.069 561.108 459.771 552.814 466.203C544.52 472.635 535.802 477.883 526.662 481.945C517.69 486.008 508.55 488.97 499.24 490.832C490.099 492.694 481.466 493.625 473.341 493.625H324.045V427.609H473.341C481.805 426.932 489.422 425.24 496.193 422.531C503.133 419.654 509.058 415.845 513.966 411.105C518.875 406.366 522.684 400.695 525.392 394.094C528.101 387.323 529.455 379.706 529.455 371.242V341.281C528.608 332.987 526.831 325.37 524.123 318.43C521.414 311.49 517.69 305.565 512.951 300.656C508.38 295.747 502.795 291.939 496.193 289.23C489.591 286.353 481.974 284.914 473.341 284.914H324.552C315.75 284.914 309.064 287.199 304.494 291.77C299.923 296.34 297.638 302.941 297.638 311.574V583H231.623V311.574C231.623 294.647 234.67 280.259 240.763 268.41C247.026 256.561 254.728 246.997 263.869 239.719C273.179 232.44 283.25 227.193 294.084 223.977C304.917 220.591 314.904 218.898 324.045 218.898H473.341C488.237 218.898 501.61 220.845 513.459 224.738C525.308 228.462 535.718 233.54 544.689 239.973C553.83 246.236 561.532 253.514 567.795 261.809C574.227 270.103 579.474 278.82 583.537 287.961C587.768 296.932 590.815 306.073 592.677 315.383C594.539 324.523 595.47 333.156 595.47 341.281V371.242ZM778.07 400.949C778.07 405.52 777.223 409.836 775.53 413.898C773.838 417.961 771.468 421.516 768.421 424.562C765.543 427.44 762.073 429.81 758.011 431.672C754.118 433.365 749.886 434.211 745.316 434.211C736.683 434.211 729.997 436.411 725.257 440.812C720.687 445.214 718.402 451.9 718.402 460.871L718.909 549.738C718.909 561.079 717.301 571.236 714.085 580.207C710.869 589.178 706.553 597.134 701.136 604.074C695.719 611.014 689.456 616.939 682.347 621.848C675.407 626.757 668.043 630.734 660.257 633.781C652.64 636.997 644.853 639.283 636.898 640.637C629.111 642.16 621.748 642.922 614.808 642.922H582.054L581.546 576.145H614.808C617.008 576.145 620.224 575.975 624.456 575.637C628.688 575.129 632.835 574.029 636.898 572.336C641.129 570.474 644.769 567.85 647.816 564.465C650.862 560.91 652.386 556.171 652.386 550.246V460.363C652.386 451.223 653.909 441.405 656.956 430.91C660.172 420.415 665.166 410.598 671.937 401.457C666.012 394.178 661.103 385.63 657.21 375.812C653.486 365.826 651.624 354.315 651.624 341.281V252.16V251.652C650.778 246.913 649.17 242.935 646.8 239.719C644.599 236.503 641.806 233.879 638.421 231.848C635.036 229.816 631.227 228.378 626.995 227.531C622.933 226.685 618.701 226.262 614.3 226.262H581.038V160.246H614.3C628.011 160.246 641.129 162.447 653.655 166.848C666.181 171.079 677.184 177.258 686.663 185.383C696.312 193.339 703.929 202.987 709.515 214.328C715.101 225.5 717.894 237.941 717.894 251.652C717.894 252.837 717.978 260.878 718.148 275.773C718.317 290.5 718.402 312.336 718.402 341.281C718.402 349.914 720.602 356.516 725.003 361.086C729.404 365.487 736.175 367.688 745.316 367.688C749.886 367.857 754.118 368.872 758.011 370.734C762.073 372.427 765.543 374.797 768.421 377.844C771.468 380.721 773.838 384.191 775.53 388.254C777.223 392.147 778.07 396.379 778.07 400.949Z" fill="#F4F4F4"/>
+</svg>
--- a/source/public/img/icon_circle.png
+++ b/source/public/img/icon_circle.png
--- a/source/public/img/icon_circle.svg
+++ b/source/public/img/icon_circle.svg
@ -0,0 +1,4 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="400" cy="400" r="400" fill="black"/>
+<path d="M217.617 226.262H184.863C180.632 226.262 176.23 226.77 171.66 227.785C167.259 228.632 163.197 230.07 159.473 232.102C155.749 234.133 152.702 236.757 150.332 239.973C147.962 243.189 146.777 247.082 146.777 251.652V252.16V341.281C146.777 354.315 144.915 365.826 141.191 375.812C137.467 385.63 132.643 394.178 126.719 401.457C133.828 410.598 138.822 420.415 141.699 430.91C144.746 441.405 146.27 451.223 146.27 460.363V550.246C146.27 556.171 147.793 560.91 150.84 564.465C153.887 567.85 157.526 570.474 161.758 572.336C165.99 574.029 170.221 575.129 174.453 575.637C178.685 575.975 181.986 576.145 184.355 576.145H217.109V642.922H183.848C176.908 642.922 169.46 642.16 161.504 640.637C153.717 639.283 145.931 636.997 138.145 633.781C130.527 630.734 123.164 626.757 116.055 621.848C109.115 616.939 102.936 611.014 97.5195 604.074C92.2721 597.134 88.0404 589.178 84.8242 580.207C81.7773 571.236 80.2539 561.079 80.2539 549.738V460.871C80.2539 451.9 77.8841 445.214 73.1445 440.812C68.5742 436.411 62.1419 434.211 53.8477 434.211C49.1081 434.211 44.707 433.365 40.6445 431.672C36.582 429.81 33.0273 427.44 29.9805 424.562C27.1029 421.516 24.8177 417.961 23.125 413.898C21.4323 409.836 20.5859 405.52 20.5859 400.949C20.5859 396.379 21.4323 392.147 23.125 388.254C24.8177 384.191 27.1029 380.721 29.9805 377.844C33.0273 374.797 36.4974 372.427 40.3906 370.734C44.4531 368.872 48.7695 367.857 53.3398 367.688C62.4805 367.688 69.3359 365.487 73.9062 361.086C78.4766 356.516 80.7617 349.914 80.7617 341.281V251.652C80.7617 237.095 83.724 224.146 89.6484 212.805C95.5729 201.464 103.444 191.9 113.262 184.113C123.079 176.327 134.167 170.402 146.523 166.34C159.049 162.277 171.829 160.246 184.863 160.246H217.617V226.262ZM595.47 371.242C595.47 386.307 593.608 399.764 589.884 411.613C586.16 423.462 581.082 433.957 574.65 443.098C568.387 452.069 561.108 459.771 552.814 466.203C544.52 472.635 535.802 477.883 526.662 481.945C517.69 486.008 508.55 488.97 499.24 490.832C490.099 492.694 481.466 493.625 473.341 493.625H324.045V427.609H473.341C481.805 426.932 489.422 425.24 496.193 422.531C503.133 419.654 509.058 415.845 513.966 411.105C518.875 406.366 522.684 400.695 525.392 394.094C528.101 387.323 529.455 379.706 529.455 371.242V341.281C528.608 332.987 526.831 325.37 524.123 318.43C521.414 311.49 517.69 305.565 512.951 300.656C508.38 295.747 502.795 291.939 496.193 289.23C489.591 286.353 481.974 284.914 473.341 284.914H324.552C315.75 284.914 309.064 287.199 304.494 291.77C299.923 296.34 297.638 302.941 297.638 311.574V583H231.623V311.574C231.623 294.647 234.67 280.259 240.763 268.41C247.026 256.561 254.728 246.997 263.869 239.719C273.179 232.44 283.25 227.193 294.084 223.977C304.917 220.591 314.904 218.898 324.045 218.898H473.341C488.237 218.898 501.61 220.845 513.459 224.738C525.308 228.462 535.718 233.54 544.689 239.973C553.83 246.236 561.532 253.514 567.795 261.809C574.227 270.103 579.474 278.82 583.537 287.961C587.768 296.932 590.815 306.073 592.677 315.383C594.539 324.523 595.47 333.156 595.47 341.281V371.242ZM778.07 400.949C778.07 405.52 777.223 409.836 775.53 413.898C773.838 417.961 771.468 421.516 768.421 424.562C765.543 427.44 762.073 429.81 758.011 431.672C754.118 433.365 749.886 434.211 745.316 434.211C736.683 434.211 729.997 436.411 725.257 440.812C720.687 445.214 718.402 451.9 718.402 460.871L718.909 549.738C718.909 561.079 717.301 571.236 714.085 580.207C710.869 589.178 706.553 597.134 701.136 604.074C695.719 611.014 689.456 616.939 682.347 621.848C675.407 626.757 668.043 630.734 660.257 633.781C652.64 636.997 644.853 639.283 636.898 640.637C629.111 642.16 621.748 642.922 614.808 642.922H582.054L581.546 576.145H614.808C617.008 576.145 620.224 575.975 624.456 575.637C628.688 575.129 632.835 574.029 636.898 572.336C641.129 570.474 644.769 567.85 647.816 564.465C650.862 560.91 652.386 556.171 652.386 550.246V460.363C652.386 451.223 653.909 441.405 656.956 430.91C660.172 420.415 665.166 410.598 671.937 401.457C666.012 394.178 661.103 385.63 657.21 375.812C653.486 365.826 651.624 354.315 651.624 341.281V252.16V251.652C650.778 246.913 649.17 242.935 646.8 239.719C644.599 236.503 641.806 233.879 638.421 231.848C635.036 229.816 631.227 228.378 626.995 227.531C622.933 226.685 618.701 226.262 614.3 226.262H581.038V160.246H614.3C628.011 160.246 641.129 162.447 653.655 166.848C666.181 171.079 677.184 177.258 686.663 185.383C696.312 193.339 703.929 202.987 709.515 214.328C715.101 225.5 717.894 237.941 717.894 251.652C717.894 252.837 717.978 260.878 718.148 275.773C718.317 290.5 718.402 312.336 718.402 341.281C718.402 349.914 720.602 356.516 725.003 361.086C729.404 365.487 736.175 367.688 745.316 367.688C749.886 367.857 754.118 368.872 758.011 370.734C762.073 372.427 765.543 374.797 768.421 377.844C771.468 380.721 773.838 384.191 775.53 388.254C777.223 392.147 778.07 396.379 778.07 400.949Z" fill="#F4F4F4"/>
+</svg>
--- a/source/public/img/icon_nobg.svg
+++ b/source/public/img/icon_nobg.svg
@ -0,0 +1,3 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M217.617 226.262H184.863C180.632 226.262 176.23 226.77 171.66 227.785C167.259 228.632 163.197 230.07 159.473 232.102C155.749 234.133 152.702 236.757 150.332 239.973C147.962 243.189 146.777 247.082 146.777 251.652V252.16V341.281C146.777 354.315 144.915 365.826 141.191 375.812C137.467 385.63 132.643 394.178 126.719 401.457C133.828 410.598 138.822 420.415 141.699 430.91C144.746 441.405 146.27 451.223 146.27 460.363V550.246C146.27 556.171 147.793 560.91 150.84 564.465C153.887 567.85 157.526 570.474 161.758 572.336C165.99 574.029 170.221 575.129 174.453 575.637C178.685 575.975 181.986 576.145 184.355 576.145H217.109V642.922H183.848C176.908 642.922 169.46 642.16 161.504 640.637C153.717 639.283 145.931 636.997 138.145 633.781C130.527 630.734 123.164 626.757 116.055 621.848C109.115 616.939 102.936 611.014 97.5195 604.074C92.2721 597.134 88.0404 589.178 84.8242 580.207C81.7773 571.236 80.2539 561.079 80.2539 549.738V460.871C80.2539 451.9 77.8841 445.214 73.1445 440.812C68.5742 436.411 62.1419 434.211 53.8477 434.211C49.1081 434.211 44.707 433.365 40.6445 431.672C36.582 429.81 33.0273 427.44 29.9805 424.562C27.1029 421.516 24.8177 417.961 23.125 413.898C21.4323 409.836 20.5859 405.52 20.5859 400.949C20.5859 396.379 21.4323 392.147 23.125 388.254C24.8177 384.191 27.1029 380.721 29.9805 377.844C33.0273 374.797 36.4974 372.427 40.3906 370.734C44.4531 368.872 48.7695 367.857 53.3398 367.688C62.4805 367.688 69.3359 365.487 73.9062 361.086C78.4766 356.516 80.7617 349.914 80.7617 341.281V251.652C80.7617 237.095 83.724 224.146 89.6484 212.805C95.5729 201.464 103.444 191.9 113.262 184.113C123.079 176.327 134.167 170.402 146.523 166.34C159.049 162.277 171.829 160.246 184.863 160.246H217.617V226.262ZM595.47 371.242C595.47 386.307 593.608 399.764 589.884 411.613C586.16 423.462 581.082 433.957 574.65 443.098C568.387 452.069 561.108 459.771 552.814 466.203C544.52 472.635 535.802 477.883 526.662 481.945C517.69 486.008 508.55 488.97 499.24 490.832C490.099 492.694 481.466 493.625 473.341 493.625H324.045V427.609H473.341C481.805 426.932 489.422 425.24 496.193 422.531C503.133 419.654 509.058 415.845 513.966 411.105C518.875 406.366 522.684 400.695 525.392 394.094C528.101 387.323 529.455 379.706 529.455 371.242V341.281C528.608 332.987 526.831 325.37 524.123 318.43C521.414 311.49 517.69 305.565 512.951 300.656C508.38 295.747 502.795 291.939 496.193 289.23C489.591 286.353 481.974 284.914 473.341 284.914H324.552C315.75 284.914 309.064 287.199 304.494 291.77C299.923 296.34 297.638 302.941 297.638 311.574V583H231.623V311.574C231.623 294.647 234.67 280.259 240.763 268.41C247.026 256.561 254.728 246.997 263.869 239.719C273.179 232.44 283.25 227.193 294.084 223.977C304.917 220.591 314.904 218.898 324.045 218.898H473.341C488.237 218.898 501.61 220.845 513.459 224.738C525.308 228.462 535.718 233.54 544.689 239.973C553.83 246.236 561.532 253.514 567.795 261.809C574.227 270.103 579.474 278.82 583.537 287.961C587.768 296.932 590.815 306.073 592.677 315.383C594.539 324.523 595.47 333.156 595.47 341.281V371.242ZM778.07 400.949C778.07 405.52 777.223 409.836 775.53 413.898C773.838 417.961 771.468 421.516 768.421 424.562C765.543 427.44 762.073 429.81 758.011 431.672C754.118 433.365 749.886 434.211 745.316 434.211C736.683 434.211 729.997 436.411 725.257 440.812C720.687 445.214 718.402 451.9 718.402 460.871L718.909 549.738C718.909 561.079 717.301 571.236 714.085 580.207C710.869 589.178 706.553 597.134 701.136 604.074C695.719 611.014 689.456 616.939 682.347 621.848C675.407 626.757 668.043 630.734 660.257 633.781C652.64 636.997 644.853 639.283 636.898 640.637C629.111 642.16 621.748 642.922 614.808 642.922H582.054L581.546 576.145H614.808C617.008 576.145 620.224 575.975 624.456 575.637C628.688 575.129 632.835 574.029 636.898 572.336C641.129 570.474 644.769 567.85 647.816 564.465C650.862 560.91 652.386 556.171 652.386 550.246V460.363C652.386 451.223 653.909 441.405 656.956 430.91C660.172 420.415 665.166 410.598 671.937 401.457C666.012 394.178 661.103 385.63 657.21 375.812C653.486 365.826 651.624 354.315 651.624 341.281V252.16V251.652C650.778 246.913 649.17 242.935 646.8 239.719C644.599 236.503 641.806 233.879 638.421 231.848C635.036 229.816 631.227 228.378 626.995 227.531C622.933 226.685 618.701 226.262 614.3 226.262H581.038V160.246H614.3C628.011 160.246 641.129 162.447 653.655 166.848C666.181 171.079 677.184 177.258 686.663 185.383C696.312 193.339 703.929 202.987 709.515 214.328C715.101 225.5 717.894 237.941 717.894 251.652C717.894 252.837 717.978 260.878 718.148 275.773C718.317 290.5 718.402 312.336 718.402 341.281C718.402 349.914 720.602 356.516 725.003 361.086C729.404 365.487 736.175 367.688 745.316 367.688C749.886 367.857 754.118 368.872 758.011 370.734C762.073 372.427 765.543 374.797 768.421 377.844C771.468 380.721 773.838 384.191 775.53 388.254C777.223 392.147 778.07 396.379 778.07 400.949Z" fill="#F4F4F4"/>
+</svg>
--- a/source/public/img/logo.svg
+++ b/source/public/img/logo.svg
--- a/source/public/img/og_image.png
+++ b/source/public/img/og_image.png
--- a/source/public/img/osu.png
+++ b/source/public/img/osu.png
--- a/source/public/img/osu.svg
+++ b/source/public/img/osu.svg
@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 350 350" style="enable-background:new 0 0 350 350;" xml:space="preserve">
+
+<style type="text/css">
+	.st0{fill:#FF66AA;}
+	.st1{opacity:0.15;}
+	.st2{clip-path:url(#SVGID_2_);}
+	.st3{fill:#F1F1F2;}
+	.st4{fill:#231F20;}
+	.st5{fill:#808184;}
+	.st6{fill:#929497;}
+	.st7{fill:#636466;}
+	.st8{fill:#59595C;}
+	.st9{fill:#A7A8AB;}
+	.st10{fill:#6D6E70;}
+	.st11{fill:#221F1F;}
+	.st12{fill:#404041;}
+	.st13{fill:#58595B;}
+	.st14{fill:#BBBDBF;}
+	.st15{fill:#FFFFFF;}
+	.st16{fill:#A6A8AB;}
+	.st17{fill:#E6E7E8;}
+	.st18{fill:#D0D2D3;}
+</style>
+<g id="Cookie">
+	<circle class="st0" cx="175" cy="175" r="143.7"/>
+</g>
+<g class="st1">
+	<defs>
+		<circle id="SVGID_1_" class="st1" cx="175" cy="175" r="150"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g class="st2">
+		<polygon class="st3" points="-81.2,336.9 175,-106.9 431.2,336.9 			"/>
+		<polygon class="st4" points="68.8,443.7 325,0 581.2,443.7 			"/>
+		<polygon class="st5" points="-409.8,363.4 -153.6,-80.3 102.6,363.4 			"/>
+		<polygon class="st6" points="61.4,158.2 317.6,-285.6 573.8,158.2 			"/>
+		<polygon class="st7" points="-222.4,380 33.8,-63.7 290,380 			"/>
+		<polygon class="st8" points="-100.1,646.9 156.1,203.1 412.3,646.9 			"/>
+		<polygon class="st9" points="-164.9,147.2 -67.6,-21.3 29.7,147.2 			"/>
+		<polygon class="st9" points="-83.4,523.8 13.9,355.3 111.2,523.8 			"/>
+		<polygon class="st10" points="134.3,220.8 231.6,52.3 328.9,220.8 			"/>
+		<polygon class="st9" points="298.7,485.7 396,317.2 493.2,485.7 			"/>
+		<polygon class="st8" points="108.4,621.4 157,537.2 205.7,621.4 			"/>
+		<polygon class="st11" points="278.7,305.9 327.3,221.7 375.9,305.9 			"/>
+		<polygon class="st11" points="46.2,400 143.5,231.5 240.8,400 			"/>
+		<polygon class="st5" points="108.8,-86.6 36.5,38.6 231.1,38.6 158.8,-86.6 			"/>
+		<polygon class="st5" points="322,-86.6 298.4,-45.7 395.7,-45.7 372,-86.6 			"/>
+		<polygon class="st12" points="35.3,332.5 132.6,164 229.9,332.5 			"/>
+		<polygon class="st5" points="236.1,369.2 333.3,200.7 430.6,369.2 			"/>
+		<polygon class="st8" points="-51.9,428.8 -3.8,345.5 44.3,428.8 			"/>
+		<polygon class="st13" points="123.2,104.8 171.3,21.5 219.4,104.8 			"/>
+		<polygon class="st11" points="283,90.2 331.1,6.9 379.2,90.2 			"/>
+		<polygon class="st5" points="-61.9,331.6 -37.8,289.9 -13.8,331.6 			"/>
+		<polygon class="st8" points="132.5,621.6 156.5,579.9 180.6,621.6 			"/>
+		<polygon class="st8" points="216.7,465.6 240.7,423.9 264.7,465.6 			"/>
+		<polygon class="st12" points="197.1,259.7 245.2,176.4 293.3,259.7 			"/>
+		<polygon class="st3" points="283,239.3 331.1,156 379.2,239.3 			"/>
+		<polygon class="st9" points="-49.5,78.8 -1.4,-4.5 46.7,78.8 			"/>
+		<polygon class="st9" points="-97.9,225.4 -49.8,142.1 -1.7,225.4 			"/>
+		<polygon class="st5" points="288.2,-20 312.2,-61.6 336.3,-20 			"/>
+		<polygon class="st14" points="187.2,116.2 211.3,74.6 235.3,116.2 			"/>
+		<polygon class="st15" points="231.9,63.8 238.3,52.8 244.7,63.8 			"/>
+		<polygon class="st10" points="28.9,117.8 77,34.5 125.1,117.8 			"/>
+		<polygon class="st16" points="110.8,331.9 158.9,248.6 207,331.9 			"/>
+		<polygon class="st4" points="107,263.1 125.1,231.7 143.1,263.1 			"/>
+		<polygon class="st9" points="214,285.3 238,243.6 262.1,285.3 			"/>
+		<polygon class="st9" points="208.6,167.2 232.6,125.6 256.7,167.2 			"/>
+		<polygon class="st3" points="226,102.8 274.1,19.5 322.1,102.8 			"/>
+		<polygon class="st16" points="1.2,143.6 49.3,60.3 97.4,143.6 			"/>
+		<polygon class="st8" points="14,272.2 32.3,240.4 50.6,272.2 			"/>
+		<polygon class="st16" points="265.4,230.6 283.7,198.8 302,230.6 			"/>
+		<polygon class="st15" points="156.7,84.8 175,53.1 193.3,84.8 			"/>
+		<polygon class="st13" points="156.7,282.1 175,250.3 193.3,282.1 			"/>
+		<polygon class="st8" points="-19.7,88 -1.4,56.2 17,88 			"/>
+		<polygon class="st8" points="238.4,360.2 256.7,328.5 275,360.2 			"/>
+		<polygon class="st5" points="307.5,135.6 325.8,103.8 344.1,135.6 			"/>
+		<polygon class="st14" points="45.3,233.1 63.6,201.3 82,233.1 			"/>
+		<polygon class="st3" points="72.3,295.1 90.6,263.3 109,295.1 			"/>
+		<polygon class="st3" points="27.6,167.7 46,136 64.3,167.7 			"/>
+		<polygon class="st8" points="113.7,123.7 122.8,107.9 132,123.7 			"/>
+		<polygon class="st14" points="50.8,152.9 59.9,137.1 69.1,152.9 			"/>
+		<polygon class="st17" points="107.7,84.4 116.9,68.5 126.1,84.4 			"/>
+		<polygon class="st11" points="69,360.2 87.3,328.5 105.6,360.2 			"/>
+		<polygon class="st8" points="112.2,419.2 130.5,387.4 148.8,419.2 			"/>
+		<polygon class="st8" points="516.7,288.1 535.1,256.3 553.4,288.1 			"/>
+		<polygon class="st5" points="187.7,61.9 206,30.1 224.4,61.9 			"/>
+		<polygon class="st15" points="283.4,128.2 301.7,96.5 320,128.2 			"/>
+		<polygon class="st8" points="316.6,622.1 325.8,606.2 335,622.1 			"/>
+		<polygon class="st9" points="262.4,411.2 271.6,395.4 280.7,411.2 			"/>
+		<polygon class="st8" points="577.5,394.4 586.7,378.5 595.9,394.4 			"/>
+		<polygon class="st5" points="-97.4,339.9 -79.1,308.2 -60.7,339.9 			"/>
+		<polygon class="st5" points="277.7,315.5 296.1,283.7 314.4,315.5 			"/>
+		<polygon class="st9" points="286.9,268.6 296.1,252.7 305.2,268.6 			"/>
+		<polygon class="st18" points="210.1,128.5 221,109.6 231.9,128.5 			"/>
+		<polygon class="st5" points="94.9,-41.1 104,-57 113.2,-41.1 			"/>
+		<polygon class="st8" points="386.7,121.9 405,90.2 423.4,121.9 			"/>
+		<polygon class="st8" points="463,336.8 472.2,320.9 481.4,336.8 			"/>
+	</g>
+</g>
+
+<path id="osu_x21__x5F_txt_x5F_Path_2_" class="st15" d="M100.1,206.4c-4.7,0-8.8-0.8-12.3-2.3s-6.4-3.7-8.6-6.4
+	c-2.3-2.7-4-5.9-5.2-9.6c-1.2-3.7-1.7-7.6-1.7-11.9c0-4.3,0.6-8.3,1.7-12c1.2-3.7,2.9-7,5.2-9.7c2.3-2.7,5.2-4.9,8.6-6.5
+	s7.6-2.4,12.3-2.4c4.7,0,8.8,0.8,12.3,2.4c3.5,1.6,6.4,3.7,8.8,6.5c2.3,2.7,4,6,5.2,9.7c1.1,3.7,1.7,7.7,1.7,12
+	c0,4.3-0.6,8.2-1.7,11.9c-1.1,3.7-2.8,6.9-5.2,9.6c-2.3,2.7-5.2,4.9-8.8,6.4C109,205.7,104.8,206.4,100.1,206.4z M100.1,194.3
+	c4.2,0,7.2-1.6,9-4.7c1.8-3.1,2.7-7.6,2.7-13.4c0-5.8-0.9-10.3-2.7-13.4c-1.8-3.1-4.8-4.7-9-4.7c-4.1,0-7.1,1.6-8.9,4.7
+	c-1.8,3.1-2.7,7.6-2.7,13.4c0,5.8,0.9,10.3,2.7,13.4C93,192.8,96,194.3,100.1,194.3z M151.9,179.8c-4.2-1.2-7.5-3-9.8-5.3
+	c-2.4-2.4-3.5-5.9-3.5-10.6c0-5.7,2-10.1,6.1-13.4c4.1-3.2,9.6-4.8,16.7-4.8c2.9,0,5.8,0.3,8.6,0.8c2.8,0.5,5.7,1.3,8.6,2.4
+	c-0.2,1.9-0.5,4-1.1,6.1c-0.6,2.1-1.3,3.9-2.1,5.5c-1.8-0.7-3.8-1.4-5.9-2c-2.2-0.6-4.5-0.8-6.8-0.8c-2.5,0-4.5,0.4-5.9,1.2
+	c-1.4,0.8-2.1,2-2.1,3.8c0,1.6,0.5,2.8,1.5,3.5c1,0.7,2.4,1.3,4.3,1.9l6.4,1.9c2.1,0.6,4,1.3,5.7,2.2c1.7,0.9,3.1,1.9,4.3,3.2
+	c1.2,1.3,2.1,2.8,2.8,4.7c0.7,1.9,1,4.2,1,6.8c0,2.8-0.6,5.3-1.7,7.7c-1.2,2.4-2.8,4.5-5,6.2c-2.2,1.8-4.9,3.1-8,4.2
+	c-3.1,1-6.7,1.5-10.7,1.5c-1.8,0-3.4-0.1-4.9-0.2c-1.5-0.1-2.9-0.3-4.3-0.6c-1.4-0.3-2.7-0.6-4.1-1c-1.3-0.4-2.8-0.9-4.4-1.5
+	c0.1-2,0.5-4.1,1.1-6.1c0.6-2.1,1.3-4.1,2.2-6c2.5,1,4.8,1.7,7,2.2c2.2,0.5,4.5,0.7,6.9,0.7c1,0,2.2-0.1,3.4-0.3
+	c1.2-0.2,2.4-0.5,3.4-1c1-0.5,1.9-1.1,2.6-1.9c0.7-0.8,1.1-1.8,1.1-3.1c0-1.8-0.5-3.1-1.6-3.9c-1.1-0.8-2.6-1.5-4.5-2.1L151.9,179.8
+	z M191.2,147.1c2.7-0.4,5.3-0.7,8-0.7c2.6,0,5.3,0.2,8,0.7v30.7c0,3.1,0.2,5.6,0.7,7.6c0.5,2,1.2,3.6,2.2,4.7c1,1.2,2.3,2,3.8,2.5
+	c1.5,0.5,3.3,0.7,5.3,0.7c2.8,0,5.1-0.3,7-0.8v-45.4c2.7-0.4,5.3-0.7,7.9-0.7c2.6,0,5.3,0.2,8,0.7v55.8c-2.4,0.8-5.6,1.6-9.5,2.4
+	c-3.9,0.8-8,1.2-12.3,1.2c-3.8,0-7.5-0.3-11-0.9c-3.5-0.6-6.6-1.9-9.3-3.8c-2.7-1.9-4.8-4.8-6.3-8.5c-1.6-3.7-2.4-8.7-2.4-14.9
+	V147.1z M257.1,205.1c-0.4-2.8-0.7-5.5-0.7-8.2c0-2.7,0.2-5.5,0.7-8.3c2.8-0.4,5.5-0.7,8.2-0.7c2.7,0,5.5,0.2,8.3,0.7
+	c0.4,2.8,0.7,5.6,0.7,8.2c0,2.8-0.2,5.5-0.7,8.3c-2.8,0.4-5.6,0.7-8.2,0.7C262.6,205.7,259.9,205.5,257.1,205.1z M256.7,124.4
+	c2.9-0.4,5.8-0.7,8.6-0.7c2.9,0,5.8,0.2,8.8,0.7l-1.1,54.9c-2.6,0.4-5.1,0.7-7.5,0.7c-2.5,0-5.1-0.2-7.6-0.7L256.7,124.4z"/>
+<path id="Rim_6_" class="st15" d="M175,25C92.2,25,25,92.2,25,175c0,82.8,67.2,150,150,150c82.8,0,150-67.2,150-150
+	C325,92.2,257.8,25,175,25z M175,310c-74.6,0-135-60.4-135-135c0-74.6,60.4-135,135-135s135,60.4,135,135
+	C310,249.6,249.6,310,175,310z"/>
+</svg>
--- a/source/public/img/razor-bottom-black.svg
+++ b/source/public/img/razor-bottom-black.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920px" height="39px">
+<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M1877.759,23.791 L1874.461,20.504 L1879.969,15.027 L1868.965,15.027 L1874.461,20.504 L1871.156,23.791 L1789.442,23.791 L1784.749,28.484 L1775.502,37.704 L1769.337,31.559 L1738.089,31.695 L1733.080,31.695 L1720.422,19.079 L1686.790,19.079 L1679.552,26.293 L1386.290,26.255 L1380.520,20.508 L1371.871,29.132 L1368.980,26.255 L1203.819,26.293 L1191.058,38.996 L1167.007,15.027 L1167.000,15.038 L1166.989,15.027 L1157.936,24.049 L1154.094,24.049 L1151.994,21.956 L1155.330,18.643 L1148.674,18.643 L1151.994,21.956 L1149.933,24.007 L1072.000,24.040 L1072.000,24.049 L1061.000,24.044 L1050.000,24.049 L1050.000,24.040 L972.067,24.007 L970.005,21.956 L973.326,18.643 L966.670,18.643 L970.005,21.956 L967.906,24.049 L964.064,24.049 L955.012,15.027 L955.000,15.038 L954.993,15.027 L930.942,38.996 L918.181,26.293 L818.020,26.255 L815.129,29.132 L806.480,20.508 L800.710,26.255 L661.448,26.293 L654.209,19.079 L620.578,19.079 L607.919,31.695 L602.910,31.695 L571.663,31.559 L565.497,37.704 L556.251,28.484 L551.557,23.791 L469.844,23.791 L466.539,20.504 L472.035,15.027 L461.031,15.027 L466.539,20.504 L463.241,23.791 L204.638,23.791 L195.467,15.027 L195.449,15.049 L195.426,15.027 L179.458,31.695 L166.537,31.695 L158.884,24.049 L0.001,24.049 L0.001,-0.012 L1919.998,-0.012 L1919.998,24.049 L1877.759,23.791 ZM228.624,15.027 L226.889,15.027 L226.889,20.205 L228.624,20.205 L228.624,15.027 ZM231.248,15.027 L229.518,15.027 L229.518,20.205 L231.248,20.205 L231.248,15.027 ZM243.370,15.027 L241.640,15.027 L241.640,20.205 L243.370,20.205 L243.370,15.027 ZM264.168,15.027 L258.973,15.027 L258.973,20.205 L264.168,20.205 L264.168,15.027 ZM584.675,24.989 L582.941,24.989 L582.941,26.714 L584.675,26.714 L584.675,24.989 ZM591.316,21.536 L589.582,21.536 L589.582,26.714 L591.316,26.714 L591.316,21.536 ZM604.751,21.536 L603.017,21.536 L603.017,23.260 L604.751,23.260 L604.751,21.536 ZM604.751,24.989 L603.017,24.989 L603.017,26.714 L604.751,26.714 L604.751,24.989 ZM1737.983,21.536 L1736.249,21.536 L1736.249,23.260 L1737.983,23.260 L1737.983,21.536 ZM1737.983,24.989 L1736.249,24.989 L1736.249,26.714 L1737.983,26.714 L1737.983,24.989 ZM1751.418,21.536 L1749.683,21.536 L1749.683,26.714 L1751.418,26.714 L1751.418,21.536 ZM1758.059,24.989 L1756.324,24.989 L1756.324,26.714 L1758.059,26.714 L1758.059,24.989 ZM1877.785,23.818 L1871.129,23.818 L1871.156,23.791 L1877.759,23.791 L1877.785,23.818 ZM1367.778,33.211 L1371.871,29.132 L1375.975,33.211 L1367.778,33.211 ZM469.871,23.818 L463.214,23.818 L463.241,23.791 L469.844,23.791 L469.871,23.818 Z"/>
+</svg>
--- a/source/public/img/razor-top-black.svg
+++ b/source/public/img/razor-top-black.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920px" height="40px">
+<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M1827.156,15.021 L1827.129,14.994 L1833.785,14.994 L1833.759,15.021 L1827.156,15.021 ZM1824.965,24.036 L1835.969,24.036 L1830.461,18.558 L1833.759,15.021 L1920.000,15.021 L1920.000,39.075 L0.001,39.075 L0.001,15.013 L271.884,15.013 L279.537,6.930 L292.458,6.930 L308.426,24.036 L308.449,24.013 L308.467,24.036 L317.638,15.021 L463.241,15.021 L466.539,18.558 L461.031,24.036 L472.035,24.036 L466.539,18.558 L469.844,15.021 L551.557,15.021 L556.251,10.578 L565.497,1.358 L571.663,7.066 L602.910,7.055 L607.919,7.055 L620.578,19.983 L654.209,19.983 L661.448,12.957 L735.709,12.995 L741.480,18.554 L750.129,9.930 L753.020,12.995 L918.181,12.957 L930.942,0.066 L954.993,24.036 L955.000,24.024 L955.012,24.036 L964.064,15.013 L967.906,15.013 L970.005,17.106 L966.670,20.419 L973.326,20.419 L970.005,17.106 L972.067,15.055 L1050.000,15.023 L1050.000,15.013 L1064.030,15.017 L1072.000,15.013 L1072.000,15.019 L1225.933,15.055 L1227.994,17.106 L1224.674,20.419 L1231.331,20.419 L1227.994,17.106 L1230.094,15.013 L1233.936,15.013 L1242.989,24.036 L1243.000,24.024 L1243.007,24.036 L1267.058,0.066 L1279.819,12.957 L1368.980,12.995 L1371.871,9.930 L1380.520,18.554 L1386.290,13.057 L1635.552,13.019 L1642.790,19.983 L1676.422,19.983 L1689.080,6.992 L1725.337,7.003 L1731.502,1.358 L1740.749,10.578 L1745.443,15.021 L1827.156,15.021 L1830.461,18.558 L1824.965,24.036 ZM341.624,18.857 L339.889,18.857 L339.889,24.036 L341.624,24.036 L341.624,18.857 ZM344.248,18.857 L342.518,18.857 L342.518,24.036 L344.248,24.036 L344.248,18.857 ZM356.370,18.857 L354.640,18.857 L354.640,24.036 L356.370,24.036 L356.370,18.857 ZM377.168,18.857 L371.973,18.857 L371.973,24.036 L377.168,24.036 L377.168,18.857 ZM584.675,12.348 L582.941,12.348 L582.941,14.073 L584.675,14.073 L584.675,12.348 ZM591.316,12.348 L589.582,12.348 L589.582,17.526 L591.316,17.526 L591.316,12.348 ZM604.751,12.348 L603.017,12.348 L603.017,14.073 L604.751,14.073 L604.751,12.348 ZM604.751,15.802 L603.017,15.802 L603.017,17.526 L604.751,17.526 L604.751,15.802 ZM1693.983,12.348 L1692.249,12.348 L1692.249,14.073 L1693.983,14.073 L1693.983,12.348 ZM1693.983,15.802 L1692.249,15.802 L1692.249,17.526 L1693.983,17.526 L1693.983,15.802 ZM1707.418,12.348 L1705.683,12.348 L1705.683,17.526 L1707.418,17.526 L1707.418,12.348 ZM1714.059,12.348 L1712.324,12.348 L1712.324,14.073 L1714.059,14.073 L1714.059,12.348 ZM463.214,14.994 L469.871,14.994 L469.844,15.021 L463.241,15.021 L463.214,14.994 ZM754.222,5.976 L750.129,9.930 L746.025,5.976 L754.222,5.976 ZM1375.975,5.976 L1371.871,9.930 L1367.778,5.976 L1375.975,5.976 Z"/>
+</svg>
--- a/source/public/img/toony_llama_with_pajama_shaded.png
+++ b/source/public/img/toony_llama_with_pajama_shaded.png
--- a/source/public/img/tor.svg
+++ b/source/public/img/tor.svg
@ -0,0 +1,19 @@
+<!-- Thank you https://www.uxwing.com -->
+
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 13333 13333" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+    <defs>
+        <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="6667" y1="13333" x2="6667" y2="0">
+            <stop offset="0" stop-opacity="1" stop-color="#420C5D"/>
+            <stop offset="1" stop-opacity="1" stop-color="#951AD1"/>
+        </linearGradient>
+        <linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="3659" y1="12734" x2="3659" y2="755">
+            <stop offset="0" stop-opacity="1" stop-color="#420C5D"/>
+            <stop offset="1" stop-opacity="1" stop-color="#951AD1"/>
+        </linearGradient>
+    </defs>
+
+    <circle id="background" fill="#F2E4FF" fill-rule="nonzero" cx="6667" cy="6667" r="6406"/>
+    <path id="center" fill="url(#id0)" d="M6680 12121l0 -808c2560,-7 4633,-2084 4633,-4646 0,-2562 -2073,-4639 -4633,-4646l0 -808c3006,8 5441,2446 5441,5454 0,3008 -2434,5447 -5441,5454zm0 -2829c1444,-8 2613,-1180 2613,-2626 0,-1446 -1169,-2618 -2613,-2626l0 -808c1890,7 3421,1541 3421,3434 0,1892 -1530,3426 -3421,3434l0 -808zm0 -4039c775,7 1400,637 1400,1413 0,777 -626,1406 -1400,1414l0 -2827zm-6680 1413c0,3682 2985,6667 6667,6667 3682,0 6667,-2985 6667,-6667 0,-3682 -2985,-6666 -6667,-6666 -3682,0 -6667,2985 -6667,6666z"/>
+    <path fill="url(#id0)" d="M6667 755c-3322,0 -6016,2682 -6016,5990 0,3308 2693,5990 6016,5990l0 -11979z"/>
+    <path fill="url(#id1)" d="M6667 755c-3322,0 -6016,2682 -6016,5990 0,3308 2693,5990 6016,5990l0 -11979z"/>
+</svg>
--- a/source/public/index.html
+++ b/source/public/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%PUBLIC_URL%/icon/icon_circle.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<meta name="description" content="developomp's website" />
+
+		<link rel="preconnect" href="https://fonts.gstatic.com" />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Source+Code+Pro&display=swap"
+			rel="stylesheet preload"
+		/>
+
+		<title>pomp</title>
+	</head>
+	<body>
+		<noscript>
+			English: Oops! It seems like JavaScript is not enabled!
+			<br />
+			Korean: 이런! 자바스크립트를 사용할 수 없습니다!
+		</noscript>
+		<div id="root"></div>
+	</body>
+</html>
--- a/source/public/js/three.js
+++ b/source/public/js/three.js
--- a/source/public/projects/3d/PointerLockControls.js
+++ b/source/public/projects/3d/PointerLockControls.js
@ -0,0 +1,166 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author Mugen87 / https://github.com/Mugen87
+ */
+
+// https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/jsm/controls/PointerLockControls.js
+
+import {
+	Euler,
+	EventDispatcher,
+	Vector3
+} from "./three.js";
+
+var PointerLockControls = function ( camera, domElement ) {
+
+	if ( domElement === undefined ) {
+
+		console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
+		domElement = document.body;
+
+	}
+
+	this.domElement = domElement;
+	this.isLocked = false;
+
+	//
+	// internals
+	//
+
+	var scope = this;
+
+	var changeEvent = { type: 'change' };
+	var lockEvent = { type: 'lock' };
+	var unlockEvent = { type: 'unlock' };
+
+	var euler = new Euler( 0, 0, 0, 'YXZ' );
+
+	var PI_2 = Math.PI / 2;
+
+	var vec = new Vector3();
+
+	function onMouseMove( event ) {
+
+		if ( scope.isLocked === false ) return;
+
+		var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+		var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+
+		euler.setFromQuaternion( camera.quaternion );
+
+		euler.y -= movementX * 0.002;
+		euler.x -= movementY * 0.002;
+
+		euler.x = Math.max( - PI_2, Math.min( PI_2, euler.x ) );
+
+		camera.quaternion.setFromEuler( euler );
+
+		scope.dispatchEvent( changeEvent );
+
+	}
+
+	function onPointerlockChange() {
+
+		if ( document.pointerLockElement === scope.domElement ) {
+
+			scope.dispatchEvent( lockEvent );
+
+			scope.isLocked = true;
+
+		} else {
+
+			scope.dispatchEvent( unlockEvent );
+
+			scope.isLocked = false;
+
+		}
+
+	}
+
+	function onPointerlockError() {
+
+		console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
+
+	}
+
+	this.connect = function () {
+
+		document.addEventListener( 'mousemove', onMouseMove, false );
+		document.addEventListener( 'pointerlockchange', onPointerlockChange, false );
+		document.addEventListener( 'pointerlockerror', onPointerlockError, false );
+
+	};
+
+	this.disconnect = function () {
+
+		document.removeEventListener( 'mousemove', onMouseMove, false );
+		document.removeEventListener( 'pointerlockchange', onPointerlockChange, false );
+		document.removeEventListener( 'pointerlockerror', onPointerlockError, false );
+
+	};
+
+	this.dispose = function () {
+
+		this.disconnect();
+
+	};
+
+	this.getObject = function () { // retaining this method for backward compatibility
+
+		return camera;
+
+	};
+
+	this.getDirection = function () {
+
+		var direction = new Vector3( 0, 0, - 1 );
+
+		return function ( v ) {
+
+			return v.copy( direction ).applyQuaternion( camera.quaternion );
+
+		};
+
+	}();
+
+	this.moveForward = function ( distance ) {
+
+		// move forward parallel to the xz-plane
+		// assumes camera.up is y-up
+
+		vec.setFromMatrixColumn( camera.matrix, 0 );
+
+		vec.crossVectors( camera.up, vec );
+
+		camera.position.addScaledVector( vec, distance );
+
+	};
+
+	this.moveRight = function ( distance ) {
+
+		vec.setFromMatrixColumn( camera.matrix, 0 );
+
+		camera.position.addScaledVector( vec, distance );
+
+	};
+
+	this.lock = function () {
+
+		this.domElement.requestPointerLock();
+
+	};
+
+	this.unlock = function () {
+
+		document.exitPointerLock();
+
+	};
+
+	this.connect();
+
+};
+
+PointerLockControls.prototype = Object.create( EventDispatcher.prototype );
+PointerLockControls.prototype.constructor = PointerLockControls;
+
+export { PointerLockControls };
--- a/source/public/projects/3d/index.css
+++ b/source/public/projects/3d/index.css
@ -0,0 +1,92 @@
+body {
+	margin: 0;
+	background-color: #282828;
+	color: #fff;
+	font-family: Monospace, sans-serif;
+	font-size: 13px;
+	line-height: 24px;
+	scroll-behavior: none;
+}
+
+canvas {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+a {
+	color: #ff0;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+button {
+	cursor: pointer;
+	text-transform: uppercase;
+}
+
+#info {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	padding: 10px;
+	box-sizing: border-box;
+	text-align: center;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	z-index: 1;
+}
+
+a,
+button,
+input,
+select {
+	pointer-events: auto;
+}
+
+.dg.ac {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	z-index: 2 !important;
+}
+
+#overlay {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 1;
+	background-color: #000000;
+	color: #ffffff;
+}
+
+#overlay > div {
+	text-align: center;
+}
+
+#overlay > div > button {
+	height: 20px;
+	background: transparent;
+	color: #ffffff;
+	outline: 1px solid #ffffff;
+	border: 0;
+	cursor: pointer;
+}
+
+#overlay > div > p {
+	color: #777777;
+	font-size: 12px;
+}
--- a/source/public/projects/3d/index.html
+++ b/source/public/projects/3d/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>3D</title>
+		<link rel="icon" href="/icon/icon_circle.svg" />
+		<link rel="stylesheet" href="/projects/3d/index.css" />
+		<script src="/projects/3d/index.js" defer></script>
+		<script src="/js/three.js"></script>
+	</head>
+	<body>
+		<div id="3dView"></div>
+	</body>
+</html>
--- a/source/public/projects/3d/index.js
+++ b/source/public/projects/3d/index.js
@ -0,0 +1,122 @@
+// https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js
+// https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js
+
+let scene, camera, container, GL_Renderer
+let materials = {}, lights = {}, objects = {}
+
+let FOV = 75
+
+/*---[ HELPERS ]---*/
+function moveObject(object, x, y, z) {
+    object.position.x += x
+    object.position.y += y
+    object.position.z += z
+}
+
+function rotateObject(object, x, y, z) {
+    object.rotateX(x)
+    object.rotateY(y)
+    object.rotateZ(z)
+}
+
+function setScale(object, scale) {
+    object.scale.x = object.scale.y = object.scale.z = scale
+}
+
+/*---[ EVENTS ]---*/
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight
+    camera.updateProjectionMatrix()
+    GL_Renderer.setSize(window.innerWidth, window.innerHeight)
+}
+
+function Start() {
+    window.addEventListener("resize", onWindowResize, false)
+    container = document.getElementById("3dView")
+
+    // Scene
+    {
+        scene = new THREE.Scene()
+        scene.background = new THREE.Color(0x000000)
+        scene.fog = new THREE.Fog(0xffffff, 0, 750)
+    }
+
+    // Camera
+    {
+        camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 10000)
+        moveObject(camera, 0, 0, 500)
+        scene.add(camera)
+    }
+
+    // Lights
+    {
+        lights.ambientLight = new THREE.AmbientLight(0x404040, 0.3)
+        moveObject(lights.ambientLight, 10, 10, 10)
+        scene.add(lights.ambientLight)
+
+        lights.one = new THREE.DirectionalLight(0x00ffff, 0.3)
+        lights.one.position = camera.position
+        scene.add(lights.one)
+
+        lights.mainLight = new THREE.DirectionalLight(0xaabbff, 0.7)
+        moveObject(lights.mainLight, 0, 10, 20)
+        scene.add(lights.mainLight)
+    }
+
+    // Material
+    {
+        materials.main = new THREE.MeshPhongMaterial({
+            color: 0xffffff,
+            shading: THREE.FlatShading
+        })
+        materials.wire = new THREE.MeshPhongMaterial({
+            color: 0xffffff,
+            side: THREE.DoubleSide,
+            wireframe: true
+        })
+    }
+
+    // Objects
+    {
+        objects.rotatingGeo = {}
+        objects.rotatingGeo.main = new THREE.Mesh(new THREE.IcosahedronGeometry(8, 1), materials.main)
+        setScale(objects.rotatingGeo.main, 15)
+        scene.add(objects.rotatingGeo.main)
+
+        let outerGeo = new THREE.IcosahedronBufferGeometry(15, 1)
+        objects.rotatingGeo.outer = new THREE.Mesh(outerGeo, materials.wire)
+        setScale(objects.rotatingGeo.outer, 10)
+        scene.add(objects.rotatingGeo.outer)
+
+        let vertices = outerGeo.attributes.position.array;
+        for (let k=0; k<vertices.length; k+=3) {
+            let vertexSphere = new THREE.Mesh(new THREE.SphereGeometry(0.3, 5, 5), materials.main);
+            vertexSphere.applyMatrix(new THREE.Matrix4().makeTranslation(vertices[k],vertices[k+1],vertices[k+2]));
+            objects.rotatingGeo.outer.add(vertexSphere);
+        }
+    }
+
+    // Renderer
+    {
+        GL_Renderer = new THREE.WebGLRenderer({antialias: true, alpha: true })
+        GL_Renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1)
+        GL_Renderer.setSize(window.innerWidth, window.innerHeight)
+        GL_Renderer.autoClear = false
+        GL_Renderer.setClearColor(0x000000, 0.0)
+        container.appendChild(GL_Renderer.domElement)
+    }
+}
+
+function Update() {
+    requestAnimationFrame(Update)
+
+    rotateObject(objects.rotatingGeo.main, 0.002, 0.003, 0)
+    rotateObject(objects.rotatingGeo.outer, 0.001, 0.003, 0)
+
+    GL_Renderer.render(scene, camera)
+}
+
+window.onload = () => {
+    Start()
+    Update()
+}
--- a/source/public/robots.txt
+++ b/source/public/robots.txt
@ -0,0 +1,5 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Allow: /
+# Sitemap: /sitemap.xml
+Disallow: