Create index.html

author: 5epi0l <91630053+5epi0l@users.noreply.github.com> 2025-07-26 02:18:29 +0530
committer: GitHub <noreply@github.com> 2025-07-26 02:18:29 +0530
commit: 384785c228175327ab264d851947045e0f589ce8 (patch)
tree: 20a0475e9a19a03404769764e34f8c4f4ad8972f
parent: 701c1c9349b8d81a50006e20f80afeb2e36cdc3c (diff)
1 files changed, 299 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a380c40
--- /dev/null
+++ b/index.html
@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>x4c1s</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      overflow: hidden;
+      font-family: 'JetBrains Mono', monospace;
+      background-color: #000000;
+      color: #ffffff;
+    }
+
+    #particles-js {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: #000000;
+      z-index: 0;
+    }
+
+    .content {
+      position: relative;
+      z-index: 2;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      gap: 2rem;
+      padding: 0 1rem;
+    }
+
+    .terminal-container {
+      border: 2px solid #ff0000;
+      border-radius: 8px;
+      padding: 2rem;
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(10px);
+      min-width: 400px;
+      margin-bottom: 2rem;
+    }
+
+    .terminal-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 1rem;
+      font-size: 0.9rem;
+      color: #888;
+    }
+
+    .mac-button {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 8px;
+      font-weight: bold;
+      cursor: pointer;
+      position: relative;
+    }
+
+    .mac-button.close {
+      background-color: #ff5f57;
+      color: #8b0000;
+    }
+
+    .mac-button.minimize {
+      background-color: #ffbd2e;
+      color: #8b6914;
+    }
+
+    .mac-button.maximize {
+      background-color: #28ca42;
+      color: #0f5132;
+    }
+
+    .mac-button.close::after {
+      content: "×";
+      font-size: 10px;
+      line-height: 1;
+    }
+
+    .mac-button.minimize::after {
+      content: "−";
+      font-size: 8px;
+      line-height: 1;
+    }
+
+    .mac-button.maximize::after {
+      content: "+";
+      font-size: 9px;
+      line-height: 1;
+    }
+
+    .terminal-line {
+      font-size: 1.1rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .prompt {
+      color: #ff0000;
+    }
+
+    .command {
+      color: #ffffff;
+    }
+
+    .output {
+      color: #ffffff;
+    }
+
+    .cursor {
+      display: inline-block;
+      width: 2px;
+      height: 1.2em;
+      background-color: #ffffff;
+      animation: blink 1s infinite;
+    }
+
+    @keyframes blink {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+
+    .subtitle {
+      font-size: 1rem;
+      margin-bottom: 2rem;
+      opacity: 0.8;
+      text-align: center;
+      letter-spacing: 1px;
+    }
+
+    .links-container {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      width: 100%;
+      max-width: 400px;
+    }
+
+    .link {
+      position: relative;
+      padding: 1rem 2rem;
+      border: none;
+      border-radius: 0;
+      color: #ff0000;
+      text-decoration: none;
+      font-size: 1.1rem;
+      font-weight: 400;
+      background: transparent;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      letter-spacing: 0.5px;
+    }
+
+    .link:hover {
+      background: rgba(255, 0, 0, 0.1);
+      transform: translateX(10px);
+    }
+
+    .link i {
+      font-size: 1.2rem;
+      width: 20px;
+      text-align: center;
+      color: #ffffff;
+    }
+
+    @media (max-width: 768px) {
+      .terminal-container {
+        min-width: 300px;
+        padding: 1.5rem;
+      }
+      
+      .link {
+        font-size: 1rem;
+        padding: 0.9rem 1.5rem;
+      }
+    }
+
+    .content::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 120%;
+      height: 120%;
+      background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
+      z-index: -1;
+      pointer-events: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="particles-js"></div>
+  <div class="content">
+    <div class="terminal-container">
+      <div class="terminal-header">
+        <span class="mac-button close"></span>
+        <span class="mac-button minimize"></span>
+        <span class="mac-button maximize"></span>
+      </div>
+      <div class="terminal-line">
+        <span class="prompt">$</span>
+        <span class="command" id="typed-command"></span>
+        <span class="cursor" id="cursor"></span>
+      </div>
+      <div class="terminal-line" id="output-line" style="display: none;">
+        <span class="prompt">></span>
+        <span class="output" id="output-text"></span>
+      </div>
+    </div>
+    
+    <p class="subtitle">Pentester | Red Team | HackTheBox</p>
+    
+    <div class="links-container">
+      <a class="link" href="https://discord.gg/yourinvite" target="_blank" rel="noopener">
+        <i class="fab fa-discord"></i>
+        <span>Discord</span>
+      </a>
+      <a class="link" href="https://github.com/5epi0l" target="_blank" rel="noopener">
+        <i class="fab fa-github"></i>
+        <span>GitHub</span>
+      </a>
+      <a class="link" href="https://notes.subh.space" target="_blank" rel="noopener">
+        <i class="fas fa-book"></i>
+        <span>My Notes</span>
+      </a>
+      <a class="link" href="https://5epi0l.bsky.social" target="_blank" rel="noopener">
+        <i class="fab fa-twitter"></i>
+        <span>Twitter</span>
+      </a>
+      <a class="link" href="https://www.linkedin.com/in/x4c1s" target="_blank" rel="noopener">
+        <i class="fab fa-linkedin"></i>
+        <span>LinkedIn</span>
+      </a>
+      <a class="link" href="https://htb.com/profile/x4c1s" target="_blank" rel="noopener">
+        <i class="fas fa-cube"></i>
+        <span>Hack The Box</span>
+      </a>
+    </div>
+  </div>
+
+  <script>
+    // Terminal typing animation (runs once)
+    const command = '/usr/bin/whoami';
+    const output = 'x4c1s';
+    let commandIndex = 0;
+    let outputIndex = 0;
+
+    const typedCommand = document.getElementById('typed-command');
+    const cursor = document.getElementById('cursor');
+    const outputLine = document.getElementById('output-line');
+    const outputText = document.getElementById('output-text');
+
+    function typeCommand() {
+      if (commandIndex < command.length) {
+        typedCommand.textContent += command[commandIndex];
+        commandIndex++;
+        setTimeout(typeCommand, 50 + Math.random() * 50); // Variable typing speed
+      } else {
+        // Hide cursor from command line
+        cursor.style.display = 'none';
+        
+        // Show output line after a delay
+        setTimeout(() => {
+          outputLine.style.display = 'block';
+          typeOutput();
+        }, 500);
+      }
+    }
+
+    function typeOutput() {
+      if (outputIndex < output.length) {
+        outputText.textContent += output[outputIndex];
+        outputIndex++;
+        setTimeout(typeOutput, 75);
+      }
+      // Animation complete - no restart
+    }
+
+    // Start the animation once on page load
+    setTimeout(typeCommand, 1000);
+  </script>
+</body>
+</html>
author	5epi0l <91630053+5epi0l@users.noreply.github.com>	2025-07-26 02:18:29 +0530
committer	GitHub <noreply@github.com>	2025-07-26 02:18:29 +0530
commit	384785c228175327ab264d851947045e0f589ce8 (patch)
tree	20a0475e9a19a03404769764e34f8c4f4ad8972f
parent	701c1c9349b8d81a50006e20f80afeb2e36cdc3c (diff)