jae
ae1c7e0b71
- HUD-style navbar with dropdown menus (HOME, BLOG, DEV, LINKS, CONTACT) - Particle system with mouse interaction - Glitch text + typing animation hero - Scroll-reveal animations - Animated skill bars - Blog cards, dev project cards, link cards - Contact form with transmission effect - Live terminal emulator - Scanline overlay + grid background - Responsive mobile layout - Live clock + uptime counter + signal animation
572 lines
20 KiB
JavaScript
572 lines
20 KiB
JavaScript
/* ===================================================
|
|
JAESWIFT.XYZ — Main JavaScript
|
|
Animations, particles, typing, scroll effects
|
|
=================================================== */
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
// ─── CONFIG ───
|
|
const CONFIG = {
|
|
typingStrings: [
|
|
'Developer // Tinkerer // Builder',
|
|
'Self-hosted everything.',
|
|
'Linux enthusiast since day one.',
|
|
'Building the future, one commit at a time.',
|
|
'root@jaeswift:~# echo "Hello, World"',
|
|
'Cybersecurity & Infrastructure.',
|
|
'AI Agent Operator.',
|
|
],
|
|
typingSpeed: 60,
|
|
typingDeleteSpeed: 30,
|
|
typingPause: 2500,
|
|
particleCount: 80,
|
|
particleMaxSpeed: 0.3,
|
|
particleConnectionDist: 120,
|
|
startTime: Date.now(),
|
|
};
|
|
|
|
// ─── UTILITIES ───
|
|
const $ = (sel, ctx = document) => ctx.querySelector(sel);
|
|
const $$ = (sel, ctx = document) => [...ctx.querySelectorAll(sel)];
|
|
|
|
// ─── NAVBAR ───
|
|
function initNavbar() {
|
|
const navbar = $('#navbar');
|
|
const toggle = $('#navToggle');
|
|
const menu = $('#navMenu');
|
|
const navItems = $$('.nav-item');
|
|
|
|
// Scroll effect
|
|
let lastScroll = 0;
|
|
window.addEventListener('scroll', () => {
|
|
const scrollY = window.scrollY;
|
|
navbar.classList.toggle('scrolled', scrollY > 50);
|
|
lastScroll = scrollY;
|
|
}, { passive: true });
|
|
|
|
// Mobile toggle
|
|
toggle.addEventListener('click', () => {
|
|
menu.classList.toggle('active');
|
|
toggle.classList.toggle('active');
|
|
});
|
|
|
|
// Mobile dropdown toggle
|
|
if (window.innerWidth <= 768) {
|
|
navItems.forEach(item => {
|
|
const link = item.querySelector('.nav-link');
|
|
link.addEventListener('click', (e) => {
|
|
if (item.querySelector('.dropdown')) {
|
|
e.preventDefault();
|
|
item.classList.toggle('active');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Active link on scroll
|
|
const sections = $$('section[id]');
|
|
window.addEventListener('scroll', () => {
|
|
const scrollPos = window.scrollY + 100;
|
|
sections.forEach(section => {
|
|
const top = section.offsetTop;
|
|
const height = section.offsetHeight;
|
|
const id = section.getAttribute('id');
|
|
if (scrollPos >= top && scrollPos < top + height) {
|
|
$$('.nav-link').forEach(l => l.classList.remove('active'));
|
|
const activeLink = $(`.nav-link[href="#${id}"]`);
|
|
if (activeLink) activeLink.classList.add('active');
|
|
}
|
|
});
|
|
}, { passive: true });
|
|
|
|
// Smooth scroll for nav links
|
|
$$('.nav-link, .dropdown a[href^="#"]').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
const href = link.getAttribute('href');
|
|
if (href && href.startsWith('#')) {
|
|
e.preventDefault();
|
|
const target = $(href);
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
menu.classList.remove('active');
|
|
toggle.classList.remove('active');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ─── LIVE CLOCK ───
|
|
function initClock() {
|
|
const navTime = $('#navTime');
|
|
if (!navTime) return;
|
|
|
|
function update() {
|
|
const now = new Date();
|
|
const h = String(now.getHours()).padStart(2, '0');
|
|
const m = String(now.getMinutes()).padStart(2, '0');
|
|
const s = String(now.getSeconds()).padStart(2, '0');
|
|
navTime.textContent = `${h}:${m}:${s}`;
|
|
}
|
|
|
|
update();
|
|
setInterval(update, 1000);
|
|
}
|
|
|
|
// ─── UPTIME COUNTER ───
|
|
function initUptime() {
|
|
const uptimeEl = $('#uptime');
|
|
if (!uptimeEl) return;
|
|
|
|
function update() {
|
|
const elapsed = Date.now() - CONFIG.startTime;
|
|
const totalSec = Math.floor(elapsed / 1000);
|
|
const days = Math.floor(totalSec / 86400);
|
|
const hours = Math.floor((totalSec % 86400) / 3600);
|
|
const mins = Math.floor((totalSec % 3600) / 60);
|
|
uptimeEl.textContent = `${days}d ${String(hours).padStart(2, '0')}h ${String(mins).padStart(2, '0')}m`;
|
|
}
|
|
|
|
update();
|
|
setInterval(update, 60000);
|
|
}
|
|
|
|
// ─── TYPING EFFECT ───
|
|
function initTyping() {
|
|
const el = $('#typingText');
|
|
if (!el) return;
|
|
|
|
let stringIndex = 0;
|
|
let charIndex = 0;
|
|
let isDeleting = false;
|
|
|
|
function type() {
|
|
const current = CONFIG.typingStrings[stringIndex];
|
|
|
|
if (isDeleting) {
|
|
el.textContent = current.substring(0, charIndex - 1);
|
|
charIndex--;
|
|
} else {
|
|
el.textContent = current.substring(0, charIndex + 1);
|
|
charIndex++;
|
|
}
|
|
|
|
let delay = isDeleting ? CONFIG.typingDeleteSpeed : CONFIG.typingSpeed;
|
|
|
|
if (!isDeleting && charIndex === current.length) {
|
|
delay = CONFIG.typingPause;
|
|
isDeleting = true;
|
|
} else if (isDeleting && charIndex === 0) {
|
|
isDeleting = false;
|
|
stringIndex = (stringIndex + 1) % CONFIG.typingStrings.length;
|
|
delay = 400;
|
|
}
|
|
|
|
setTimeout(type, delay);
|
|
}
|
|
|
|
setTimeout(type, 1200);
|
|
}
|
|
|
|
// ─── SCROLL REVEAL ───
|
|
function initScrollReveal() {
|
|
const elements = $$('[data-animate]');
|
|
if (!elements.length) return;
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, index) => {
|
|
if (entry.isIntersecting) {
|
|
setTimeout(() => {
|
|
entry.target.classList.add('visible');
|
|
}, index * 100);
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
});
|
|
|
|
elements.forEach(el => observer.observe(el));
|
|
}
|
|
|
|
// ─── SKILL BARS ANIMATION ───
|
|
function initSkillBars() {
|
|
const bars = $$('.bar-fill');
|
|
if (!bars.length) return;
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const bar = entry.target;
|
|
const width = bar.getAttribute('data-width');
|
|
bar.style.setProperty('--target-width', width + '%');
|
|
bar.classList.add('animated');
|
|
observer.unobserve(bar);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
bars.forEach(bar => observer.observe(bar));
|
|
}
|
|
|
|
// ─── PARTICLE SYSTEM ───
|
|
function initParticles() {
|
|
const canvas = $('#particles');
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
let particles = [];
|
|
let animationId;
|
|
let mouseX = -1000;
|
|
let mouseY = -1000;
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
|
|
function createParticle() {
|
|
return {
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * CONFIG.particleMaxSpeed,
|
|
vy: (Math.random() - 0.5) * CONFIG.particleMaxSpeed,
|
|
size: Math.random() * 1.5 + 0.5,
|
|
opacity: Math.random() * 0.5 + 0.1,
|
|
};
|
|
}
|
|
|
|
function initParticleArray() {
|
|
particles = [];
|
|
for (let i = 0; i < CONFIG.particleCount; i++) {
|
|
particles.push(createParticle());
|
|
}
|
|
}
|
|
|
|
function drawParticle(p) {
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(0, 255, 200, ${p.opacity})`;
|
|
ctx.fill();
|
|
}
|
|
|
|
function drawConnections() {
|
|
for (let i = 0; i < particles.length; i++) {
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const dx = particles[i].x - particles[j].x;
|
|
const dy = particles[i].y - particles[j].y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (dist < CONFIG.particleConnectionDist) {
|
|
const opacity = (1 - dist / CONFIG.particleConnectionDist) * 0.15;
|
|
ctx.beginPath();
|
|
ctx.moveTo(particles[i].x, particles[i].y);
|
|
ctx.lineTo(particles[j].x, particles[j].y);
|
|
ctx.strokeStyle = `rgba(0, 255, 200, ${opacity})`;
|
|
ctx.lineWidth = 0.5;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mouse connections
|
|
particles.forEach(p => {
|
|
const dx = p.x - mouseX;
|
|
const dy = p.y - mouseY;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 200) {
|
|
const opacity = (1 - dist / 200) * 0.3;
|
|
ctx.beginPath();
|
|
ctx.moveTo(p.x, p.y);
|
|
ctx.lineTo(mouseX, mouseY);
|
|
ctx.strokeStyle = `rgba(0, 255, 200, ${opacity})`;
|
|
ctx.lineWidth = 0.8;
|
|
ctx.stroke();
|
|
}
|
|
});
|
|
}
|
|
|
|
function update() {
|
|
particles.forEach(p => {
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
|
|
// Wrap around
|
|
if (p.x < 0) p.x = canvas.width;
|
|
if (p.x > canvas.width) p.x = 0;
|
|
if (p.y < 0) p.y = canvas.height;
|
|
if (p.y > canvas.height) p.y = 0;
|
|
|
|
// Mouse repulsion
|
|
const dx = p.x - mouseX;
|
|
const dy = p.y - mouseY;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 100) {
|
|
const force = (100 - dist) / 100 * 0.02;
|
|
p.vx += (dx / dist) * force;
|
|
p.vy += (dy / dist) * force;
|
|
}
|
|
|
|
// Speed limit
|
|
const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
|
|
if (speed > CONFIG.particleMaxSpeed * 2) {
|
|
p.vx *= 0.98;
|
|
p.vy *= 0.98;
|
|
}
|
|
});
|
|
}
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
update();
|
|
drawConnections();
|
|
particles.forEach(drawParticle);
|
|
animationId = requestAnimationFrame(animate);
|
|
}
|
|
|
|
// Event listeners
|
|
window.addEventListener('resize', () => {
|
|
resize();
|
|
initParticleArray();
|
|
});
|
|
|
|
window.addEventListener('mousemove', (e) => {
|
|
mouseX = e.clientX;
|
|
mouseY = e.clientY;
|
|
}, { passive: true });
|
|
|
|
window.addEventListener('mouseleave', () => {
|
|
mouseX = -1000;
|
|
mouseY = -1000;
|
|
});
|
|
|
|
// Visibility API - pause when tab hidden
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (document.hidden) {
|
|
cancelAnimationFrame(animationId);
|
|
} else {
|
|
animate();
|
|
}
|
|
});
|
|
|
|
resize();
|
|
initParticleArray();
|
|
animate();
|
|
}
|
|
|
|
// ─── GLITCH EFFECT (random intensification) ───
|
|
function initGlitchEffect() {
|
|
const glitch = $('.glitch');
|
|
if (!glitch) return;
|
|
|
|
setInterval(() => {
|
|
glitch.classList.add('glitch-active');
|
|
setTimeout(() => glitch.classList.remove('glitch-active'), 200);
|
|
}, 5000 + Math.random() * 5000);
|
|
}
|
|
|
|
// ─── TERMINAL ANIMATION ───
|
|
function initTerminal() {
|
|
const terminal = $('#terminal');
|
|
if (!terminal) return;
|
|
|
|
const commands = [
|
|
{ prompt: 'uptime', output: ' up 47 days, 3:22, 1 user, load: 0.12' },
|
|
{ prompt: 'df -h / | tail -1', output: '/dev/sda1 50G 12G 36G 25% /' },
|
|
{ prompt: 'curl -s ifconfig.me', output: '███.███.███.███' },
|
|
{ prompt: 'docker ps --format "table {{.Names}}"', output: 'gitea\nnginx-proxy\nagent-zero\nmonitoring' },
|
|
{ prompt: 'echo $SHELL', output: '/bin/zsh' },
|
|
{ prompt: 'neofetch --off | head -3', output: 'OS: Debian GNU/Linux 12\nKernel: 6.1.0-18-amd64\nUptime: 47 days, 3 hours' },
|
|
];
|
|
|
|
let cmdIndex = 0;
|
|
|
|
function addTermLine(content, isOutput = false) {
|
|
const line = document.createElement('div');
|
|
line.className = 'term-line' + (isOutput ? ' term-output' : '');
|
|
if (isOutput) {
|
|
line.textContent = content;
|
|
} else {
|
|
line.innerHTML = `<span class="term-prompt">jae@swift:~$</span> <span class="term-cmd">${content}</span>`;
|
|
}
|
|
// Insert before the last line (cursor line)
|
|
const cursorLine = terminal.lastElementChild;
|
|
terminal.insertBefore(line, cursorLine);
|
|
}
|
|
|
|
function typeCommand() {
|
|
if (cmdIndex >= commands.length) cmdIndex = 0;
|
|
const cmd = commands[cmdIndex];
|
|
let charIdx = 0;
|
|
|
|
// Remove old cursor line, add new command line being typed
|
|
const cursorLine = terminal.lastElementChild;
|
|
|
|
const typingLine = document.createElement('div');
|
|
typingLine.className = 'term-line';
|
|
typingLine.innerHTML = `<span class="term-prompt">jae@swift:~$</span> <span class="term-cmd"></span><span class="term-cursor">█</span>`;
|
|
terminal.insertBefore(typingLine, cursorLine);
|
|
cursorLine.remove();
|
|
|
|
const cmdSpan = typingLine.querySelector('.term-cmd');
|
|
|
|
function typeChar() {
|
|
if (charIdx < cmd.prompt.length) {
|
|
cmdSpan.textContent += cmd.prompt[charIdx];
|
|
charIdx++;
|
|
setTimeout(typeChar, 50 + Math.random() * 80);
|
|
} else {
|
|
// Remove cursor from typing line
|
|
const cursor = typingLine.querySelector('.term-cursor');
|
|
if (cursor) cursor.remove();
|
|
|
|
// Show output
|
|
setTimeout(() => {
|
|
const outputLines = cmd.output.split('\n');
|
|
outputLines.forEach(line => {
|
|
const outputEl = document.createElement('div');
|
|
outputEl.className = 'term-line term-output';
|
|
outputEl.textContent = line;
|
|
terminal.appendChild(outputEl);
|
|
});
|
|
|
|
// Add new cursor line
|
|
const newCursor = document.createElement('div');
|
|
newCursor.className = 'term-line';
|
|
newCursor.innerHTML = `<span class="term-prompt">jae@swift:~$</span> <span class="term-cursor">█</span>`;
|
|
terminal.appendChild(newCursor);
|
|
|
|
// Scroll terminal
|
|
terminal.scrollTop = terminal.scrollHeight;
|
|
|
|
// Keep only last ~15 lines
|
|
while (terminal.children.length > 15) {
|
|
terminal.removeChild(terminal.firstChild);
|
|
}
|
|
|
|
cmdIndex++;
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
typeChar();
|
|
}
|
|
|
|
// Run terminal animation every 6-10 seconds
|
|
setInterval(typeCommand, 8000 + Math.random() * 4000);
|
|
}
|
|
|
|
// ─── CONTACT FORM ───
|
|
function initContactForm() {
|
|
const form = $('#contactForm');
|
|
if (!form) return;
|
|
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const btn = form.querySelector('.form-submit');
|
|
const originalText = btn.querySelector('.submit-text').textContent;
|
|
|
|
btn.querySelector('.submit-text').textContent = 'TRANSMITTING...';
|
|
btn.disabled = true;
|
|
btn.style.borderColor = 'var(--warning)';
|
|
btn.style.color = 'var(--warning)';
|
|
|
|
setTimeout(() => {
|
|
btn.querySelector('.submit-text').textContent = '✓ TRANSMITTED';
|
|
btn.style.borderColor = 'var(--accent)';
|
|
btn.style.color = 'var(--accent)';
|
|
|
|
setTimeout(() => {
|
|
btn.querySelector('.submit-text').textContent = originalText;
|
|
btn.disabled = false;
|
|
btn.style.borderColor = '';
|
|
btn.style.color = '';
|
|
form.reset();
|
|
}, 2000);
|
|
}, 1500);
|
|
});
|
|
}
|
|
|
|
// ─── FOOTER SIGNAL ANIMATION ───
|
|
function initFooterSignal() {
|
|
const signal = $('#footerSignal');
|
|
if (!signal) return;
|
|
|
|
const blocks = ['░', '█'];
|
|
function update() {
|
|
const strength = 6 + Math.floor(Math.random() * 4); // 6-9 out of 10
|
|
let bar = '';
|
|
for (let i = 0; i < 10; i++) {
|
|
bar += i < strength ? blocks[1] : blocks[0];
|
|
}
|
|
signal.textContent = `SIGNAL: ${bar} ${strength * 10}%`;
|
|
}
|
|
|
|
setInterval(update, 3000);
|
|
}
|
|
|
|
// ─── RANDOM HUD DATA FLICKERS ───
|
|
function initHUDFlickers() {
|
|
const statValues = $$('.stat-value:not(.stat-online)');
|
|
|
|
setInterval(() => {
|
|
statValues.forEach(el => {
|
|
if (Math.random() > 0.7) {
|
|
el.style.opacity = '0.3';
|
|
setTimeout(() => {
|
|
el.style.opacity = '1';
|
|
}, 100 + Math.random() * 200);
|
|
}
|
|
});
|
|
}, 2000);
|
|
}
|
|
|
|
// ─── PANEL HOVER GLOW TRAIL ───
|
|
function initPanelGlow() {
|
|
$$('.panel, .blog-card, .dev-card, .link-card').forEach(card => {
|
|
card.addEventListener('mousemove', (e) => {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
card.style.setProperty('--mouse-x', `${x}px`);
|
|
card.style.setProperty('--mouse-y', `${y}px`);
|
|
card.style.background = `radial-gradient(circle 200px at ${x}px ${y}px, rgba(0, 255, 200, 0.04), var(--bg-panel))`;
|
|
});
|
|
|
|
card.addEventListener('mouseleave', () => {
|
|
card.style.background = '';
|
|
});
|
|
});
|
|
}
|
|
|
|
// ─── INIT ───
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initNavbar();
|
|
initClock();
|
|
initUptime();
|
|
initTyping();
|
|
initScrollReveal();
|
|
initSkillBars();
|
|
initParticles();
|
|
initGlitchEffect();
|
|
initTerminal();
|
|
initContactForm();
|
|
initFooterSignal();
|
|
initHUDFlickers();
|
|
initPanelGlow();
|
|
|
|
// Page load animation
|
|
document.body.style.opacity = '0';
|
|
document.body.style.transition = 'opacity 0.8s ease';
|
|
requestAnimationFrame(() => {
|
|
document.body.style.opacity = '1';
|
|
});
|
|
|
|
console.log('%c[JAESWIFT] %cSystems Online',
|
|
'color: #00ffc8; font-weight: bold; font-size: 14px;',
|
|
'color: #c8d6e5; font-size: 12px;');
|
|
});
|
|
|
|
})();
|