Building a Cyberpunk Portfolio with Pure JS

When I set out to build my portfolio, I had one rule: no frameworks. Pure JS. Pure CSS. Pure intensity.

The Design Philosophy

The cyberpunk aesthetic isn't just visual — it's a statement. Dark backgrounds, neon accents, and a terminal-inspired interface communicate a certain kind of precision and technical mastery.

// The particle network canvas
function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => {
    p.x += p.vx;
    p.y += p.vy;
    drawParticle(p);
    drawConnections(p);
  });
}

Key Features

• Boot sequence animation
• Interactive terminal widget
• Particle network hero section
• Skills constellation canvas
• 3D flip project cards
• GitHub API integration
• Konami code easter egg

Lessons Learned

Performance matters. Particle systems eat CPU if you're not careful about your render loop.