File manager - Edit - /home/webapp69.cm.in.th/u69319090024/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> กชกร </title> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ อรุณโรจน์ กองเงิน นักพัฒนาซอฟต์แวร์ Full-Stack และนักออกแบบ UI/UX ประสบการณ์กว่า 5 ปี"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Lucide Icons CDN --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Custom Styling File --> <link rel="stylesheet" href="css/styles.css"> <!-- Tailwind Configuration --> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { // โทนสีหลักสำหรับลูกเล่นในหน้าเว็บ brand: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#6366f1', // Indigo 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b', }, accent: { cyan: '#06b6d4', purple: '#a855f7', pink: '#ec4899' } }, fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'], display: ['Outfit', 'sans-serif'], } } } } </script> </head> <body class="bg-slate-50 text-slate-800 dark:bg-slate-950 dark:text-slate-100 transition-colors duration-300 overflow-x-hidden"> <!-- 1. แถบนำทาง (Navbar) --> <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 py-4 px-6 md:px-12 bg-transparent"> <div class="max-w-7xl mx-auto flex items-center justify-between"> <!-- โลโก้ / ชื่อย่อ --> <a href="#home" class="flex items-center gap-2 group"> <div class="h-10 w-10 rounded-xl bg-gradient-to-tr from-brand-500 to-accent-purple flex items-center justify-center text-white font-display font-extrabold text-xl shadow-lg shadow-brand-500/30 group-hover:scale-105 transition-transform"> JS </div> <span class="font-display font-bold text-xl tracking-tight hidden sm:block bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent group-hover:text-brand-500 dark:group-hover:text-brand-400 transition-colors"> Chiradech.Dev </span> </a> <!-- เมนูสำหรับหน้าจอขนาดใหญ่ (Desktop Navigation) --> <div class="hidden md:flex items-center gap-8 font-medium"> <a href="#home" class="hover:text-brand-500 dark:hover:text-brand-400 transition-colors py-2 text-sm">หน้าแรก</a> <a href="#about" class="hover:text-brand-500 dark:hover:text-brand-400 transition-colors py-2 text-sm">เกี่ยวกับฉัน</a> <a href="#projects" class="hover:text-brand-500 dark:hover:text-brand-400 transition-colors py-2 text-sm">ผลงาน</a> <a href="#experience" class="hover:text-brand-500 dark:hover:text-brand-400 transition-colors py-2 text-sm">ประสบการณ์</a> <a href="#contact" class="hover:text-brand-500 dark:hover:text-brand-400 transition-colors py-2 text-sm">ติดต่อ</a> </div> <!-- ปุ่มฟังก์ชันการควบคุม (Theme Toggle, Contact CTA, Mobile Hamburger) --> <div class="flex items-center gap-4"> <!-- ปุ่มสลับ Dark Mode / Light Mode --> <button id="theme-toggle" type="button" class="text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:focus:ring-slate-700 rounded-lg text-sm p-2.5 transition-all" aria-label="Toggle Theme"> <i id="theme-toggle-dark-icon" data-lucide="moon" class="w-5 h-5"></i> <i id="theme-toggle-light-icon" data-lucide="sun" class="w-5 h-5 hidden"></i> </button> <!-- ปุ่ม CTA สำหรับจ้างงาน (Desktop Only) --> <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-900 hover:bg-slate-800 dark:bg-white dark:text-slate-950 dark:hover:bg-slate-100 rounded-xl transition-all shadow-md active:scale-95"> จ้างงานฉัน </a> <!-- ปุ่ม Hamburger เมนูบนมือถือ --> <button id="mobile-menu-btn" type="button" class="inline-flex items-center p-2 text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 rounded-lg md:hidden focus:outline-none focus:ring-2 focus:ring-slate-200 dark:focus:ring-slate-800" aria-controls="mobile-menu" aria-expanded="false"> <i data-lucide="menu" class="w-6 h-6"></i> </button> </div> </div> <!-- เมนูสำหรับแสดงบนมือถือ (Mobile Drawer) --> <div id="mobile-menu" class="hidden md:hidden w-full mt-4 rounded-2xl glass p-6 shadow-2xl transition-all duration-300"> <ul class="flex flex-col gap-4 font-semibold text-slate-700 dark:text-slate-300"> <li> <a href="#home" class="block py-2 px-3 rounded-lg hover:bg-indigo-50 dark:hover:bg-slate-800 hover:text-brand-500">หน้าแรก</a> </li> <li> <a href="#about" class="block py-2 px-3 rounded-lg hover:bg-indigo-50 dark:hover:bg-slate-800 hover:text-brand-500">เกี่ยวกับฉัน</a> </li> <li> <a href="#projects" class="block py-2 px-3 rounded-lg hover:bg-indigo-50 dark:hover:bg-slate-800 hover:text-brand-500">ผลงาน</a> </li> <li> <a href="#experience" class="block py-2 px-3 rounded-lg hover:bg-indigo-50 dark:hover:bg-slate-800 hover:text-brand-500">ประสบการณ์</a> </li> <li> <a href="#contact" class="block py-2 px-3 rounded-lg hover:bg-indigo-50 dark:hover:bg-slate-800 hover:text-brand-500">ติดต่อ</a> </li> <li class="pt-2 border-t border-slate-200 dark:border-slate-800"> <a href="#contact" class="flex justify-center items-center w-full px-4 py-3 text-sm font-semibold text-white bg-brand-500 hover:bg-brand-600 rounded-xl transition-all"> จ้างงานฉัน </a> </li> </ul> </div> </nav> <!-- 2. ส่วนหน้าต้อนรับ (Hero Section) --> <section id="home" class="relative min-h-screen flex items-center justify-center pt-24 pb-12 px-6 md:px-12 overflow-hidden bg-slate-50 dark:bg-slate-950"> <!-- ภาพพื้นหลังตกแต่งแบบเบลอไล่สี (Background Radial Glows) --> <div class="absolute top-1/4 right-0 w-[300px] md:w-[600px] h-[300px] md:h-[600px] rounded-full bg-brand-500/10 dark:bg-brand-500/20 blur-[80px] md:blur-[120px] pointer-events-none animate-pulse-glow"> </div> <div class="absolute bottom-1/4 -left-20 w-[300px] md:w-[500px] h-[300px] md:h-[500px] rounded-full bg-accent-purple/10 dark:bg-accent-purple/15 blur-[80px] md:blur-[120px] pointer-events-none animate-pulse-glow" style="animation-delay: 2s;"></div> <div class="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- ข้อความแนะนําตัว (ซ้าย) --> <div class="lg:col-span-7 flex flex-col items-start text-left space-y-6 md:space-y-8 reveal-left active"> <!-- Badge ข้อความต้อนรับ --> <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-brand-100/80 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 border border-brand-200/50 dark:border-brand-500/20"> <span class="h-2 w-2 rounded-full bg-emerald-500 animate-ping"></span> พร้อมรับงานโปรเจกต์อิสระ & สัญญาจ้าง </span> <div class="space-y-4"> <h2 class="font-display font-medium text-lg md:text-xl text-slate-500 dark:text-slate-400">สวัสดีครับ ยินดีต้อนรับ! ผมชื่อ</h2> <h1 class="font-display font-extrabold text-4xl sm:text-5xl md:text-7xl leading-tight tracking-tight"> <span class="bg-gradient-to-r from-brand-500 via-accent-purple to-accent-pink bg-clip-text text-transparent">กชกร สุภาธง</span> </h1> <h2 class="font-display font-bold text-2xl sm:text-3xl md:text-4xl text-slate-800 dark:text-slate-200"> Senior Full-Stack Developer & <span class="text-accent-cyan">UI/UX Designer</span> </h2> </div> <p class="text-slate-600 dark:text-slate-300 text-base md:text-lg leading-relaxed max-w-2xl"> ผมเป็นผู้เชี่ยวชาญในการออกแบบและสร้างระบบเว็บแอปพลิเคชันที่ล้ำสมัย รองรับการใช้งานของคนจำนวนมาก (Scalable Web Apps) ด้วยการเขียนโค้ดที่สะอาด (Clean Code) โครงสร้างสถาปัตยกรรมที่แข็งแกร่ง และการคำนึงถึงประสบการณ์ผู้ใช้ (UI/UX) เป็นหลัก </p> <!-- ปุ่ม Call to Action (CTA) --> <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"> <a href="#projects" class="group flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-2xl shadow-xl shadow-brand-500/20 transition-all hover:-translate-y-0.5 active:translate-y-0"> ดูผลงานของฉัน <i data-lucide="arrow-up-right" class="w-5 h-5 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform"></i> </a> <a href="#contact" class="flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-2xl transition-all hover:-translate-y-0.5 active:translate-y-0"> ติดต่อฉัน <i data-lucide="mail" class="w-5 h-5"></i> </a> </div> <!-- โซเชียลมีเดียหลักด่วน --> <div class="flex items-center gap-6 pt-4 text-slate-400 dark:text-slate-500"> <span class="text-xs uppercase tracking-wider font-bold">เชื่อมต่อกับผม:</span> <a href="https://github.com" target="_blank" rel="noopener" class="hover:text-brand-500 transition-colors" aria-label="GitHub"><i data-lucide="github" class="w-5 h-5"></i></a> <a href="https://linkedin.com" target="_blank" rel="noopener" class="hover:text-brand-500 transition-colors" aria-label="LinkedIn"><i data-lucide="linkedin" class="w-5 h-5"></i></a> <a href="mailto:contact@chiradech.dev" class="hover:text-brand-500 transition-colors" aria-label="Email"><i data-lucide="mail" class="w-5 h-5"></i></a> </div> </div> <!-- รูปโปรไฟล์/องค์ประกอบตกแต่งแบบ Premium (ขวา) --> <div class="lg:col-span-5 flex justify-center items-center reveal-right active"> <div class="relative w-72 sm:w-80 md:w-96 aspect-square animate-float"> <!-- การ์ดกระจกซ้อนข้างหลังเพื่อความเป็นมิติ --> <div class="absolute inset-4 rounded-3xl bg-gradient-to-tr from-brand-500 to-accent-purple opacity-30 blur-2xl pointer-events-none"> </div> <!-- กรอบรูปหรูหราแบบ Glassmorphism --> <div class="absolute inset-0 rounded-[2.5rem] border-2 border-white/20 dark:border-white/5 bg-gradient-to-br from-white/10 to-transparent p-4 backdrop-blur-sm"> <div class="w-full h-full rounded-[2rem] overflow-hidden border border-white/40 dark:border-white/10 shadow-2xl relative"> <img src="assets/profile.png" alt="จิรเดช ศรีวิชัย Profile" class="w-full h-full object-cover"> <!-- Overlay เอฟเฟกต์แสงส่อง --> <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-transparent to-transparent"></div> <!-- กล่องสถิติด่วนติดขอบล่างของภาพ --> <div class="absolute bottom-4 left-4 right-4 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border border-white/30 dark:border-slate-800 p-3 rounded-2xl flex items-center justify-between shadow-lg"> <div class="flex items-center gap-2"> <div class="h-2 w-2 rounded-full bg-emerald-500 animate-ping"></div> <div class="text-[10px] sm:text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider"> ตำแหน่งปัจจุบัน</div> </div> <div class="text-xs font-semibold text-indigo-600 dark:text-indigo-400">Senior Full-Stack Eng.</div> </div> </div> </div> </div> </div> </div> </section> <!-- 3. ส่วนข้อมูลเกี่ยวกับฉัน (About Me Section) --> <section id="about" class="py-24 px-6 md:px-12 max-w-7xl mx-auto border-t border-slate-200/50 dark:border-slate-800/50"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-16"> <!-- ฝั่งสถิติและความเป็นมา (ซ้าย) --> <div class="lg:col-span-5 flex flex-col justify-center space-y-8 reveal"> <div class="space-y-4"> <span class="text-brand-500 font-display font-extrabold uppercase tracking-widest text-sm">ข้อมูลเกี่ยวกับฉัน</span> <h2 class="font-display font-extrabold text-3xl sm:text-4xl leading-tight"> ผู้พัฒนาโปรแกรมที่หลงรักการ <span class="bg-gradient-to-r from-brand-500 to-accent-cyan bg-clip-text text-transparent">แก้ไขปัญหา</span> ผ่านทางโค้ดดิ้ง </h2> </div> <p class="text-slate-600 dark:text-slate-300 leading-relaxed"> ผมเริ่มต้นเส้นทางนักพัฒนาระบบเพราะความชอบในการสร้างสรรค์สิ่งใหม่ ๆ ตั้งแต่การออกแบบโครงสร้างฐานข้อมูลที่มีประสิทธิภาพ ไปจนถึงการเขียนหน้าบ้านให้ตอบสนองได้รวดเร็ว ทุกโปรเจกต์คือโอกาสในการท้าทายขีดจำกัดตนเองและเรียนรู้เทคโนโลยีใหม่เสมอ </p> <!-- สถิติตัวเลขแสดงความสำเร็จ (Stats Grid) --> <div class="grid grid-cols-3 gap-6 pt-4"> <div class="space-y-1"> <div class="font-display font-black text-3xl sm:text-4xl text-indigo-600 dark:text-indigo-400">5+</div> <div class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-semibold">ปีประสบการณ์ </div> </div> <div class="space-y-1"> <div class="font-display font-black text-3xl sm:text-4xl text-indigo-600 dark:text-indigo-400">50+</div> <div class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-semibold"> โปรเจกต์สำเร็จ</div> </div> <div class="space-y-1"> <div class="font-display font-black text-3xl sm:text-4xl text-indigo-600 dark:text-indigo-400">99%</div> <div class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-semibold"> ความพึงพอใจลูกค้า</div> </div> </div> </div> <!-- ฝั่งการจัดกลุ่มทักษะความสามารถ (ขวา) --> <div class="lg:col-span-7 flex flex-col justify-center space-y-8 reveal"> <h3 class="font-display font-bold text-2xl text-slate-800 dark:text-slate-200"> ทักษะและความสามารถเฉพาะทาง (Skills & Expertise) </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- หมวดหมู่ Frontend --> <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/80 shadow-md hover:shadow-lg transition-shadow glow-card"> <div class="flex items-center gap-3 mb-4 text-indigo-600 dark:text-indigo-400"> <i data-lucide="layout" class="w-6 h-6"></i> <h4 class="font-display font-bold text-lg text-slate-800 dark:text-white">Frontend Web Dev</h4> </div> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">HTML5 / CSS3</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">JavaScript (ES6+)</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">React.js</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Next.js (App Router)</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Tailwind CSS</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">TypeScript</span> </div> </div> <!-- หมวดหมู่ Backend --> <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/80 shadow-md hover:shadow-lg transition-shadow glow-card"> <div class="flex items-center gap-3 mb-4 text-indigo-600 dark:text-indigo-400"> <i data-lucide="server" class="w-6 h-6"></i> <h4 class="font-display font-bold text-lg text-slate-800 dark:text-white">Backend & Databases</h4> </div> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Node.js / Express</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">PHP 7/8 (XAMPP)</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">MySQL / PostgreSQL</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">MongoDB</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">RESTful API Design</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">GraphQL</span> </div> </div> <!-- หมวดหมู่ DevOps & Tools --> <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/80 shadow-md hover:shadow-lg transition-shadow glow-card"> <div class="flex items-center gap-3 mb-4 text-indigo-600 dark:text-indigo-400"> <i data-lucide="settings" class="w-6 h-6"></i> <h4 class="font-display font-bold text-lg text-slate-800 dark:text-white">DevOps & Tools</h4> </div> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Git / GitHub</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Docker Containers</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">AWS (S3, EC2)</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Vercel / Netlify</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">CI/CD Pipelines</span> </div> </div> <!-- หมวดหมู่ UX/UI & Methodologies --> <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/80 shadow-md hover:shadow-lg transition-shadow glow-card"> <div class="flex items-center gap-3 mb-4 text-indigo-600 dark:text-indigo-400"> <i data-lucide="pen-tool" class="w-6 h-6"></i> <h4 class="font-display font-bold text-lg text-slate-800 dark:text-white">Design & UX/UI</h4> </div> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Figma App Design</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Design System</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Responsive Layouts</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Agile / Scrum</span> <span class="px-3 py-1 text-xs font-semibold rounded-lg bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300">User Testing</span> </div> </div> </div> </div> </div> </section> <!-- 4. ส่วนแสดงผลงาน (Projects / Portfolio Section) --> <section id="projects" class="py-24 bg-slate-100/60 dark:bg-slate-900/30 px-6 md:px-12"> <div class="max-w-7xl mx-auto"> <!-- หัวข้อหัวเรื่องแบบกลางหน้า --> <div class="text-center max-w-2xl mx-auto mb-16 reveal"> <span class="text-brand-500 font-display font-extrabold uppercase tracking-widest text-sm">คลังผลงาน</span> <h2 class="font-display font-extrabold text-3xl sm:text-4xl mt-3 mb-4">โปรเจกต์เด่นที่ผ่านมา</h2> <p class="text-slate-600 dark:text-slate-400"> นี่คือส่วนหนึ่งของโปรเจกต์ที่ผมได้ทุ่มเทพัฒนา โดยผสานเทคโนโลยีอันล้ำสมัยและการออกแบบสไตล์มินิมอลเพื่อการใช้งานที่ดีที่สุด </p> </div> <!-- ปุ่มฟิลเตอร์สำหรับกรองข้อมูล (Filter controls) --> <div class="flex flex-wrap items-center justify-center gap-3 mb-12 reveal"> <button type="button" class="filter-btn px-5 py-2 text-sm font-semibold rounded-full bg-indigo-600 text-white transition-all shadow-sm active:scale-95" data-filter="all">ทั้งหมด</button> <button type="button" class="filter-btn px-5 py-2 text-sm font-semibold rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all shadow-sm active:scale-95" data-filter="web">เว็บแอป</button> <button type="button" class="filter-btn px-5 py-2 text-sm font-semibold rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all shadow-sm active:scale-95" data-filter="mobile">มือถือ</button> <button type="button" class="filter-btn px-5 py-2 text-sm font-semibold rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all shadow-sm active:scale-95" data-filter="uiux">ดีไซน์</button> </div> <!-- โครงข่ายแสดงผลงาน (Projects Grid Layout) --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- โปรเจกต์ที่ 1 (SaaS Dashboard) --> <div class="project-card flex flex-col rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl" data-category="web"> <div class="relative aspect-[16/10] overflow-hidden group"> <img src="assets/project1.png" alt="SaaS Web Analytics" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> <span class="absolute top-4 right-4 bg-brand-500 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-full">Web App</span> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div class="space-y-3"> <h3 class="font-display font-bold text-xl text-slate-800 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"> SaaS Web Analytics Dashboard </h3> <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed"> ระบบจัดการและวิเคราะห์ข้อมูลผู้เข้าชมเว็บแอปพลิเคชันแบบ Real-time วิเคราะห์ปริมาณเข้าชม แสดงผลด้วยกราฟิกความละเอียดสูงอย่างสมบูรณ์แบบ </p> <!-- Tags เทคโนโลยีที่ใช้ --> <div class="flex flex-wrap gap-1.5 pt-2"> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">React.js</span> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">Tailwind</span> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">ChartJS</span> </div> </div> <!-- ปุ่มเชื่อมต่อ (Action links) --> <div class="flex items-center justify-between pt-6 mt-6 border-t border-slate-100 dark:border-slate-800"> <a href="https://github.com" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-xs font-semibold text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-white transition-colors"> <i data-lucide="github" class="w-4 h-4"></i> ซอร์สโค้ด GitHub </a> <a href="https://example.com" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-xs font-bold text-indigo-600 dark:text-indigo-400 hover:underline"> เข้าชมระบบจริง <i data-lucide="external-link" class="w-3.5 h-3.5"></i> </a> </div> </div> </div> <!-- โปรเจกต์ที่ 2 (Smart Home App) --> <div class="project-card flex flex-col rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl" data-category="mobile"> <div class="relative aspect-[16/10] overflow-hidden group"> <img src="assets/project2.png" alt="Smart Home App" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> <span class="absolute top-4 right-4 bg-brand-500 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-full">Mobile App</span> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div class="space-y-3"> <h3 class="font-display font-bold text-xl text-slate-800 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"> IoT Smart Home Assistant </h3> <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed"> แอปพลิเคชันควบคุมอุปกรณ์สมาร์ทโฮมและไฟฟ้าภายในบ้านแบบไร้สาย มีระบบแจ้งเตือนอัจฉริยะ ทำงานร่วมกับ API สำหรับอุปกรณ์ภายนอก </p> <!-- Tags เทคโนโลยี --> <div class="flex flex-wrap gap-1.5 pt-2"> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">React Native</span> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">Tailwind</span> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">Node / IoT</span> </div> </div> <!-- ปุ่มเชื่อมต่อ --> <div class="flex items-center justify-between pt-6 mt-6 border-t border-slate-100 dark:border-slate-800"> <a href="https://github.com" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-xs font-semibold text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-white transition-colors"> <i data-lucide="github" class="w-4 h-4"></i> ซอร์สโค้ด GitHub </a> <a href="https://example.com" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-xs font-bold text-indigo-600 dark:text-indigo-400 hover:underline"> ดูผลการทดสอบ <i data-lucide="external-link" class="w-3.5 h-3.5"></i> </a> </div> </div> </div> <!-- โปรเจกต์ที่ 3 (E-Commerce UI/UX) --> <div class="project-card flex flex-col rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl" data-category="uiux"> <div class="relative aspect-[16/10] overflow-hidden group"> <img src="assets/project3.png" alt="E-Commerce UX Design" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> <span class="absolute top-4 right-4 bg-brand-500 text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-full">UI/UX Design</span> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div class="space-y-3"> <h3 class="font-display font-bold text-xl text-slate-800 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"> E-Commerce Design System </h3> <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed"> การสร้างระบบองค์ประกอบดีไซน์ (Design System) ของแอป E-Commerce เพื่อใช้ร่วมกันทั้งแผนกพัฒนาเพื่อความเป็นระเบียบและเป็นอันหนึ่งอันเดียวกัน </p> <!-- Tags เทคโนโลยี --> <div class="flex flex-wrap gap-1.5 pt-2"> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">Figma</span> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">Design Token</span> <span class="px-2 py-0.5 text-[10px] font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 rounded-md">Wireframing</span> </div> </div> <!-- ปุ่มเชื่อมต่อ --> <div class="flex items-center justify-between pt-6 mt-6 border-t border-slate-100 dark:border-slate-800"> <a href="https://figma.com" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-xs font-semibold text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-white transition-colors"> <i data-lucide="figma" class="w-4 h-4"></i> ไฟล์แบบ Figma </a> <a href="https://example.com" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-xs font-bold text-indigo-600 dark:text-indigo-400 hover:underline"> เปิดเคสศึกษา <i data-lucide="external-link" class="w-3.5 h-3.5"></i> </a> </div> </div> </div> </div> </div> </section> <!-- 5. ส่วนประสบการณ์การทำงาน (Experience/Timeline Section) --> <section id="experience" class="py-24 px-6 md:px-12 max-w-4xl mx-auto"> <!-- หัวข้อหัวเรื่อง --> <div class="text-center mb-16 reveal"> <span class="text-brand-500 font-display font-extrabold uppercase tracking-widest text-sm">ประวัติความเป็นมา</span> <h2 class="font-display font-extrabold text-3xl sm:text-4xl mt-3 mb-4">เส้นทางการทำงาน</h2> </div> <!-- ไทม์ไลน์คอนเทนเนอร์ (Timeline Container) --> <div class="relative timeline-line pl-8 md:pl-0 space-y-12"> <!-- ตำแหน่งที่ 1 (Senior Dev) --> <div class="relative md:flex md:justify-between items-center w-full reveal"> <!-- เส้นจุดกลมนำแสง (Node Dot) --> <div class="absolute -left-[24px] md:left-1/2 md:-translate-x-1/2 z-10 w-6 h-6 rounded-full bg-slate-900 border-4 border-indigo-500 dark:bg-white flex items-center justify-center shadow-lg"> </div> <!-- ฝั่งซ้าย (เวลา - Desktop Only) --> <div class="hidden md:block md:w-[45%] text-right pr-8"> <span class="inline-block text-indigo-600 dark:text-indigo-400 font-display font-bold text-sm tracking-wider uppercase bg-indigo-50 dark:bg-indigo-950/40 px-3.5 py-1.5 rounded-full border border-indigo-200/40 dark:border-indigo-500/20"> พ.ศ. 2567 - ปัจจุบัน </span> </div> <!-- ฝั่งขวา (การ์ดข้อความ) --> <div class="w-full md:w-[45%] md:pl-8"> <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-md"> <span class="inline-block md:hidden mb-2 text-indigo-600 dark:text-indigo-400 font-display font-bold text-xs tracking-wider uppercase bg-indigo-50 dark:bg-indigo-950/40 px-3 py-1 rounded-full border border-indigo-200/40 dark:border-indigo-500/20"> พ.ศ. 2567 - ปัจจุบัน </span> <h3 class="font-display font-bold text-lg text-slate-800 dark:text-white">Senior Full-Stack Developer</h3> <h4 class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-4">TechSolutions Co., Ltd.</h4> <ul class="text-sm text-slate-600 dark:text-slate-300 list-disc list-inside space-y-2 leading-relaxed"> <li>เป็นผู้นำทีมย้ายฐานโค้ดเดิมไปยัง Next.js App Router เพิ่มความเร็วการเปิดหน้าเว็บ 40%</li> <li>ออกแบบ REST API ด้วย Node.js เชื่อมต่อข้อมูล MySQL ประสิทธิภาพสูง</li> <li>ร่วมวางแผนกระบวนการ CI/CD การ Deploy โครงการผ่าน Docker</li> </ul> </div> </div> </div> <!-- ตำแหน่งที่ 2 (Full-Stack Dev) --> <div class="relative md:flex md:justify-between items-center w-full reveal"> <!-- Node Dot --> <div class="absolute -left-[24px] md:left-1/2 md:-translate-x-1/2 z-10 w-6 h-6 rounded-full bg-slate-900 border-4 border-indigo-500 dark:bg-white flex items-center justify-center shadow-lg"> </div> <!-- ฝั่งซ้าย (การ์ดข้อความสำหรับสลับสไตล์) --> <div class="w-full md:w-[45%] md:text-right md:pr-8 md:order-1"> <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-md text-left"> <span class="inline-block md:hidden mb-2 text-indigo-600 dark:text-indigo-400 font-display font-bold text-xs tracking-wider uppercase bg-indigo-50 dark:bg-indigo-950/40 px-3 py-1 rounded-full border border-indigo-200/40 dark:border-indigo-500/20"> พ.ศ. 2565 - 2567 </span> <h3 class="font-display font-bold text-lg text-slate-800 dark:text-white">Full-Stack Developer</h3> <h4 class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-4">Innovations Lab</h4> <ul class="text-sm text-slate-600 dark:text-slate-300 list-disc list-inside space-y-2 leading-relaxed"> <li>พัฒนาเว็บแอปพลิเคชันระบบขายสินค้าออนไลน์แบบ Custom สำหรับลูกค้าขนาดใหญ่</li> <li>เชื่อมโยงระบบการจ่ายเงินผ่านบัตรเครดิตและพร้อมเพย์ผ่าน Payment API ท้องถิ่น</li> <li>จัดการและดูแลเซิร์ฟเวอร์ฐานข้อมูลให้ตอบสนองต่อผู้ใช้ได้อย่างไร้รอยต่อ</li> </ul> </div> </div> <!-- ฝั่งขวา (เวลา - Desktop Only) --> <div class="hidden md:block md:w-[45%] pl-8 md:order-2"> <span class="inline-block text-indigo-600 dark:text-indigo-400 font-display font-bold text-sm tracking-wider uppercase bg-indigo-50 dark:bg-indigo-950/40 px-3.5 py-1.5 rounded-full border border-indigo-200/40 dark:border-indigo-500/20"> พ.ศ. 2565 - 2567 </span> </div> </div> <!-- ตำแหน่งที่ 3 (Frontend Dev) --> <div class="relative md:flex md:justify-between items-center w-full reveal"> <!-- Node Dot --> <div class="absolute -left-[24px] md:left-1/2 md:-translate-x-1/2 z-10 w-6 h-6 rounded-full bg-slate-900 border-4 border-indigo-500 dark:bg-white flex items-center justify-center shadow-lg"> </div> <!-- ฝั่งซ้าย (เวลา - Desktop Only) --> <div class="hidden md:block md:w-[45%] text-right pr-8"> <span class="inline-block text-indigo-600 dark:text-indigo-400 font-display font-bold text-sm tracking-wider uppercase bg-indigo-50 dark:bg-indigo-950/40 px-3.5 py-1.5 rounded-full border border-indigo-200/40 dark:border-indigo-500/20"> พ.ศ. 2563 - 2565 </span> </div> <!-- ฝั่งขวา (การ์ดข้อความ) --> <div class="w-full md:w-[45%] md:pl-8"> <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-md"> <span class="inline-block md:hidden mb-2 text-indigo-600 dark:text-indigo-400 font-display font-bold text-xs tracking-wider uppercase bg-indigo-50 dark:bg-indigo-950/40 px-3 py-1 rounded-full border border-indigo-200/40 dark:border-indigo-500/20"> พ.ศ. 2563 - 2565 </span> <h3 class="font-display font-bold text-lg text-slate-800 dark:text-white">Frontend Web Developer</h3> <h4 class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-4">Creative Digital Studio</h4> <ul class="text-sm text-slate-600 dark:text-slate-300 list-disc list-inside space-y-2 leading-relaxed"> <li>รับผิดชอบการแปลงไฟล์ออกแบบ Figma ให้เป็นสไตล์ Responsive HTML/React สวยงาม</li> <li>ปรับแต่งความเร็วการแสดงผลหน้าเพจ และทำ SEO พื้นฐานให้ลูกค้าติดหน้าหนึ่ง Google</li> <li>ควบคุมคุณภาพโค้ดด้าน UI ให้เป็นไปตามมาตรฐานการออกแบบอย่างเข้มงวด</li> </ul> </div> </div> </div> </div> </section> <!-- 6. ส่วนฟอร์มติดต่อ (Contact Section) --> <section id="contact" class="py-24 bg-slate-100/60 dark:bg-slate-900/30 px-6 md:px-12"> <div class="max-w-7xl mx-auto"> <!-- หัวข้อฟอร์ม --> <div class="text-center max-w-2xl mx-auto mb-16 reveal"> <span class="text-brand-500 font-display font-extrabold uppercase tracking-widest text-sm">การติดต่อ</span> <h2 class="font-display font-extrabold text-3xl sm:text-4xl mt-3 mb-4">เริ่มต้นส่งข้อความหาผม</h2> <p class="text-slate-600 dark:text-slate-400"> หากมีโปรเจกต์งานที่น่าสนใจ ข้อสงสัย หรือเพียงต้องการพูดคุยทำความรู้จัก สามารถกรอกฟอร์มส่งอีเมลหาผมได้ทันทีครับ </p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12"> <!-- ฝั่งข้อมูลการติดต่อ (ซ้าย) --> <div class="lg:col-span-5 flex flex-col justify-between space-y-8 reveal-left"> <div class="space-y-6"> <h3 class="font-display font-bold text-2xl text-slate-800 dark:text-white">ช่องทางออนไลน์และออฟไลน์</h3> <p class="text-slate-600 dark:text-slate-300"> ยินดีรับพูดคุย แนะนำให้คำปรึกษา แลกเปลี่ยนไอเดียด้านซอฟต์แวร์ หรือปรึกษาเกี่ยวกับโปรเจกต์ของคุณ </p> <!-- การ์ดข้อมูลติดต่อแต่ละช่องทาง --> <div class="space-y-4"> <!-- อีเมล --> <div class="flex items-center gap-4 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800"> <div class="h-10 w-10 rounded-xl bg-indigo-50 dark:bg-slate-800 flex items-center justify-center text-indigo-600 dark:text-indigo-400"> <i data-lucide="mail" class="w-5 h-5"></i> </div> <div> <div class="text-[10px] uppercase font-bold text-slate-400">อีเมลส่วนตัว</div> <a href="mailto:contact@chiradech.dev" class="text-sm font-semibold text-slate-700 dark:text-slate-200 hover:text-brand-500">contact@chiradech.dev</a> </div> </div> <!-- เบอร์โทรศัพท์ --> <div class="flex items-center gap-4 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800"> <div class="h-10 w-10 rounded-xl bg-indigo-50 dark:bg-slate-800 flex items-center justify-center text-indigo-600 dark:text-indigo-400"> <i data-lucide="phone" class="w-5 h-5"></i> </div> <div> <div class="text-[10px] uppercase font-bold text-slate-400">เบอร์โทรศัพท์</div> <a href="tel:+6688888888" class="text-sm font-semibold text-slate-700 dark:text-slate-200 hover:text-brand-500">+66 (0) 88-888-8888</a> </div> </div> <!-- สถานที่ทำงาน --> <div class="flex items-center gap-4 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800"> <div class="h-10 w-10 rounded-xl bg-indigo-50 dark:bg-slate-800 flex items-center justify-center text-indigo-600 dark:text-indigo-400"> <i data-lucide="map-pin" class="w-5 h-5"></i> </div> <div> <div class="text-[10px] uppercase font-bold text-slate-400">ที่อยู่ / พื้นที่ทำงาน</div> <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">กรุงเทพมหานคร, ประเทศไทย (Hybrid/Remote)</span> </div> </div> </div> </div> <!-- ลิงก์ Social Media --> <div class="space-y-4"> <h4 class="text-xs uppercase tracking-wider font-bold text-slate-400">ช่องทางติดตาม:</h4> <div class="flex gap-4"> <a href="https://github.com" target="_blank" rel="noopener" class="h-12 w-12 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-brand-500 flex items-center justify-center text-slate-600 hover:text-brand-500 dark:text-slate-400 dark:hover:text-white transition-all shadow-sm" aria-label="GitHub"> <i data-lucide="github" class="w-5 h-5"></i> </a> <a href="https://linkedin.com" target="_blank" rel="noopener" class="h-12 w-12 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-brand-500 flex items-center justify-center text-slate-600 hover:text-brand-500 dark:text-slate-400 dark:hover:text-white transition-all shadow-sm" aria-label="LinkedIn"> <i data-lucide="linkedin" class="w-5 h-5"></i> </a> <a href="https://medium.com" target="_blank" rel="noopener" class="h-12 w-12 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-brand-500 flex items-center justify-center text-slate-600 hover:text-brand-500 dark:text-slate-400 dark:hover:text-white transition-all shadow-sm" aria-label="Medium"> <i data-lucide="book-open" class="w-5 h-5"></i> </a> </div> </div> </div> <!-- ฝั่งกล่องฟอร์มกรอกข้อความ (ขวา) --> <div class="lg:col-span-7 reveal-right"> <div class="p-8 md:p-10 rounded-[2rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-xl relative overflow-hidden"> <!-- เอฟเฟกต์สีขอบแสงเหนือกล่องฟอร์ม --> <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-brand-500 via-accent-purple to-accent-pink"> </div> <form id="contact-form" class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- ชื่อผู้ติดต่อ --> <div class="space-y-2"> <label for="name" class="text-sm font-semibold text-slate-700 dark:text-slate-300">ชื่อของคุณ <span class="text-rose-500">*</span></label> <input type="text" id="name" name="name" required placeholder="สมชาย ใจดี" class="w-full px-4 py-3.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"> </div> <!-- อีเมล --> <div class="space-y-2"> <label for="email" class="text-sm font-semibold text-slate-700 dark:text-slate-300">อีเมล <span class="text-rose-500">*</span></label> <input type="email" id="email" name="email" required placeholder="somchai@email.com" class="w-full px-4 py-3.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"> </div> </div> <!-- หัวข้อข้อความ --> <div class="space-y-2"> <label for="subject" class="text-sm font-semibold text-slate-700 dark:text-slate-300">หัวข้อติดต่อ</label> <input type="text" id="subject" name="subject" placeholder="ปรึกษาการทำเว็บไซต์ / ติดต่องาน" class="w-full px-4 py-3.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"> </div> <!-- กล่องพิมพ์ข้อความหลัก --> <div class="space-y-2"> <label for="message" class="text-sm font-semibold text-slate-700 dark:text-slate-300">ข้อความรายละเอียด <span class="text-rose-500">*</span></label> <textarea id="message" name="message" rows="5" required placeholder="พิมพ์ข้อความของคุณที่นี่..." class="w-full px-4 py-3.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all resize-none"></textarea> </div> <!-- ปุ่มส่งข้อมูล --> <button type="submit" class="w-full flex items-center justify-center gap-2 px-6 py-4 text-base font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl transition-all shadow-lg shadow-indigo-600/20 active:scale-[0.98]"> ส่งข้อความหาผม <i data-lucide="send" class="w-4 h-4"></i> </button> </form> </div> </div> </div> </div> </section> <!-- 7. ส่วนท้ายเว็บ (Footer Section) --> <footer class="bg-white dark:bg-slate-950 border-t border-slate-100 dark:border-slate-900 py-12 px-6 md:px-12 text-center text-sm text-slate-500 dark:text-slate-400"> <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6"> <!-- ชื่อผู้เขียน --> <div class="flex items-center gap-2"> <div class="h-6 w-6 rounded-md bg-gradient-to-tr from-brand-500 to-accent-purple flex items-center justify-center text-white font-display font-extrabold text-xs"> JS </div> <span class="font-display font-bold text-slate-800 dark:text-white">Chiradech Srivichai</span> </div> <!-- ลิงก์ด่วน --> <div class="flex gap-6 font-medium"> <a href="#home" class="hover:text-brand-500 transition-colors">หน้าแรก</a> <a href="#about" class="hover:text-brand-500 transition-colors">เกี่ยวกับฉัน</a> <a href="#projects" class="hover:text-brand-500 transition-colors">ผลงาน</a> <a href="#contact" class="hover:text-brand-500 transition-colors">ติดต่อ</a> </div> <!-- ลิขสิทธิ์ --> <div> © 2026 Chiradech Srivichai. สงวนลิขสิทธิ์ทั้งหมด </div> </div> </footer> <!-- App Script Load --> <script src="js/app.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.24 |
proxy
|
phpinfo
|
Settings