z0xca/z0x.ca
Code Activity Actions

refactor(all): rebranding and websire layout refactor

Browse source
This commit is contained in:
z0x 2025-01-19 00:23:52 -05:00
parent 98ebc84a1c
commit bebf7819e5
39 changed files with 380 additions and 418 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/js/index.ts
View file

@ -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"
},
);

89
src/js/snow.ts
View file

@ -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();