initial commit

This commit is contained in:
Timofey Gelazoniya 2021-07-29 23:47:30 +03:00
commit 896146e0d9
20 changed files with 2318 additions and 0 deletions

5
.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021 Timofey Gelazoniya
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.

43
README.md Normal file
View File

@ -0,0 +1,43 @@
# Personal Website
See: [zeldon.ru](https://zeldon.ru).
My personal website. An [MIT](https://github.com/xzeldon/zeldon-site/blob/main/LICENSE) licensed, easy modifiable.
## Dependencies
Only [Vite](https://vitejs.dev/) for development and bundling.
## Set up
To download the repository and install dependencies, run the following commands:
```bash
git clone git://github.com/xzeldon/zeldon-site.git # replace [xzeldon] with your github username if you fork first.
cd zeldon-site
npm install
```
## Running
Run the following command to build the application and serve it with fast refresh:
```bash
npm run dev
```
Your web browser should automatically open to `<ip>:<port>:<path>` default: [http://localhost:3000/](http://localhost:3000/).
## Static export
To statically export the site, run this command:
```bash
npm run build
```
This generates a static export of the website as `zeldon-site/dist/`. Copy this and self-host or deploy to a CDN.
## Acknowledgements
* Background animation: [WebGL-Fluid-Simulation](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation) by [@PavelDoGreat](https://github.com/PavelDoGreat).
* Special thanks to [@xm1ller](https://github.com/xm1ller) for tirelessly answering all of my css questions.

75
index.html Normal file
View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="favicon/favicon.ico" sizes="any">
<link rel="icon" href="favicon/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png">
<title>zeldØƞ</title>
<meta name="description" content="zeldon's website">
<meta property="og:type" content="website">
<meta property="og:title" content="zeldØƞ">
<meta property="og:description" content="zeldon's website">
<meta property="og:url" content="https://zeldon.ru">
<meta property="og:image" content="ogimage.jpg">
<!-- analytics -->
<script async defer data-domain="zeldon.ru" src="https://analytics.zeldon.ru/js/plausible.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<div class="content-info">
<h1 class="name perspective">TIMOFEY <br>GELAZONIYA</h1>
<h4 class="greeting perspective"></h4>
<h4 class="clock perspective"></h4>
</div>
<div class="button-container perspective">
<button class="button button--hyperion" onclick="window.open('https://spotify.zeldon.ru', '_blank')"
type="button">
<span class="button-inner">
<svg class="spotify-icon" height="30" width="30" viewBox="0 0 170 170">
<path
d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z" />
</svg>
<span>
<span>Sign in with Spotify</span>
</span>
</span>
</button>
<div class="links-container">
<a class="link" target="_blank" rel="noopener noreferrer" href="https://vk.com/xzeldon">
<span class="link-text">
vk
</span>
</a>
<a class="link" target="_blank" rel="noopener noreferrer" href="https://github.com/xzeldon">
<span class="link-text">
github
</span>
</a>
<a class="link" target="_blank" rel="noopener noreferrer" href="https://t.me/xzeldon">
<span class="link-text">
telegram
</span>
</a>
</div>
</div>
</div>
</div>
<canvas></canvas>
<script type="module" src="./src/main.js"></script>
</body>
</html>

32
package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "zeldon-site",
"version": "1.0.0",
"description": "My personal website — Build with Vanilla JS.",
"license": "MIT",
"author": {
"name": "Timofey (xzeldon)",
"email": "contact@zeldon.ru",
"url": "https://zeldon.ru"
},
"contributors": [
{
"name": "Nikita (xm1ller)",
"email": "xm1ller.digital@gmail.com"
}
],
"homepage": "https://zeldon.ru",
"keywords": [
"website",
"personal",
"site",
"homepage"
],
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"devDependencies": {
"vite": "^2.3.7"
}
}

BIN
public/LDR_LLL1_0.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/favicon/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<defs>
<style>
.cls-1 {
fill: #1c1c1c;
}
.cls-2, .cls-3 {
font-size: 54px;
fill: #fff;
font-family: Gotham;
font-weight: 300;
}
.cls-2 {
opacity: 0.02;
}
</style>
</defs>
<rect id="Rounded_Rectangle_1" data-name="Rounded Rectangle 1" class="cls-1" x="19" y="19" width="475" height="474" rx="83" ry="83"/>
<text id="Z_copy_4" data-name="Z copy 4" class="cls-2" transform="translate(522.885 30.084) rotate(-175.193) scale(13.308)">Z</text>
<text id="Z_copy_5" data-name="Z copy 5" class="cls-2" transform="translate(479.815 520.812) rotate(-85.193) scale(13.308)">Z</text>
<text id="Z_copy_6" data-name="Z copy 6" class="cls-2" transform="matrix(-8.589, -10.166, 10.166, -8.589, 607.135, 290.838)">Z</text>
<text id="Z_copy_7" data-name="Z copy 7" class="cls-2" transform="matrix(10.166, -8.589, 8.589, 10.166, 229.683, 607.38)">Z</text>
<text id="Z" class="cls-3" transform="translate(349.456 422.32) rotate(-75) scale(7.165)">Z</text>
<text id="Z_copy" data-name="Z copy" class="cls-3" transform="translate(93.511 352.737) rotate(15) scale(7.165)">Z</text>
<text id="Z_copy_2" data-name="Z copy 2" class="cls-3" transform="translate(203.248 442.12) rotate(-30) scale(7.165)">Z</text>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

1637
public/fluid.js Normal file

File diff suppressed because it is too large Load Diff

BIN
public/ogimage.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 938 KiB

112
src/app.js Normal file
View File

@ -0,0 +1,112 @@
import { event_listener_array, calc_delta_time } from './utils';
export function perspective_3d(class_name)
{
const elements = document.body.getElementsByClassName(class_name);
let velocity_x = 0;
let velocity_y = 0;
let rotation_x = 0;
let rotation_y = 0;
let target_rotation_x = 0;
let target_rotation_y = 0;
(function update()
{
let dt = calc_delta_time();
const ss = .08;
velocity_x = spring(rotation_x, target_rotation_x, velocity_x, 10, dt);
velocity_y = spring(rotation_y, target_rotation_y, velocity_y, 10, dt);
rotation_x += velocity_x * dt * ss;
rotation_y += velocity_y * dt * ss;
const style = `perspective(700px) rotateX(${rotation_y}rad) rotateY(${rotation_x}rad)`;
for (const el of elements)
{
el.style.transform = style;
}
requestAnimationFrame(update);
})();
event_listener_array(window, ["mousemove", "touchmove"], (e) =>
{
if (e.changedTouches && e.changedTouches[0])
{
e = e.changedTouches[0];
}
target_rotation_x = (e.clientX / window.innerWidth) * 2 - 1;
target_rotation_y = -(e.clientY / window.innerHeight) * 2 + 1;
target_rotation_x = clamp(target_rotation_x, -0.5, 0.5);
target_rotation_y = clamp(target_rotation_y, -0.5, 0.5);
}, false);
function spring(position, target, velocity, omega, dt)
{
let n1 = velocity - (position - target) * (Math.pow(omega, 2) * dt);
let n2 = 1 + omega * dt;
return n1 / Math.pow(n2, 2);
}
function clamp(value, min, max)
{
return Math.min(Math.max(value, min), max);
}
}
(function pick_greeting()
{
const hours = new Date().getHours();
const greeing_el = document.querySelector(".greeting");
if (hours < 6)
{
const data = "Good night";
greeing_el.textContent = data;
greeing_el.innerText = data;
} else if (hours >= 6 && hours < 12)
{
const data = "Good morning";
greeing_el.textContent = data;
greeing_el.innerText = data;
} else if (hours >= 12 && hours < 16)
{
const data = "Good afternoon";
greeing_el.textContent = data;
greeing_el.innerText = data;
} else if (hours >= 16 && hours <= 23)
{
const data = "Good evening";
greeing_el.textContent = data;
greeing_el.innerText = data;
} else
{
const data = "Hello";
greeing_el.textContent = data;
greeing_el.innerText = data;
}
setTimeout(pick_greeting, 6e4);
})();
(function render_time()
{
const time = new Date();
let h = time.getHours();
h = h.toString().padStart(2, 0);
let m = time.getMinutes().toString().padStart(2, 0);
let s = time.getSeconds().toString().padStart(2, 0);
const clock_el = document.querySelector('.clock');
if (!clock_el) return;
const formatted_date = `${h}:${m}:${s}`;
clock_el.textContent = formatted_date;
clock_el.innerText = formatted_date;
setTimeout(render_time, 1e3);
})();

9
src/css/animation.css Normal file
View File

@ -0,0 +1,9 @@
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}

117
src/css/button.css Normal file
View File

@ -0,0 +1,117 @@
.button-container {
margin-top: 2em;
}
.button {
cursor: pointer;
background: #e7e7e7;
border: 0;
border-radius: 2px;
padding: 1.5rem 3rem;
font-family: inherit;
font-variation-settings: "wght" 700;
letter-spacing: -0.02em;
font-size: 1em;
position: relative;
padding: 1rem 1.5rem;
overflow: hidden;
color: #fff;
opacity: 0.5;
transition: opacity 300ms;
}
.button:hover {
opacity: 1.0;
}
.button-inner {
display: grid;
grid-auto-flow: column;
align-items: center;
grid-gap: 0.7em;
}
.button::before,
.button::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.button--hyperion > span {
overflow: hidden;
}
.button--hyperion > span > span {
overflow: hidden;
mix-blend-mode: difference;
}
.button--hyperion:hover > span > span {
animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
}
.button--hyperion::before {
content: '';
background: rgba(0, 0, 0, 1);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
transform-origin: 100% 50%;
}
.button--hyperion:hover::before {
transform: scale3d(0,1,1);
transform-origin: 0% 50%;
}
@keyframes MoveUpInitial {
to {
transform: translate3d(0,-105%,0);
}
}
@keyframes MoveUpEnd {
from {
transform: translate3d(0,100%,0);
}
to {
transform: translate3d(0,0,0);
}
}
.spotify-icon {
position: relative;
fill: currentColor;
mix-blend-mode: difference;
}
.links-container {
margin-top: 1.5em;
display: grid;
grid-auto-flow: column;
grid-gap: 1em;
justify-content: center;
align-items: center;
}
.link {
color: white;
text-decoration: none;
letter-spacing: -0.03em;
font-variation-settings: "wght" 500;
font-size: 1.1em;
mix-blend-mode: overlay;
opacity: 0.5;
padding-bottom: 0.2em;
padding-left: 0.5em;
padding-right: 0.5em;
border-bottom: solid 2px #FFFFFF00;
transition: opacity 300ms, border-bottom 300ms;
}
.link:hover {
opacity: 1.0;
border-bottom: solid 2px #FFFFFF50;
}

19
src/css/font.css Normal file
View File

@ -0,0 +1,19 @@
@font-face {
font-family: "Inter Var";
font-weight: 400 900;
font-display: swap;
font-style: normal;
src: url("/src/font/Inter.woff2") format("woff2");
}
html {
font-family: "Inter Var", sans-serif;
font-size: 17px;
box-sizing: border-box;
}
.greeting {
font-variation-settings: "wght" 400;
letter-spacing: 0rem;
line-height: 1.7rem;
}

75
src/css/style.css Normal file
View File

@ -0,0 +1,75 @@
* {
user-select: none;
-webkit-user-select: none
}
html {
box-sizing: border-box;
}
body {
margin: 0;
display: grid;
user-select: none;
background: rgb(0, 0, 0);
color: #FFF;
touch-action: none;
-webkit-overflow-scrolling: auto;
overflow: hidden;
overscroll-behavior: none;
}
canvas {
width: 100%;
height: 100%;
}
.greeting {
margin-bottom: 0.5em;
}
.clock {
margin-top: 0
}
.container {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
font-size: 17px;
}
canvas,
.container {
grid-column: 1 / -1;
grid-row: 1 / -1
}
.content {
text-align: center;
letter-spacing: 0.5em;
animation: fadein 2s both cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.content>* {
opacity: 0.5;
}
.content-info {
transition: opacity 300ms;
}
.content-info:hover {
opacity: 1.0;
}
.button-container {
opacity: 1.0;
}
@media (max-width: 420px) {
body {
height: 100%;
}
}

BIN
src/font/Inter.woff2 Normal file

Binary file not shown.

19
src/main.js Normal file
View File

@ -0,0 +1,19 @@
// CSS Import
import './css/style.css';
import './css/font.css';
import './css/animation.css';
import './css/button.css';
// JS Import
import './app';
import { perspective_3d } from './app';
import { import_js_as_module } from './utils';
window.onload = start;
async function start()
{
await import_js_as_module('/fluid.js');
perspective_3d('perspective');
}

38
src/utils.js Normal file
View File

@ -0,0 +1,38 @@
export let last_update = Date.now();
export function calc_delta_time()
{
let now = Date.now();
let dt = (now - last_update) / 1e3;
dt = Math.min(dt, 0.016);
last_update = now;
return dt;
}
export function event_listener_array(whos, event_names, callback, options = null)
{
if (!Array.isArray(whos))
{
whos = [whos];
}
for (const name of event_names)
{
for (const who of whos)
{
who.addEventListener(name, callback, options);
}
}
}
export async function import_js_as_module(url)
{
return new Promise((resole, reject) =>
{
const body = document.getElementsByTagName('body')[0];
const script = document.createElement('script');
script.type = 'module';
script.src = url;
script.onload = resole;
body.appendChild(script);
});
}

88
yarn.lock Normal file
View File

@ -0,0 +1,88 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
colorette@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
esbuild@^0.12.8:
version "0.12.9"
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.9.tgz#bed4e7087c286cd81d975631f77d47feb1660070"
integrity sha512-MWRhAbMOJ9RJygCrt778rz/qNYgA4ZVj6aXnNPxFjs7PmIpb0fuB9Gmg5uWrr6n++XKwwm/RmSz6RR5JL2Ocsw==
fsevents@~2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
has@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
dependencies:
function-bind "^1.1.1"
is-core-module@^2.2.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
dependencies:
has "^1.0.3"
nanoid@^3.1.23:
version "3.1.23"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
path-parse@^1.0.6:
version "1.0.7"
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
postcss@^8.3.4:
version "8.3.5"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
dependencies:
colorette "^1.2.2"
nanoid "^3.1.23"
source-map-js "^0.6.2"
resolve@^1.20.0:
version "1.20.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
dependencies:
is-core-module "^2.2.0"
path-parse "^1.0.6"
rollup@^2.38.5:
version "2.52.2"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.52.2.tgz#a7e90d10ddae3e8472c2857bd9f44b09ef34a47a"
integrity sha512-4RlFC3k2BIHlUsJ9mGd8OO+9Lm2eDF5P7+6DNQOp5sx+7N/1tFM01kELfbxlMX3MxT6owvLB1ln4S3QvvQlbUA==
optionalDependencies:
fsevents "~2.3.2"
source-map-js@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
vite@^2.3.7:
version "2.3.8"
resolved "https://registry.yarnpkg.com/vite/-/vite-2.3.8.tgz#42e3e03953859fd410e4e6ab3d1cca0aab2adc3c"
integrity sha512-QiEx+iqNnJntSgSF2fWRQvRey9pORIrtNJzNyBJXwc+BdzWs83FQolX84cTBo393cfhObrtWa6180dAa4NLDiQ==
dependencies:
esbuild "^0.12.8"
postcss "^8.3.4"
resolve "^1.20.0"
rollup "^2.38.5"
optionalDependencies:
fsevents "~2.3.2"