Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Csaba Bolyós | AI/AR Developer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Ubuntu+Mono:wght@400;700&display=swap'); | |
| :root { | |
| --matrix-green: #0f0; | |
| --cyber-cyan: #0ff; | |
| --digital-purple: #b19cd9; | |
| --terminal-red: #f44; | |
| --deep-black: #0a0a12; | |
| } | |
| body { | |
| font-family: 'Share Tech Mono', monospace; | |
| background-color: var(--deep-black); | |
| color: var(--matrix-green); | |
| overflow-x: hidden; | |
| } | |
| .matrix-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.1; | |
| } | |
| .terminal-window { | |
| border: 1px solid var(--matrix-green); | |
| box-shadow: 0 0 15px var(--matrix-green); | |
| border-radius: 5px; | |
| } | |
| .terminal-header { | |
| background: linear-gradient(90deg, rgba(11,11,18,1) 0%, rgba(15,15,25,1) 100%); | |
| border-bottom: 1px solid var(--matrix-green); | |
| } | |
| .terminal-btn { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 5px; | |
| } | |
| .close { background-color: var(--terminal-red); } | |
| .minimize { background-color: #ffbd2e; } | |
| .maximize { background-color: #28c940; } | |
| .typing-effect { | |
| border-right: 2px solid var(--matrix-green); | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { border-color: transparent; } | |
| 50% { border-color: var(--matrix-green); } | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| left: 2px; | |
| text-shadow: -2px 0 #ff00c1; | |
| clip: rect(24px, 550px, 90px, 0); | |
| animation: glitch-anim-1 2s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -2px; | |
| text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1; | |
| clip: rect(85px, 550px, 140px, 0); | |
| animation: glitch-anim-2 2s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim-1 { | |
| 0% { clip: rect(32px, 9999px, 85px, 0); } | |
| 20% { clip: rect(112px, 9999px, 76px, 0); } | |
| 40% { clip: rect(92px, 9999px, 101px, 0); } | |
| 60% { clip: rect(103px, 9999px, 94px, 0); } | |
| 80% { clip: rect(122px, 9999px, 120px, 0); } | |
| 100% { clip: rect(88px, 9999px, 59px, 0); } | |
| } | |
| @keyframes glitch-anim-2 { | |
| 0% { clip: rect(100px, 9999px, 120px, 0); } | |
| 20% { clip: rect(45px, 9999px, 30px, 0); } | |
| 40% { clip: rect(30px, 9999px, 92px, 0); } | |
| 60% { clip: rect(111px, 9999px, 73px, 0); } | |
| 80% { clip: rect(60px, 9999px, 120px, 0); } | |
| 100% { clip: rect(23px, 9999px, 53px, 0); } | |
| } | |
| .progress-bar { | |
| background-color: rgba(15, 255, 0, 0.2); | |
| height: 20px; | |
| border-radius: 3px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| background-color: var(--matrix-green); | |
| animation: progress-anim 1.5s ease-out forwards; | |
| } | |
| @keyframes progress-anim { | |
| from { width: 0; } | |
| } | |
| .command-line { | |
| background-color: rgba(0, 0, 0, 0.3); | |
| border-left: 3px solid var(--matrix-green); | |
| padding-left: 10px; | |
| } | |
| .command-line::before { | |
| content: "> "; | |
| color: var(--cyber-cyan); | |
| } | |
| .skill-item:hover { | |
| transform: translateX(5px); | |
| text-shadow: 0 0 5px var(--matrix-green); | |
| } | |
| .neon-glow { | |
| text-shadow: 0 0 5px var(--matrix-green), 0 0 10px var(--matrix-green); | |
| } | |
| .neon-glow-cyan { | |
| text-shadow: 0 0 5px var(--cyber-cyan), 0 0 10px var(--cyber-cyan); | |
| } | |
| .matrix-char { | |
| position: absolute; | |
| color: var(--matrix-green); | |
| opacity: 0; | |
| animation: matrix-fall linear infinite; | |
| } | |
| @keyframes matrix-fall { | |
| 0% { | |
| transform: translateY(-100px); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(calc(100vh + 100px)); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Matrix Background Animation --> | |
| <div id="matrix-bg" class="matrix-bg"></div> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Terminal Window --> | |
| <div class="terminal-window bg-black bg-opacity-90 backdrop-blur-sm mb-8"> | |
| <!-- Terminal Header --> | |
| <div class="terminal-header px-4 py-2 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="terminal-btn close"></span> | |
| <span class="terminal-btn minimize"></span> | |
| <span class="terminal-btn maximize"></span> | |
| <span class="ml-2 text-xs text-cyan-300">user@ai-terminal:~$</span> | |
| </div> | |
| <div class="text-xs text-green-400">Csaba_Bolyós.portfolio</div> | |
| </div> | |
| <!-- Terminal Content --> | |
| <div class="p-4 md:p-6"> | |
| <!-- Hero Section --> | |
| <div class="mb-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-6"> | |
| <div> | |
| <h1 class="glitch text-3xl md:text-5xl font-bold mb-2" data-text="Csaba Bolyós">Csaba Bolyós</h1> | |
| <div class="text-xl md:text-2xl text-cyan-300 mb-2 typing-effect" id="typing-title"></div> | |
| <div class="text-green-400 text-sm md:text-base"> | |
| Leading AI at Rodney Mullen's Skatrix • Creator of SOWLv2 Vision AI • B8BSkateboards NFT Pioneer | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="text-xs text-purple-300">Current Location: Slovakia</div> | |
| <div class="text-xs text-purple-300">Current Role: AI Lead at Skatrix</div> | |
| </div> | |
| </div> | |
| <div class="command-line text-green-400 my-4 py-2"> | |
| <span class="text-cyan-300">user@ai-terminal:~$</span> whoami | |
| </div> | |
| <div class="text-green-400 ml-4 mb-6"> | |
| AI/AR Solution Developer | Full-Stack Engineer | Immersive Tech Creator with 8+ years of experience bridging academic computer graphics expertise with real-world applications, leading innovation at the intersection of computer vision, machine learning, and immersive technologies. | |
| </div> | |
| </div> | |
| <!-- Experience Section --> | |
| <div class="mb-12"> | |
| <h2 class="text-xl md:text-2xl font-bold text-cyan-300 mb-4 neon-glow-cyan">Experience Matrix</h2> | |
| <div class="command-line text-green-400 my-4 py-2"> | |
| <span class="text-cyan-300">user@ai-terminal:~$</span> ./experience --verbose | |
| </div> | |
| <div class="ml-4 space-y-6"> | |
| <div> | |
| <div class="text-green-400 font-bold">> CURRENT: Rodney Mullen's Skatrix (Feb 2024-June 2025)</div> | |
| <div class="ml-4 text-sm"> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">├──</span> YOLOv11 + Lightship ARDK integration</div> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">├──</span> Human movement recognition AI + LLM trick suggestions</div> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">├──</span> Unity MLAgents reinforcement learning (PPO, GAIL)</div> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">└──</span> Backend infrastructure (Node.js v12→v18, Python microservices)</div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-green-400 font-bold">> FOUNDER: B8BSkateboards (Dec 2021-Present)</div> | |
| <div class="ml-4 text-sm"> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">├──</span> 100+ AR-enabled NFT skateboards</div> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">├──</span> Full 3D pipeline + OpenSea launch</div> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">└──</span> ML/AI content creation on YouTube</div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-green-400 font-bold">> IBM: Application Developer (Nov 2016-Jan 2024)</div> | |
| <div class="ml-4 text-sm"> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">├──</span> iOS: Austrian Railways iPad app (Swift/Objective-C)</div> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">├──</span> Android: Daimler Car2Go apps</div> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">├──</span> Architecture: ML-enhanced "YourGuides" platform</div> | |
| <div class="flex items-center"><span class="text-cyan-300 mr-2">└──</span> Full-Stack: EU BP app (React, AWS Lambda, microservices)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skills Section --> | |
| <div class="mb-12"> | |
| <h2 class="text-xl md:text-2xl font-bold text-cyan-300 mb-4 neon-glow-cyan">Technical Arsenal</h2> | |
| <div class="command-line text-green-400 my-4 py-2"> | |
| <span class="text-cyan-300">user@ai-terminal:~$</span> ./skills --all | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 ml-4"> | |
| <div> | |
| <h3 class="text-green-400 font-bold mb-2">> AI/ML MODELS:</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>YOLO</span> | |
| <span>95%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 95%;"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Llama</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 92%;"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>SAM 2</span> | |
| <span>90%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 90%;"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>MoveNet</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 85%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-green-400 font-bold mb-2">> DEVELOPMENT STACK:</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Python</span> | |
| <span>95%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 95%;"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Swift</span> | |
| <span>90%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 90%;"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Node.js</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 92%;"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Unity</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 85%;"></div> | |
| </div> | |
| </div> | |
| </ | |
| <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=BladeSzaSza/cv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |