z0xca/z0x.ca
Code Activity Actions

astrojs rewrite

Browse source
This commit is contained in:
z0x 2024-10-26 18:00:28 -04:00
parent e7a707b4e2
commit 39c53b1bd1
20 changed files with 8110 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/css/snowflake.css Normal file
View file

@ -0,0 +1,24 @@
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes snowfall {
0% {
transform: translateY(-10vh);
}
100% {
transform: translateY(130vh);
}
}
.snowflake {
background: white;
border-radius: 50%;
position: fixed;
top: -5vh;
animation: snowfall infinite;
opacity: 0.1;
}

1
src/env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference path="../.astro/types.d.ts" />

BIN
src/img/gradient.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 339 KiB

106
src/img/logo.svg Normal file
View file

@ -0,0 +1,106 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="500"
height="500"
viewBox="0 0 500 500"
version="1.1"
xml:space="preserve"
style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
id="svg3"
sodipodi:docname="logo.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs3"><linearGradient
id="linearGradient26"
inkscape:collect="always"><stop
style="stop-color:#ffffff;stop-opacity:0.30000001;"
offset="0"
id="stop26" /><stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="0.9638136"
id="stop27" /></linearGradient><inkscape:path-effect
effect="simplify"
id="path-effect16"
is_visible="true"
lpeversion="1.3"
threshold="1000000"
steps="1"
smooth_angles="360"
helper_size="10"
simplify_individual_paths="false"
simplify_just_coalesce="false" /><filter
inkscape:label="Evanescent"
inkscape:menu="Blurs"
inkscape:menu-tooltip="Blur the contents of objects, preserving the outline and adding progressive transparency at edges"
style="color-interpolation-filters:sRGB;"
id="filter16"
x="-0.027"
y="-0.027"
width="1.054"
height="1.054"><feGaussianBlur
result="result6"
stdDeviation="5.0625"
in="SourceGraphic"
id="feGaussianBlur16" /><feColorMatrix
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 "
result="result7"
in="SourceGraphic"
id="feColorMatrix16" /><feComposite
operator="in"
in="result6"
in2="result7"
id="feComposite16" /></filter><radialGradient
inkscape:collect="always"
xlink:href="#linearGradient26"
id="radialGradient27"
cx="250"
cy="250"
fx="250"
fy="250"
r="250"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.6,0,0,0.6,100.00001,100.00002)" /><filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter1"
x="-0.243"
y="-0.243"
width="1.486"
height="1.486"><feGaussianBlur
inkscape:collect="always"
stdDeviation="30.375"
id="feGaussianBlur1" /></filter></defs><sodipodi:namedview
id="namedview3"
pagecolor="#222222"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#cccccc"
inkscape:zoom="1.855092"
inkscape:cx="249.58331"
inkscape:cy="249.58331"
inkscape:window-width="2256"
inkscape:window-height="1504"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg3" />
<circle
style="display:inline;mix-blend-mode:normal;fill:url(#radialGradient27);fill-opacity:1;stroke-width:0.300003;filter:url(#filter1)"
id="path24"
cx="250"
cy="250"
r="150"
inkscape:label="backlight" /><path
d="M 250.00005,25 268,151 c 3.11463,19.35442 13.1387,38.54023 27,52.39957 13.86121,13.8621 34.64617,25.48527 54,28.60043 L 475,250.00001 349,268 c -19.35383,3.11517 -40.13879,14.73834 -54,28.60043 C 281.1387,310.45977 271.11463,329.64558 268,349 L 250.00005,475 232,349 C 228.88537,329.64558 218.86121,310.45977 205,296.60043 191.1387,282.73834 170.35383,271.11517 151,268 L 25,250.00001 151,232 c 19.35383,-3.11516 40.1387,-14.73833 54,-28.60043 C 218.86121,189.54023 228.88537,170.35442 232,151 Z"
style="clip-rule:evenodd;display:inline;fill:#ffffff;fill-rule:evenodd;stroke-width:0.276412;stroke-linejoin:round;stroke-miterlimit:2"
id="path1"
sodipodi:nodetypes="ccccccccccccccccc"
inkscape:label="star" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

112
src/img/logo_bg.svg Normal file
View file

