File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090051/69319090051/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 & SEO Meta Tags --> <title>Palathip Chanthaphan \| Portfolio - Full-Stack Developer</title> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ พลาธิป จันทพันธ์ นักพัฒนาเว็บไซต์ Full-Stack Developer & UI/UX Designer ที่มีความเชี่ยวชาญในการสร้างสรรค์เว็บไซต์ที่สวยงามและมีประสิทธิภาพสูงสุด"> <meta name="keywords" content="Portfolio, พลาธิป จันทพันธ์, Palathip, Web Developer, Full-Stack, HTML, CSS, JavaScript, Tailwind CSS, Responsive Design"> <meta name="author" content="พลาธิป จันทพันธ์"> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:title" content="Palathip Chanthaphan \| Portfolio"> <meta property="og:description" content="สร้างสรรค์เว็บไซต์ด้วยดีไซน์ที่พรีเมียม ประสบการณ์ที่ลื่นไหล และโค้ดที่สะอาดสะอ้าน"> <meta property="og:image" content="assets/profile.jpg"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Custom CSS Rules --> <link rel="stylesheet" href="styles.css"> <!-- Tailwind Configuration --> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { 50: '#f0fdf4', 100: '#dcfce7', 500: '#22c55e', 600: '#16a34a', }, slate: { 950: '#030712', } } } } } </script> </head> <body class="text-slate-800 dark:text-slate-100 min-h-screen relative overflow-x-hidden"> <!-- Glow Backgrounds (ประดับเพื่อความพรีเมียมในการจัดแสงเงา) --> <div class="absolute top-0 left-1/4 w-96 h-96 bg-glow-purple rounded-full pointer-events-none"></div> <div class="absolute top-[30vh] right-1/4 w-96 h-96 bg-glow-indigo rounded-full pointer-events-none"></div> <div class="absolute bottom-[20vh] left-1/3 w-[500px] h-[500px] bg-glow-purple rounded-full pointer-events-none"></div> <!-- ==================== HEADER & NAVIGATION ==================== --> <header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 w-full glass-effect border-b border-slate-200/50 dark:border-slate-800/30"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between"> <!-- Logo --> <a href="#hero" class="flex items-center space-x-2 group"> <span class="text-2xl font-extrabold tracking-tight bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent group-hover:opacity-90 transition-opacity"> Palathip.Dev </span> </a> <!-- Desktop Navigation Menu --> <nav class="hidden md:flex items-center space-x-8"> <a href="#hero" class="nav-link font-medium text-sm text-slate-600 hover:text-blue-600 dark:text-slate-300 dark:hover:text-blue-400 transition-colors" id="nav-hero">หน้าแรก</a> <a href="#about" class="nav-link font-medium text-sm text-slate-600 hover:text-blue-600 dark:text-slate-300 dark:hover:text-blue-400 transition-colors" id="nav-about">เกี่ยวกับฉัน</a> <a href="#resume" class="nav-link font-medium text-sm text-slate-600 hover:text-blue-600 dark:text-slate-300 dark:hover:text-blue-400 transition-colors" id="nav-resume">ประวัติ</a> <a href="#portfolio" class="nav-link font-medium text-sm text-slate-600 hover:text-blue-600 dark:text-slate-300 dark:hover:text-blue-400 transition-colors" id="nav-portfolio">ผลงานเด่น</a> <a href="#contact" class="nav-link font-medium text-sm text-slate-600 hover:text-blue-600 dark:text-slate-300 dark:hover:text-blue-400 transition-colors" id="nav-contact">ติดต่อฉัน</a> </nav> <!-- Action Buttons & Mode Toggler --> <div class="hidden md:flex items-center space-x-4"> <!-- Theme Toggle Button --> <button id="theme-toggle" class="p-2.5 rounded-full border border-slate-200 dark:border-slate-800 bg-white/40 dark:bg-slate-900/40 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors focus:outline-none" aria-label="สลับโหมดสว่าง/มืด"> <!-- Light Mode Icon (Sun) --> <svg id="theme-toggle-light-icon" class="hidden w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 9H3m15.364-3.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z" /> </svg> <!-- Dark Mode Icon (Moon) --> <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> </svg> </button> <a href="#contact" class="px-5 py-2.5 rounded-full font-medium text-sm text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200"> ร่วมงานกับฉัน </a> </div> <!-- Hamburger Menu Button (Mobile Only) --> <div class="flex items-center md:hidden space-x-3"> <!-- Theme Toggle Button for Mobile --> <button id="theme-toggle-mobile" class="p-2.5 rounded-full border border-slate-200 dark:border-slate-800 bg-white/40 dark:bg-slate-900/40 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors focus:outline-none" aria-label="สลับโหมดสว่าง/มืด"> <!-- Light Mode Icon (Sun) --> <svg id="theme-toggle-light-icon-mob" class="hidden w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 9H3m15.364-3.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z" /> </svg> <!-- Dark Mode Icon (Moon) --> <svg id="theme-toggle-dark-icon-mob" class="hidden w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> </svg> </button> <button id="menu-btn" class="p-2.5 rounded-full border border-slate-200 dark:border-slate-800 bg-white/40 dark:bg-slate-900/40 hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none transition-colors" aria-label="เปิดเมนูการนำทาง"> <svg id="menu-icon-bars" class="w-6 h-6 text-slate-800 dark:text-slate-200 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /> </svg> <svg id="menu-icon-close" class="w-6 h-6 text-slate-800 dark:text-slate-200 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> <!-- Mobile Slide Drawer Menu --> <div id="mobile-menu" class="hidden md:hidden w-full bg-white dark:bg-[#05010a]/95 border-b border-slate-200 dark:border-slate-800 transition-all duration-300"> <div class="px-4 pt-2 pb-6 space-y-3"> <a href="#hero" class="mobile-nav-link block px-4 py-3 rounded-xl text-base font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900/60" id="nav-hero-mob">หน้าแรก</a> <a href="#about" class="mobile-nav-link block px-4 py-3 rounded-xl text-base font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900/60" id="nav-about-mob">เกี่ยวกับฉัน</a> <a href="#resume" class="mobile-nav-link block px-4 py-3 rounded-xl text-base font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900/60" id="nav-resume-mob">ประวัติ</a> <a href="#portfolio" class="mobile-nav-link block px-4 py-3 rounded-xl text-base font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900/60" id="nav-portfolio-mob">ผลงานเด่น</a> <a href="#contact" class="mobile-nav-link block px-4 py-3 rounded-xl text-base font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900/60" id="nav-contact-mob">ติดต่อฉัน</a> <div class="pt-3 border-t border-slate-100 dark:border-slate-800/60"> <a href="#contact" class="mobile-nav-link block w-full text-center py-3.5 rounded-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 shadow-md"> ร่วมงานกับฉัน </a> </div> </div> </div> </header> <!-- ==================== HERO SECTION ==================== --> <section id="hero" class="min-h-screen flex items-center pt-24 pb-12 sm:pb-16 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> <div class="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center"> <!-- Text Description --> <div class="lg:col-span-7 flex flex-col items-center lg:items-start text-center lg:text-left space-y-6 md:space-y-8"> <!-- Welcome Badge --> <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider text-blue-600 dark:text-blue-400 bg-blue-100/60 dark:bg-blue-900/30 border border-blue-200/50 dark:border-blue-800/40"> ยินดีต้อนรับสู่พื้นที่สร้างสรรค์ของผม </span> <!-- Big Slogan Heading --> <h1 class="text-4xl sm:text-5xl md:text-6xl font-black tracking-tight leading-[1.15] text-slate-900 dark:text-white"> สวัสดีครับ, ผม <br> <span class="bg-gradient-to-r from-blue-600 via-indigo-600 to-violet-600 dark:from-blue-400 dark:via-indigo-400 dark:to-violet-400 bg-clip-text text-transparent"> พลาธิป จันทพันธ์ (ฟาน) </span> </h1> <!-- Slogan / Subheading --> <p class="text-base sm:text-lg md:text-xl text-slate-600 dark:text-slate-300 max-w-xl font-normal leading-relaxed"> สร้างสรรค์เว็บไซต์ด้วยดีไซน์ที่ทันสมัย คลีน ประสบการณ์ใช้งานที่ไหลลื่น และการเขียนโค้ดที่สะอาดเป็นระบบ รองรับความต้องการบนทุกอุปกรณ์ </p> <!-- Social Connections --> <div class="flex items-center space-x-5"> <!-- Email (Touch Target Size > 48px) --> <a href="mailto:palathip.c@gmail.com" class="p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-full hover:text-blue-600 dark:hover:text-blue-400 hover:shadow-md hover:-translate-y-1 transition-all duration-300 w-12 h-12 flex items-center justify-center" aria-label="ส่งอีเมลติดต่อ"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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> <!-- Facebook (Touch Target Size > 48px) --> <a href="https://www.facebook.com/search/top/?q=พลาธิป%20จันทพันธ์" target="_blank" rel="noopener noreferrer" class="p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-full hover:text-blue-600 dark:hover:text-blue-400 hover:shadow-md hover:-translate-y-1 transition-all duration-300 w-12 h-12 flex items-center justify-center" aria-label="Facebook"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/> </svg> </a> <!-- Instagram (Touch Target Size > 48px) --> <a href="https://instagram.com/farn_ph" target="_blank" rel="noopener noreferrer" class="p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-full hover:text-blue-600 dark:hover:text-blue-400 hover:shadow-md hover:-translate-y-1 transition-all duration-300 w-12 h-12 flex items-center justify-center" aria-label="Instagram"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/> </svg> </a> <!-- LINE (Touch Target Size > 48px) --> <a href="https://line.me/ti/p/~13255071" target="_blank" rel="noopener noreferrer" class="p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-full hover:text-blue-600 dark:hover:text-blue-400 hover:shadow-md hover:-translate-y-1 transition-all duration-300 w-12 h-12 flex items-center justify-center" aria-label="LINE"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.814 4.269 8.846 10.036 9.586.391.084.922.258 1.058.592.12.301.079.77.038 1.082l-.171 1.026c-.05.302-.24 1.186 1.039.646 1.27-.537 6.843-4.047 9.329-6.924 2.454-2.735 3.65-5.306 3.65-8.008zM7.585 13.064h-2.156c-.34 0-.616-.276-.616-.616V7.551c0-.34.276-.616.616-.616s.616.276.616.616v4.281h1.54c.34 0 .616.276.616.616s-.276.616-.616.616zm3.327-.616c0 .34-.276.616-.616.616s-.616-.276-.616-.616V7.551c0-.34.276-.616.616-.616s.616.276.616.616v4.881zm4.996 0c0 .248-.148.473-.376.565-.078.031-.161.051-.246.051-.159 0-.315-.061-.433-.178l-2.072-2.072v1.634c0 .34-.276.616-.616.616s-.616-.276-.616-.616V7.551c0-.34.276-.616.616-.616s.616.276.616.616v1.634l2.072-2.072c.118-.118.274-.178.433-.178.085 0 .168.02.246.051.228.092.376.317.376.565 0 .164-.067.322-.18.436l-1.378 1.378 1.378 1.378c.113.114.18.272.18.436zm4.18-1.543h-1.54v1.231h1.54c.34 0 .616.276.616.616s-.276.616-.616.616h-2.156c-.34 0-.616-.276-.616-.616V7.551c0-.34.276-.616.616-.616h2.156c.34 0 .616.276.616.616s-.276.616-.616.616h-1.54v1.231h1.54c.34 0 .616.276.616.616s-.276.615-.616.615z"/> </svg> </a> </div> <!-- Buttons CTA --> <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 w-full sm:w-auto"> <a href="#portfolio" class="w-full sm:w-auto text-center px-8 py-4 rounded-full font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-xl shadow-blue-500/20 hover:shadow-blue-500/35 transform hover:-translate-y-0.5 transition-all duration-200"> ดูผลงานของผม </a> <a href="#contact" class="w-full sm:w-auto text-center px-8 py-4 rounded-full font-bold text-slate-800 dark:text-slate-100 bg-white/80 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800/80 transform hover:-translate-y-0.5 transition-all duration-200"> ติดต่อร่วมงาน </a> </div> </div> <!-- Profile Image Box --> <div class="lg:col-span-5 flex justify-center items-center mt-6 lg:mt-0 relative"> <!-- Glow Behind Frame --> <div class="absolute w-72 h-72 sm:w-96 sm:h-96 rounded-full bg-gradient-to-tr from-blue-500/30 to-indigo-500/30 blur-3xl -z-10"></div> <!-- Styled Profile Photo Frame --> <div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 rounded-3xl p-1.5 bg-gradient-to-tr from-blue-500 via-indigo-500 to-purple-500 shadow-2xl animate-float"> <div class="w-full h-full rounded-[1.3rem] overflow-hidden bg-slate-900 border-2 border-white/10"> <img src="assets/profile.jpg" alt="พลาธิป จันทพันธ์ Profile Avatar" class="w-full h-full object-cover"> </div> </div> </div> </div> </section> <!-- ==================== ABOUT ME SECTION ==================== --> <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 border-t border-slate-200/50 dark:border-slate-800/30 bg-white/30 dark:bg-slate-900/10"> <div class="max-w-7xl mx-auto space-y-16"> <!-- Section Heading --> <div class="text-center space-y-4"> <span class="text-xs font-bold tracking-widest text-indigo-600 dark:text-indigo-400 uppercase bg-indigo-100/50 dark:bg-indigo-900/30 px-3 py-1 rounded-full"> ประวัติย่อ </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white"> เกี่ยวกับตัวผม </h2> <div class="w-16 h-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full mx-auto"></div> </div> <div class="max-w-3xl mx-auto"> <!-- Story Description --> <div class="space-y-6 text-slate-600 dark:text-slate-300 font-normal leading-relaxed text-base sm:text-lg"> <p> นอกจากงานเขียนโค้ดแล้ว ผมมักใช้เวลาไปกับการออกแบบแนวคิดอินเตอร์เฟซใหม่ๆ บน Figma ตลอดจนการศึกษาแนวทางการปรับจูนประสิทธิภาพหน้าเว็บเพื่อให้ได้คะแนน Performance สูงสุดใน Lighthouse เสมอ </p> <!-- Personal Info Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-6 pt-6 border-t border-slate-200/50 dark:border-slate-800/30"> <div class="flex items-center space-x-3"> <div class="p-2 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> </svg> </div> <div> <span class="block text-xs font-bold text-slate-400 uppercase tracking-wide">ชื่อเล่น</span> <span class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200">ฟาน (Farn)</span> </div> </div> <div class="flex items-center space-x-3"> <div class="p-2 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-lg"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> </div> <div> <span class="block text-xs font-bold text-slate-400 uppercase tracking-wide">วันเกิด</span> <span class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200">7 มกราคม พ.ศ. 2550</span> </div> </div> <div class="flex items-center space-x-3 sm:col-span-2"> <div class="p-2 bg-violet-50 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 rounded-lg"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> </svg> </div> <div> <span class="block text-xs font-bold text-slate-400 uppercase tracking-wide">งานอดิเรก</span> <span class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200">ตกปลา, ขับรถเที่ยว</span> </div> </div> </div> </div> </div> </div> </section> <!-- ==================== EDUCATION & EXPERIENCE SECTION ==================== --> <section id="resume" class="py-20 px-4 sm:px-6 lg:px-8 border-t border-slate-200/50 dark:border-slate-800/30 bg-slate-50/40 dark:bg-slate-900/10 relative"> <div class="max-w-7xl mx-auto space-y-16"> <!-- Section Heading --> <div class="text-center space-y-4"> <span class="text-xs font-bold tracking-widest text-blue-600 dark:text-blue-400 uppercase bg-blue-100/50 dark:bg-blue-900/30 px-3 py-1 rounded-full"> เส้นทางชีวิต </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white"> ประวัติการศึกษา & การทำงาน </h2> <div class="w-16 h-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full mx-auto"></div> </div> <!-- Timeline Grid (2 Columns: Education & Work) --> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"> <!-- Column 1: Education --> <div class="space-y-8"> <h3 class="text-2xl font-extrabold text-slate-900 dark:text-white flex items-center gap-3"> <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-xl text-blue-600 dark:text-blue-400"> <!-- Graduation Cap Icon --> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" /> </svg> </div> ประวัติการศึกษา </h3> <div class="relative border-l-2 border-slate-200 dark:border-slate-800 ml-4 pl-8 space-y-8"> <!-- Timeline Item 1 (Current Education) --> <div class="relative group"> <!-- Glowing Marker Dot --> <span class="absolute -left-[41px] top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-blue-600 text-white ring-8 ring-blue-50 dark:ring-blue-950/50 group-hover:scale-110 transition-transform"> <span class="h-2.5 w-2.5 rounded-full bg-white"></span> </span> <div class="p-6 bg-white dark:bg-slate-900/50 border border-slate-200/60 dark:border-slate-800/40 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 mb-3"> กำลังศึกษาอยู่ </span> <h4 class="text-lg font-bold text-slate-900 dark:text-white">ประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.)</h4> <p class="text-sm font-semibold text-blue-600 dark:text-blue-400 mt-1">วิทยาลัยเทคนิคเชียงใหม่</p> <p class="text-xs text-slate-400 dark:text-slate-500 mt-2">ระดับอุดมศึกษาตอนต้น / วิชาชีพชั้นสูง</p> </div> </div> <!-- Timeline Item 2 (Upper Secondary) --> <div class="relative group"> <span class="absolute -left-[41px] top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-slate-300 dark:bg-slate-800 text-white ring-8 ring-slate-100 dark:ring-slate-900/30 group-hover:bg-blue-500 transition-colors"> <span class="h-2 w-2 rounded-full bg-white"></span> </span> <div class="p-6 bg-white dark:bg-slate-900/50 border border-slate-200/60 dark:border-slate-800/40 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300"> <h4 class="text-lg font-bold text-slate-900 dark:text-white">มัธยมศึกษาตอนปลาย (ปวช.)</h4> <p class="text-sm font-semibold text-slate-600 dark:text-slate-300 mt-1">วิทยาลัยเทคนิคเชียงใหม่</p> <p class="text-xs text-slate-400 dark:text-slate-500 mt-2">ระดับสายอาชีพขั้นต้น</p> </div> </div> <!-- Timeline Item 3 (Lower Secondary) --> <div class="relative group"> <span class="absolute -left-[41px] top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-slate-300 dark:bg-slate-800 text-white ring-8 ring-slate-100 dark:ring-slate-900/30 group-hover:bg-blue-500 transition-colors"> <span class="h-2 w-2 rounded-full bg-white"></span> </span> <div class="p-6 bg-white dark:bg-slate-900/50 border border-slate-200/60 dark:border-slate-800/40 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300"> <h4 class="text-lg font-bold text-slate-900 dark:text-white">มัธยมศึกษาตอนต้น</h4> <p class="text-sm font-semibold text-slate-600 dark:text-slate-300 mt-1">โรงเรียนดอยสะเก็ดวิทยาคม</p> </div> </div> <!-- Timeline Item 4 (Primary) --> <div class="relative group"> <span class="absolute -left-[41px] top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-slate-300 dark:bg-slate-800 text-white ring-8 ring-slate-100 dark:ring-slate-900/30 group-hover:bg-blue-500 transition-colors"> <span class="h-2.5 w-2.5 rounded-full bg-white"></span> </span> <div class="p-6 bg-white dark:bg-slate-900/50 border border-slate-200/60 dark:border-slate-800/40 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300"> <h4 class="text-lg font-bold text-slate-900 dark:text-white">ประถมศึกษา</h4> <p class="text-sm font-semibold text-slate-600 dark:text-slate-300 mt-1">โรงเรียนบ้านขุนลาว</p> </div> </div> </div> </div> <!-- Column 2: Work Experience --> <div class="space-y-8"> <h3 class="text-2xl font-extrabold text-slate-900 dark:text-white flex items-center gap-3"> <div class="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl text-indigo-600 dark:text-indigo-400"> <!-- Briefcase Icon --> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> </svg> </div> ประวัติการทำงาน </h3> <div class="relative border-l-2 border-slate-200 dark:border-slate-800 ml-4 pl-8 space-y-8"> <!-- Experience Item 1 (Freelance Wedding) --> <div class="relative group"> <!-- Glowing Marker Dot --> <span class="absolute -left-[41px] top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-white ring-8 ring-indigo-50 dark:ring-indigo-950/50 group-hover:scale-110 transition-transform"> <span class="h-2.5 w-2.5 rounded-full bg-white"></span> </span> <div class="p-6 bg-white dark:bg-slate-900/50 border border-slate-200/60 dark:border-slate-800/40 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 mb-3"> งานปัจจุบัน </span> <h4 class="text-lg font-bold text-slate-900 dark:text-white">ฟรีแลนซ์ (จัดงานแต่งงาน)</h4> <p class="text-sm font-semibold text-indigo-600 dark:text-indigo-400 mt-1">Wedding Organizer & Planner</p> <p class="text-sm text-slate-500 dark:text-slate-400 mt-3 font-normal leading-relaxed"> บริการประสานงาน วางแผนโครงสร้าง พิธีการ และดูแลการจัดเตรียมสถานที่ ตกแต่งดอกไม้ เพื่อสร้างสรรค์งานแต่งงานให้ออกมาสมบูรณ์แบบตามจินตนาการของบ่าวสาว </p> </div> </div> <!-- Experience Item 2 (Waiter) --> <div class="relative group"> <span class="absolute -left-[41px] top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-slate-300 dark:bg-slate-800 text-white ring-8 ring-slate-100 dark:ring-slate-900/30 group-hover:bg-indigo-500 transition-colors"> <span class="h-2 w-2 rounded-full bg-white"></span> </span> <div class="p-6 bg-white dark:bg-slate-900/50 border border-slate-200/60 dark:border-slate-800/40 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300"> <h4 class="text-lg font-bold text-slate-900 dark:text-white">พนักงานเสิร์ฟร้านอาหาร</h4> <p class="text-sm font-semibold text-slate-600 dark:text-slate-300 mt-1">Restaurant Server</p> <p class="text-sm text-slate-500 dark:text-slate-400 mt-3 font-normal leading-relaxed"> บริการต้อนรับลูกค้า จัดระเบียบการให้บริการอาหารและเครื่องดื่ม ดูแลความสะอาดเรียบร้อยในพื้นที่บริการ และสร้างความประทับใจผ่านทัศนคติที่สุภาพรวดเร็ว </p> </div> </div> </div> </div> </div> </div> </section> <!-- ==================== PORTFOLIO & PROJECTS SECTION ==================== --> <section id="portfolio" class="py-20 px-4 sm:px-6 lg:px-8 border-t border-slate-200/50 dark:border-slate-800/30 relative"> <div class="max-w-7xl mx-auto space-y-16"> <!-- Section Heading --> <div class="text-center space-y-4"> <span class="text-xs font-bold tracking-widest text-blue-600 dark:text-blue-400 uppercase bg-blue-100/50 dark:bg-blue-900/30 px-3 py-1 rounded-full"> แกลเลอรีผลงาน </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white"> โปรเจกต์เด่นล่าสุด </h2> <div class="w-16 h-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full mx-auto"></div> </div> <!-- Projects Responsive Grid --> <!-- Desktop: 3 Columns, Tablet: 2 Columns, Mobile: 1 Column --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> </div> </div> </section> <!-- ==================== CONTACT SECTION ==================== --> <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 border-t border-slate-200/50 dark:border-slate-800/30 bg-white/20 dark:bg-slate-900/10 relative"> <div class="max-w-7xl mx-auto space-y-16"> <!-- Section Heading --> <div class="text-center space-y-4"> <span class="text-xs font-bold tracking-widest text-violet-600 dark:text-violet-400 uppercase bg-violet-100/50 dark:bg-violet-900/30 px-3 py-1 rounded-full"> การทำงานร่วมกัน </span> <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white"> พูดคุยและติดต่อฉัน </h2> <div class="w-16 h-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full mx-auto"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"> <!-- Contact Details --> <div class="lg:col-span-5 space-y-8"> <div class="space-y-4"> <h3 class="text-2xl font-bold text-slate-900 dark:text-white"> มีไอเดียหรือโปรเจกต์ที่ต้องการทำ? </h3> <p class="text-slate-600 dark:text-slate-400 leading-relaxed font-normal"> ส่งข้อความหาผมได้เลยครับ! ผมยินดีรับฟังข้อเสนอการจ้างงาน ทั้งแบบ Full-time, Freelance หรืองานให้คำปรึกษาเกี่ยวกับสถาปัตยกรรมเว็บไซต์และ UI/UX Design </p> </div> <!-- Contact items (Touch Targets >= 48px) --> <div class="space-y-5"> <div class="flex items-center space-x-4 p-4 rounded-2xl bg-white dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-800/40"> <div class="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-xl text-blue-600 dark:text-blue-400 flex items-center justify-center w-12 h-12"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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> </div> <div> <span class="text-xs font-bold text-slate-400 uppercase tracking-wide">อีเมลหาผมโดยตรง</span> <p class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200">palathip.c@gmail.com</p> </div> </div> <div class="flex items-center space-x-4 p-4 rounded-2xl bg-white dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-800/40"> <div class="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl text-indigo-600 dark:text-indigo-400 flex items-center justify-center w-12 h-12"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.725l.548 2.2a1 1 0 01-.321.988l-1.305.98a10.582 10.582 0 004.872 4.872l.98-1.305a1 1 0 01.988-.321l2.2.548a1 1 0 01.725.94V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /> </svg> </div> <div> <span class="text-xs font-bold text-slate-400 uppercase tracking-wide">เบอร์โทรศัพท์</span> <p class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200">082-518-1403</p> </div> </div> <div class="flex items-center space-x-4 p-4 rounded-2xl bg-white dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-800/40"> <div class="p-3 bg-violet-100 dark:bg-violet-900/30 rounded-xl text-violet-600 dark:text-violet-400 flex items-center justify-center w-12 h-12"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> </div> <div> <span class="text-xs font-bold text-slate-400 uppercase tracking-wide">ที่อยู่สำหรับการทำงาน</span> <p class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200">105/6 ซอยพาชื่น ต.ช้างเผือก อ.เมืองเชียงใหม่ จ.เชียงใหม่ 50300</p> </div> </div> <div class="flex items-center space-x-4 p-4 rounded-2xl bg-white dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-800/40"> <div class="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-xl text-blue-600 dark:text-blue-400 flex items-center justify-center w-12 h-12"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/> </svg> </div> <div> <span class="text-xs font-bold text-slate-400 uppercase tracking-wide">Facebook</span> <p class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200"> <a href="https://www.facebook.com/search/top/?q=พลาธิป%20จันทพันธ์" target="_blank" rel="noopener noreferrer" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> พลาธิป จันทพันธ์ </a> </p> </div> </div> <div class="flex items-center space-x-4 p-4 rounded-2xl bg-white dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-800/40"> <div class="p-3 bg-pink-100 dark:bg-pink-900/30 rounded-xl text-pink-600 dark:text-pink-400 flex items-center justify-center w-12 h-12"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/> </svg> </div> <div> <span class="text-xs font-bold text-slate-400 uppercase tracking-wide">Instagram</span> <p class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200"> <a href="https://instagram.com/farn_ph" target="_blank" rel="noopener noreferrer" class="hover:underline hover:text-pink-600 dark:hover:text-pink-400 transition-colors"> farn_ph </a> </p> </div> </div> <div class="flex items-center space-x-4 p-4 rounded-2xl bg-white dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-800/40"> <div class="p-3 bg-emerald-100 dark:bg-emerald-900/30 rounded-xl text-emerald-600 dark:text-emerald-400 flex items-center justify-center w-12 h-12"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> <path d="M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.814 4.269 8.846 10.036 9.586.391.084.922.258 1.058.592.12.301.079.77.038 1.082l-.171 1.026c-.05.302-.24 1.186 1.039.646 1.27-.537 6.843-4.047 9.329-6.924 2.454-2.735 3.65-5.306 3.65-8.008zM7.585 13.064h-2.156c-.34 0-.616-.276-.616-.616V7.551c0-.34.276-.616.616-.616s.616.276.616.616v4.281h1.54c.34 0 .616.276.616.616s-.276.616-.616.616zm3.327-.616c0 .34-.276.616-.616.616s-.616-.276-.616-.616V7.551c0-.34.276-.616.616-.616s.616.276.616.616v4.881zm4.996 0c0 .248-.148.473-.376.565-.078.031-.161.051-.246.051-.159 0-.315-.061-.433-.178l-2.072-2.072v1.634c0 .34-.276.616-.616.616s-.616-.276-.616-.616V7.551c0-.34.276-.616.616-.616s.616.276.616.616v1.634l2.072-2.072c.118-.118.274-.178.433-.178.085 0 .168.02.246.051.228.092.376.317.376.565 0 .164-.067.322-.18.436l-1.378 1.378 1.378 1.378c.113.114.18.272.18.436zm4.18-1.543h-1.54v1.231h1.54c.34 0 .616.276.616.616s-.276.616-.616.616h-2.156c-.34 0-.616-.276-.616-.616V7.551c0-.34.276-.616.616-.616h2.156c.34 0 .616.276.616.616s-.276.616-.616.616h-1.54v1.231h1.54c.34 0 .616.276.616.616s-.276.615-.616.615z"/> </svg> </div> <div> <span class="text-xs font-bold text-slate-400 uppercase tracking-wide">LINE ID</span> <p class="text-sm sm:text-base font-semibold text-slate-800 dark:text-slate-200"> <a href="https://line.me/ti/p/~13255071" target="_blank" rel="noopener noreferrer" class="hover:underline hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"> 13255071 </a> </p> </div> </div> </div> </div> <!-- Contact Form (Interactive and Animated) --> <div class="lg:col-span-7"> <form id="contact-form" class="space-y-6 p-6 sm:p-8 bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800/40 rounded-3xl shadow-sm"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <!-- Name Input --> <div class="space-y-2"> <label for="form-name" class="text-xs font-bold text-slate-400 uppercase tracking-wider">ชื่อของคุณ</label> <input type="text" id="form-name" required class="form-input w-full px-4 py-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-850 text-slate-800 dark:text-slate-100 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50" placeholder="ชื่อ-นามสกุล"> </div> <!-- Email Input --> <div class="space-y-2"> <label for="form-email" class="text-xs font-bold text-slate-400 uppercase tracking-wider">อีเมลติดต่อ</label> <input type="email" id="form-email" required class="form-input w-full px-4 py-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-850 text-slate-800 dark:text-slate-100 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50" placeholder="example@email.com"> </div> </div> <!-- Subject Input --> <div class="space-y-2"> <label for="form-subject" class="text-xs font-bold text-slate-400 uppercase tracking-wider">หัวข้อข้อความ</label> <input type="text" id="form-subject" required class="form-input w-full px-4 py-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-850 text-slate-800 dark:text-slate-100 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50" placeholder="ต้องการคุยเรื่องโครงการ, สมัครงาน..."> </div> <!-- Message Input --> <div class="space-y-2"> <label for="form-message" class="text-xs font-bold text-slate-400 uppercase tracking-wider">รายละเอียดข้อความ</label> <textarea id="form-message" rows="5" required class="form-input w-full px-4 py-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-850 text-slate-800 dark:text-slate-100 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50" placeholder="กรอกข้อความที่ท่านต้องการพูดคุยกับผม..."></textarea> </div> <!-- Form Action Button --> <button type="submit" id="submit-btn" class="w-full flex items-center justify-center py-4 rounded-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 hover:shadow-lg hover:shadow-blue-500/10 hover:shadow-blue-500/20 transition-all duration-200"> <span id="btn-text">ส่งข้อความหาผม</span> <!-- Spinner Icon (Hidden by default) --> <svg id="btn-spinner" class="hidden animate-spin ml-2 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </button> </form> </div> </div> </div> </section> <!-- ==================== FOOTER ==================== --> <footer class="py-12 px-4 sm:px-6 lg:px-8 border-t border-slate-200/50 dark:border-slate-800/30 bg-slate-100/50 dark:bg-slate-950"> <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6"> <!-- Footer Copyright --> <div class="text-center md:text-left space-y-1"> <p class="text-sm font-semibold text-slate-800 dark:text-slate-200"> © 2026 Palathip Chanthaphan. สงวนลิขสิทธิ์ทั้งหมด </p> <p class="text-xs text-slate-400 font-normal"> พัฒนาด้วยใจ ความรักในโค้ด และ Tailwind CSS </p> </div> <!-- Quick Back to Top Link --> <div class="flex items-center space-x-6"> <a href="#hero" class="text-xs font-bold text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors uppercase tracking-wider"> กลับสู่ด้านบน </a> </div> </div> </footer> <!-- ==================== FLOATING NOTIFICATION (TOAST) ==================== --> <div id="toast" class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none"> <div class="flex items-center gap-3 px-5 py-4 bg-emerald-500 text-white rounded-2xl shadow-xl shadow-emerald-500/20 max-w-sm"> <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <div class="text-sm font-bold leading-snug"> ได้รับข้อความเรียบร้อย! ผมจะรีบติดต่อกลับหาคุณโดยเร็วที่สุด </div> </div> </div> <!-- ==================== JAVASCRIPT LOGIC ==================== --> <script> document.addEventListener('DOMContentLoaded', () => { /* ------------------------------------------------------------- 1. DARK / LIGHT MODE CONTROLLER (ธีมสลับดวงอาทิตย์-ดวงจันทร์) ------------------------------------------------------------- / const themeToggleBtn = document.getElementById('theme-toggle'); const themeToggleBtnMob = document.getElementById('theme-toggle-mobile'); const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon'); const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon'); const themeToggleDarkIconMob = document.getElementById('theme-toggle-dark-icon-mob'); const themeToggleLightIconMob = document.getElementById('theme-toggle-light-icon-mob'); // ตรวจสอบธีมที่เลือกไว้ครั้งล่าสุด const isDarkMode = localStorage.getItem('color-theme') === 'dark' \|\| (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches); function updateThemeUI(dark) { if (dark) { document.documentElement.classList.add('dark'); localStorage.setItem('color-theme', 'dark'); // แสดงไอคอน Sun ซ่อน Moon themeToggleLightIcon.classList.remove('hidden'); themeToggleDarkIcon.classList.add('hidden'); themeToggleLightIconMob.classList.remove('hidden'); themeToggleDarkIconMob.classList.add('hidden'); } else { document.documentElement.classList.remove('dark'); localStorage.setItem('color-theme', 'light'); // แสดงไอคอน Moon ซ่อน Sun themeToggleDarkIcon.classList.remove('hidden'); themeToggleLightIcon.classList.add('hidden'); themeToggleDarkIconMob.classList.remove('hidden'); themeToggleLightIconMob.classList.add('hidden'); } } // แสดงค่าเริ่มต้น updateThemeUI(isDarkMode); // จัดการเหตุการณ์เมื่อกดปุ่มสลับธีม (Desktop & Mobile) const handleThemeSwitch = () => { const isCurrentDark = document.documentElement.classList.contains('dark'); updateThemeUI(!isCurrentDark); }; themeToggleBtn.addEventListener('click', handleThemeSwitch); themeToggleBtnMob.addEventListener('click', handleThemeSwitch); / ------------------------------------------------------------- 2. MOBILE HAMBURGER MENU DRAWER (ควบคุมเมนูมือถือสไลด์เปิด-ปิด) ------------------------------------------------------------- / const menuBtn = document.getElementById('menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); const menuIconBars = document.getElementById('menu-icon-bars'); const menuIconClose = document.getElementById('menu-icon-close'); menuBtn.addEventListener('click', () => { const isOpen = !mobileMenu.classList.contains('hidden'); if (isOpen) { mobileMenu.classList.add('hidden'); menuIconBars.classList.remove('hidden'); menuIconClose.classList.add('hidden'); } else { mobileMenu.classList.remove('hidden'); menuIconBars.classList.add('hidden'); menuIconClose.classList.remove('hidden'); } }); // ปิดเมนูมือถือโดยอัตโนมัติเมื่อมีการกดคลิกลิงก์ภายในเมนู const mobileNavLinks = document.querySelectorAll('.mobile-nav-link'); mobileNavLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); menuIconBars.classList.remove('hidden'); menuIconClose.classList.add('hidden'); }); }); / ------------------------------------------------------------- 3. SCROLL SPY & ACTIVE NAV-LINK (ทำไฮไลท์เมนูปัจจุบันตามพิกัดสกรอลล์) ------------------------------------------------------------- / const sections = document.querySelectorAll('section'); const navLinks = document.querySelectorAll('.nav-link'); const scrollSpy = () => { let currentSectionId = 'hero'; sections.forEach(section => { const sectionTop = section.offsetTop - 120; // ชดเชยความสูงของ navbar ป้องกันปัญหาทับซ้อน const sectionHeight = section.clientHeight; if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) { currentSectionId = section.getAttribute('id'); } }); // ล้างสีสถานะ active เก่าและเติมสีสถานะ active ใหม่สำหรับ Desktop เมนู navLinks.forEach(link => { link.classList.remove('nav-link-active'); if (link.getAttribute('href') === `#${currentSectionId}`) { link.classList.add('nav-link-active'); } }); // ไฮไลท์สำหรับ Mobile เมนูบอร์ดด้วย const mobLinks = document.querySelectorAll('.mobile-nav-link'); mobLinks.forEach(link => { link.classList.remove('bg-blue-50', 'text-blue-600', 'dark:bg-blue-900/30', 'dark:text-blue-400'); if (link.getAttribute('href') === `#${currentSectionId}` && !link.classList.contains('bg-gradient-to-r')) { link.classList.add('bg-blue-50', 'text-blue-600', 'dark:bg-blue-900/30', 'dark:text-blue-400'); } }); }; window.addEventListener('scroll', scrollSpy); scrollSpy(); // รันครั้งแรกเผื่อเริ่มหน้ารีโหลดที่กลางหน้าจอ / ------------------------------------------------------------- 4. CUSTOM GLASS NAVBAR SCROLL EFFECT (ลดทอน Navbar เมื่อเลื่อนสกรอลล์ลง) ------------------------------------------------------------- / const navbar = document.getElementById('navbar'); window.addEventListener('scroll', () => { if (window.scrollY > 20) { navbar.classList.add('py-1', 'shadow-md'); navbar.classList.remove('py-0'); } else { navbar.classList.remove('py-1', 'shadow-md'); } }); / ------------------------------------------------------------- 5. INTERACTIVE CONTACT FORM SUBMISSION (จำลองการรับส่งข้อมูลฟอร์ม) ------------------------------------------------------------- */ const contactForm = document.getElementById('contact-form'); const submitBtn = document.getElementById('submit-btn'); const btnText = document.getElementById('btn-text'); const btnSpinner = document.getElementById('btn-spinner'); const toast = document.getElementById('toast'); contactForm.addEventListener('submit', (e) => { e.preventDefault(); // เปลี่ยนสถานะปุ่มเป็นกำลังส่ง (Loading State) submitBtn.disabled = true; btnText.textContent = 'กำลังทำการส่งข้อความ...'; btnSpinner.classList.remove('hidden'); submitBtn.classList.add('opacity-80', 'cursor-not-allowed'); // จำลองช่วงเวลาดีเลย์การจัดเตรียมเครือข่าย 1.5 วินาที setTimeout(() => { // รีเซ็ตสถานะปุ่มกลับคืนปกติ submitBtn.disabled = false; btnText.textContent = 'ส่งข้อความหาผม'; btnSpinner.classList.add('hidden'); submitBtn.classList.remove('opacity-80', 'cursor-not-allowed'); // ล้างข้อมูลอินพุตในฟอร์มทั้งหมด contactForm.reset(); // แสดงผล Toast แจ้งเตือนความสำเร็จ toast.classList.remove('translate-y-20', 'opacity-0'); toast.classList.add('translate-y-0', 'opacity-100'); // ซ่อน Toast แจ้งเตือนภายใน 4 วินาทีถัดไป setTimeout(() => { toast.classList.remove('translate-y-0', 'opacity-100'); toast.classList.add('translate-y-20', 'opacity-0'); }, 4000); }, 1500); }); }); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.25 | proxy | phpinfo | Settings