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