Spaces:
Running
Running
Download index.html from kritsanan3/krithub: direct link, hf CLI and curl.
- Browser
- Download file 49.5 kB
-
https://huggingface.co/spaces/kritsanan3/krithub/resolve/main/index.html
- Command line
-
hf download hf://spaces/kritsanan3/krithub/index.html
-
curl -L -o index.html https://huggingface.co/spaces/kritsanan3/krithub/resolve/main/index.html
49.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cyber Samurai Portfolio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --neon-blue: #0ff0fc; | |
| --neon-pink: #ff2ced; | |
| --neon-purple: #9d00ff; | |
| --dark-bg: #0a0a12; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text-blue { | |
| text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 15px var(--neon-blue); | |
| color: var(--neon-blue); | |
| } | |
| .neon-text-pink { | |
| text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px var(--neon-pink); | |
| color: var(--neon-pink); | |
| } | |
| .neon-border-blue { | |
| box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), inset 0 0 10px var(--neon-blue); | |
| border: 1px solid var(--neon-blue); | |
| } | |
| .neon-border-pink { | |
| box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), inset 0 0 10px var(--neon-pink); | |
| border: 1px solid var(--neon-pink); | |
| } | |
| .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 var(--neon-pink); | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim 5s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -2px; | |
| text-shadow: -2px 0 var(--neon-blue); | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim2 5s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim { | |
| 0% { clip: rect(31px, 9999px, 94px, 0); } | |
| 10% { clip: rect(112px, 9999px, 76px, 0); } | |
| 20% { clip: rect(85px, 9999px, 77px, 0); } | |
| 30% { clip: rect(27px, 9999px, 97px, 0); } | |
| 40% { clip: rect(64px, 9999px, 98px, 0); } | |
| 50% { clip: rect(61px, 9999px, 85px, 0); } | |
| 60% { clip: rect(99px, 9999px, 114px, 0); } | |
| 70% { clip: rect(34px, 9999px, 115px, 0); } | |
| 80% { clip: rect(98px, 9999px, 129px, 0); } | |
| 90% { clip: rect(43px, 9999px, 96px, 0); } | |
| 100% { clip: rect(82px, 9999px, 64px, 0); } | |
| } | |
| @keyframes glitch-anim2 { | |
| 0% { clip: rect(65px, 9999px, 119px, 0); } | |
| 10% { clip: rect(66px, 9999px, 101px, 0); } | |
| 20% { clip: rect(80px, 9999px, 114px, 0); } | |
| 30% { clip: rect(89px, 9999px, 106px, 0); } | |
| 40% { clip: rect(68px, 9999px, 115px, 0); } | |
| 50% { clip: rect(87px, 9999px, 97px, 0); } | |
| 60% { clip: rect(35px, 9999px, 98px, 0); } | |
| 70% { clip: rect(99px, 9999px, 83px, 0); } | |
| 80% { clip: rect(119px, 9999px, 103px, 0); } | |
| 90% { clip: rect(34px, 9999px, 122px, 0); } | |
| 100% { clip: rect(102px, 9999px, 80px, 0); } | |
| } | |
| .terminal-text { | |
| border-right: 2px solid var(--neon-blue); | |
| animation: blink 0.75s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { border-color: transparent; } | |
| 50% { border-color: var(--neon-blue); } | |
| } | |
| .skill-wheel { | |
| position: relative; | |
| width: 400px; | |
| height: 400px; | |
| margin: 0 auto; | |
| } | |
| .skill-item { | |
| position: absolute; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| } | |
| .skill-item:hover { | |
| transform: scale(1.2); | |
| box-shadow: 0 0 20px var(--neon-blue); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -25px; | |
| top: 0; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: var(--neon-purple); | |
| box-shadow: 0 0 10px var(--neon-purple); | |
| } | |
| .project-card { | |
| transition: all 0.3s ease; | |
| perspective: 1000px; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 20px rgba(157, 0, 255, 0.3); | |
| } | |
| .project-card-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .project-card:hover .project-card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .project-card-front, .project-card-back { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| } | |
| .project-card-back { | |
| transform: rotateY(180deg); | |
| } | |
| .contact-form input, | |
| .contact-form textarea { | |
| background: rgba(10, 10, 18, 0.7); | |
| border: 1px solid var(--neon-blue); | |
| color: white; | |
| } | |
| .contact-form input:focus, | |
| .contact-form textarea:focus { | |
| outline: none; | |
| box-shadow: 0 0 10px var(--neon-blue); | |
| } | |
| .qr-code { | |
| filter: drop-shadow(0 0 10px var(--neon-blue)); | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| @media (max-width: 768px) { | |
| .parallax { | |
| background-attachment: scroll; | |
| } | |
| .skill-wheel { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .skill-item { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black bg-opacity-90 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#home" class="text-xl font-bold neon-text-blue">CYBER_SAMURAI</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#about" class="text-white hover:text-blue-400 transition">ABOUT</a> | |
| <a href="#skills" class="text-white hover:text-pink-400 transition">SKILLS</a> | |
| <a href="#projects" class="text-white hover:text-purple-400 transition">PROJECTS</a> | |
| <a href="#experience" class="text-white hover:text-blue-400 transition">EXPERIENCE</a> | |
| <a href="#contact" class="text-white hover:text-pink-400 transition">CONTACT</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-white focus:outline-none"> | |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="md:hidden hidden bg-black bg-opacity-95"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#about" class="block px-3 py-2 text-white hover:bg-gray-800">ABOUT</a> | |
| <a href="#skills" class="block px-3 py-2 text-white hover:bg-gray-800">SKILLS</a> | |
| <a href="#projects" class="block px-3 py-2 text-white hover:bg-gray-800">PROJECTS</a> | |
| <a href="#experience" class="block px-3 py-2 text-white hover:bg-gray-800">EXPERIENCE</a> | |
| <a href="#contact" class="block px-3 py-2 text-white hover:bg-gray-800">CONTACT</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center parallax" style="background-image: url('https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');"> | |
| <div class="absolute inset-0 bg-black bg-opacity-70"></div> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="glitch text-5xl md:text-7xl font-bold mb-6" data-text="CYBER_SAMURAI">CYBER_SAMURAI</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto neon-text-blue"> | |
| "Welcome to my world, where the past meets the future, and the blade merges with data." | |
| </p> | |
| <p class="text-lg md:text-xl mb-12 neon-text-pink"> | |
| กฤษนันทน์ นำแปง - นักสร้างสรรค์ผู้ผสมผสานเทคโนโลยีและศิลปะอย่างลงตัว | |
| </p> | |
| <a href="#about" class="inline-block px-8 py-3 bg-transparent border-2 border-blue-400 text-blue-400 font-bold rounded-full hover:bg-blue-400 hover:text-black transition duration-300 neon-border-blue"> | |
| ENTER MY WORLD | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-text-pink">WHO IS THE CYBER SAMURAI?</h2> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80 mx-auto"> | |
| <div class="absolute inset-0 rounded-full bg-blue-500 opacity-20 blur-xl"></div> | |
| <img src="https://images.unsplash.com/photo-1564564321837-a57b1120bbfd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" | |
| alt="Cyber Samurai" | |
| class="relative z-10 w-full h-full object-cover rounded-full border-4 border-blue-400"> | |
| <div class="absolute -inset-4 border-2 border-pink-400 rounded-full animate-spin-slow opacity-70"></div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="terminal-text mb-6 text-lg md:text-xl leading-relaxed" id="typewriter"> | |
| <p class="neon-text-blue">> INITIATING BIOGRAPHY SEQUENCE...</p> | |
| </div> | |
| <p class="text-gray-300 mb-6"> | |
| ฉันคือกฤษนันทน์ นำแปง นักสร้างสรรค์ที่ไม่หยุดนิ่งในการพัฒนาตัวเอง ด้วยจิตวิญญาณของซามูไรแห่งโลกไซเบอร์ ฉันหลอมรวมเทคโนโลยีเข้ากับศิลปะเพื่อสร้างสรรค์ผลงานที่ล้ำหน้าและไร้ขีดจำกัด | |
| </p> | |
| <p class="text-gray-300 mb-6"> | |
| ด้วยประสบการณ์มากกว่า 5 ปีในวงการดิจิทัล ฉันได้พัฒนาทักษะที่หลากหลายตั้งแต่การออกแบบเว็บไซต์ การพัฒนาแอปพลิเคชัน จนถึงการสร้างสรรค์เนื้อหาและแบรนด์ดิ้ง | |
| </p> | |
| <p class="text-gray-300"> | |
| ปรัชญาการทำงานของฉันคือ "ความสมบูรณ์แบบในทุกพิกเซล" เพราะฉันเชื่อว่าความใส่ใจในรายละเอียดเล็กๆ น้อยๆ คือสิ่งที่ทำให้ผลงานโดดเด่นและน่าจดจำ | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 px-4 bg-gray-900"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-text-blue">THE CYBERNETIC ARSENAL</h2> | |
| <div class="skill-wheel mb-16"> | |
| <div class="skill-item" style="top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 255, 252, 0.1);" data-skill="Full Stack"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /> | |
| </svg> | |
| <span class="text-xs text-white">Full Stack</span> | |
| </div> | |
| </div> | |
| <!-- Position skills in a circle --> | |
| <div class="skill-item" style="top: 10%; left: 50%; transform: translateX(-50%);" data-skill="HTML/CSS"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /> | |
| </svg> | |
| <span class="text-xs text-white">HTML/CSS</span> | |
| </div> | |
| </div> | |
| <div class="skill-item" style="top: 20%; left: 80%;" data-skill="JavaScript"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| <span class="text-xs text-white">JavaScript</span> | |
| </div> | |
| </div> | |
| <div class="skill-item" style="top: 50%; left: 90%; transform: translateY(-50%);" data-skill="React"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /> | |
| </svg> | |
| <span class="text-xs text-white">React</span> | |
| </div> | |
| </div> | |
| <div class="skill-item" style="top: 80%; left: 80%;" data-skill="Node.js"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| <span class="text-xs text-white">Node.js</span> | |
| </div> | |
| </div> | |
| <div class="skill-item" style="top: 90%; left: 50%; transform: translateX(-50%);" data-skill="Python"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /> | |
| </svg> | |
| <span class="text-xs text-white">Python</span> | |
| </div> | |
| </div> | |
| <div class="skill-item" style="top: 80%; left: 20%;" data-skill="UI/UX"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /> | |
| </svg> | |
| <span class="text-xs text-white">UI/UX</span> | |
| </div> | |
| </div> | |
| <div class="skill-item" style="top: 50%; left: 10%; transform: translateY(-50%);" data-skill="Figma"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> | |
| </svg> | |
| <span class="text-xs text-white">Figma</span> | |
| </div> | |
| </div> | |
| <div class="skill-item" style="top: 20%; left: 20%;" data-skill="AI/ML"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /> | |
| </svg> | |
| <span class="text-xs text-white">AI/ML</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="skill-description" class="text-center p-6 bg-gray-800 rounded-lg max-w-2xl mx-auto neon-border-blue"> | |
| <h3 class="text-xl font-bold mb-2 neon-text-pink">HOVER OVER A SKILL TO SEE DETAILS</h3> | |
| <p class="text-gray-300">Select one of my cybernetic abilities to learn more about my expertise in that area.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 px-4 bg-gradient-to-b from-gray-900 to-black"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-text-pink">LEGACY OF THE CODE</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="project-card h-80"> | |
| <div class="project-card-inner h-full w-full"> | |
| <div class="project-card-front bg-gray-800 rounded-lg p-6 flex flex-col justify-between h-full neon-border-blue"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text-blue">Neon City Dashboard</h3> | |
| <p class="text-gray-300">An interactive dashboard for monitoring cyberpunk city metrics with real-time data visualization.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded-full mr-2">React</span> | |
| <span class="inline-block bg-purple-900 text-purple-300 text-xs px-2 py-1 rounded-full">D3.js</span> | |
| </div> | |
| </div> | |
| <div class="project-card-back bg-gray-800 rounded-lg p-6 flex flex-col justify-between h-full neon-border-pink"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text-pink">Project Details</h3> | |
| <ul class="text-gray-300 text-sm space-y-2"> | |
| <li>• Real-time data streaming from multiple sources</li> | |
| <li>• Customizable dashboard widgets</li> | |
| <li>• Predictive analytics using ML models</li> | |
| <li>• Responsive design for all devices</li> | |
| </ul> | |
| </div> | |
| <a href="#" class="inline-block mt-4 px-4 py-2 bg-pink-500 text-white rounded-full text-sm hover:bg-pink-600 transition">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="project-card h-80"> | |
| <div class="project-card-inner h-full w-full"> | |
| <div class="project-card-front bg-gray-800 rounded-lg p-6 flex flex-col justify-between h-full neon-border-blue"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text-blue">Samurai AI Assistant</h3> | |
| <p class="text-gray-300">A voice-controlled AI assistant with personality customization and martial arts knowledge base.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded-full mr-2">Python</span> | |
| <span class="inline-block bg-green-900 text-green-300 text-xs px-2 py-1 rounded-full">TensorFlow</span> | |
| </div> | |
| </div> | |
| <div class="project-card-back bg-gray-800 rounded-lg p-6 flex flex-col justify-between h-full neon-border-pink"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text-pink">Project Details</h3> | |
| <ul class="text-gray-300 text-sm space-y-2"> | |
| <li>• Natural language processing for commands</li> | |
| <li>• Personality customization options</li> | |
| <li>• Martial arts technique database</li> | |
| <li>• Multi-language support</li> | |
| </ul> | |
| </div> | |
| <a href="#" class="inline-block mt-4 px-4 py-2 bg-pink-500 text-white rounded-full text-sm hover:bg-pink-600 transition">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="project-card h-80"> | |
| <div class="project-card-inner h-full w-full"> | |
| <div class="project-card-front bg-gray-800 rounded-lg p-6 flex flex-col justify-between h-full neon-border-blue"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text-blue">Cyber Dojo VR</h3> | |
| <p class="text-gray-300">Virtual reality training environment for martial arts with motion tracking and AI opponents.</p> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded-full mr-2">Unity</span> | |
| <span class="inline-block bg-red-900 text-red-300 text-xs px-2 py-1 rounded-full">C#</span> | |
| </div> | |
| </div> | |
| <div class="project-card-back bg-gray-800 rounded-lg p-6 flex flex-col justify-between h-full neon-border-pink"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text-pink">Project Details</h3> | |
| <ul class="text-gray-300 text-sm space-y-2"> | |
| <li>• Full-body motion tracking</li> | |
| <li>• Adaptive AI opponents</li> | |
| <li>• Multiple training environments</li> | |
| <li>• Performance analytics</li> | |
| </ul> | |
| </div> | |
| <a href="#" class="inline-block mt-4 px-4 py-2 bg-pink-500 text-white rounded-full text-sm hover:bg-pink-600 transition">View Project</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block px-8 py-3 bg-transparent border-2 border-pink-400 text-pink-400 font-bold rounded-full hover:bg-pink-400 hover:text-black transition duration-300 neon-border-pink"> | |
| VIEW ALL PROJECTS | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="py-20 px-4 bg-black"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-text-blue">BATTLE RECORDS</h2> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-1/2 h-full w-1 bg-gradient-to-b from-blue-400 to-pink-500 transform -translate-x-1/2"></div> | |
| <!-- Timeline items --> | |
| <div class="space-y-8"> | |
| <!-- Item 1 --> | |
| <div class="relative timeline-item pl-8 md:pl-0 md:flex justify-between items-center"> | |
| <div class="md:w-5/12 mb-4 md:mb-0 md:pr-8 text-right"> | |
| <h3 class="text-xl font-bold neon-text-pink">Software Engineer</h3> | |
| <p class="text-gray-400">FutureCorp</p> | |
| <p class="text-sm text-gray-500">2022 - Present</p> | |
| </div> | |
| <div class="hidden md:block md:w-2/12 text-center"> | |
| <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="md:w-5/12 bg-gray-800 p-6 rounded-lg neon-border-blue"> | |
| <p class="text-gray-300">Leading development of next-generation cybernetic interfaces and neural network architectures for FutureCorp's flagship products.</p> | |
| </div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="relative timeline-item pl-8 md:pl-0 md:flex justify-between items-center"> | |
| <div class="md:w-5/12 order-3 bg-gray-800 p-6 rounded-lg neon-border-pink"> | |
| <p class="text-gray-300">Designed immersive user experiences for corporate clients, blending aesthetics with functionality to create memorable digital journeys.</p> | |
| </div> | |
| <div class="hidden md:block md:w-2/12 order-2 text-center"> | |
| <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="md:w-5/12 order-1 mb-4 md:mb-0 md:pl-8"> | |
| <h3 class="text-xl font-bold neon-text-blue">UI/UX Designer</h3> | |
| <p class="text-gray-400">Digital Ninja</p> | |
| <p class="text-sm text-gray-500">2019 - 2022</p> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="relative timeline-item pl-8 md:pl-0 md:flex justify-between items-center"> | |
| <div class="md:w-5/12 mb-4 md:mb-0 md:pr-8 text-right"> | |
| <h3 class="text-xl font-bold neon-text-pink">Web Developer</h3> | |
| <p class="text-gray-400">Freelancer</p> | |
| <p class="text-sm text-gray-500">2017 - 2019</p> | |
| </div> | |
| <div class="hidden md:block md:w-2/12 text-center"> | |
| <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-purple-500 text-white"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="md:w-5/12 bg-gray-800 p-6 rounded-lg neon-border-blue"> | |
| <p class="text-gray-300">Built custom websites and web applications for diverse clients, honing skills in problem-solving and client communication.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-16 neon-text-pink">CONNECT WITH THE SAMURAI</h2> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <form class="contact-form space-y-6 p-8 rounded-lg neon-border-blue"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">YOUR NAME</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">YOUR EMAIL</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">SUBJECT</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-300 mb-1">YOUR MESSAGE</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-blue-500 text-white font-bold rounded-lg hover:bg-blue-600 transition duration-300 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /> | |
| </svg> | |
| SEND MESSAGE THROUGH NEON NETWORK | |
| </button> | |
| </form> | |
| </div> | |
| <div class="lg:w-1/2 flex flex-col justify-center"> | |
| <div class="bg-gray-800 p-8 rounded-lg h-full neon-border-pink"> | |
| <h3 class="text-2xl font-bold mb-6 neon-text-blue">DIRECT DATA LINK</h3> | |
| <div class="flex items-center mb-8"> | |
| <div class="qr-code mr-6"> | |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://linkedin.com/in/cyber-samurai" alt="QR Code" class="w-32 h-32"> | |
| </div> | |
| <div> | |
| <p class="text-gray-300 mb-4">Scan this code to connect directly to my digital networks:</p> | |
| <div class="space-y-3"> | |
| <a href="#" class="flex items-center text-blue-400 hover:text-blue-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/> | |
| </svg> | |
| LinkedIn Profile | |
| </a> | |
| <a href="#" class="flex items-center text-gray-300 hover:text-white"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524-.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.419 1.652.141 2.872-.106 3.176.771.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub Repository | |
| </a> | |
| <a href="#" class="flex items-center text-pink-400 hover:text-pink-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| cyber.samurai@neonmail.com | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-700"> | |
| <h4 class="text-lg font-medium mb-4 neon-text-pink">AVAILABLE FOR:</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 bg-blue-900 text-blue-300 rounded-full text-sm">Web Development</span> | |
| <span class="px-3 py-1 bg-pink-900 text-pink-300 rounded-full text-sm">UI/UX Design</span> | |
| <span class="px-3 py-1 bg-purple-900 text-purple-300 rounded-full text-sm">Consulting</span> | |
| <span class="px-3 py-1 bg-green-900 text-green-300 rounded-full text-sm">AI Projects</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 bg-black text-center"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex justify-center space-x-6 mb-8"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524-.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.419 1.652.141 2.872-.106 3.176.771.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-pink-400 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-300 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> | |
| </svg> | |
| </a> | |
| </div> | |
| <p class="text-gray-500 mb-4">© 2023 CYBER SAMURAI. ALL RIGHTS RESERVED.</p> | |
| <p class="text-gray-600 text-sm">Designed with the spirit of a digital warrior.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Typewriter effect for about section | |
| const text = `> INITIATING BIOGRAPHY SEQUENCE...\n\n> NAME: KRISANAN NAMPANG\n> TITLE: CYBER SAMURAI DEVELOPER\n> SPECIALIZATION: FRONT-END DEVELOPMENT, UI/UX DESIGN\n> EXPERIENCE: 5+ YEARS IN DIGITAL REALM\n\n> BIOGRAPHY LOADING COMPLETE...`; | |
| let i = 0; | |
| const speed = 30; | |
| const typewriter = document.getElementById('typewriter'); | |
| function typeWriter() { | |
| if (i < text.length) { | |
| if (text.charAt(i) === '\n') { | |
| typewriter.innerHTML += '<br>'; | |
| } else { | |
| typewriter.innerHTML += text.charAt(i); | |
| } | |
| i++; | |
| setTimeout(typeWriter, speed); | |
| } | |
| } | |
| // Start typing when about section is in view | |
| const observer = new IntersectionObserver((entries) => { | |
| if (entries[0].isIntersecting) { | |
| typeWriter(); | |
| observer.unobserve(entries[0].target); | |
| } | |
| }, { threshold: 0.5 }); | |
| observer.observe(document.getElementById('about')); | |
| // Skill hover effects | |
| const skillItems = document.querySelectorAll('.skill-item'); | |
| const skillDescription = document.getElementById('skill-description'); | |
| const skillDetails = { | |
| 'Full Stack': 'End-to-end web development with modern frameworks and architectures.', | |
| 'HTML/CSS': 'Semantic HTML5 and modern CSS3 with preprocessors like Sass.', | |
| 'JavaScript': 'ES6+ expertise with frameworks like React, Vue, and Node.js.', | |
| 'React': 'Building interactive UIs with React hooks and context API.', | |
| 'Node.js': 'Server-side JavaScript with Express and MongoDB.', | |
| 'Python': 'Scripting, automation, and data analysis with Python.', | |
| 'UI/UX': 'User-centered design principles and prototyping.', | |
| 'Figma': 'Creating design systems and interactive prototypes.', | |
| 'AI/ML': 'Implementing machine learning models with TensorFlow.' | |
| }; | |
| skillItems.forEach(item => { | |
| item.addEventListener('mouseenter', () => { | |
| const skill = item.getAttribute('data-skill'); | |
| skillDescription.innerHTML = ` | |
| <h3 class="text-xl font-bold mb-2 neon-text-blue">${skill}</h3> | |
| <p class="text-gray-300">${skillDetails[skill]}</p> | |
| `; | |
| skillDescription.classList.add('neon-border-blue'); | |
| skillDescription.classList.remove('neon-border-pink'); | |
| }); | |
| }); | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Add scroll animation for timeline | |
| const timelineItems = document.querySelectorAll('.timeline-item'); | |
| const timelineObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateX(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| timelineItems.forEach((item, index) => { | |
| item.style.opacity = '0'; | |
| item.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| if (index % 2 === 0) { | |
| item.style.transform = 'translateX(-50px)'; | |
| } else { | |
| item.style.transform = 'translateX(50px)'; | |
| } | |
| timelineObserver.observe(item); | |
| }); | |
| // Form submission | |
| const contactForm = document.querySelector('.contact-form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = this.querySelector('#name').value; | |
| const email = this.querySelector('#email').value; | |
| const subject = this.querySelector('#subject').value; | |
| const message = this.querySelector('#message').value; | |
| // Simple validation | |
| if (!name || !email || !message) { | |
| alert('Please fill in all required fields.'); | |
| return; | |
| } | |
| // In a real app, you would send this data to a server | |
| console.log('Form submitted:', { name, email, subject, message }); | |
| // Show success message | |
| alert('Message sent successfully! The cyber samurai will contact you soon.'); | |
| this.reset(); | |
| }); | |
| } | |
| </script> | |
| <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=kritsanan3/krithub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |