File manager - Edit - /home/webapp69.cm.in.th/u69319090034/034 - portfolio/index.html
Back
<!DOCTYPE html> <html lang="th" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Natthawat Mathanasarawut | Cyberpunk Portfolio</title> <!-- Google Fonts: Inter & Prompt (สำหรับดีไซน์ล้ำสมัยสไตล์ Cyberpunk ทั้งภาษาไทยและอังกฤษ) --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Prompt:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Tailwind CSS via CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Lucide Icons --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Tailwind Configuration for Cyber Theme --> <script> tailwind.config = { theme: { extend: { colors: { cyberBg: '#030712', cyberCard: '#0F172A', neonBlue: '#3B82F6', neonPurple: '#8B5CF6', neonGreen: '#10B981', neonPink: '#EC4899', textPrimary: '#F8FAFC', textSecondary: '#94A3B8', }, fontFamily: { sans: ['Inter', 'Prompt', 'sans-serif'], } } } } </script> <style> /* Custom Styling for World-Class Cyberpunk Aesthetics */ body { background-color: #030712; color: #F8FAFC; font-family: 'Inter', 'Prompt', sans-serif; overflow-x: hidden; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #030712; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3B82F6, #8B5CF6); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #10B981; } /* Cyber Grid Background Effect */ .cyber-grid { background-size: 50px 50px; background-image: linear-gradient(to right, rgba(59, 130, 246, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(59, 130, 246, 0.03) 1px, transparent 1px); } /* Ambient Glowing Orbs */ .glow-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15; pointer-events: none; mix-blend-mode: screen; animation: float-glow 20s infinite alternate ease-in-out; } @keyframes float-glow { 0% { transform: translate(0px, 0px) scale(1); } 50% { transform: translate(40px, -60px) scale(1.2); } 100% { transform: translate(-30px, 30px) scale(0.9); } } /* Glassmorphism Classes */ .glass-panel { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(148, 163, 184, 0.08); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } /* Interactive Dynamic Glow on Hover */ .glow-hover { position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .glow-hover::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(to bottom right, #3B82F6, #8B5CF6); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .glow-hover:hover::before { opacity: 1; } /* Project Card Glow */ .project-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .project-card:hover { transform: translateY(-8px); border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.25); } /* Active Timeline Animation */ .timeline-line { background: linear-gradient(to bottom, #3B82F6, #8B5CF6, #EC4899); height: 0%; transition: height 1.8s cubic-bezier(0.22, 1, 0.36, 1); } /* Sound Indicator Animation */ .bar { width: 3px; height: 4px; background-color: #10B981; animation: bounce 0.8s ease-in-out infinite alternate; } .bar:nth-child(2) { animation-delay: 0.15s; } .bar:nth-child(3) { animation-delay: 0.3s; } .bar:nth-child(4) { animation-delay: 0.45s; } @keyframes bounce { 10% { height: 4px; } 100% { height: 18px; } } /* Glitch text effect on Hero */ .glitch-text { position: relative; text-shadow: 0px 0px 8px rgba(59, 130, 246, 0.6); } /* Custom glow buttons */ .neon-btn { background: linear-gradient(90deg, #3B82F6, #8B5CF6); box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); transition: all 0.3s ease; } .neon-btn:hover { box-shadow: 0 0 25px rgba(139, 92, 246, 0.7); transform: translateY(-1.5px); } </style> </head> <body class="min-h-screen selection:bg-neonPurple/30 selection:text-white cyber-grid relative overflow-x-hidden"> <!-- Ambient glows --> <div class="glow-orb w-[450px] h-[450px] bg-neonBlue/10 top-[10%] left-[-10%]"></div> <div class="glow-orb w-[500px] h-[500px] bg-neonPurple/10 top-[40%] right-[-10%]"></div> <div class="glow-orb w-[400px] h-[400px] bg-neonPink/5 bottom-[10%] left-[20%]"></div> <!-- Background Canvas for futuristic particles --> <canvas id="particles-canvas" class="absolute inset-0 pointer-events-none z-0"></canvas> <!-- Header / Navigation --> <header class="fixed top-0 left-0 right-0 z-50 glass-panel border-b border-slate-800/60"> <nav class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"> <a href="#" class="text-xl font-extrabold tracking-wider flex items-center gap-2 group text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonPurple" onclick="playSystemBeep('success')"> <span class="w-3 h-3 rounded-full bg-gradient-to-r from-neonBlue to-neonPurple animate-pulse shadow-[0_0_10px_#3B82F6]"></span> NATTHAWAT.M </a> <!-- Desktop Nav Links --> <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-textSecondary"> <a href="#about" class="hover:text-neonBlue transition-colors duration-200" onclick="playSystemBeep('click')">เกี่ยวกับฉัน</a> <a href="#education" class="hover:text-neonPurple transition-colors duration-200" onclick="playSystemBeep('click')">ประวัติการศึกษา</a> <a href="#skills" class="hover:text-neonGreen transition-colors duration-200" onclick="playSystemBeep('click')">ทักษะความสามารถ</a> <a href="#projects" class="hover:text-neonPink transition-colors duration-200" onclick="playSystemBeep('click')">ผลงาน</a> <a href="#contact" class="hover:text-neonBlue transition-colors duration-200" onclick="playSystemBeep('click')">ติดต่อ</a> </div> <!-- Sound Controller & Action Buttons --> <div class="flex items-center gap-4"> <!-- Synthesizer Sound Button --> <button id="sound-toggle-btn" class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-slate-800 bg-slate-950/80 hover:bg-slate-900 transition-colors text-xs font-semibold text-neonGreen hover:border-neonGreen/45" title="เปิด/ปิด เสียงเอฟเฟกต์สังเคราะห์"> <span class="flex items-center gap-0.5 h-4 w-5 justify-center" id="sound-bars"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </span> <span id="sound-text">SOUND ON</span> </button> <!-- CTA Glowing Button --> <a href="#contact" class="hidden md:inline-flex items-center justify-center px-5 py-2 text-sm font-bold text-white neon-btn rounded-xl transition-all" onclick="playSystemBeep('success')"> ติดต่องาน </a> <!-- Mobile Menu Toggle --> <button id="menu-btn" class="md:hidden text-slate-300 focus:outline-none" aria-label="Toggle Menu" onclick="playSystemBeep('click')"> <i data-lucide="menu" class="w-6 h-6"></i> </button> </div> </nav> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden bg-slate-950/95 border-t border-slate-800/80 px-6 py-6 space-y-4 shadow-2xl absolute w-full left-0 backdrop-blur-2xl"> <a href="#about" class="block text-slate-300 font-medium py-1 hover:text-neonBlue" onclick="playSystemBeep('click')">เกี่ยวกับฉัน</a> <a href="#education" class="block text-slate-300 font-medium py-1 hover:text-neonPurple" onclick="playSystemBeep('click')">ประวัติการศึกษา</a> <a href="#skills" class="block text-slate-300 font-medium py-1 hover:text-neonGreen" onclick="playSystemBeep('click')">ทักษะความสามารถ</a> <a href="#projects" class="block text-slate-300 font-medium py-1 hover:text-neonPink" onclick="playSystemBeep('click')">ผลงาน</a> <a href="#contact" class="block text-slate-300 font-medium py-1 hover:text-neonBlue" onclick="playSystemBeep('click')">ติดต่อ</a> <a href="#contact" class="w-full text-center block py-3 text-sm font-bold text-white neon-btn rounded-xl" onclick="playSystemBeep('success')">ติดต่องาน</a> </div> </header> <!-- Hero Section --> <section class="pt-36 pb-24 md:pt-48 md:pb-36 px-6 flex flex-col items-center justify-center text-center relative overflow-hidden z-10"> <!-- Tech styled grid center lines --> <div class="absolute top-24 w-full h-[1px] bg-gradient-to-r from-transparent via-neonBlue/20 to-transparent"></div> <div class="max-w-4xl mx-auto space-y-8"> <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-semibold bg-neonBlue/10 text-neonBlue border border-neonBlue/30 animate-pulse"> <span class="w-2.5 h-2.5 rounded-full bg-neonBlue shadow-[0_0_8px_#3B82F6]"></span> CYBERNETIC SYSTEM // ONLINE 2026 </span> <h1 class="text-4xl md:text-7xl font-extrabold tracking-tight text-white leading-tight glitch-text"> สวัสดีครับ ผม <br class="block md:hidden" /> <span class="text-transparent bg-clip-text bg-gradient-to-r from-neonBlue via-neonPurple to-neonPink"> นายนัทธ์วัฒน์ มาธนะสารวุฒิ </span> </h1> <p class="text-lg md:text-2xl text-textSecondary leading-relaxed max-w-3xl mx-auto"> ผู้พัฒนาเทคโนโลยียุคใหม่จาก <span class="font-semibold text-transparent bg-clip-text bg-gradient-to-r from-neonGreen to-emerald-400 border-b border-neonGreen/45 pb-0.5 shadow-sm">วิทยาลัยเทคนิคเชียงใหม่</span> <br />มุ่งเน้นการแก้ปัญหาด้วยโปรแกรมมิ่งและการดีไซน์ที่ล้ำสมัย </p> <div class="text-sm font-mono text-neonPurple/90 tracking-widest uppercase"> <span id="typed-text">// Initializing...</span><span class="animate-ping">|</span> </div> <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-6"> <!-- Pulse Glow Action Button --> <a href="#projects" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-bold text-white neon-btn rounded-xl transition-all hover:scale-105 active:scale-95 animate-bounce-subtle" onclick="playSystemBeep('success')"> สำรวจผลงานไซไฟ <i data-lucide="terminal" class="w-5 h-5"></i> </a> <a href="#about" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white glass-panel border border-slate-700/60 rounded-xl hover:bg-slate-900/60 transition-all hover:border-neonBlue/40" onclick="playSystemBeep('click')"> เริ่มต้นทำความรู้จัก </a> </div> </div> </section> <!-- About Me Section --> <section id="about" class="py-24 relative z-10 border-t border-slate-900"> <div class="max-w-6xl mx-auto px-6"> <div class="grid md:grid-cols-12 gap-12 items-center"> <!-- Profile Image container with High-Tech Glow --> <div class="md:col-span-5 flex justify-center"> <div class="relative w-72 h-80 group"> <!-- Neon border glow effect --> <div class="absolute inset-0 bg-gradient-to-tr from-neonBlue to-neonPurple rounded-3xl opacity-30 group-hover:opacity-75 blur-xl transition-opacity duration-300"></div> <div class="absolute inset-0 bg-gradient-to-tr from-neonBlue to-neonPurple rounded-3xl rotate-3 group-hover:rotate-6 transition-transform duration-300"></div> <!-- Main Image frame --> <div class="absolute inset-1.5 bg-slate-950 rounded-3xl overflow-hidden border border-slate-800/80 flex items-center justify-center"> <!-- [!] USER NOTE: หากมีรูปภาพใหม่ สามารถนำมาเปลี่ยนแทนไฟล์ profile.png นี้ได้โดยตรง --> <img src="profile.png" alt="นายนัทธ์วัฒน์ มาธนะสารวุฒิ" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent"></div> <!-- Scanner line effect --> <div class="absolute top-0 left-0 w-full h-[2px] bg-neonBlue opacity-50 shadow-[0_0_8px_#3B82F6] animate-scan-line"></div> </div> </div> </div> <!-- Bio Content --> <div class="md:col-span-7 space-y-6"> <div class="space-y-2"> <span class="text-xs font-bold text-neonBlue uppercase tracking-widest flex items-center gap-2"> <span class="w-2 h-2 rounded-full bg-neonBlue shadow-[0_0_8px_#3B82F6]"></span> SYSTEM BIO // USER_INFO </span> <h2 class="text-3xl font-extrabold text-white">เกี่ยวกับตัวตนของฉัน</h2> </div> <!-- Glass Bio Card --> <div class="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4"> <p class="text-textSecondary leading-relaxed"> ผมเป็นผู้พัฒนาที่หลงใหลในโลกของวิทยาศาสตร์คอมพิวเตอร์และการพัฒนาเว็บระบบสมัยใหม่ (<strong class="text-white">Web Application</strong>) มีเป้าหมายสูงสุดในการยกระดับประสบการณ์ผู้ใช้งานผ่านการออกแบบที่มีเสน่ห์ เรียบง่าย และล้ำสมัย </p> <p class="text-textSecondary leading-relaxed"> ด้วยการเรียนรู้ที่รวดเร็วและการศึกษาในสถาบันที่เป็นผู้นำอย่าง <strong class="text-neonBlue">วิทยาลัยเทคนิคเชียงใหม่</strong> ทำให้ผมสามารถผสมผสานทักษะในการเขียนโปรแกรมและเครื่องมือ Productivity ต่างๆ เพื่อสร้างสรรค์ผลงานที่เป็นระบบระเบียบและมีความสอดคล้องอย่างสมบูรณ์แบบ </p> </div> <div class="pt-4 grid grid-cols-2 gap-4"> <div class="p-4 rounded-xl glass-panel border border-slate-800/80 hover:border-neonBlue/30 transition-colors"> <span class="block text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neonBlue to-neonPurple">2026</span> <span class="text-[11px] text-textSecondary uppercase tracking-widest">Current Active Year</span> </div> <div class="p-4 rounded-xl glass-panel border border-slate-800/80 hover:border-neonGreen/30 transition-colors"> <span class="block text-2xl font-bold text-neonGreen">ONLINE</span> <span class="text-[11px] text-textSecondary uppercase tracking-widest">Development Ready</span> </div> </div> </div> </div> </div> </section> <!-- Education Timeline Section --> <section id="education" class="py-24 relative z-10 bg-slate-950/20"> <div class="max-w-4xl mx-auto px-6"> <div class="text-center space-y-2 mb-20"> <span class="text-xs font-bold text-neonPurple uppercase tracking-widest flex items-center justify-center gap-2"> <span class="w-2 h-2 rounded-full bg-neonPurple shadow-[0_0_8px_#8B5CF6]"></span> TIMELINE ARCHIVE </span> <h2 class="text-3xl font-extrabold text-white">ประวัติการศึกษา</h2> <p class="text-textSecondary">เส้นทางประวัติการเรียนรู้ตั้งแต่อดีตจนถึงระดับปัจจุบัน</p> </div> <!-- Timeline --> <div class="relative ml-4 md:ml-32"> <!-- Neon Glowing vertical line --> <div class="absolute left-0 top-0 w-[3px] h-full bg-slate-800/80 rounded"> <div id="timeline-indicator" class="timeline-line w-full rounded"></div> </div> <div class="space-y-12"> <!-- Education Item 1 --> <div class="relative pl-8 md:pl-12 timeline-item"> <!-- Neon Glowing dot --> <div class="absolute -left-[6.5px] top-7 w-4 h-4 rounded-full bg-slate-900 border-2 border-slate-700 transition-all duration-500 timeline-dot"></div> <!-- Year Badge (Desktop) --> <div class="hidden md:block absolute -left-36 top-[22px] w-24 text-right text-sm font-mono font-bold text-textSecondary">2010 - 2012</div> <div class="glass-panel p-6 rounded-2xl border border-slate-800/60 hover:border-neonBlue/30 transition-all glow-hover" onclick="playSystemBeep('click')"> <span class="inline-block md:hidden text-xs font-mono font-bold text-neonBlue mb-1">2010 - 2012</span> <h3 class="text-lg font-bold text-white">ระดับประถมศึกษาตอนต้น</h3> <p class="text-neonBlue text-sm mt-1">โรงเรียนสันติศึกษา</p> </div> </div> <!-- Education Item 2 --> <div class="relative pl-8 md:pl-12 timeline-item"> <div class="absolute -left-[6.5px] top-7 w-4 h-4 rounded-full bg-slate-900 border-2 border-slate-700 transition-all duration-500 timeline-dot"></div> <div class="hidden md:block absolute -left-36 top-[22px] w-24 text-right text-sm font-mono font-bold text-textSecondary">2013 - 2015</div> <div class="glass-panel p-6 rounded-2xl border border-slate-800/60 hover:border-neonBlue/30 transition-all glow-hover" onclick="playSystemBeep('click')"> <span class="inline-block md:hidden text-xs font-mono font-bold text-neonBlue mb-1">2013 - 2015</span> <h3 class="text-lg font-bold text-white">ระดับประถมศึกษาตอนปลาย</h3> <p class="text-neonBlue text-sm mt-1">โรงเรียนพิมานเด็กเชียงใหม่</p> </div> </div> <!-- Education Item 3 --> <div class="relative pl-8 md:pl-12 timeline-item"> <div class="absolute -left-[6.5px] top-7 w-4 h-4 rounded-full bg-slate-900 border-2 border-slate-700 transition-all duration-500 timeline-dot"></div> <div class="hidden md:block absolute -left-36 top-[22px] w-24 text-right text-sm font-mono font-bold text-textSecondary">2016 - 2020</div> <div class="glass-panel p-6 rounded-2xl border border-slate-800/60 hover:border-neonBlue/30 transition-all glow-hover" onclick="playSystemBeep('click')"> <span class="inline-block md:hidden text-xs font-mono font-bold text-neonBlue mb-1">2016 - 2020</span> <h3 class="text-lg font-bold text-white">ระดับมัธยมศึกษาตอนต้นและตอนปลาย</h3> <p class="text-neonBlue text-sm mt-1">กศน.อำเภอสารภี</p> </div> </div> <!-- Education Item 4 (Current) --> <div class="relative pl-8 md:pl-12 timeline-item"> <!-- Highly Glowing Active Dot --> <div class="absolute -left-[8.5px] top-6.5 w-5 h-5 rounded-full bg-slate-950 border-2 border-neonPurple shadow-[0_0_12px_#8B5CF6] animate-pulse transition-all duration-500 timeline-dot"></div> <div class="hidden md:block absolute -left-36 top-[22px] w-24 text-right text-sm font-mono font-extrabold text-neonPurple">ปัจจุบัน (2026)</div> <div class="glass-panel p-6 rounded-2xl border-2 border-neonPurple/40 shadow-[0_0_20px_rgba(139,92,246,0.15)] relative overflow-hidden glow-hover" onclick="playSystemBeep('success')"> <div class="absolute top-0 right-0 bg-neonPurple text-white text-[9px] font-extrabold uppercase tracking-widest px-3 py-1 rounded-bl-lg"> CURRENT_EDUCATION </div> <span class="inline-block md:hidden text-xs font-mono font-bold text-neonPurple mb-1">ปัจจุบัน (2026)</span> <h3 class="text-lg font-bold text-white">ระดับประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.)</h3> <p class="text-neonGreen font-semibold text-sm mt-1">วิทยาลัยเทคนิคเชียงใหม่</p> </div> </div> </div> </div> </div> </section> <!-- Skills Showcase Section --> <section id="skills" class="py-24 relative z-10 border-t border-slate-900/60"> <div class="max-w-6xl mx-auto px-6"> <div class="text-center space-y-2 mb-20"> <span class="text-xs font-bold text-neonGreen uppercase tracking-widest flex items-center justify-center gap-2"> <span class="w-2 h-2 rounded-full bg-neonGreen shadow-[0_0_8px_#10B981]"></span> EXPERTISE STACK </span> <h2 class="text-3xl font-extrabold text-white">ทักษะและความเชี่ยวชาญ</h2> <p class="text-textSecondary">ความเชี่ยวชาญระดับปฏิบัติการที่พร้อมสำหรับการใช้งาน</p> </div> <!-- Glass Card Grid with interactive neon borders --> <div class="grid md:grid-cols-3 gap-8"> <!-- Skill Card 1: Web Development --> <div class="glass-panel p-8 rounded-3xl border border-slate-800/80 hover:border-neonBlue/40 hover:shadow-[0_0_25px_rgba(59,130,246,0.15)] transition-all duration-300 flex flex-col justify-between group" onclick="playSystemBeep('click')"> <div> <!-- Neo reflection icon --> <div class="w-14 h-14 rounded-2xl bg-neonBlue/10 flex items-center justify-center text-neonBlue mb-6 border border-neonBlue/20 shadow-[0_0_15px_rgba(59,130,246,0.1)] group-hover:scale-110 transition-transform"> <i data-lucide="code-2" class="w-7 h-7"></i> </div> <h3 class="text-xl font-bold text-white mb-4">Web Development</h3> <p class="text-textSecondary text-sm leading-relaxed mb-8"> การสร้างเว็บไซต์เบื้องต้นและพัฒนาเว็บแอปพลิเคชันยุคใหม่ผ่านโครงสร้างและสไตล์มาตรฐานสากล </p> </div> <div class="flex flex-wrap gap-2 pt-4 border-t border-slate-900"> <span class="px-3 py-1.5 text-xs font-mono font-semibold bg-slate-950/80 border border-slate-800 rounded-lg text-neonBlue">HTML</span> <span class="px-3 py-1.5 text-xs font-mono font-semibold bg-slate-950/80 border border-slate-800 rounded-lg text-neonBlue">CSS</span> <span class="px-3 py-1.5 text-xs font-mono font-semibold bg-slate-950/80 border border-slate-800 rounded-lg text-neonBlue">JavaScript</span> </div> </div> <!-- Skill Card 2: Programming Language --> <div class="glass-panel p-8 rounded-3xl border border-slate-800/80 hover:border-neonPurple/40 hover:shadow-[0_0_25px_rgba(139,92,246,0.15)] transition-all duration-300 flex flex-col justify-between group" onclick="playSystemBeep('click')"> <div> <div class="w-14 h-14 rounded-2xl bg-neonPurple/10 flex items-center justify-center text-neonPurple mb-6 border border-neonPurple/20 shadow-[0_0_15px_rgba(139,92,246,0.1)] group-hover:scale-110 transition-transform"> <i data-lucide="terminal" class="w-7 h-7"></i> </div> <h3 class="text-xl font-bold text-white mb-4">Programming Language</h3> <p class="text-textSecondary text-sm leading-relaxed mb-8"> การออกแบบตรรกะและการเขียนสคริปต์คอมพิวเตอร์เพื่อแก้ปัญหาและประมวลผลข้อมูล </p> </div> <div class="flex flex-wrap gap-2 pt-4 border-t border-slate-900"> <span class="px-4 py-1.5 text-xs font-mono font-semibold bg-slate-950/80 border border-slate-800 rounded-lg text-neonPurple">Python</span> </div> </div> <!-- Skill Card 3: Productivity Tools --> <div class="glass-panel p-8 rounded-3xl border border-slate-800/80 hover:border-neonGreen/40 hover:shadow-[0_0_25px_rgba(16,185,129,0.15)] transition-all duration-300 flex flex-col justify-between group" onclick="playSystemBeep('click')"> <div> <div class="w-14 h-14 rounded-2xl bg-neonGreen/10 flex items-center justify-center text-neonGreen mb-6 border border-neonGreen/20 shadow-[0_0_15px_rgba(16,185,129,0.1)] group-hover:scale-110 transition-transform"> <i data-lucide="sliders" class="w-7 h-7"></i> </div> <h3 class="text-xl font-bold text-white mb-4">Productivity Tools</h3> <p class="text-textSecondary text-sm leading-relaxed mb-8"> ทักษะการวิเคราะห์ข้อมูล จัดทำระบบรายงานขั้นเทพ และการออกแบบสไลด์พรีเซนต์ระดับผู้บริหาร </p> </div> <div class="flex flex-wrap gap-2 pt-4 border-t border-slate-900"> <span class="px-3 py-1.5 text-xs font-mono font-semibold bg-slate-950/80 border border-slate-800 rounded-lg text-neonGreen">MS Word</span> <span class="px-3 py-1.5 text-xs font-mono font-semibold bg-slate-950/80 border border-slate-800 rounded-lg text-neonGreen">MS Excel</span> <span class="px-3 py-1.5 text-xs font-mono font-semibold bg-slate-950/80 border border-slate-800 rounded-lg text-neonGreen">MS PowerPoint</span> </div> </div> </div> </div> </section> <!-- Projects Showcase Section --> <section id="projects" class="py-24 relative z-10"> <div class="max-w-6xl mx-auto px-6"> <div class="text-center space-y-2 mb-20"> <span class="text-xs font-bold text-neonPink uppercase tracking-widest flex items-center justify-center gap-2"> <span class="w-2 h-2 rounded-full bg-neonPink shadow-[0_0_8px_#EC4899]"></span> SELECTED SYSTEMS </span> <h2 class="text-3xl font-extrabold text-white">ผลงานและโปรเจกต์</h2> <p class="text-textSecondary">ผลงานการพัฒนาที่มุ่งเน้นความสวยงามและเสถียรภาพการทำงาน</p> </div> <!-- Elevated Project Cards with Border Glow --> <div class="grid md:grid-cols-2 gap-8"> <!-- Project Card 1 --> <!-- [!] USER NOTE: เปลี่ยนลิงก์ปลายทางในแท็ก <a> เพื่อชี้ไปยังไฟล์ผลงานหรือ GitHub Repository ได้ตามใจชอบ --> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="project-card glass-panel rounded-3xl overflow-hidden border border-slate-800/80 flex flex-col group" onclick="playSystemBeep('click')"> <!-- Tech Header Banner --> <div class="h-48 bg-slate-950 relative flex items-center justify-center p-6 border-b border-slate-900 overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-neonBlue/10 to-transparent"></div> <!-- Cyber tech graphics simulation --> <div class="absolute -right-10 -bottom-10 w-44 h-44 rounded-full border border-neonBlue/10 flex items-center justify-center"> <div class="w-32 h-32 rounded-full border border-neonBlue/5 flex items-center justify-center"></div> </div> <i data-lucide="layout" class="w-14 h-14 text-neonBlue opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300"></i> <span class="absolute bottom-4 right-4 bg-slate-900 border border-slate-800 px-3 py-1 rounded-lg text-[10px] font-mono text-neonBlue tracking-widest">SYSTEM_WEB</span> </div> <!-- Content --> <div class="p-8 flex-1 flex flex-col justify-between"> <div class="space-y-3"> <h3 class="text-xl font-bold text-white group-hover:text-neonBlue transition-colors duration-200">Responsive Personal Portfolio</h3> <p class="text-textSecondary text-sm leading-relaxed"> พัฒนาเว็บไซต์ประวัติส่วนตัวในรูปแบบ Responsive Design รองรับการใช้งานมือถืออย่างสมบูรณ์แบบ ติดตั้งเอฟเฟกต์สีสันสไตล์ Cyberpunk และ Interactive Audio </p> </div> <div class="pt-6 border-t border-slate-900 mt-6 flex justify-between items-center"> <div class="flex flex-wrap gap-2"> <span class="text-[11px] font-mono text-neonBlue bg-neonBlue/10 px-2.5 py-1 rounded-md">HTML5</span> <span class="text-[11px] font-mono text-neonBlue bg-neonBlue/10 px-2.5 py-1 rounded-md">Tailwind</span> <span class="text-[11px] font-mono text-neonBlue bg-neonBlue/10 px-2.5 py-1 rounded-md">VanillaJS</span> </div> <span class="text-xs text-neonBlue font-semibold flex items-center gap-1 group-hover:translate-x-1 transition-transform"> CODE_BASE <i data-lucide="arrow-up-right" class="w-3 h-3"></i> </span> </div> </div> </a> <!-- Project Card 2 --> <!-- [!] USER NOTE: เปลี่ยนลิงก์ปลายทางด้านล่าง เพื่อชี้ไปยังโปรเจกต์ Python ที่คุณชื่นชอบ --> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="project-card glass-panel rounded-3xl overflow-hidden border border-slate-800/80 flex flex-col group" onclick="playSystemBeep('click')"> <div class="h-48 bg-slate-950 relative flex items-center justify-center p-6 border-b border-slate-900 overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-neonPurple/10 to-transparent"></div> <div class="absolute -right-10 -bottom-10 w-44 h-44 rounded-full border border-neonPurple/10 flex items-center justify-center"> <div class="w-32 h-32 rounded-full border border-neonPurple/5 flex items-center justify-center"></div> </div> <i data-lucide="cpu" class="w-14 h-14 text-neonPurple opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300"></i> <span class="absolute bottom-4 right-4 bg-slate-900 border border-slate-800 px-3 py-1 rounded-lg text-[10px] font-mono text-neonPurple tracking-widest">DATA_AUTOMATION</span> </div> <!-- Content --> <div class="p-8 flex-1 flex flex-col justify-between"> <div class="space-y-3"> <h3 class="text-xl font-bold text-white group-hover:text-neonPurple transition-colors duration-200">Python Automation Script</h3> <p class="text-textSecondary text-sm leading-relaxed"> พัฒนาโปรแกรมและสคริปต์คำนวณประมวลผลข้อมูลทั่วไปแบบอัตโนมัติ ช่วยลดงานเอกสารที่ซ้ำซ้อน และเพิ่มความแม่นยำในการวิเคราะห์ข้อมูลร่วมกับ MS Excel </p> </div> <div class="pt-6 border-t border-slate-900 mt-6 flex justify-between items-center"> <div class="flex flex-wrap gap-2"> <span class="text-[11px] font-mono text-neonPurple bg-neonPurple/10 px-2.5 py-1 rounded-md">Python</span> <span class="text-[11px] font-mono text-neonPurple bg-neonPurple/10 px-2.5 py-1 rounded-md">Office API</span> </div> <span class="text-xs text-neonPurple font-semibold flex items-center gap-1 group-hover:translate-x-1 transition-transform"> CODE_BASE <i data-lucide="arrow-up-right" class="w-3 h-3"></i> </span> </div> </div> </a> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-24 relative z-10 border-t border-slate-900"> <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-neonBlue/5 rounded-full blur-3xl -z-10"></div> <div class="max-w-4xl mx-auto px-6"> <div class="text-center space-y-2 mb-16"> <span class="text-xs font-bold text-neonBlue uppercase tracking-widest flex items-center justify-center gap-2"> <span class="w-2 h-2 rounded-full bg-neonBlue shadow-[0_0_8px_#3B82F6]"></span> ESTABLISH CONNECTION </span> <h2 class="text-3xl font-extrabold text-white">ช่องทางการติดต่อ</h2> <p class="text-textSecondary">ยินดีให้คำปรึกษาและร่วมงานพัฒนาเทคโนโลยีใหม่ๆ เสมอ</p> </div> <div class="grid md:grid-cols-2 gap-8 items-stretch"> <!-- Left: Quick Direct Contact --> <div class="glass-panel p-8 rounded-3xl border border-slate-800/80 flex flex-col justify-between space-y-6"> <div class="space-y-4"> <div class="flex items-center gap-2"> <span class="w-2 h-2 rounded-full bg-neonGreen animate-ping"></span> <h3 class="text-lg font-bold text-white">ช่องทางด่วน</h3> </div> <p class="text-textSecondary text-sm">คลิกเพื่อคัดลอกอีเมลติดต่อหรือส่งจดหมายตอบกลับได้ในทันที</p> </div> <div class="space-y-4"> <!-- Email Link with interactive Copy capability --> <div id="email-btn" class="flex items-center justify-between gap-4 p-4 bg-slate-950/80 rounded-2xl border border-slate-850 hover:border-neonGreen/40 transition-all cursor-pointer group" onclick="copyEmailToClipboard()"> <div class="flex items-center gap-4 overflow-hidden"> <div class="w-10 h-10 rounded-xl bg-neonGreen/10 flex items-center justify-center text-neonGreen group-hover:scale-105 transition-transform"> <i data-lucide="mail" class="w-5 h-5"></i> </div> <div class="overflow-hidden"> <span class="block text-[10px] text-textSecondary font-mono">PRIMARY_EMAIL</span> <span class="text-sm font-semibold text-white group-hover:text-neonGreen transition-colors block truncate">mingpimandek@gmail.com</span> </div> </div> <div class="text-textSecondary group-hover:text-neonGreen p-1" title="Copy Email"> <i data-lucide="copy" class="w-4 h-4" id="copy-icon"></i> </div> </div> <!-- Institution link --> <div class="flex items-center gap-4 p-4 bg-slate-950/80 rounded-2xl border border-slate-850"> <div class="w-10 h-10 rounded-xl bg-neonBlue/10 flex items-center justify-center text-neonBlue"> <i data-lucide="map-pin" class="w-5 h-5"></i> </div> <div> <span class="block text-[10px] text-textSecondary font-mono">CAMPUS_BASE</span> <span class="text-sm font-semibold text-white">วิทยาลัยเทคนิคเชียงใหม่</span> </div> </div> </div> </div> <!-- Right: Social Links --> <div class="glass-panel p-8 rounded-3xl border border-slate-800/80 flex flex-col justify-between space-y-6"> <div class="space-y-4"> <h3 class="text-lg font-bold text-white">เครือข่ายนักพัฒนา</h3> <p class="text-textSecondary text-sm">ติดตามผลงานความคืบหน้าและการแชร์เทคนิคการพัฒนา</p> </div> <div class="grid grid-cols-2 gap-4"> <!-- GitHub --> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center justify-center p-6 bg-slate-950/80 rounded-2xl border border-slate-850 hover:border-neonPurple/40 hover:shadow-lg hover:shadow-neonPurple/5 transition-all group" onclick="playSystemBeep('click')"> <i data-lucide="github" class="w-8 h-8 text-slate-300 group-hover:text-neonPurple transition-colors mb-2"></i> <span class="text-xs font-semibold text-white">GitHub</span> </a> <!-- LinkedIn --> <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center justify-center p-6 bg-slate-950/80 rounded-2xl border border-slate-850 hover:border-neonBlue/40 hover:shadow-lg hover:shadow-neonBlue/5 transition-all group" onclick="playSystemBeep('click')"> <i data-lucide="linkedin" class="w-8 h-8 text-slate-300 group-hover:text-neonBlue transition-colors mb-2"></i> <span class="text-xs font-semibold text-white">LinkedIn</span> </a> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="py-8 bg-slate-950 text-slate-500 border-t border-slate-900 text-center text-xs font-mono relative z-10"> <div class="max-w-6xl mx-auto px-6 space-y-2"> <p>© 2026 Natthawat Mathanasarawut. All rights reserved.</p> <p class="text-slate-600">// engine: HTML5_Canvas, Tailwind_CSS, Lucide_Synth</p> </div> </footer> <!-- Scripts section: Lucide icons, particle system, Web Audio API sound feedback, Typed effect, Scroll detection --> <script> // 1. Initialize Lucide Icons lucide.createIcons(); // 2. Mobile Menu Toggle logic const menuBtn = document.getElementById('menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); menuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Close mobile menu on clicking any link const mobileLinks = mobileMenu.querySelectorAll('a'); mobileLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); }); // 3. Web Audio API Synthesizer (Sci-Fi Sound Feedback) let soundEnabled = true; const soundToggleBtn = document.getElementById('sound-toggle-btn'); const soundBars = document.getElementById('sound-bars'); const soundText = document.getElementById('sound-text'); // Toggle sound state soundToggleBtn.addEventListener('click', () => { soundEnabled = !soundEnabled; if (soundEnabled) { soundText.innerText = "SOUND ON"; soundToggleBtn.classList.remove('text-slate-500', 'border-slate-800'); soundToggleBtn.classList.add('text-neonGreen', 'border-neonGreen/45'); // Re-enable animation soundBars.querySelectorAll('.bar').forEach(b => b.style.animationPlayState = 'running'); playSystemBeep('success'); } else { soundText.innerText = "SOUND OFF"; soundToggleBtn.classList.add('text-slate-500', 'border-slate-800'); soundToggleBtn.classList.remove('text-neonGreen', 'border-neonGreen/45'); // Pause animation soundBars.querySelectorAll('.bar').forEach(b => b.style.animationPlayState = 'paused'); } }); // Synthesize cyberpunk sound feedback let audioCtx = null; function playSystemBeep(type = 'click') { if (!soundEnabled) return; try { if (!audioCtx) { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } if (audioCtx.state === 'suspended') { audioCtx.resume(); } const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.connect(gain); gain.connect(audioCtx.destination); if (type === 'click') { // Quick futuristic click beep osc.type = 'sine'; osc.frequency.setValueAtTime(1200, audioCtx.currentTime); osc.frequency.exponentialRampToValueAtTime(1800, audioCtx.currentTime + 0.08); gain.gain.setValueAtTime(0.04, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.08); osc.start(); osc.stop(audioCtx.currentTime + 0.08); } else if (type === 'success') { // Futuristic confirmation sound (double chime) osc.type = 'triangle'; osc.frequency.setValueAtTime(900, audioCtx.currentTime); osc.frequency.setValueAtTime(1400, audioCtx.currentTime + 0.06); gain.gain.setValueAtTime(0.05, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.25); osc.start(); osc.stop(audioCtx.currentTime + 0.25); } } catch (e) { console.warn("Web Audio API is not fully supported on this device/interaction model.", e); } } // 4. Copy Email to Clipboard with visual neon notification feedback function copyEmailToClipboard() { const email = "mingpimandek@gmail.com"; navigator.clipboard.writeText(email).then(() => { playSystemBeep('success'); const emailBtn = document.getElementById('email-btn'); const copyIcon = document.getElementById('copy-icon'); // Visual feedback of success emailBtn.classList.remove('hover:border-neonGreen/40'); emailBtn.classList.add('border-neonGreen', 'shadow-[0_0_15px_rgba(16,185,129,0.2)]'); copyIcon.innerHTML = `<path d="M20 6 9 17l-5-5" />`; // check mark icon copyIcon.style.color = '#10B981'; setTimeout(() => { emailBtn.classList.add('hover:border-neonGreen/40'); emailBtn.classList.remove('border-neonGreen', 'shadow-[0_0_15px_rgba(16,185,129,0.2)]'); copyIcon.innerHTML = `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`; // original copy icon copyIcon.style.color = ''; lucide.createIcons(); }, 2000); }).catch(err => { console.error("Failed to copy email: ", err); }); } // 5. Lightweight Typed Text Simulation const words = [ "Web Development (HTML / CSS / JavaScript)", "Programming Language (Python)", "Productivity Tools (Microsoft Office)" ]; let wordIndex = 0; let charIndex = 0; let isDeleting = false; const typedTextEl = document.getElementById('typed-text'); function typeWords() { const currentWord = words[wordIndex]; if (isDeleting) { typedTextEl.innerText = "// " + currentWord.substring(0, charIndex - 1); charIndex--; } else { typedTextEl.innerText = "// " + currentWord.substring(0, charIndex + 1); charIndex++; } let typeSpeed = 80; if (isDeleting) typeSpeed /= 2; if (!isDeleting && charIndex === currentWord.length) { typeSpeed = 2200; // Pause at full word isDeleting = true; } else if (isDeleting && charIndex === 0) { isDeleting = false; wordIndex = (wordIndex + 1) % words.length; typeSpeed = 500; // Pause before typing next word } setTimeout(typeWords, typeSpeed); } // Start typing after initial load delay setTimeout(typeWords, 1200); // 6. Interactive Canvas Particle Background const canvas = document.getElementById('particles-canvas'); const ctx = canvas.getContext('2d'); let particles = []; let mouse = { x: null, y: null, radius: 150 }; function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = Math.max(document.body.scrollHeight, window.innerHeight); } window.addEventListener('resize', resizeCanvas); resizeCanvas(); class Particle { constructor(x, y) { this.x = x; this.y = y; this.baseX = x; this.baseY = y; this.size = Math.random() * 2 + 1; this.density = (Math.random() * 30) + 10; } draw() { ctx.fillStyle = 'rgba(139, 92, 246, 0.4)'; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); } update() { let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx * dx + dy * dy); let forceDirectionX = dx / distance; let forceDirectionY = dy / distance; let maxDistance = mouse.radius; let force = (maxDistance - distance) / maxDistance; let directionX = forceDirectionX * force * this.density; let directionY = forceDirectionY * force * this.density; if (distance < mouse.radius) { this.x -= directionX; this.y -= directionY; } else { if (this.x !== this.baseX) { let dxBase = this.x - this.baseX; this.x -= dxBase / 10; } if (this.y !== this.baseY) { let dyBase = this.y - this.baseY; this.y -= dyBase / 10; } } } } // Spawn particles in areas along the page height function initParticles() { particles = []; let numberOfParticles = (canvas.width * canvas.height) / 13000; // Cap particles to prevent lag if (numberOfParticles > 250) numberOfParticles = 250; for (let i = 0; i < numberOfParticles; i++) { let x = Math.random() * canvas.width; let y = Math.random() * canvas.height; particles.push(new Particle(x, y)); } } initParticles(); function animateParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particles.length; i++) { particles[i].draw(); particles[i].update(); } requestAnimationFrame(animateParticles); } animateParticles(); window.addEventListener('mousemove', (e) => { mouse.x = e.pageX; mouse.y = e.pageY; }); window.addEventListener('mouseleave', () => { mouse.x = null; mouse.y = null; }); // 7. Timeline Line Drawing Animation on Scroll const timelineIndicator = document.getElementById('timeline-indicator'); const timelineItems = document.querySelectorAll('.timeline-item'); function animateTimeline() { const windowHeight = window.innerHeight; let firstDotTop = null; let lastActiveBottom = null; timelineItems.forEach((item, index) => { const rect = item.getBoundingClientRect(); const dot = item.querySelector('.timeline-dot'); // Check if dot is scrolled into view (halfway through the viewport) if (rect.top < windowHeight * 0.7) { dot.classList.add('border-neonBlue', 'bg-neonBlue', 'shadow-[0_0_10px_#3B82F6]'); const itemDocTop = rect.top + window.scrollY; const dotOffset = 28; // height offset to timeline-dot center (top-7 = 28px) if (firstDotTop === null) { firstDotTop = itemDocTop + dotOffset; } lastActiveBottom = itemDocTop + dotOffset; } else { dot.classList.remove('border-neonBlue', 'bg-neonBlue', 'shadow-[0_0_10px_#3B82F6]'); } }); if (firstDotTop !== null && lastActiveBottom !== null) { const timelineContainer = timelineIndicator.parentElement; const containerDocTop = timelineContainer.getBoundingClientRect().top + window.scrollY; const startPercent = ((firstDotTop - containerDocTop) / timelineContainer.clientHeight) * 100; const endPercent = ((lastActiveBottom - containerDocTop) / timelineContainer.clientHeight) * 100; // Animate timeline line height timelineIndicator.style.top = `${startPercent}%`; timelineIndicator.style.height = `${endPercent - startPercent}%`; } else { timelineIndicator.style.height = '0%'; } } window.addEventListener('scroll', animateTimeline); // Run once initially to capture initial visible sections setTimeout(animateTimeline, 300); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.36 |
proxy
|
phpinfo
|
Settings