Hugging Face's logo

Spaces:
kritsanan
/
deepcake
Running

App Files Community
deepcake / index.html
kritsanan's picture
kritsanan
Add 1 files
4114c70 verified
raw
history blame contribute delete
49 kB
 <!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;
}
}
/* Responsive adjustments */
@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">
<!-- Custom Cursor -->
<div class="cursor"></div>
<div class="cursor-follower"></div>
<!-- Back to Top Button -->
<div class="back-to-top" id="backToTop">
<i class="fas fa-arrow-up"></i>
</div>
<!-- Header & Navigation -->
<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>
<!-- Mobile Menu -->
<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>
<!-- Hero Section -->
<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>
<!-- Animated grid background -->
<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>
<!-- Scrolling indicator -->
<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>
<!-- About 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>
<!-- Portfolio 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">
<!-- Project 1 -->
<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>
<!-- Project 2 -->
<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>
<!-- Project 3 -->
<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>
<!-- Project 4 -->
<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>
<!-- Project 5 -->
<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>
<!-- Project 6 -->
<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>
<!-- Blog 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">
<!-- Blog Post 1 -->
<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>
<!-- Blog Post 2 -->
<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>
<!-- Blog Post 3 -->
<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>
<!-- Contact 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 -->
<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">
&copy; 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>
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for navigation links
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'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// Back to top button
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'
});
});
// Custom cursor
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);
});
// Change cursor style on hover
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)';
});
});
// Glitch effect on hero title
const heroTitle = document.querySelector('.hero-title');
if (heroTitle) {
setInterval(() => {
heroTitle.classList.toggle('glitch-effect');
}, 3000);
}
// Typewriter effect for blog titles
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);
};
// Initialize typewriter effect on blog titles
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>