diff --git a/.well-known/discord b/.well-known/discord new file mode 100644 index 0000000..3162025 --- /dev/null +++ b/.well-known/discord @@ -0,0 +1 @@ +dh=1f526289182e6f75ac4606f01aa656ae9b2a14a2 \ No newline at end of file diff --git a/1kb.html b/1kb.html new file mode 100644 index 0000000..f53143b --- /dev/null +++ b/1kb.html @@ -0,0 +1 @@ +AutumnVN (1kb)

AutumnVN

Hi! I'm AutumnVN, a dude from Vietnam. Nice to meet you :3

an epic 1kb site

You can find me on

Projects

Email: autumnvnchino@gmail.com


read if cute • main site

 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f8e6962 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 AutumnVN + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/_headers b/_headers new file mode 100644 index 0000000..268a02b --- /dev/null +++ b/_headers @@ -0,0 +1,2 @@ +/ + Link: ; rel=preload; as=style; type=text/css, ; rel=preload; as=image; type=image/avif, ; rel=preload; as=image; type=image/webp, ; rel=preload; as=image; type=image/svg+xml, ; rel=preload; as=script; type=application/javascript, ; rel=preload; as=script; type=application/javascript, ; rel=preload; as=font; type=font/woff2; crossorigin, ; rel=preload; as=fetch; type=application/json; crossorigin diff --git a/_redirects b/_redirects new file mode 100644 index 0000000..8075248 --- /dev/null +++ b/_redirects @@ -0,0 +1,23 @@ +/akatsuki https://akatsuki.gg/u/102756 301 +/bsky https://bsky.app/profile/chino.id.vn 301 +/bot https://discord.com/oauth2/authorize?client_id=833707580593143841&permissions=8&scope=bot 301 +/chess https://www.chess.com/member/autumnvn 301 +/codeberg https://codeberg.org/AutumnVN 301 +/crowdin https://crowdin.com/profile/AutumnVN 301 +/discord https://discord.com/users/393694671383166998 301 +/dm https://discord.com/users/393694671383166998 301 +/facebook https://www.facebook.com/autumnvnchino 301 +/genshin https://enka.network/u/829753707 301 +/github https://github.com/AutumnVN 301 +/lastfm https://www.last.fm/user/AutumnVN 301 +/osu https://osu.ppy.sh/users/26086345 301 +/pixiv https://www.pixiv.net/users/54279342 301 +/reddit https://www.reddit.com/user/AutumnVN 301 +/rickroll https://www.youtube.com/watch?v=dQw4w9WgXcQ 301 +/ripple https://ripple.moe/u/128582 301 +/spotify https://open.spotify.com/user/31x3ktny3mzvdu5kob47r6oceyiq 301 +/steam https://steamcommunity.com/id/AutumnVN 301 +/twitch https://www.twitch.tv/autumnvn 301 +/twitter https://twitter.com/autumnvnchino 301 +/youtube https://www.youtube.com/@AutumnVN 301 +/wysi https://www.youtube.com/watch?v=AaAF51Gwbxo&t=62s 301 diff --git a/autumnvn.svg b/autumnvn.svg new file mode 100644 index 0000000..e843985 --- /dev/null +++ b/autumnvn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/avatar.webp b/avatar.webp new file mode 100644 index 0000000..fb49872 Binary files /dev/null and b/avatar.webp differ diff --git a/bg.avif b/bg.avif new file mode 100644 index 0000000..945bd3a Binary files /dev/null and b/bg.avif differ diff --git a/bg.webp b/bg.webp new file mode 100644 index 0000000..f417e45 Binary files /dev/null and b/bg.webp differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..b48e728 Binary files /dev/null and b/favicon.ico differ diff --git a/font.woff2 b/font.woff2 new file mode 100644 index 0000000..87fd56f Binary files /dev/null and b/font.woff2 differ diff --git a/functions/chino.js b/functions/chino.js new file mode 100644 index 0000000..515ef61 --- /dev/null +++ b/functions/chino.js @@ -0,0 +1,9 @@ +export async function onRequestGet() { + const max = 267; + return new Response(await fetch(`https://raw.githubusercontent.com/AutumnVN/chino.webp/main/${Math.ceil(Math.random() * max)}.webp`).then(r => r.blob()), { + headers: { + 'content-type': 'image/webp', + 'cache-control': 'no-cache, no-store, must-revalidate, max-age=0' + } + }); +} diff --git a/functions/count.js b/functions/count.js new file mode 100644 index 0000000..a17546c --- /dev/null +++ b/functions/count.js @@ -0,0 +1,25 @@ +export async function onRequestGet({ env, waitUntil }) { + const value = + await env.COUNT.get('count') + 1 || 1; + + waitUntil(env.COUNT.put('count', value)); + + return new Response(generateSvg(String(value).padStart(7, '0')), { + headers: { + 'content-type': 'image/svg+xml', + 'cache-control': 'no-cache, no-store, must-revalidate, max-age=0' + } + }); +} + +function generateSvg(str) { + const font = 24; + const size = 29; + const margin = 32; + let text = ''; + + for (let i = 0; i < str.length; i++) { + text += `${str[i]}`; + } + + return `${text}`; +} diff --git a/functions/lanyard.js b/functions/lanyard.js new file mode 100644 index 0000000..37515b1 --- /dev/null +++ b/functions/lanyard.js @@ -0,0 +1,35 @@ +export async function onRequestGet({ env, waitUntil }) { + const value = Number((await env.COUNT.get('count')) || 0) + 1; + + const originSvg = await fetch('https://lanyard.cnrad.dev/api/393694671383166998?showDisplayName=true&bg=0d1117&idleMessage=https://chino.pages.dev').then(r => r.text()); + + const newSvg = originSvg.replace(/( width=")410((px)?" )/g, '$1350$2') + .replace(/width: 400px;/g, 'width: 340px;') + .replace(/width: 279px;/, 'width: 219px;') + .replace(/border: solid 0.5px #222;/, '$& object-fit: cover;') + .replace(/height="210px">/, 'height="265px">') + .replace(/<\/svg>/, generateCountSvg(String(value).padStart(7, '0')) + '$&'); + + waitUntil(env.COUNT.put('count', value)); + + return new Response(newSvg, { + headers: { + 'content-type': 'image/svg+xml', + 'cache-control': 'no-cache, no-store, must-revalidate, max-age=0' + } + }); +} + +function generateCountSvg(str) { + const y = 215; + const font = 37; + const size = 45; + const margin = 50; + let text = ''; + + for (let i = 0; i < str.length; i++) { + text += `${str[i]}`; + } + + return `${text}`; +} diff --git a/functions/stats.js b/functions/stats.js new file mode 100644 index 0000000..09e815c --- /dev/null +++ b/functions/stats.js @@ -0,0 +1,91 @@ +export async function onRequestGet({ env, request, waitUntil }) { + let res = await caches.default.match(request.url); + + if (res) { + res = await res.json(); + waitUntil(getStats(env).then(r => caches.default.put(request.url, new Response(JSON.stringify(r), { + headers: { + 'content-type': 'application/json', + 'cache-control': 'public, max-age=3600' + } + })))); + } else { + res = await getStats(env); + waitUntil(caches.default.put(request.url, new Response(JSON.stringify(res), { + headers: { + 'content-type': 'application/json', + 'cache-control': 'public, max-age=3600' + } + }))); + } + + return new Response(JSON.stringify(res), { + headers: { + 'content-type': 'application/json', + 'cache-control': 'no-cache, no-store, must-revalidate, max-age=0' + } + }); +} + +async function getStats(env) { + const query = `{ + a: repository(owner: "AutumnVN", name: "chino.pages.dev") { stargazers { totalCount } forks { totalCount } } + b: repository(owner: "AutumnVN", name: "debloat-premid") { stargazers { totalCount } forks { totalCount } } + c: repository(owner: "AutumnVN", name: "loli") { stargazers { totalCount } forks { totalCount } } + d: repository(owner: "AutumnVN", name: "highlight") { stargazers { totalCount } forks { totalCount } } + e: repository(owner: "Vendicated", name: "Vencord") { stargazers { totalCount } forks { totalCount } } + g: repository(owner: "ppy", name: "osu-wiki") { stargazers { totalCount } forks { totalCount } } + + z: user(login: "AutumnVN") { + repositories(first: 100, ownerAffiliations: OWNER) { + nodes { + stargazerCount + forkCount + } + } + contributionsCollection { + totalCommitContributions + } + pullRequests(first: 1) { + totalCount + } + issues(first: 1) { + totalCount + } + repositoriesContributedTo(first: 1, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) { + totalCount + } + } + }`; + + const { data } = await fetch('https://api.github.com/graphql', { + method: 'POST', + headers: { + 'accept': 'application/json', + 'authorization': `bearer ${env.GITHUB_TOKEN}`, + 'user-agent': 'AutumnVN' + }, + body: JSON.stringify({ query }) + }).then(r => r.json()); + + const repos = Object.values(data); + const stats = repos.pop(); + + const statsArr = [ + stats.repositories.nodes.reduce((a, b) => a + b.stargazerCount, 0), + stats.repositories.nodes.reduce((a, b) => a + b.forkCount, 0), + stats.contributionsCollection.totalCommitContributions, + stats.pullRequests.totalCount, + stats.issues.totalCount, + stats.repositoriesContributedTo.totalCount + ]; + + const res = repos.map(i => ([ + i.stargazers.totalCount, + i.forks.totalCount + ])); + + res.push(statsArr); + + return res; +} diff --git a/home.webp b/home.webp new file mode 100644 index 0000000..b19e04d Binary files /dev/null and b/home.webp differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..cb4ff6a --- /dev/null +++ b/index.css @@ -0,0 +1,627 @@ +:root { + --background: image-set(url('/bg.avif') type('image/avif'), url('/bg.webp') type('image/webp')); + font-weight: 500; + line-height: 1.5; + font-family: Inter, system-ui, sans-serif; +} + +body { + margin: 0 auto; + min-width: 320px; + max-width: min(1280px, 100% - 100px); +} + +@media (width < 880px) { + body { + max-width: calc(100% - 50px); + } +} + +#bg { + --multiplier: clamp(0, calc(-5 * var(--scroll, 0) + 1.5), 1); + position: fixed; + transform: translate(calc(var(--tx, 0) * var(--multiplier, 1)), calc(var(--ty, 0) * var(--multiplier, 1))); + z-index: -1; + filter: blur(clamp(0px, calc(50px * var(--scroll, 0) + -5px), 10px)) brightness(clamp(.7, calc(-.5 * var(--scroll, 0) + .85), .8)); + inset: -30px; + background: #9af var(--background) center/cover no-repeat; +} + +header { + display: flex; + flex-direction: row; + align-items: center; + gap: 50px; + transform: translateY(-50%); + margin-top: 45vh; +} + +@media (width < 1300px) { + header { + margin-right: auto; + margin-left: auto; + max-width: 950px; + } +} + +@media (width < 880px) { + header { + flex-direction: column; + gap: 20px; + margin-right: auto; + margin-left: auto; + max-width: 480px; + } +} + +header img { + animation: 1s ease-in-out .2s both avatar; + border-radius: 50%; + width: clamp(120px, 26vmin, 200px); + height: clamp(120px, 26vmin, 200px); + pointer-events: none; +} + +@keyframes avatar { + 0% { + transform: scale(.8); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +header section { + display: flex; + flex-direction: column; + gap: 20px; +} + +header svg { + -webkit-mask-image:url('data:image/svg+xml,'); + backdrop-filter: saturate(2) brightness(2.5) blur(12px); + width: min(500px, 100%); +} + +header p { + -webkit-mask: linear-gradient(to right, #fff 45%, transparent 55%) 0 0/220% 100% no-repeat; + opacity: clamp(.7, .75 * var(--scroll, 0) + .7, .85); + animation: 2s ease-in-out 1.9s both bio; + color: #fff; + font-weight: normal; + font-size: clamp(18px, 3vmin, 25px); +} + +@keyframes bio { + 0% { + -webkit-mask-position: 100% 0; + } + + 100% { + -webkit-mask-position: 0% 0; + } +} + +#arrow { + display: flex; + position: fixed; + right: 0; + bottom: 0; + left: 0; + justify-content: center; + transition: opacity .2s; +} + +#arrow svg { + opacity: .5; + transition: opacity .2s; + cursor: pointer; + padding: 0 15px; + width: 60px; + height: 90px; + color: #fff; +} + +#arrow svg:hover { + opacity: .8; +} + +body[style*='.'] #arrow { + opacity: 0; + pointer-events: none; +} + +#main { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 60px; + opacity: calc(var(--scroll) / .15); + margin-top: max(0px, calc(-140vh * var(--scroll) + 35vh)); + margin-bottom: calc(35vh - max(0px, calc(-140vh * var(--scroll) + 35vh))); +} + +@media (width < 1300px) { + #main { + display: flex; + flex-direction: column; + gap: 40px; + margin-right: auto; + margin-left: auto; + max-width: 950px; + } +} + +@media (width < 880px) { + #main { + margin-right: auto; + margin-left: auto; + max-width: 480px; + } +} + +main { + --template-columns: 8; + --gap: 40px; + display: grid; + grid-template-columns: repeat(var(--template-columns), 1fr); + grid-column: span 8; + gap: var(--gap); + height: fit-content; +} + +@media (width < 880px) { + main { + --template-columns: 4; + --gap: 25px; + } +} + +.widget { + --square-size: calc((((min(1280px, 100vw - 100px) - (60px * 11)) / 12) * 8 + (60px - var(--gap)) * 7) / 8); + --c: min(var(--columns, 2), var(--template-columns)); + --r: var(--rows, 2); + grid-row: span var(--r); + grid-column: span var(--c); + transition: transform .2s linear, background-color .2s linear; + border-radius: 24px; + background-color: #defa; + height: calc(var(--square-size) * var(--r) + var(--gap) * (var(--r) - 1)); + overflow: hidden; + color: #000; +} + +@media (width < 1300px) { + .widget { + --square-size: calc((min(950px, 100vw - 100px) - (var(--gap) * 7)) / 8); + } +} + +@media (width < 880px) { + .widget { + --square-size: calc((max(320px, min(480px, calc(100vw - 50px))) - (var(--gap) * 3)) / 4); + } +} + +.widget:hover { + background-color: #defc; +} + +.widget:active { + transform: perspective(300px) translateZ(-10px); +} + +.widget a { + display: flex; + flex-direction: row; + box-sizing: border-box; + padding: 24px; + width: 100%; + height: 100%; + color: #000; +} + +.widget a[href='#'] { + pointer-events: none; +} + +.widget a[aria-label] { + box-sizing: border-box; + padding: 0; +} + +.widget a[aria-label] .image { + background: var(--bg) center/contain no-repeat; + width: 100%; + height: 100%; +} + +.widget .content { + display: flex; + flex-direction: column; +} + +.widget .icon { + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + width: 40px; + height: 40px; + overflow: hidden; + color: #fff; +} + +.widget .icon svg { + width: var(--size, 70%); + height: var(--size, 70%); +} + +.widget .icon img { + width: 100%; + height: 100%; +} + +.widget .meta { + margin-top: 10px; +} + +.widget[style*='--rows: 1;'] .content { + flex-direction: row; + align-items: center; +} + +.widget[style*='--rows: 1;'] .meta { + margin-top: 0; + margin-left: 20px; + white-space: nowrap; +} + +@media (width < 880px) { + .widget[style*='--m-'] { + --c: min(var(--m-columns, 2), var(--template-columns)); + --r: var(--m-rows, 2); + } +} + +#github { + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: 18px 24px; + width: 100%; + height: 100%; +} + +#github .line { + display: flex; + align-items: center; + gap: 6px; + color: #000b; +} + +#github svg { + fill: #07c; +} + +#github .title { + flex: 0 0 14em; +} + +#discord { + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: 24px; + width: 100%; + height: 100%; +} + +#discord .content { + flex-direction: row; +} + +#discord .meta { + margin-top: 0; + margin-left: 14px; +} + +#dot { + display: inline-block; + margin-right: .1em; + border-radius: 50%; + width: .6em; + height: .6em; +} + +#discord .rpc { + display: flex; + flex-direction: row; + margin-top: 10px; + white-space: nowrap; +} + +#discord .rpc .meta { + color: #000b; +} + +#large_image { + border-radius: 10px; + background: var(--image) center/cover no-repeat; + width: 72px; + height: 72px; +} + +#small_image { + position: relative; + top: -22px; + left: 50px; + border-radius: 50%; + background: var(--image) center/cover no-repeat; + width: 30px; + height: 30px; +} + +#clock { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + gap: 10px; + box-sizing: border-box; + padding: 20px; + width: 100%; + height: 100%; +} + +#clock .face { + position: relative; + aspect-ratio: 1/1; + height: 100%; +} + +#clock .face div, +#clock .face svg { + position: absolute; + width: 100%; + height: 100%; +} + +#clock .face svg { + fill: #adf; +} + +#hour-hand::before, +#minute-hand::before, +#second-hand::before { + position: absolute; + bottom: 46%; + left: 46%; + border-radius: 50px; + background-color: var(--color); + width: 8%; + height: var(--h); + content: ''; +} + +#hour-hand { + --h: 30%; + --color: #36b; +} + +#minute-hand { + --h: 40%; + --color: #48d; +} + +#second-hand { + --h: 8%; + --color: #48d; + transition: transform .2s; +} + +#second-hand::before { + top: 7%; +} + +#clock .date { + color: #000b; + font-size: 1.2em; +} + +#clock .time { + min-width: 7ch; + font-weight: bold; + font-size: 2.5em; +} + +#minute~span { + color: #0006; +} + +#timezone-diff { + color: #000b; +} + +#utc-offset { + color: #0009; +} + +aside { + display: flex; + grid-column: span 4; + flex-direction: column; + gap: 20px; +} + +@media (width < 1300px) { + aside { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} + +@media (width < 880px) { + aside { + display: flex; + } +} + +.project { + transition: transform .2s linear, background-color .2s linear; + border-radius: 16px; + background: #defa; + overflow: hidden; +} + +.project:hover { + background-color: #defc; +} + +.project:active { + transform: perspective(300px) translateZ(-10px); +} + +.project a { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 5px; + box-sizing: border-box; + padding: 15px 20px; + width: 100%; + height: 100%; + color: #000; +} + +.project b { + color: #06b; + font-size: 1.1em; +} + +.project .meta { + display: flex; + flex-direction: row; + gap: 10px; + width: 100%; + color: #000b; +} + +.project .meta svg { + fill: #000b; +} + +.project .meta div { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; +} + +.project .lang { + flex: 1; + justify-content: flex-end; +} + +.project .lang .color { + margin-right: .1em; + border-radius: 50%; + width: .6em; + height: .6em; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + margin-top: -35vh; + height: 15vh; + font-size: 20px; +} + +footer p { + opacity: .65; + transition: opacity .2s; + color: #fff; + line-height: 2; + text-align: center; +} + +footer div:hover { + opacity: .8; +} + +footer a { + transition: color .2s; + color: #fff; +} + +footer a:hover { + color: #7df; +} + +#os { + position: fixed; + inset: 0 0 0 auto; + box-sizing: border-box; + padding: 4px; + width: 16px; +} + +@media (width < 880px) { + #os { + display: none; + } +} + +#track { + height: 100%; + touch-action: none; +} + +#handle { + transition: background-color .2s; + border-radius: 4px; + background: #def6; +} + +#handle:before { + position: absolute; + inset: -4px; + content: ''; +} + +#handle:hover { + background: #defa; +} + +a { + text-decoration: none; +} + +b+p { + color: #000b; +} + +h1, +p { + margin: 0; +} + +html { + -webkit-tap-highlight-color: transparent; + scrollbar-width: none; + user-select: none; +} + +::-webkit-scrollbar { + display: none; +} + +@font-face { + src: url('/font.woff2') format('woff2'); + font-family: Inter; + font-display: swap; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..59ff5e5 --- /dev/null +++ b/index.html @@ -0,0 +1,463 @@ + + + + + AutumnVN + + + + + + + + + + + + + +
