index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>EloyGM — Developer</title>
  <meta name="description" content="EloyGM — Web developer and programmer. Projects, repositories, and social links.">

  <!-- TailwindCSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

  <style>
    body {
      background-color: #0d1117;
      color: #c9d1d9;
      font-family: 'JetBrains Mono', monospace;
      scroll-behavior: smooth;
    }

    .terminal {
      border: 1px solid #30363d;
      border-radius: 10px;
      background-color: #161b22;
      padding: 20px;
      box-shadow: 0 0 20px rgba(88, 166, 255, 0.1);
    }

    .cursor::after {
      content: "_";
      animation: blink 1s step-end infinite;
    }

    @keyframes blink {
      from, to { opacity: 0; }
      50% { opacity: 1; }
    }

    .typewriter {
      border-right: 2px solid #58a6ff;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      animation: typing 1.5s steps(30, end), blink-caret 0.75s step-end infinite;
    }

    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }

    @keyframes blink-caret {
      50% { border-color: transparent }
    }

    .social-bar {
      position: fixed;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 999;
    }

    .social-bar a {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #161b22;
      border: 1px solid #30363d;
      border-radius: 10px;
      width: 45px;
      height: 45px;
      transition: all 0.25s ease;
    }

    .social-bar a:hover {
      transform: scale(1.15);
      border-color: #58a6ff;
      box-shadow: 0 0 15px rgba(88,166,255,0.4);
    }

    .social-bar img {
      width: 25px;
      height: 25px;
      object-fit: contain;
      filter: grayscale(100%) brightness(0.8);
      transition: filter 0.25s ease;
    }

    .social-bar a:hover img {
      filter: none;
    }

    @media (max-width: 768px) {
      .social-bar {
        flex-direction: row;
        bottom: 20px;
        top: auto;
        right: 50%;
        transform: translateX(50%);
        background: #0d1117;
        border-radius: 10px;
        padding: 8px 12px;
      }
    }
  </style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen text-center">

  <!-- SIDEBAR -->
  <div class="social-bar animate__animated animate__fadeInRight">
    <a href="https://github.com/EloyGMDev" target="_blank" title="GitHub">
      <img src="img/github.png" alt="GitHub">
    </a>
    <a href="https://instagram.com/eloygmdev" target="_blank" title="Instagram">
      <img src="img/instagram.png" alt="Instagram">
    </a>
    <a href="https://youtube.com/@eloygm" target="_blank" title="YouTube">
      <img src="img/youtube.png" alt="YouTube">
    </a>
    <a href="https://twitter.com/eloygmdev" target="_blank" title="X / Twitter">
      <img src="img/x.png" alt="X / Twitter">
    </a>
    <a href="https://ko-fi.com/eloygm" target="_blank" title="Donate">
      <img src="img/kofi.png" alt="Ko-fi">
    </a>
  </div>

  <!-- HEADER -->
  <header class="animate__animated animate__fadeInDown mb-12 mt-8">
    <h1 id="changingText" class="text-3xl sm:text-4xl text-[#58a6ff] font-bold mb-3 typewriter">&lt;EloyGM /&gt;</h1>
    <p class="text-gray-400 text-lg mt-4">Programmer • Web Developer • Project Builder</p>
  </header>

  <!-- TERMINAL -->
  <section class="terminal animate__animated animate__fadeInUp max-w-3xl w-[90%]">
    <p class="text-left text-[#58a6ff]">EloyGM@portfolio:~$ <span class="cursor">Welcome to my space</span></p>
    <hr class="border-gray-700 my-4">

    <div class="grid sm:grid-cols-2 gap-4">
      <div class="bg-[#0d1117] p-4 rounded-lg border border-gray-800 hover:border-[#58a6ff] transition">
        <h3 class="text-[#58a6ff] font-semibold mb-2">🛜 IpAll</h3>
        <p class="text-gray-400 text-sm mb-3">Scans your entire network searching for open ports or vulnerabilities. Updated frequently.</p>
        <a href="https://github.com/EloyGMDev/IpAll/" target="_blank" class="text-[#58a6ff] text-sm">View on GitHub →</a>
      </div>

      <div class="bg-[#0d1117] p-4 rounded-lg border border-gray-800 hover:border-[#58a6ff] transition">
        <h3 class="text-[#58a6ff] font-semibold mb-2">🪟 CastingHola</h3>
        <p class="text-gray-400 text-sm mb-3">A simple Python script to detect screens and broadcast them.</p>
        <a href="https://github.com/EloyGMDev/CastingHola" target="_blank" class="text-[#58a6ff] text-sm">View on GitHub →</a>
      </div>

      <div class="bg-[#0d1117] p-4 rounded-lg border border-gray-800 hover:border-[#58a6ff] transition">
        <h3 class="text-[#58a6ff] font-semibold mb-2">💻 MorseCodeTranslator</h3>
        <p class="text-gray-400 text-sm mb-3">A simple Python script to translate between Morse and text.</p>
        <a href="https://github.com/EloyGMDev/MorseCodeTranslator" target="_blank" class="text-[#58a6ff] text-sm">View on GitHub →</a>
      </div>


    </div>
  </section>

  <!-- FOOTER -->
  <footer class="mt-12 mb-4 text-gray-500 text-sm animate__animated animate__fadeInUp">
    © 2025 <span class="text-[#58a6ff]">EloyGM</span> — Built with 💻 and ☕
  </footer>

  <!-- JS: Rotating header text -->
  <script>
    const texts = [
      '<EloyGM />',
      'print("EloyGM")',
      'console.log("EloyGM")',
      'System.out.println("EloyGM");',
      'std::cout << "EloyGM";',
      'echo "EloyGM"',
      'printf("EloyGM");',
      'fmt.Println("EloyGM")',
      'Console.WriteLine("EloyGM");',
      'document.write("EloyGM");',
      'alert("EloyGM");',
      'puts "EloyGM"',
      'IO.puts("EloyGM")',
      'writeln("EloyGM");',
      'printfn "EloyGM"',
      'cat("EloyGM")',
      'Debug.Log("EloyGM");'
    ];

    let i = 0;
    const el = document.getElementById("changingText");

    function changeText() {
      el.classList.remove("typewriter");
      void el.offsetWidth; // reinicia animación
      el.textContent = texts[i];
      el.classList.add("typewriter");
      i = (i + 1) % texts.length;
    }

    setInterval(changeText, 5000);
  </script>
</body>
</html>