110 lines
2.7 KiB
JavaScript
110 lines
2.7 KiB
JavaScript
const canvas = document.getElementById('particles');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
let W, H, particles;
|
|
|
|
function resize() {
|
|
W = canvas.width = window.innerWidth;
|
|
H = canvas.height = window.innerHeight;
|
|
}
|
|
|
|
function createParticles() {
|
|
const count = Math.floor((W * H) / 8000);
|
|
particles = Array.from({ length: count }, () => ({
|
|
x: Math.random() * W,
|
|
y: Math.random() * H,
|
|
vx: (Math.random() - 0.5) * 0.4,
|
|
vy: (Math.random() - 0.5) * 0.4,
|
|
r: Math.random() * 1.5 + 0.5,
|
|
hue: Math.random() > 0.5 ? 180 : 300,
|
|
}));
|
|
}
|
|
|
|
const CONNECT_DIST = 120;
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
for (let i = 0; i < particles.length; i++) {
|
|
const p = particles[i];
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
if (p.x < 0 || p.x > W) p.vx *= -1;
|
|
if (p.y < 0 || p.y > H) p.vy *= -1;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
|
ctx.fillStyle = `hsla(${p.hue}, 100%, 70%, 0.8)`;
|
|
ctx.fill();
|
|
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const q = particles[j];
|
|
const dx = p.x - q.x;
|
|
const dy = p.y - q.y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < CONNECT_DIST) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(p.x, p.y);
|
|
ctx.lineTo(q.x, q.y);
|
|
ctx.strokeStyle = `hsla(${p.hue}, 100%, 70%, ${1 - dist / CONNECT_DIST})`;
|
|
ctx.lineWidth = 0.4;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
window.addEventListener('resize', () => { resize(); createParticles(); });
|
|
resize();
|
|
createParticles();
|
|
draw();
|
|
|
|
|
|
const lines = [
|
|
'welcome to the digital universe',
|
|
'every bit tells a story',
|
|
'code is poetry',
|
|
];
|
|
let lineIdx = 0, charIdx = 0, deleting = false;
|
|
const typed = document.getElementById('typed');
|
|
|
|
function typeLoop() {
|
|
const current = lines[lineIdx];
|
|
if (!deleting) {
|
|
charIdx++;
|
|
typed.textContent = current.slice(0, charIdx);
|
|
if (charIdx === current.length) {
|
|
deleting = true;
|
|
setTimeout(typeLoop, 2000);
|
|
return;
|
|
}
|
|
} else {
|
|
charIdx--;
|
|
typed.textContent = current.slice(0, charIdx);
|
|
if (charIdx === 0) {
|
|
deleting = false;
|
|
lineIdx = (lineIdx + 1) % lines.length;
|
|
}
|
|
}
|
|
setTimeout(typeLoop, deleting ? 40 : 80);
|
|
}
|
|
|
|
typeLoop();
|
|
|
|
|
|
const start = Date.now();
|
|
const counterEl = document.getElementById('counter');
|
|
|
|
function updateCounter() {
|
|
const s = Math.floor((Date.now() - start) / 1000);
|
|
const h = String(Math.floor(s / 3600)).padStart(2, '0');
|
|
const m = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
|
|
const sec = String(s % 60).padStart(2, '0');
|
|
counterEl.textContent = `UPTIME :: ${h}:${m}:${sec}`;
|
|
requestAnimationFrame(updateCounter);
|
|
}
|
|
|
|
updateCounter();
|