+ +
+ avatar +
+

+ + AutumnVN + +

+

Hi! I'm AutumnVN, a dude from Vietnam. Nice to meet you :3

+
+
+ +
+ + + +
+ +
+
+
+ +
+
+ + + +
+
+ GitHub +

AutumnVN

+
+
+ +
+ +
+ +
+
+ + + +
+
+ Discord +

autumnvn

+
+
+ +
+ +
+ +
+
+ + + +
+
+ Facebook +

autumnvnchino

+
+
+ +
+ +
+ +
+
+ + + +
+
+ Youtube +

AutumnVN

+
+
+ +
+ +
+
+
+ + + +
Total Stars Earned:
+
-
+
+
+ + + +
Total Forks Earned:
+
-
+
+
+ + + +
Total Commits (2023):
+
-
+
+
+ + + +
Total PRs:
+
-
+
+
+ + + +
Total Issues:
+
-
+
+
+ + + +
Contributed to (last year):
+
-
+
+
+
+ +
+
+
+
+ avatar +
+
+ +

+ + + +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + +
+
+
+
+
+
+ + ICT +
+
+ :: +
+
+ + +
+
+
+
+ +
+ +
+ +
+ +
+ +
+
+ + + +
+
+ Email +

autumnvnchino@gmail.com