@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="500"
height="500"
viewBox="0 0 500 500"
version="1.1"
xml:space="preserve"
style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
id="svg3"
sodipodi:docname="logo_bg.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs3"><linearGradient
id="linearGradient26"
inkscape:collect="always"><stop
style="stop-color:#ffffff;stop-opacity:0.30000001;"
offset="0"
id="stop26" /><stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="0.9638136"
id="stop27" /></linearGradient><inkscape:path-effect
effect="simplify"
id="path-effect16"
is_visible="true"
lpeversion="1.3"
threshold="1000000"
steps="1"
smooth_angles="360"
helper_size="10"
simplify_individual_paths="false"
simplify_just_coalesce="false" /><filter
inkscape:label="Evanescent"
inkscape:menu="Blurs"
inkscape:menu-tooltip="Blur the contents of objects, preserving the outline and adding progressive transparency at edges"
style="color-interpolation-filters:sRGB;"
id="filter16"
x="-0.027"
y="-0.027"
width="1.054"
height="1.054"><feGaussianBlur
result="result6"
stdDeviation="5.0625"
in="SourceGraphic"
id="feGaussianBlur16" /><feColorMatrix
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 "
result="result7"
in="SourceGraphic"
id="feColorMatrix16" /><feComposite
operator="in"
in="result6"
in2="result7"
id="feComposite16" /></filter><radialGradient
inkscape:collect="always"
xlink:href="#linearGradient26"
id="radialGradient27"
cx="250"
cy="250"
fx="250"
fy="250"
r="250"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.6,0,0,0.6,100.00001,100.00002)" /><filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter1"
x="-0.243"
y="-0.243"
width="1.486"
height="1.486"><feGaussianBlur
inkscape:collect="always"
stdDeviation="30.375"
id="feGaussianBlur1" /></filter></defs><sodipodi:namedview
id="namedview3"
pagecolor="#222222"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#cccccc"
inkscape:zoom="1.855092"
inkscape:cx="250.12237"
inkscape:cy="249.58331"
inkscape:window-width="2256"
inkscape:window-height="1504"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg3" />
<circle
style="clip-rule:evenodd;display:inline;fill:#000000;fill-rule:evenodd;stroke-width:0.5;stroke-linejoin:round;stroke-miterlimit:2"
id="path2"
cx="250"
cy="250"
r="250"
inkscape:label="background" /><circle
style="display:inline;fill:url(#radialGradient27);fill-opacity:1;stroke-width:0.300003;filter:url(#filter1)"
id="path24"
cx="250"
cy="250"
r="150"
inkscape:label="backlight" /><path
d="M 250.00005,25 268,151 c 3.11463,19.35442 13.1387,38.54023 27,52.39957 13.86121,13.8621 34.64617,25.48527 54,28.60043 L 475,250.00001 349,268 c -19.35383,3.11517 -40.13879,14.73834 -54,28.60043 C 281.1387,310.45977 271.11463,329.64558 268,349 L 250.00005,475 232,349 C 228.88537,329.64558 218.86121,310.45977 205,296.60043 191.1387,282.73834 170.35383,271.11517 151,268 L 25,250.00001 151,232 c 19.35383,-3.11516 40.1387,-14.73833 54,-28.60043 C 218.86121,189.54023 228.88537,170.35442 232,151 Z"
style="clip-rule:evenodd;display:inline;fill:#ffffff;fill-rule:evenodd;stroke-width:0.276412;stroke-linejoin:round;stroke-miterlimit:2"
id="path1"
sodipodi:nodetypes="ccccccccccccccccc"
inkscape:label="star" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

27
src/js/snowflakes.ts Normal file
View file

@ -0,0 +1,27 @@
function createSnowflakes() {
const numSnowflakes = 50;
const maxSize = 0.2;
const maxTranslate = 10;
const container = document.getElementById('snowflake-container');
function randomBetween(min, max) {
return (Math.random() * max) + min;
}
if (container) {
for (let i = 0; i < numSnowflakes; i++) {
let randomSize = randomBetween(5, 25) + "px";
let randomLeft = randomBetween(0, window.innerWidth) + "px";
let randomDuration = randomBetween(3, 10);
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.style.width = randomSize;
snowflake.style.height = randomSize;
snowflake.style.left = randomLeft;
snowflake.style.animationDuration = randomDuration + "s";
snowflake.style.animationDelay = randomBetween(0, 5) + "s";
container.appendChild(snowflake);
}
}
}
createSnowflakes();

24
src/pages/404.astro Normal file
View file

@ -0,0 +1,24 @@
---
import "./src/css/snowflake.css";
---
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>404</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="darkreader-lock" />
<link rel="icon" type="image/x-icon" href="/src/img/logo_bg.svg" />
<link rel="icon" type="image/png" sizes="192x192" href="/src/img/logo_bg.svg" />
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/src/img/logo_bg.svg" />
</head>
<body class="bg-cover bg-[url('/src/img/gradient.webp')] text-white overflow-hidden">
<div class="flex items-center justify-center min-h-screen">
<div class="bg-[rgba(11,11,11,0.6)] aspect-square rounded-3xl border-2 border-white flex flex-col items-center justify-center w-full h-full max-w-[40vmin] max-h-[40vmin] md:max-w-[20vmin] md:max-h-[20vmin]">
<h1 class="text-6xl">404</h1>
</div>
</div>
<div id="snowflake-container"></div>
<script src="/src/js/snowflakes.js"></script>
</body>
</html>

25
src/pages/index.astro Normal file
View file

@ -0,0 +1,25 @@
---
import "./src/css/snowflake.css";
---
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>z0x</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="darkreader-lock" />
<link rel="icon" type="image/x-icon" href="/src/img/logo_bg.svg" />
<link rel="icon" type="image/png" sizes="192x192" href="/src/img/logo_bg.svg" />
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/src/img/logo_bg.svg" />
</head>
<body class="bg-cover bg-[url('/src/img/gradient.webp')] text-white overflow-hidden">
<div class="flex items-center justify-center min-h-screen">
<div class="bg-[rgba(11,11,11,0.6)] aspect-square rounded-3xl border-2 border-white flex flex-col items-center justify-center w-full h-full max-w-[60vmin] max-h-[60vmin] md:max-w-[35vmin] md:max-h-[35vmin]">
<img class="w-2/3" src="/src/img/logo.svg" alt="logo" />
<h1 class="text-4xl">z0x</h1>
</div>
</div>
<div id="snowflake-container"></div>
<script src="/src/js/snowflakes.js"></script>
</body>
</html>