| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cyberpunk Samurai Portfolio</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"> |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --neon-blue: #0ff0fc; |
| --neon-pink: #ff2ced; |
| --neon-purple: #9600ff; |
| --dark-bg: #0a0a1a; |
| } |
| |
| body { |
| font-family: 'Orbitron', sans-serif; |
| background-color: var(--dark-bg); |
| color: white; |
| overflow-x: hidden; |
| } |
| |
| .neon-text { |
| text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); |
| } |
| |
| .neon-pink-text { |
| text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); |
| } |
| |
| .neon-purple-text { |
| text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); |
| } |
| |
| .neon-border { |
| border: 2px solid var(--neon-blue); |
| box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue); |
| } |
| |
| .neon-pink-border { |
| border: 2px solid var(--neon-pink); |
| box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px 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, 151px, 0); } |
| 20% { clip: rect(33px, 9999px, 149px, 0); } |
| 30% { clip: rect(147px, 9999px, 128px, 0); } |
| 40% { clip: rect(70px, 9999px, 145px, 0); } |
| 50% { clip: rect(120px, 9999px, 140px, 0); } |
| 60% { clip: rect(1px, 9999px, 60px, 0); } |
| 70% { clip: rect(133px, 9999px, 74px, 0); } |
| 80% { clip: rect(22px, 9999px, 91px, 0); } |
| 90% { clip: rect(84px, 9999px, 148px, 0); } |
| 100% { clip: rect(58px, 9999px, 93px, 0); } |
| } |
| |
| .scanlines { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .scanlines::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| to bottom, |
| transparent 0%, |
| rgba(255, 255, 255, 0.05) 50%, |
| transparent 100% |
| ); |
| background-size: 100% 4px; |
| z-index: 10; |
| pointer-events: none; |
| animation: scanline 6s linear infinite; |
| } |
| |
| @keyframes scanline { |
| 0% { transform: translateY(0); } |
| 100% { transform: translateY(100vh); } |
| } |
| |
| .holographic { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .holographic::before { |
| content: ""; |
| position: absolute; |
| top: -50%; |
| left: -50%; |
| width: 200%; |
| height: 200%; |
| background: linear-gradient( |
| 45deg, |
| rgba(255, 0, 255, 0.1) 0%, |
| rgba(0, 255, 255, 0.1) 50%, |
| rgba(255, 0, 255, 0.1) 100% |
| ); |
| transform: rotate(45deg); |
| animation: holographic 8s linear infinite; |
| z-index: -1; |
| } |
| |
| @keyframes holographic { |
| 0% { transform: rotate(45deg) translateX(-50%); } |
| 100% { transform: rotate(45deg) translateX(50%); } |
| } |
| |
| .progress-bar { |
| height: 10px; |
| background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue)); |
| border-radius: 5px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .progress-bar::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient( |
| 90deg, |
| rgba(255, 255, 255, 0.1) 0%, |
| rgba(255, 255, 255, 0.3) 50%, |
| rgba(255, 255, 255, 0.1) 100% |
| ); |
| background-size: 200% 100%; |
| animation: shimmer 2s infinite; |
| border-radius: 5px; |
| } |
| |
| @keyframes shimmer { |
| 0% { background-position: 200% 0; } |
| 100% { background-position: -200% 0; } |
| } |
| |
| .portfolio-item { |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .portfolio-item:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 10px 20px rgba(15, 240, 252, 0.5); |
| } |
| |
| .portfolio-item::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| 135deg, |
| rgba(15, 240, 252, 0.1) 0%, |
| rgba(255, 44, 237, 0.1) 100% |
| ); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| |
| .portfolio-item:hover::before { |
| opacity: 1; |
| } |
| |
| .cursor { |
| position: fixed; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background-color: var(--neon-blue); |
| mix-blend-mode: screen; |
| pointer-events: none; |
| z-index: 9999; |
| transform: translate(-50%, -50%); |
| transition: transform 0.1s ease; |
| } |
| |
| .cursor-follower { |
| position: fixed; |
| width: 40px; |
| height: 40px; |
| border: 2px solid var(--neon-pink); |
| border-radius: 50%; |
| pointer-events: none; |
| z-index: 9998; |
| transform: translate(-50%, -50%); |
| transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease; |
| } |
| |
| .btn-neon { |
| position: relative; |
| overflow: hidden; |
| transition: all 0.3s ease; |
| } |
| |
| .btn-neon::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient( |
| 90deg, |
| transparent, |
| rgba(15, 240, 252, 0.4), |
| transparent |
| ); |
| transition: all 0.6s ease; |
| } |
| |
| .btn-neon:hover::before { |
| left: 100%; |
| } |
| |
| .social-icon { |
| transition: all 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| transform: translateY(-5px) scale(1.2); |
| filter: drop-shadow(0 0 10px var(--neon-blue)); |
| } |
| |
| .back-to-top { |
| position: fixed; |
| bottom: 30px; |
| right: 30px; |
| width: 50px; |
| height: 50px; |
| background: rgba(10, 10, 26, 0.8); |
| border: 2px solid var(--neon-blue); |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| cursor: pointer; |
| opacity: 0; |
| transition: all 0.3s ease; |
| z-index: 99; |
| } |
| |
| .back-to-top.visible { |
| opacity: 1; |
| } |
| |
| .back-to-top:hover { |
| background: var(--neon-blue); |
| box-shadow: 0 0 15px var(--neon-blue); |
| } |
| |
| .back-to-top i { |
| color: var(--neon-blue); |
| font-size: 20px; |
| } |
| |
| .back-to-top:hover i { |
| color: var(--dark-bg); |
| } |
| |
| .flicker { |
| animation: flicker 3s infinite alternate; |
| } |
| |
| @keyframes flicker { |
| 0%, 18%, 22%, 25%, 53%, 57%, 100% { |
| opacity: 1; |
| } |
| 20%, 24%, 55% { |
| opacity: 0.5; |
| } |
| } |
| |
| |
| @media (max-width: 768px) { |
| .hero-content { |
| padding-top: 100px; |
| } |
| |
| .hero-title { |
| font-size: 2.5rem; |
| } |
| |
| .nav-links { |
| display: none; |
| } |
| |
| .mobile-menu-btn { |
| display: block; |
| } |
| } |
| </style> |
| </head> |
| <body class="scanlines"> |
| |
| <div class="cursor"></div> |
| <div class="cursor-follower"></div> |
| |
| |
| <div class="back-to-top" id="backToTop"> |
| <i class="fas fa-arrow-up"></i> |
| </div> |
| |
| |
| <header class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg"> |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| <div class="glitch" data-text="CYBER_SAMURAI"> |
| <h1 class="text-2xl font-bold neon-text">CYBER_SAMURAI</h1> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="text-white hover:text-neon-blue transition duration-300 neon-hover">HOME</a> |
| <a href="#about" class="text-white hover:text-neon-pink transition duration-300 neon-hover">ABOUT</a> |
| <a href="#portfolio" class="text-white hover:text-neon-blue transition duration-300 neon-hover">PORTFOLIO</a> |
| <a href="#blog" class="text-white hover:text-neon-pink transition duration-300 neon-hover">BLOG</a> |
| <a href="#contact" class="text-white hover:text-neon-blue transition duration-300 neon-hover">CONTACT</a> |
| </nav> |
| |
| <button class="md:hidden text-white text-2xl focus:outline-none" id="mobileMenuBtn"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| |
| <div class="md:hidden hidden bg-black bg-opacity-90 w-full py-4" id="mobileMenu"> |
| <div class="container mx-auto px-6 flex flex-col space-y-4"> |
| <a href="#home" class="text-white py-2 hover:text-neon-blue transition duration-300">HOME</a> |
| <a href="#about" class="text-white py-2 hover:text-neon-pink transition duration-300">ABOUT</a> |
| <a href="#portfolio" class="text-white py-2 hover:text-neon-blue transition duration-300">PORTFOLIO</a> |
| <a href="#blog" class="text-white py-2 hover:text-neon-pink transition duration-300">BLOG</a> |
| <a href="#contact" class="text-white py-2 hover:text-neon-blue transition duration-300">CONTACT</a> |
| </div> |
| </div> |
| </header> |
| |
| |
| <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden"> |
| <div class="absolute inset-0 bg-black opacity-50"></div> |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900 to-black opacity-30"></div> |
| |
| |
| <div class="absolute inset-0 opacity-20"> |
| <div class="grid-pattern w-full h-full"></div> |
| </div> |
| |
| <div class="container mx-auto px-6 z-10 hero-content"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h2 class="text-5xl md:text-7xl font-bold mb-6 neon-text glitch" data-text="I AM A CYBERPUNK SAMURAI"> |
| I AM A <span class="neon-pink-text">CYBERPUNK</span> SAMURAI |
| </h2> |
| <p class="text-xl md:text-2xl mb-8 text-gray-300"> |
| Blending ancient warrior code with cutting-edge technology to create digital masterpieces. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#portfolio" class="btn-neon px-8 py-3 bg-transparent border-2 border-neon-blue text-neon-blue font-bold rounded-full hover:bg-neon-blue hover:text-black transition duration-300"> |
| VIEW MY WORK |
| </a> |
| <a href="#contact" class="btn-neon px-8 py-3 bg-neon-pink text-black font-bold rounded-full hover:bg-transparent hover:text-neon-pink hover:border-2 hover:border-neon-pink transition duration-300"> |
| CONTACT ME |
| </a> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 flex justify-center holographic"> |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> |
| <div class="absolute inset-0 bg-gradient-to-br from-neon-blue to-neon-pink rounded-full blur-xl opacity-70 animate-pulse"></div> |
| <img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Cyberpunk Samurai" |
| class="relative w-full h-full object-cover rounded-full border-4 border-neon-blue"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2"> |
| <div class="animate-bounce"> |
| <svg class="w-8 h-8 text-neon-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> |
| </svg> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="about" class="py-20 bg-black bg-opacity-70"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-4xl font-bold mb-16 text-center neon-text"> |
| <span class="neon-pink-text">ABOUT</span> ME |
| </h2> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/3 mb-10 md:mb-0 flex justify-center"> |
| <div class="relative w-64 h-64"> |
| <div class="absolute inset-0 bg-gradient-to-br from-neon-blue to-neon-pink rounded-lg blur-xl opacity-70 animate-pulse"></div> |
| <img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Profile" |
| class="relative w-full h-full object-cover rounded-lg border-4 border-neon-blue"> |
| </div> |
| </div> |
| |
| <div class="md:w-2/3 md:pl-12"> |
| <h3 class="text-2xl font-bold mb-6 neon-purple-text">THE CYBER WARRIOR CODE</h3> |
| <p class="text-gray-300 mb-8 leading-relaxed"> |
| I am a digital samurai, merging the ancient Bushido code with modern technology to create innovative solutions. |
| With over a decade of experience in the digital realm, I've mastered the art of coding, design, and artificial intelligence. |
| My journey began in the neon-lit streets of Tokyo, where I first discovered my passion for blending tradition with innovation. |
| </p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h4 class="text-xl font-bold mb-4 neon-text">SKILLS</h4> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-300">Web Development</span> |
| <span class="text-neon-blue">95%</span> |
| </div> |
| <div class="w-full h-2 bg-gray-800 rounded-full"> |
| <div class="progress-bar h-2 rounded-full" style="width: 95%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-300">AI Engineering</span> |
| <span class="text-neon-pink">90%</span> |
| </div> |
| <div class="w-full h-2 bg-gray-800 rounded-full"> |
| <div class="progress-bar h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-gray-300">Digital Art</span> |
| <span class="text-neon-blue">85%</span> |
| </div> |
| <div class="w-full h-2 bg-gray-800 rounded-full"> |
| <div class="progress-bar h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-xl font-bold mb-4 neon-text">TECHNOLOGIES</h4> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-gray-900 text-neon-blue rounded-full text-sm">JavaScript</span> |
| <span class="px-3 py-1 bg-gray-900 text-neon-pink rounded-full text-sm">React</span> |
| <span class="px-3 py-1 bg-gray-900 text-neon-blue rounded-full text-sm">Node.js</span> |
| <span class="px-3 py-1 bg-gray-900 text-neon-pink rounded-full text-sm">Python</span> |
| <span class="px-3 py-1 bg-gray-900 text-neon-blue rounded-full text-sm">TensorFlow</span> |
| <span class="px-3 py-1 bg-gray-900 text-neon-pink rounded-full text-sm">Three.js</span> |
| <span class="px-3 py-1 bg-gray-900 text-neon-blue rounded-full text-sm">GSAP</span> |
| <span class="px-3 py-1 bg-gray-900 text-neon-pink rounded-full text-sm">Blender</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="portfolio" class="py-20 bg-black bg-opacity-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-4xl font-bold mb-16 text-center neon-text"> |
| MY <span class="neon-pink-text">PORTFOLIO</span> |
| </h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="portfolio-item bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" |
| alt="Neon City Website" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-2xl font-bold mb-2 neon-text">Neon City Website</h3> |
| <p class="text-gray-300 mb-4">A fully interactive cyberpunk-themed website with parallax effects and neon animations.</p> |
| <div class="flex space-x-3"> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300"> |
| <i class="fab fa-github"></i> Code |
| </a> |
| <a href="#" class="text-neon-pink hover:text-neon-blue transition duration-300"> |
| <i class="fas fa-external-link-alt"></i> Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="AI Samurai Assistant" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-2xl font-bold mb-2 neon-text">AI Samurai Assistant</h3> |
| <p class="text-gray-300 mb-4">An artificial intelligence trained on ancient samurai texts with modern NLP techniques.</p> |
| <div class="flex space-x-3"> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300"> |
| <i class="fab fa-github"></i> Code |
| </a> |
| <a href="#" class="text-neon-pink hover:text-neon-blue transition duration-300"> |
| <i class="fas fa-external-link-alt"></i> Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" |
| alt="Cyber Dojo VR" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-2xl font-bold mb-2 neon-text">Cyber Dojo VR</h3> |
| <p class="text-gray-300 mb-4">Virtual reality training environment combining martial arts with cybernetic enhancements.</p> |
| <div class="flex space-x-3"> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300"> |
| <i class="fab fa-github"></i> Code |
| </a> |
| <a href="#" class="text-neon-pink hover:text-neon-blue transition duration-300"> |
| <i class="fas fa-external-link-alt"></i> Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Neon Katana Generator" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-2xl font-bold mb-2 neon-text">Neon Katana Generator</h3> |
| <p class="text-gray-300 mb-4">Procedurally generated 3D katana models with customizable neon effects.</p> |
| <div class="flex space-x-3"> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300"> |
| <i class="fab fa-github"></i> Code |
| </a> |
| <a href="#" class="text-neon-pink hover:text-neon-blue transition duration-300"> |
| <i class="fas fa-external-link-alt"></i> Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1648737963059-0f8c86d6b2f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Cyberpunk Dashboard" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-2xl font-bold mb-2 neon-text">Cyberpunk Dashboard</h3> |
| <p class="text-gray-300 mb-4">Data visualization platform with real-time analytics and holographic displays.</p> |
| <div class="flex space-x-3"> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300"> |
| <i class="fab fa-github"></i> Code |
| </a> |
| <a href="#" class="text-neon-pink hover:text-neon-blue transition duration-300"> |
| <i class="fas fa-external-link-alt"></i> Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="portfolio-item bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" |
| alt="Samurai NFT Collection" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-2xl font-bold mb-2 neon-text">Samurai NFT Collection</h3> |
| <p class="text-gray-300 mb-4">Generative art collection featuring cyber-enhanced samurai warriors.</p> |
| <div class="flex space-x-3"> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300"> |
| <i class="fab fa-github"></i> Code |
| </a> |
| <a href="#" class="text-neon-pink hover:text-neon-blue transition duration-300"> |
| <i class="fas fa-external-link-alt"></i> Live Demo |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="blog" class="py-20 bg-black bg-opacity-70"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-4xl font-bold mb-16 text-center neon-text"> |
| MY <span class="neon-pink-text">BLOG</span> |
| </h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" |
| alt="The Way of the Cyber Samurai" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <span class="text-sm text-neon-blue">May 15, 2023</span> |
| <span class="mx-2 text-gray-500">•</span> |
| <span class="text-sm text-neon-pink">5 min read</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 neon-text">The Way of the Cyber Samurai</h3> |
| <p class="text-gray-300 mb-4">Exploring how ancient samurai principles can be applied to modern coding practices and digital ethics.</p> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300 font-bold"> |
| Read More <i class="fas fa-arrow-right ml-1"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="Creating Neon UI Effects" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <span class="text-sm text-neon-blue">April 28, 2023</span> |
| <span class="mx-2 text-gray-500">•</span> |
| <span class="text-sm text-neon-pink">8 min read</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 neon-text">Creating Neon UI Effects with CSS</h3> |
| <p class="text-gray-300 mb-4">A technical deep dive into creating stunning cyberpunk-style user interfaces with modern CSS techniques.</p> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300 font-bold"> |
| Read More <i class="fas fa-arrow-right ml-1"></i> |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg overflow-hidden neon-border hover:neon-pink-border transition duration-500"> |
| <div class="relative h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1648737963059-0f8c86d6b2f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
| alt="AI and Bushido" |
| class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <span class="text-sm text-neon-blue">March 12, 2023</span> |
| <span class="mx-2 text-gray-500">•</span> |
| <span class="text-sm text-neon-pink">6 min read</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 neon-text">AI and Bushido: Ethical Frameworks for Machine Learning</h3> |
| <p class="text-gray-300 mb-4">How the seven virtues of Bushido can guide ethical AI development in the modern era.</p> |
| <a href="#" class="text-neon-blue hover:text-neon-pink transition duration-300 font-bold"> |
| Read More <i class="fas fa-arrow-right ml-1"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="btn-neon px-8 py-3 bg-transparent border-2 border-neon-blue text-neon-blue font-bold rounded-full hover:bg-neon-blue hover:text-black transition duration-300 inline-block"> |
| VIEW ALL ARTICLES |
| </a> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="contact" class="py-20 bg-black bg-opacity-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-4xl font-bold mb-16 text-center neon-text"> |
| <span class="neon-pink-text">CONTACT</span> ME |
| </h2> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| <div class="lg:w-1/2"> |
| <form class="space-y-6"> |
| <div> |
| <label for="name" class="block text-gray-300 mb-2 neon-text">YOUR NAME</label> |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-900 bg-opacity-70 border border-gray-700 focus:border-neon-blue focus:outline-none rounded-lg text-white transition duration-300" placeholder="Enter your name"> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-gray-300 mb-2 neon-text">YOUR EMAIL</label> |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-900 bg-opacity-70 border border-gray-700 focus:border-neon-pink focus:outline-none rounded-lg text-white transition duration-300" placeholder="Enter your email"> |
| </div> |
| |
| <div> |
| <label for="subject" class="block text-gray-300 mb-2 neon-text">SUBJECT</label> |
| <input type="text" id="subject" class="w-full px-4 py-3 bg-gray-900 bg-opacity-70 border border-gray-700 focus:border-neon-blue focus:outline-none rounded-lg text-white transition duration-300" placeholder="What's this about?"> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-gray-300 mb-2 neon-text">YOUR MESSAGE</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-900 bg-opacity-70 border border-gray-700 focus:border-neon-pink focus:outline-none rounded-lg text-white transition duration-300" placeholder="Your message here..."></textarea> |
| </div> |
| |
| <button type="submit" class="btn-neon w-full px-6 py-3 bg-neon-pink text-black font-bold rounded-lg hover:bg-transparent hover:text-neon-pink hover:border-2 hover:border-neon-pink transition duration-300"> |
| SEND MESSAGE |
| </button> |
| </form> |
| </div> |
| |
| <div class="lg:w-1/2"> |
| <div class="h-full flex flex-col justify-between"> |
| <div class="mb-8"> |
| <h3 class="text-2xl font-bold mb-4 neon-purple-text">GET IN TOUCH</h3> |
| <p class="text-gray-300 mb-6"> |
| Whether you have a project in mind, want to collaborate, or just want to talk about cyberpunk and samurai culture, feel free to reach out. |
| </p> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="text-neon-blue text-xl mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold text-gray-200 mb-1">LOCATION</h4> |
| <p class="text-gray-400">Neon District, Cyber City 2077</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-neon-pink text-xl mr-4 mt-1"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold text-gray-200 mb-1">EMAIL</h4> |
| <p class="text-gray-400">samurai@cyber.digital</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="text-neon-blue text-xl mr-4 mt-1"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold text-gray-200 mb-1">PHONE</h4> |
| <p class="text-gray-400">+1 (555) CYB-ER77</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-2xl font-bold mb-4 neon-purple-text">FOLLOW ME</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="social-icon text-2xl text-neon-blue hover:text-neon-pink"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="social-icon text-2xl text-neon-pink hover:text-neon-blue"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="social-icon text-2xl text-neon-blue hover:text-neon-pink"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="social-icon text-2xl text-neon-pink hover:text-neon-blue"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="social-icon text-2xl text-neon-blue hover:text-neon-pink"> |
| <i class="fab fa-codepen"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <div class="bg-gray-900 bg-opacity-70 p-4 rounded-lg inline-block neon-border"> |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://cyber-samurai-portfolio.com" |
| alt="QR Code" |
| class="w-32 h-32"> |
| <p class="text-xs text-center mt-2 text-gray-300">Scan to connect</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="py-8 bg-black bg-opacity-90"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <p class="text-gray-400 flicker"> |
| © 2023 CYBER_SAMURAI. ALL RIGHTS RESERVED. |
| </p> |
| </div> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-neon-blue transition duration-300">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-neon-pink transition duration-300">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-neon-blue transition duration-300">Sitemap</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| <script> |
| |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| |
| |
| const backToTopBtn = document.getElementById('backToTop'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopBtn.classList.add('visible'); |
| } else { |
| backToTopBtn.classList.remove('visible'); |
| } |
| }); |
| |
| backToTopBtn.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const cursor = document.querySelector('.cursor'); |
| const cursorFollower = document.querySelector('.cursor-follower'); |
| |
| document.addEventListener('mousemove', (e) => { |
| cursor.style.left = e.clientX + 'px'; |
| cursor.style.top = e.clientY + 'px'; |
| |
| setTimeout(() => { |
| cursorFollower.style.left = e.clientX + 'px'; |
| cursorFollower.style.top = e.clientY + 'px'; |
| }, 100); |
| }); |
| |
| |
| const interactiveElements = document.querySelectorAll('a, button, input, textarea, .portfolio-item, .social-icon'); |
| |
| interactiveElements.forEach(el => { |
| el.addEventListener('mouseenter', () => { |
| cursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; |
| cursor.style.backgroundColor = 'var(--neon-pink)'; |
| cursorFollower.style.width = '30px'; |
| cursorFollower.style.height = '30px'; |
| cursorFollower.style.borderColor = 'var(--neon-blue)'; |
| }); |
| |
| el.addEventListener('mouseleave', () => { |
| cursor.style.transform = 'translate(-50%, -50%) scale(1)'; |
| cursor.style.backgroundColor = 'var(--neon-blue)'; |
| cursorFollower.style.width = '40px'; |
| cursorFollower.style.height = '40px'; |
| cursorFollower.style.borderColor = 'var(--neon-pink)'; |
| }); |
| }); |
| |
| |
| const heroTitle = document.querySelector('.hero-title'); |
| |
| if (heroTitle) { |
| setInterval(() => { |
| heroTitle.classList.toggle('glitch-effect'); |
| }, 3000); |
| } |
| |
| |
| const typewriter = (element, text, speed) => { |
| let i = 0; |
| const typing = setInterval(() => { |
| if (i < text.length) { |
| element.textContent += text.charAt(i); |
| i++; |
| } else { |
| clearInterval(typing); |
| } |
| }, speed); |
| }; |
| |
| |
| const blogTitles = document.querySelectorAll('.blog-title'); |
| blogTitles.forEach(title => { |
| const text = title.textContent; |
| title.textContent = ''; |
| typewriter(title, text, 100); |
| }); |
| </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=kritsanan/deepcake" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
