index.js

let userInput, terminalOutput;

const app = () => {
  window.userInput = document.getElementById("userInput");
  window.terminalOutput = document.getElementById("terminalOutput");
  document.getElementById("dummyKeyboard").focus();
  initParticles();
};

document.addEventListener("DOMContentLoaded", (event) => {
  app();
});

// Animated Particle Background
const initParticles = () => {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const particles = [];
  // Reduce particles on mobile for better performance
  const isMobile = window.innerWidth <= 768;
  const particleCount = isMobile ? 25 : 50;
  const connectionDistance = isMobile ? 80 : 100;
  const colors = [
    "#667eea",
    "#764ba2",
    "#f093fb",
    "#4facfe",
    "#fbc2eb",
    "#a6c1ee",
  ];

  class Particle {
    constructor() {
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;
      this.size = Math.random() * 3 + 1;
      this.speedX = Math.random() * 0.5 - 0.25;
      this.speedY = Math.random() * 0.5 - 0.25;
      this.color = colors[Math.floor(Math.random() * colors.length)];
    }

    update() {
      this.x += this.speedX;
      this.y += this.speedY;

      if (this.x > canvas.width) this.x = 0;
      if (this.x < 0) this.x = canvas.width;
      if (this.y > canvas.height) this.y = 0;
      if (this.y < 0) this.y = canvas.height;
    }

    draw() {
      ctx.fillStyle = this.color;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle());
  }

  const animate = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < particles.length; i++) {
      particles[i].update();
      particles[i].draw();

      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 distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < connectionDistance) {
          ctx.strokeStyle = particles[i].color;
          ctx.lineWidth = 0.2;
          ctx.globalAlpha = 1 - distance / connectionDistance;
          ctx.beginPath();
          ctx.moveTo(particles[i].x, particles[i].y);
          ctx.lineTo(particles[j].x, particles[j].y);
          ctx.stroke();
          ctx.globalAlpha = 1;
        }
      }
    }

    requestAnimationFrame(animate);
  };

  animate();

  window.addEventListener("resize", () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  });
};

const execute = function executeCommand(input) {
  let output;
  input = input.toLowerCase();

  if (input.length === 0) {
    return;
  }

  if (input === "clear") {
    window.terminalOutput.innerHTML = welcomeMessage();
    window.userInput.innerHTML = "";
    return;
  }

  output = `<div class="terminal-line"><span class="success">➜</span> <span class="directory">~</span> ${input}</div>`;
  if (!COMMANDS.hasOwnProperty(input)) {
    output += `<div class="terminal-line">no such command: <span class="output">"${input}"</span></div>`;
  } else {
    output += `<div class="output"> ${COMMANDS[input]} </div>`;
  }

  window.terminalOutput.innerHTML = `${window.terminalOutput.innerHTML}<div class="terminal-line">${output}</div>`;
  window.terminalOutput.scrollTop = window.terminalOutput.scrollHeight;
};

const key = function keyEvent(e) {
  const input = window.userInput.innerHTML;

  if (e.key === "Enter") {
    execute(input);
    window.userInput.innerHTML = "";
    return;
  }

  window.userInput.innerHTML = input + e.key;
};

const backspace = function backSpaceKeyEvent(e) {
  if (e.keyCode !== 8 && e.keyCode !== 46) {
    return;
  }
  window.userInput.innerHTML = window.userInput.innerHTML.slice(
    0,
    window.userInput.innerHTML.length - 1,
  );
};

const welcomeMessage = () => {
  return `<div class="terminal-line">
            <span class="help-msg">Welcome to my Portfolio! — Type
              <span class="code">help</span> for a list of supported
              commands.
            </span>
          </div>`;
};

document.addEventListener("keydown", backspace);
document.addEventListener("keypress", key);

const COMMANDS = {
  help: 'Supported Commands: [<span class="code">about</span>, <span class="code">experience</span>, <span class="code">education</span>, <span class="code">projects</span>, <span class="code">skills</span>, <span class="code">contact</span>]',
  about:
    "Hello 👋<br>I'm Robert Sears. I'm an Army veteran turned computer science student who loves coding and web development. In my free time, I powerlift, cherish my moments with my cat, and contribute to the veteran community. I'm all about growing, connecting with others, and using tech to make a difference.",
  projects:
    'Projects: [<a target="_blank" rel="noopener noreferrer" href="https://github.com/ecthelionvi/Portfolio" class="social link">portfolio</a>, <a target="_blank" rel="noopener noreferrer" href="https://github.com/ecthelionvi/NeoComposer.nvim" class="social link">neocomposer.nvim</a>, <a target="_blank" rel="noopener noreferrer" href="https://github.com/ecthelionvi/allo.guru" class="social link">allo.guru</a>, <a target="_blank" rel="noopener noreferrer" href="https://github.com/ecthelionvi/neovim.tips" class="social link">neovim.tips</a>, <a target="_blank" rel="noopener noreferrer" href="https://github.com/ecthelionvi/miniPlace" class="social link">miniplace</a>]',
  skills:
    '<span class="code">Languages:</span> HTML, CSS, Python, JavaScript<br><span class="code">Technologies:</span> Git, PostgreSQL, REST API\'s<br><span class="code">Frameworks:</span> React, Django',
  education:
    "B.S. Computer Science - University of Nebraska-Lincoln - May 2025",
  experience:
    "I'm currently working as a Teaching Assistant at Code Platoon. I help provide comprehensive training to over 30 military veterans and spouses, focusing on Full Stack Development. I collaborate closely with other faculty members to improve the curriculum and enhance the in-class experience.",
  contact:
    'You can contact me on any of the following links: [<a target="_blank" rel="noopener noreferrer" href="https://github.com/ecthelionvi" class="social link">GitHub</a>, <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/robert-sears-" class="social link">LinkedIn</a>]',
  merlin: "<span style='font-size: 2rem;'>🐈‍⬛</span>",
};