Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Esteban: The Tactical Technomancer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cyber: { | |
| 50: '#e6f6ff', | |
| 100: '#d0ecff', | |
| 200: '#9dd8ff', | |
| 300: '#4fb2ff', | |
| 400: '#0095ff', | |
| 500: '#0074e0', | |
| 600: '#0059b8', | |
| 700: '#00428a', | |
| 800: '#002b5c', | |
| 900: '#001429', | |
| }, | |
| matrix: { | |
| 50: '#f0fffa', | |
| 100: '#d8fff0', | |
| 200: '#9bffe1', | |
| 300: '#5effd2', | |
| 400: '#00ffb3', | |
| 500: '#00e69c', | |
| 600: '#00b37a', | |
| 700: '#008058', | |
| 800: '#004d36', | |
| 900: '#001a14', | |
| } | |
| }, | |
| fontFamily: { | |
| 'orbitron': ['Orbitron', 'sans-serif'], | |
| 'rajdhani': ['Rajdhani', 'sans-serif'] | |
| }, | |
| animation: { | |
| 'glow': 'glow 1.5s ease-in-out infinite alternate', | |
| 'scan': 'scan 4s linear infinite', | |
| 'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite' | |
| }, | |
| keyframes: { | |
| glow: { | |
| '0%': { 'text-shadow': '0 0 2px #fff, 0 0 4px #fff, 0 0 6px #4fb2ff, 0 0 8px #4fb2ff, 0 0 10px #4fb2ff, 0 0 12px #4fb2ff, 0 0 14px #4fb2ff' }, | |
| '100%': { 'text-shadow': '0 0 3px #fff, 0 0 5px #d0ecff, 0 0 7px #9dd8ff, 0 0 9px #9dd8ff, 0 0 11px #9dd8ff, 0 0 13px #9dd8ff, 0 0 15px #9dd8ff' } | |
| }, | |
| scan: { | |
| '0%': { 'transform': 'translateY(-100%)' }, | |
| '100%': { 'transform': 'translateY(100vh)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| background: linear-gradient(135deg, #001429 0%, #00428a 100%); | |
| min-height: 100vh; | |
| position: relative; | |
| overflow-x: hidden; | |
| color: #d0ecff; | |
| } | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 10% 20%, rgba(79, 178, 255, 0.2) 0%, transparent 40%), | |
| radial-gradient(circle at 80% 30%, rgba(94, 255, 210, 0.15) 0%, transparent 40%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .cyber-border { | |
| box-shadow: 0 0 10px rgba(79, 178, 255, 0.7), 0 0 25px rgba(79, 178, 255, 0.5); | |
| } | |
| .cyber-grid { | |
| background-image: | |
| linear-gradient(rgba(79, 178, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(79, 178, 255, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| position: relative; | |
| } | |
| .code-block::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: linear-gradient(to bottom, #4fb2ff, #00ffb3); | |
| } | |
| .scan-line { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 6px; | |
| background: rgba(94, 255, 210, 0.5); | |
| box-shadow: 0 0 10px 2px rgba(94, 255, 210, 0.7); | |
| z-index: 30; | |
| animation: scan 4s linear infinite; | |
| } | |
| .neon-glow { | |
| animation: glow 1.5s ease-in-out infinite alternate; | |
| } | |
| .terminal-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .terminal-icon:hover { | |
| transform: translateY(-5px); | |
| text-shadow: 0 0 10px #4fb2ff, 0 0 20px #4fb2ff; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .skills-grid { | |
| grid-template-columns: repeat(1, 1fr); | |
| } | |
| .console-columns { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-rajdhani text-cyber-100"> | |
| <!-- Scanline effect --> | |
| <div class="scan-line"></div> | |
| <!-- Header with cyber theme --> | |
| <header class="relative py-10 text-center overflow-hidden"> | |
| <div class="absolute inset-0"> | |
| <div class="absolute top-0 right-0 w-40 h-40 bg-cyber-500 rounded-full filter blur-[100px] opacity-50"></div> | |
| <div class="absolute bottom-0 left-0 w-60 h-60 bg-matrix-400 rounded-full filter blur-[120px] opacity-50"></div> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-orbitron font-bold mb-4 neon-glow text-white"> | |
| Esteban | |
| </h1> | |
| <div class="flex justify-center mb-6"> | |
| <div class="w-24 h-1 bg-gradient-to-r from-cyber-500 to-matrix-500 rounded-full"></div> | |
| </div> | |
| <h2 class="text-xl md:text-3xl font-orbitron font-bold text-matrix-300"> | |
| The Tactical Technomancer | |
| </h2> | |
| <p class="mt-6 max-w-3xl mx-auto px-4 text-cyber-200 text-lg"> | |
| Cyber sentinel by training and a full-stack architect by instinct. | |
| Mastering the digital realm from Kali Linux trenches to AI platforms. | |
| </p> | |
| </header> | |
| <main class="container mx-auto px-4 py-10 max-w-6xl"> | |
| <!-- Skills Section --> | |
| <section class="py-12"> | |
| <h2 class="text-3xl font-orbitron font-bold mb-8 text-center"> | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyber-300 to-matrix-400"> | |
| Digital Arsenal & Tech Mastery | |
| </span> | |
| </h2> | |
| <div class="grid skills-grid gap-6 md:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Weapon Category --> | |
| <div class="bg-cyber-800/80 backdrop-blur-sm rounded-xl p-6 cyber-border"> | |
| <h3 class="text-xl font-orbitron font-medium text-matrix-400 mb-4"> | |
| <i class="fas fa-shield-alt mr-2"></i> Defense Systems | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-code text-matrix-400 w-6 mr-2"></i> | |
| <span>Python Security Frameworks</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fab fa-react text-cyber-300 w-6 mr-2"></i> | |
| <span>React Security Layers</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-network-wired text-matrix-400 w-6 mr-2"></i> | |
| <span>SOAR Engine Architectures</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-bug text-cyber-300 w-6 mr-2"></i> | |
| <span>Ransomware Analysis</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Platform Category --> | |
| <div class="bg-cyber-800/80 backdrop-blur-sm rounded-xl p-6 cyber-border"> | |
| <h3 class="text-xl font-orbitron font-medium text-matrix-400 mb-4"> | |
| <i class="fas fa-cloud mr-2"></i> Tactical Platforms | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fab fa-linux text-cyber-300 w-6 mr-2"></i> | |
| <span>Kali Linux Operations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-microchip text-matrix-400 w-6 mr-2"></i> | |
| <span>ESP32 Board Ecosystems</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-robot text-cyber-300 w-6 mr-2"></i> | |
| <span>Hugging Face Spaces</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fab fa-github text-matrix-400 w-6 mr-2"></i> | |
| <span>GitHub CI/CD Pipelines</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Deployment Category --> | |
| <div class="bg-cyber-800/80 backdrop-blur-sm rounded-xl p-6 cyber-border"> | |
| <h3 class="text-xl font-orbitron font-medium text-matrix-400 mb-4"> | |
| <i class="fas fa-fighter-jet mr-2"></i> Deployment Systems | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-flask text-cyber-300 w-6 mr-2"></i> | |
| <span>Flask Route Orchestration</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-bolt text-matrix-400 w-6 mr-2"></i> | |
| <span>FastAPI Endpoint Strategies</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-shield-virus text-cyber-300 w-6 mr-2"></i> | |
| <span>DevSecOps Integration</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-expand-arrows-alt text-matrix-400 w-6 mr-2"></i> | |
| <span>Scalable Architecture</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- AI Category --> | |
| <div class="bg-cyber-800/80 backdrop-blur-sm rounded-xl p-6 cyber-border"> | |
| <h3 class="text-xl font-orbitron font-medium text-matrix-400 mb-4"> | |
| <i class="fas fa-brain mr-2"></i> AI Warfare Suite | |
| </h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-cogs text-cyber-300 w-6 mr-2"></i> | |
| <span>NLP Dashboard Engineering</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-wand-magic-sparkles text-matrix-400 w-6 mr-2"></i> | |
| <span>No-Code AI Platforms</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-bolt-lightning text-cyber-300 w-6 mr-2"></i> | |
| <span>LexiCode Assistants</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-microchip text-matrix-400 w-6 mr-2"></i> | |
| <span>CodeTuneStudio Operations</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Code Console Section --> | |
| <section class="py-12 cyber-grid rounded-2xl overflow-hidden"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-cyber-800/30 to-cyber-900/70 backdrop-blur-sm"></div> | |
| <div class="relative z-10 p-6"> | |
| <h2 class="text-3xl font-orbitron font-bold mb-8 text-center text-matrix-300"> | |
| <i class="fas fa-terminal mr-3"></i> | |
| Command Console | |
| </h2> | |
| <div class="grid console-columns gap-8 md:grid-cols-2"> | |
| <!-- Code Editor --> | |
| <div class="bg-cyber-900/80 rounded-xl p-5 cyber-border"> | |
| <div class="flex text-matrix-500"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="mt-4 code-block bg-black/50 p-5 rounded-lg overflow-x-auto"> | |
| <p class="text-green-400"><span class="text-matrix-500">//</span> System Initialization Script</p> | |
| <p class="text-blue-300"><span class="text-matrix-500">import</span> cyber_ops</p> | |
| <p class="text-blue-300"><span class="text-matrix-500">from</span> ai_integration <span class="text-matrix-500">import</span> LexiCode, CodeTuneStudio</p> | |
| <br> | |
| <p class="text-purple-300"><span class="text-matrix-500">def</span> <span class="text-yellow-300">tactical_deploy</span>():</p> | |
| <p class="ml-4 text-cyber-200">cyber_defense = cyber_ops.SecurityOrchestration()</p> | |
| <p class="ml-4 text-cyber-200">cyber_defense.enable_realtime_monitoring()</p> | |
| <p class="ml-4 text-cyber-200">cyber_defense.activate_threat_containment()</p> | |
| <br> | |
| <p class="text-purple-300"><span class="text-matrix-500">def</span> <span class="text-yellow-300">ai_assistant</span>(mode):</p> | |
| <p class="ml-4 text-cyber-200"><span class="text-matrix-500">if</span> mode == <span class="text-green-400">'innovation'</span>:</p> | |
| <p class="ml-8 text-cyber-200">agent = LexiCode.activate()</p> | |
| <p class="ml-4 text-cyber-200"><span class="text-matrix-500">else</span>:</p> | |
| <p class="ml-8 text-cyber-200">agent = CodeTuneStudio.optimize()</p> | |
| <br> | |
| <p class="text-green-400">tactical_deploy()</p> | |
| <p class="text-green-400">ai_assistant(<span class="text-green-400">'innovation'</span>)</p> | |
| </div> | |
| </div> | |
| <!-- Terminal Window --> | |
| <div class="bg-cyber-900/80 rounded-xl p-5 cyber-border"> | |
| <div class="flex text-matrix-500"> | |
| <div class="w-3 h-3 rounded-full bg-cyber-300 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-matrix-300 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-cyber-500"></div> | |
| </div> | |
| <div class="mt-4 bg-black/50 p-5 rounded-lg font-mono"> | |
| <p class="text-matrix-400 mb-4">user@technomancer:~$ security_system --status</p> | |
| <p class="text-cyber-300">> Firewall: ACTIVE | Encryption: AES-256</p> | |
| <p class="text-cyber-300">> AI Agents: LexiCode: ONLINE | CodeTune: STANDBY</p> | |
| <p class="text-cyber-300">> Threat Detection: 0 active threats</p> | |
| <br> | |
| <p class="text-matrix-400">user@technomancer:~$ deploy --platform github --env production</p> | |
| <p class="text-cyber-300">> Pipeline initialized</p> | |
| <p class="text-green-300">> Security checks: PASSED</p> | |
| <p class="text-green-300">> Code validation: SUCCESS</p> | |
| <p class="text-green-300">> Deployment complete: Systems optimal</p> | |
| <br> | |
| <div class="flex"> | |
| <span class="text-matrix-400">user@technomancer:~$ </span> | |
| <span class="ml-1 w-3 h-5 bg-cyber-100 animate-pulse-slow"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Manifesto Section --> | |
| <section class="py-16"> | |
| <div class="text-center max-w-3xl mx-auto"> | |
| <div class="text-cyber-200 text-5xl font-orbitron"> | |
| <i class="fas fa-code text-matrix-400"></i> | |
| </div> | |
| <h2 class="text-3xl font-orbitron font-bold mt-4 mb-6 text-matrix-300">Technomancer Manifesto</h2> | |
| <div class="space-y-6 text-lg text-cyber-200"> | |
| <p class="leading-relaxed"> | |
| <span class="text-matrix-400 font-bold">Security</span> is non-negotiable - embedded at every layer, | |
| from CI/CD pipelines to transformer model deployment. | |
| </p> | |
| <p class="leading-relaxed"> | |
| <span class="text-cyber-300 font-bold">Elegance</span> is efficiency - clean code, intuitive interfaces, | |
| and frictionless automation that scales with mission requirements. | |
| </p> | |
| <p class="leading-relaxed"> | |
| <span class="text-matrix-400 font-bold">Clarity</span> is command - documentation that reads like tactical briefings, | |
| commit messages that track mission evolution, code that reveals intent. | |
| </p> | |
| <div class="mt-10 text-center"> | |
| <div class="inline-block px-6 py-3 bg-gradient-to-r from-cyber-600 to-matrix-700 rounded-lg cyber-border"> | |
| <span class="font-orbitron text-white">Boundaries Are Merely Undeveloped Features</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Command Station --> | |
| <section class="py-12"> | |
| <h2 class="text-3xl font-orbitron font-bold mb-10 text-center text-transparent bg-clip-text bg-gradient-to-r from-cyber-300 to-matrix-400"> | |
| Command Station | |
| </h2> | |
| <div class="flex flex-wrap justify-center gap-8"> | |
| <div class="terminal-icon text-center text-cyber-300"> | |
| <div class="w-20 h-20 mx-auto flex items-center justify-center bg-cyber-800/80 backdrop-blur-sm rounded-full cyber-border mb-3"> | |
| <i class="fas fa-laptop-code text-3xl text-matrix-400"></i> | |
| </div> | |
| <span>Terminal</span> | |
| </div> | |
| <div class="terminal-icon text-center text-cyber-300"> | |
| <div class="w-20 h-20 mx-auto flex items-center justify-center bg-cyber-800/80 backdrop-blur-sm rounded-full cyber-border mb-3"> | |
| <i class="fas fa-globe-americas text-3xl text-matrix-400"></i> | |
| </div> | |
| <span>Network</span> | |
| </div> | |
| <div class="terminal-icon text-center text-cyber-300"> | |
| <div class="w-20 h-20 mx-auto flex items-center justify-center bg-cyber-800/80 backdrop-blur-sm rounded-full cyber-border mb-3"> | |
| <i class="fas fa-key text-3xl text-matrix-400"></i> | |
| </div> | |
| <span>Encryption</span> | |
| </div> | |
| <div class="terminal-icon text-center text-cyber-300"> | |
| <div class="w-20 h-20 mx-auto flex items-center justify-center bg-cyber-800/80 backdrop-blur-sm rounded-full cyber-border mb-3"> | |
| <i class="fas fa-project-diagram text-3xl text-matrix-400"></i> | |
| </div> | |
| <span>Integrations</span> | |
| </div> | |
| <div class="terminal-icon text-center text-cyber-300"> | |
| <div class="w-20 h-20 mx-auto flex items-center justify-center bg-cyber-800/80 backdrop-blur-sm rounded-full cyber-border mb-3"> | |
| <i class="fas fa-database text-3xl text-matrix-400"></i> | |
| </div> | |
| <span>DataOps</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="py-10 text-center border-t border-cyber-700/40 mt-12"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flex justify-center space-x-6 mb-4 text-cyber-300"> | |
| <a href="#" class="hover:text-matrix-400 transition-colors"> | |
| <i class="fab fa-github text-lg"></i> | |
| </a> | |
| <a href="#" class="hover:text-matrix-400 transition-colors"> | |
| <i class="fab fa-replit text-lg"></i> | |
| </a> | |
| <a href="#" class="hover:text-matrix-400 transition-colors"> | |
| <i class="fab fa-python text-lg"></i> | |
| </a> | |
| <a href="#" class="hover:text-matrix-400 transition-colors"> | |
| <i class="fab fa-hacker-news text-lg"></i> | |
| </a> | |
| </div> | |
| <p class="text-cyber-400"> | |
| © Esteban - Tactical Technomancer | Digital operations secured with AES-256 encryption | |
| </p> | |
| </div> | |
| </footer> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=S-Dreamer/technomancer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |