|
|
<!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> |