+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + + +
+
+ Twitter +

autumnvnchino

+
+
+ +
+ +
+ +
+
+ + + +
+
+ osu! +

AutumnVN

+
+
+ +
+ +
+ +
+
+ + + +
+
+ Chino Kafuu osu! skin +

Gotchuumon wa Usagi desu ka?

+
+
+ +
+ +
+ +
+
+ + + +
+
+ Mahiru Shiina osu! skin +

Otonari no Tenshi-sama

+
+
+ +
+
+ + +
+ + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..2c665bd --- /dev/null +++ b/index.js @@ -0,0 +1,165 @@ +(window.setScroll = () => document.body.style.setProperty('--scroll', scrollY / innerHeight))(); +['scroll', 'resize'].forEach(e => addEventListener(e, setScroll)); + +const bg = document.querySelector('#bg'); + +addEventListener('touchstart', () => bg.style.setProperty('--multiplier', '0')); +addEventListener('mousemove', ({ clientX, clientY }) => { + bg.style.setProperty('--tx', `${20 * (clientX - innerWidth / 2) / innerWidth}px`); + bg.style.setProperty('--ty', `${20 * (clientY - innerHeight / 2) / innerHeight}px`); +}); + +['mouseenter', 'mouseleave'].forEach(e => document.addEventListener(e, () => { + if (e === 'mouseleave') bg.removeAttribute('style'); + bg.style.transition = 'transform .1s linear'; + setTimeout(() => bg.style.transition = '', 100); +})); + +document.querySelector('#arrow svg').addEventListener('click', () => { + const start = performance.now(); + + !function step() { + const progress = (performance.now() - start) / 200; + scrollTo({ top: (innerWidth > 880 ? .3 : .8) * innerHeight * easeOutCubic(progress) }); + if (progress < 1) requestAnimationFrame(step); + }(); + + function easeOutCubic(x) { + return 1 - Math.pow(1 - x, 3); + } +}); + +document.querySelector('footer span').addEventListener('click', async () => { + const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: { frameRate: { ideal: 60 } } }); + const recoder = new MediaRecorder(stream); + const [video] = stream.getVideoTracks(); + + recoder.start(); + video.addEventListener('ended', () => recoder.stop()); + recoder.addEventListener('dataavailable', e => { + const a = document.createElement('a'); + a.href = URL.createObjectURL(e.data); + a.download = 'watch if cute.webm'; + a.click(); + }); +}); + +fetch('/stats').then(r => r.json()).then(repos => { + const stats = repos.pop(); + document.querySelectorAll('.stat').forEach((stat, i) => stat.textContent = stats[i]); + document.querySelectorAll('.star').forEach((star, i) => star.textContent = repos[i][0]); + document.querySelectorAll('.fork').forEach((fork, i) => fork.textContent = repos[i][1]); +}); + +const visit = new Date(new Date().setSeconds(0, 0)).getTime(); +const map = new Map(); + +!function setClock() { + const date = new Date(); + const time = date.getTime(); + const { year, month, day, hour, minute, second } = myTime(); + const hourOff = -date.getTimezoneOffset() / 60; + const minuteOff = new Date(time - time % 1000 - hourOff * 60 * 60 * 1000); + const tzOff = (new Date(year, month - 1, day, hour, minute, second) - minuteOff) / 1000 / 60 / 60; + const tzDiff = tzOff - hourOff; + + update('#hour-hand', `rotate(${hour % 12 / 12 * 360 + minute / 60 * 30 + second / 60 / 60 * 30}deg)`); + update('#minute-hand', `rotate(${minute / 60 * 360 + second / 60 * 6}deg)`); + update('#second-hand', `rotate(${360 * Math.floor((time - visit) / 60 / 1000) + second / 60 * 360}deg)`); + update('#date', new Date(time + tzDiff * 60 * 60 * 1000).toLocaleDateString()); + ['hour', 'minute', 'second'].forEach(u => update(`#${u}`, eval(u).toString().padStart(2, '0'))); + update('#timezone-diff', tzDiff === 0 ? 'same time' : (tzDiff > 0 ? `${format(tzDiff)} ahead` : `${format(-tzDiff)} behind`)); + update('#utc-offset', ` / UTC ${(tzOff >= 0 ? '+' : '')}${Math.floor(tzOff)}:${(tzOff % 1 * 60).toString().padStart(2, '0')}`); + + setRpcTimestamp(map.get('timestamp')); + + setTimeout(setClock, 1000 - time % 1000); + + function myTime() { + const obj = {}; + const options = { timeZone: 'Asia/Ho_Chi_Minh', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false, day: 'numeric', month: 'numeric', year: 'numeric' }; + new Intl.DateTimeFormat([], options).formatToParts(new Date()).forEach(({ type, value }) => obj[type] = +value); + return obj; + }; + + function format(tzDiff) { + if (tzDiff < 0) return `-${format(-tzDiff)}`; + const minute = tzDiff % 1 * 60; + tzDiff = Math.floor(tzDiff); + return minute ? `${tzDiff}h ${minute}m` : `${tzDiff}h`; + } +}(); + +!function lanyard() { + const ActivityType = ['Playing', 'Streaming to', 'Listening to', 'Watching', 'Custom status', 'Competing in']; + const StatusColor = { online: '#4b8', idle: '#fa1', dnd: '#f44', offline: '#778' }; + const ws = new WebSocket('wss://api.lanyard.rest/socket'); + + ws.addEventListener('open', () => ws.send(JSON.stringify({ op: 2, d: { subscribe_to_id: '393694671383166998' } }))); + ws.addEventListener('error', () => ws.close()); + ws.addEventListener('close', () => setTimeout(lanyard, 1000)); + + ws.addEventListener('message', async ({ data }) => { + const { t, d } = JSON.parse(data); + if (t !== 'INIT_STATE' && t !== 'PRESENCE_UPDATE') return; + + update('#name', d.discord_user.display_name); + update('#dot', StatusColor[d.discord_status]); + + const activities = d.activities.filter(a => a.type !== 4); + if (!activities.length) { + update('#status', d.discord_status); + update(['#large_image', '#small_image', '#activity', '#details', '#state']); + return setRpcTimestamp(); + } + + const a = activities[0]; + ['large_image', 'small_image'].forEach(size => update(`#${size}`, + !a.assets?.[size] + ? '' + : a.assets[size].startsWith('mp:') + ? `--image: url(https://media.discordapp.net/${a.assets[size].slice(3)}?width=${getSize(size)}&height=${getSize(size)})` + : a.assets[size].startsWith('spotify:') + ? `--image: url(https://i.scdn.co/image/${a.assets[size].slice(8)})` + : `--image: url(https://cdn.discordapp.com/app-assets/${a.application_id}/${a.assets[size]}.png?size=${getSize(size)})`)); + update('#status', ActivityType[a.type]); + update('#activity', a.name); + update('#details', a.details); + update('#state', a.state); + + const timestamp = a.timestamps?.end ? a.timestamps.end : a.timestamps?.start; + if (map.get('timestamp') !== timestamp) setRpcTimestamp(map.set('timestamp', timestamp).get('timestamp')); + }); + + function getSize(size) { + return size === 'large_image' ? 96 : 40; + } +}(); + +function update(selector, value = '') { + if (Array.isArray(selector)) return selector.forEach(s => update(s, value)); + if (map.get(selector) === value) return; + + const e = document.querySelector(selector); + + if (value.startsWith('rotate')) e.style.transform = value; + else if (value.match(/^#[a-f0-9]+$/)) e.style.backgroundColor = value; + else if (value.startsWith('--image')) e.style.setProperty(value.split(':')[0], value.split(' ')[1]); + else if (value === '' && (['#large_image', '#small_image'].includes(selector))) e.removeAttribute('style'); + else e.textContent = value; + + map.set(selector, value); +} + +function setRpcTimestamp(timestamp) { + if (!timestamp) { + update('#timestamp'); + return map.delete('timestamp'); + } + const diff = Math.abs(timestamp - Date.now()); + const hour = Math.floor(diff / 1000 / 60 / 60); + const minute = Math.floor(diff / 1000 / 60) % 60; + const second = Math.floor(diff / 1000) % 60; + const format = n => n.toString().padStart(2, '0'); + update('#timestamp', `${hour ? `${format(hour)}:` : ''}${format(minute)}:${format(second)} ${timestamp > Date.now() ? 'left' : 'elapsed'}`); +} diff --git a/min.js b/min.js new file mode 100644 index 0000000..5d4c2b0 --- /dev/null +++ b/min.js @@ -0,0 +1 @@ +!function(){function p(e,t){for(var r of e)t(r);return e}const h=(e,t)=>e.push(t),y=e=>p(e,e=>e()),m=(e,t,r)=>e.setAttribute(t,r),v=(e,t)=>e.insertBefore(t,e.firstChild),f=e=>{var t=document.createElement("div");return m(t,"id",e),t},E=e=>e.offsetHeight,w=e=>e.getBoundingClientRect(),L=(t,e,r)=>{const n=[];return p(e.split(" "),e=>{h(n,((e,t,r)=>e.removeEventListener(t,r)).bind(0,t,e,r)),t.addEventListener(e,r)}),y.bind(0,n)},g=(e,t,r)=>r?r.a/(r.a+r.b):w(e).height/w(t).height;return e=>{const t=(e=>{const[t,r]=(()=>{const n=new Map;return[(e,t)=>{const r=n.get(e)||new Set;return n.set(e,r),p([t],e=>r.add(e))},(e,t)=>p((e=n.get(e),Array.from(e)),e=>e(t))]})(),n={Z:d=(e=e.ownerDocument).documentElement,J:d,d:d,e:e,f:e.defaultView,c:e},o=(c=n,[()=>c,e=>c=e]),i=o[0],s=(()=>{const e=(e=>{const t=o[1];return()=>t({a:e.f.innerHeight,b:e.J.scrollHeight-e.f.innerHeight})})(n);return()=>p([e],e=>e())})(),a=i.bind(0);var c,d;return n,d=n.Z,new ResizeObserver(()=>{s(),r("u")}).observe(d),a.n=e=>t("u",e),a.m=n,a})(e),r=(e=>{const[t]=(e=>{var t,r,n,o;const{c:i,Z:s,d:a}=e,c=(e,n)=>p(e,t=>{var[t,r]=n(t);p(Object.keys(r),e=>t.style[e]=r[e])}),d=[];return r={g:e=f("os"),h:o=f("track"),i:t=f("handle")},v(e,o),v(o,t),h(d,r),n=r,m,e=i,o=a,y.bind(0,((u,p,h,m)=>{const{i:v,h:f}=n,g="scrollTop",b="clientY";return L(f,"pointerdown",e=>{var r;const n=Element.prototype.closest.call(e.target,"#handle")===v,t=n?v:f;if(0===e.button&&e.isPrimary&&n&&u.scrollbars.pointers.includes(e.pointerType)){r=h[g];const o=e[b],i=w(v),s=w(f),a=i.top-s.top+i.height/2,c=n?0:o-s.top-a,d=e=>{y(l),t.releasePointerCapture(e.pointerId)},l=[L(p,"pointerup pointerleave pointercancel lostpointercapture",d),L(f,"pointermove",e=>{var t;e=e[b]-o,n&&(e=c+e,t=m().b,e=e/(E(f)-E(v))*t,h[g]=r+e)})];v.setPointerCapture(e.pointerId)}})})(l,e,o,u)),[{k:r=>c(d,e=>{var{i:e,h:t}=e;return[e,{height:(100*g(e,t,r)).toFixed(3)+"%"}]}),l:o=>c(d,e=>{var t,r,{i:e,h:n}=e;return[e,{transform:`translateY(${(100*(r=o.b,t=a.scrollTop/r,1/(r=g(e,n))*(1-r)*t)).toFixed(3)}%)`}]})},v(s,d[0].g)]})(e.m,(l={scrollbars:{dragScroll:!0,pointers:["mouse","touch","pen"]}},u=e)),r=e.m.e,{k:n,l:o}=t;var l,u;return L(r,"scroll",()=>o(e())),()=>{n(e()),o(e())}})(t);return t.n(()=>r())}}()(document.body); \ No newline at end of file diff --git a/nocss.html b/nocss.html new file mode 100644 index 0000000..0c1fd01 --- /dev/null +++ b/nocss.html @@ -0,0 +1,83 @@ + + + + + + AutumnVN (no-css) + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +

AutumnVN

+

Hi! I'm AutumnVN, a dude from Vietnam. Nice to meet you :3

+
+

an epic no-css site

+

You can find me on

+ +

Projects

+ +

Email: autumnvnchino@gmail.com

+
+

main site • nocss.club

+
+ + + + diff --git a/noscript.css b/noscript.css new file mode 100644 index 0000000..b569907 --- /dev/null +++ b/noscript.css @@ -0,0 +1,10 @@ +.main { + opacity: 1; + margin-bottom: 35vh; +} + +.arrow, +.js, +.project .meta>div:not(.lang) { + display: none; +} diff --git a/osu.png b/osu.png new file mode 100644 index 0000000..65ea4bd Binary files /dev/null and b/osu.png differ diff --git a/preview.png b/preview.png new file mode 100644 index 0000000..55f5dc1 Binary files /dev/null and b/preview.png differ diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..eb05362 --- /dev/null +++ b/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: diff --git a/skin/Chino.osk b/skin/Chino.osk new file mode 100644 index 0000000..dbca266 Binary files /dev/null and b/skin/Chino.osk differ diff --git a/skin/Mahiru.osk b/skin/Mahiru.osk new file mode 100644 index 0000000..0560d26 Binary files /dev/null and b/skin/Mahiru.osk differ