refactor(all): rebranding and websire layout refactor
This commit is contained in:
parent
98ebc84a1c
commit
bebf7819e5
39 changed files with 380 additions and 418 deletions
37
src/assets/logo.svg
Normal file
37
src/assets/logo.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="256"
|
||||
height="256"
|
||||
viewBox="0 0 256 256"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
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="defs1"><linearGradient
|
||||
id="linearGradient10"><stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop10" /><stop
|
||||
style="stop-color:#ffffff;stop-opacity:0;"
|
||||
offset="1"
|
||||
id="stop11" /></linearGradient><radialGradient
|
||||
xlink:href="#linearGradient10"
|
||||
id="radialGradient15"
|
||||
cx="128.00018"
|
||||
cy="128.00395"
|
||||
fx="128.00018"
|
||||
fy="128.00395"
|
||||
r="73.343147"
|
||||
gradientUnits="userSpaceOnUse" /></defs><path
|
||||
style="display:inline;fill:url(#radialGradient15);stroke-width:1.18365"
|
||||
d="M 55.824663,125.40476 125.21246,55.832186 a 3.9865567,3.9865567 0.02025256 0 1 5.64732,0.002 l 69.31756,69.600498 a 4.0005896,4.0005896 90.112473 0 1 -0.0111,5.65726 l -69.34652,69.08498 a 4.0135339,4.0135339 0.01148544 0 1 -5.6664,-0.001 L 55.832634,131.06116 a 3.9993654,3.9993654 89.919265 0 1 -0.008,-5.6564 z M 125.77344,89.300192 89.179269,125.4342 a 3.9542778,3.9542778 90.033181 0 0 -0.0033,5.62424 l 36.551738,36.17581 a 4.0462516,4.0462516 0.03318674 0 0 5.68928,0.003 l 36.59418,-36.13401 a 3.9542766,3.9542766 90.033183 0 0 0.003,-5.62424 L 131.46272,89.303486 a 4.0462513,4.0462513 0.03317792 0 0 -5.68928,-0.0033 z"
|
||||
id="blur"
|
||||
transform="matrix(1.6906828,0,0,1.6906828,-85.407698,-89.414059)" /><path
|
||||
style="display:inline;fill:#0a0a0a;fill-opacity:1;stroke:none;stroke-width:1.18365;stroke-opacity:1"
|
||||
d="M 55.824663,125.40476 125.21246,55.832186 a 3.9865567,3.9865567 0.02025256 0 1 5.64732,0.002 l 69.31756,69.600498 a 4.0005896,4.0005896 90.112473 0 1 -0.0111,5.65726 l -69.34652,69.08498 a 4.0135339,4.0135339 0.01148544 0 1 -5.6664,-0.001 L 55.832634,131.06116 a 3.9993654,3.9993654 89.919265 0 1 -0.008,-5.6564 z M 125.77344,89.300192 89.179269,125.4342 a 3.9542778,3.9542778 90.033181 0 0 -0.0033,5.62424 l 36.551738,36.17581 a 4.0462516,4.0462516 0.03318674 0 0 5.68928,0.003 l 36.59418,-36.13401 a 3.9542766,3.9542766 90.033183 0 0 0.003,-5.62424 L 131.46272,89.303486 a 4.0462513,4.0462513 0.03317792 0 0 -5.68928,-0.0033 z"
|
||||
id="diamond"
|
||||
transform="matrix(1.6906828,0,0,1.6906828,-92.40771,-92.414083)" /></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
11
src/components/Footer.astro
Normal file
11
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<footer
|
||||
class="sticky bottom-0 motion-footer opacity-0 text-xs text-center text-white/60 sm:text-sm"
|
||||
>
|
||||
<p>
|
||||
© {new Date().getFullYear()} • <a
|
||||
href="https://z0x.ca?utm_source=z0x.ca"
|
||||
class="transition hover:text-white/80">z0x</a
|
||||
>
|
||||
</p>
|
||||
<p>All rights reserved.</p>
|
||||
</footer>
|
||||
24
src/components/Head.astro
Normal file
24
src/components/Head.astro
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
import "/src/css/app.css";
|
||||
---
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="/assets/favicon.webp" />
|
||||
<link rel="canonical" href="https://z0x.ca" />
|
||||
|
||||
<title>z0x</title>
|
||||
<meta name="title" content="z0x" />
|
||||
<meta name="description" content="z0x" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://z0x.ca" />
|
||||
<meta property="og:title" content="z0x" />
|
||||
<meta property="og:description" content="z0x" />
|
||||
|
||||
<meta property="twitter:url" content="https://z0x.ca" />
|
||||
<meta property="twitter:title" content="z0x" />
|
||||
<meta property="twitter:description" content="z0x" />
|
||||
|
||||
<meta name="darkreader-lock" />
|
||||
<script src="/src/js/index.ts"></script>
|
||||
52
src/components/Links.astro
Normal file
52
src/components/Links.astro
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<ul class="flex gap-6">
|
||||
<li class="opacity-0 motion-links group">
|
||||
<a
|
||||
aria-label="matrix"
|
||||
href="https://matrix.to/#/@z0x:z0x.ca"
|
||||
target="_blank"
|
||||
class="flex relative justify-center items-center w-12 text-white transition aspect-square hover:text-white/60"
|
||||
>
|
||||
<div class="absolute inset-0 aspect-square h-12 bg-white/10 rounded-md">
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
class="relative w-8 aspect-square transition"
|
||||
>
|
||||
<path d="M4 3h-1v18h1"></path>
|
||||
<path d="M20 21h1v-18h-1"></path>
|
||||
<path d="M7 9v6"></path>
|
||||
<path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5"></path>
|
||||
<path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="opacity-0 motion-links group">
|
||||
<a
|
||||
aria-label="telegram"
|
||||
href="https://t.me/zesfca"
|
||||
target="_blank"
|
||||
class="flex relative justify-center items-center w-12 text-white transition aspect-square hover:text-white/60"
|
||||
>
|
||||
<div class="absolute inset-0 aspect-square h-12 bg-white/10 rounded-md">
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
class="relative w-8 aspect-square transition"
|
||||
>
|
||||
<path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
11
src/components/Logo.astro
Normal file
11
src/components/Logo.astro
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import logo from "/src/assets/logo.svg";
|
||||
---
|
||||
|
||||
<Image
|
||||
src={logo}
|
||||
alt="logo"
|
||||
loading="eager"
|
||||
class="w-48 opacity-0 motion-logo"
|
||||
/>
|
||||
5
src/components/NotFound.astro
Normal file
5
src/components/NotFound.astro
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<p class="relative text-4xl font-semibold text-white">
|
||||
<span class="absolute inset-0 opacity-0 blur-md motion-text bg-white/50"
|
||||
></span>
|
||||
<span class="relative opacity-0 motion-text">404</span>
|
||||
</p>
|
||||
5
src/components/Text.astro
Normal file
5
src/components/Text.astro
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<p class="relative text-4xl font-semibold text-white">
|
||||
<span class="absolute inset-0 opacity-0 blur-md motion-text bg-white/50"
|
||||
></span>
|
||||
<span class="relative opacity-0 motion-text">z0x</span>
|
||||
</p>
|
||||
|
|
@ -1 +1,10 @@
|
|||
@import "tailwindcss";
|
||||
@import "tailwindcss";
|
||||
|
||||
body {
|
||||
cursor: url("/assets/cursor.svg") 28 32, auto;
|
||||
@apply flex overflow-hidden flex-col items-center min-h-screen bg-black;
|
||||
}
|
||||
|
||||
main {
|
||||
@apply flex flex-col flex-auto gap-4 justify-center items-center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="128"
|
||||
height="128"
|
||||
viewBox="0 0 128 128"
|
||||
version="1.1"
|
||||
xml:space="preserve"
|
||||
style="clip-rule:evenodd;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
|
||||
id="svg3"
|
||||
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"><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><radialGradient
|
||||
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
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter1"
|
||||
x="-0.243"
|
||||
y="-0.243"
|
||||
width="1.486"
|
||||
height="1.486"><feGaussianBlur
|
||||
stdDeviation="30.375"
|
||||
id="feGaussianBlur1" /></filter></defs>
|
||||
|
||||
<circle
|
||||
style="display:inline;fill:url(#radialGradient27);fill-opacity:1;stroke-width:0.300003;filter:url(#filter1)"
|
||||
id="backlight"
|
||||
cx="250"
|
||||
cy="250"
|
||||
r="150"
|
||||
transform="matrix(0.256,0,0,0.256,2.2888184e-6,2.2888184e-6)" /><path
|
||||
d="M 64.00001,6.4 68.608,38.656 c 0.79735,4.95473 3.36351,9.8663 6.912,13.41429 3.54847,3.5487 8.86942,6.52423 13.824,7.32171 L 121.6,64 89.344,68.608 C 84.38942,69.40548 79.06847,72.38102 75.52,75.92971 71.97151,79.4777 69.40535,84.38927 68.608,89.344 L 64.00001,121.6 59.392,89.344 C 58.59465,84.38927 56.02847,79.4777 52.48,75.92971 48.93151,72.38102 43.61058,69.40548 38.656,68.608 L 6.4,64 38.656,59.392 C 43.61058,58.59452 48.93151,55.61899 52.48,52.07029 56.02847,48.5223 58.59465,43.61073 59.392,38.656 Z"
|
||||
style="clip-rule:evenodd;display:inline;fill:#ffffff;fill-rule:evenodd;stroke-width:0.0707615;stroke-linejoin:round;stroke-miterlimit:2"
|
||||
id="star" /></svg>
|
||||
|
Before Width: | Height: | Size: 2 KiB |
|
|
@ -1,12 +1,12 @@
|
|||
import { animate, stagger } from "motion";
|
||||
|
||||
const elements = document.querySelectorAll("img, h1");
|
||||
const elements = document.querySelectorAll(".motion-links, .motion-logo, .motion-text, .motion-footer");
|
||||
|
||||
animate(
|
||||
elements,
|
||||
{ opacity: [0, 1] },
|
||||
{
|
||||
duration: 0.6,
|
||||
delay: stagger(0.6, { startDelay: 0.2 }),
|
||||
ease: "easeIn",
|
||||
},
|
||||
elements,
|
||||
{ opacity: [0, 1] },
|
||||
{
|
||||
delay: stagger(0.2, { startDelay: 0.1 }),
|
||||
ease: "easeIn"
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,89 +0,0 @@
|
|||
interface Snowflake {
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
opacity: number;
|
||||
speedY: number;
|
||||
speedX: number;
|
||||
}
|
||||
|
||||
function createSnowfall() {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
document.body.style.margin = "0";
|
||||
document.body.style.overflow = "hidden";
|
||||
canvas.style.position = "fixed";
|
||||
canvas.style.top = "0";
|
||||
canvas.style.left = "0";
|
||||
canvas.style.zIndex = "-1";
|
||||
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
const resizeCanvas = () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
};
|
||||
resizeCanvas();
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
|
||||
const NUM_SNOWFLAKES = 320;
|
||||
const snowflakes: Snowflake[] = [];
|
||||
|
||||
let windStrength = 0;
|
||||
|
||||
for (let i = 0; i < NUM_SNOWFLAKES; i++) {
|
||||
snowflakes.push(createSnowflake());
|
||||
}
|
||||
|
||||
function createSnowflake(): Snowflake {
|
||||
const size = Math.random() * 3 + 1;
|
||||
return {
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
size,
|
||||
opacity: Math.random() * 0.2 + 0.2,
|
||||
speedY: Math.random() * size * 0.6 + 0.4,
|
||||
speedX: Math.random() * 0.5 - 0.25,
|
||||
};
|
||||
}
|
||||
|
||||
function updateWind() {
|
||||
windStrength += (Math.random() - 0.5) * 0.01;
|
||||
windStrength = Math.max(-0.5, Math.min(0.5, windStrength));
|
||||
}
|
||||
|
||||
function updateSnowflakes() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
updateWind();
|
||||
|
||||
for (const flake of snowflakes) {
|
||||
flake.x += flake.speedX + windStrength;
|
||||
flake.y += flake.speedY;
|
||||
|
||||
if (flake.y > canvas.height) {
|
||||
flake.y = -flake.size;
|
||||
flake.x = Math.random() * canvas.width;
|
||||
flake.speedY = Math.random() * flake.size * 0.5 + 0.5;
|
||||
flake.speedX = Math.random() * 0.5 - 0.25;
|
||||
}
|
||||
|
||||
if (flake.x < -flake.size) {
|
||||
flake.x = canvas.width + flake.size;
|
||||
} else if (flake.x > canvas.width + flake.size) {
|
||||
flake.x = -flake.size;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity})`;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateSnowflakes);
|
||||
}
|
||||
|
||||
updateSnowflakes();
|
||||
}
|
||||
|
||||
createSnowfall();
|
||||
16
src/layouts/Layout.astro
Normal file
16
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import Footer from "@components/Footer.astro";
|
||||
import Head from "@components/Head.astro";
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,24 +1,10 @@
|
|||
---
|
||||
import "/src/css/app.css";
|
||||
---
|
||||
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>404</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="darkreader-lock" />
|
||||
<link rel="apple-touch-icon" href="/img/site-touch-icon.webp" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-72x72.webp" />
|
||||
<link rel="icon" type="image/svg+xml" href="/img/site-favicon.svg" />
|
||||
</head>
|
||||
<body class="bg-linear-to-b/oklch from-neutral-700 to-black text-white overflow-hidden">
|
||||
<div class="flex items-center justify-center min-h-screen">
|
||||
<div class="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]">
|
||||
<h1 class="text-4xl opacity-0 font-semibold">404</h1>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/src/js/snow.ts"></script>
|
||||
<script src="/src/js/index.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
---
|
||||
import NotFound from "@components/NotFound.astro";
|
||||
import Logo from "@components/Logo.astro";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<NotFound />
|
||||
<Logo />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,12 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import logo from "/src/img/logo.svg";
|
||||
import "/src/css/app.css";
|
||||
---
|
||||
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<title>z0x</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="z0x" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="darkreader-lock" />
|
||||
<link rel="apple-touch-icon" href="/img/site-touch-icon.webp" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-72x72.webp" />
|
||||
<link rel="icon" type="image/svg+xml" href="/img/site-favicon.svg" />
|
||||
</head>
|
||||
<body class="bg-linear-to-b/oklch from-neutral-700 to-black text-white overflow-hidden">
|
||||
<div class="flex items-center justify-center min-h-screen">
|
||||
<div class="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]">
|
||||
<Image src={logo} alt="logo" class="w-2/3 opacity-0" loading="eager" />
|
||||
<h1 class="text-4xl opacity-0 font-semibold">z0x</h1>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/src/js/snow.ts"></script>
|
||||
<script src="/src/js/index.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
---
|
||||
import Text from "@components/Text.astro";
|
||||
import Logo from "@components/Logo.astro";
|
||||
import Links from "@components/Links.astro";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Text />
|
||||
<Logo />
|
||||
<Links />
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue