File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090018/portfolio/69319090018/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) และคำอธิบาย (Description) ได้ที่นี่ ================================================================== --> <title>รัฐภูมิ สุขแยง \| Personal Profile</title> <meta name="description" content="แนะนำตัวและผลงานของ รัฐภูมิ สุขแยง - นักศึกษาฝึกงานสายดีไซน์และสร้างเว็บไซต์"> <!-- Google Fonts: Prompt & Outfit --> <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=Outfit:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', // รองรับการสลับโหมดมืด-สว่างผ่านการใส่คลาส 'dark' ที่แท็ก <html> theme: { extend: { fontFamily: { sans: ['Prompt', 'Outfit', 'sans-serif'], }, colors: { // สีโหมดสว่าง (โทนอุ่น ครีม-น้ำตาลมินิมอล) warm: { 50: '#fdfbf7', 100: '#fcfaf2', 200: '#f5efe6', 300: '#e8ded2', 400: '#d5c3b1', 500: '#bd9f86', 600: '#a37f63', 700: '#866147', 850: '#5a3f2c', 900: '#483120', }, // สีโหมดมืด (Warm Charcoal / Brownish Dark) coffeeDark: { 50: '#181514', 100: '#1f1a19', 200: '#141110', } } } } } </script> <!-- Lucide Icons CDN สำหรับแสดงไอคอนสวยๆ --> <script src="https://unpkg.com/lucide@latest"></script> <!-- สไตล์สำหรับ Transition นุ่มนวลตอนกดสลับโหมด --> <style> body, header, section, div, p, h1, h2, h3, span, a, button, input, textarea, i { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } </style> </head> <body class="bg-warm-50 text-stone-800 dark:bg-coffeeDark-50 dark:text-stone-200 min-h-screen flex flex-col font-sans selection:bg-warm-500 selection:text-white transition-colors duration-300"> <!-- ========================================== Navigation Bar ========================================== --> <header class="sticky top-0 z-50 bg-warm-100/90 dark:bg-coffeeDark-100/90 backdrop-blur-md border-b border-warm-200 dark:border-stone-850"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16"> <!-- Logo / Name --> <a href="#" class="text-xl font-bold tracking-tight text-warm-800 dark:text-warm-400"> Rattaphoom.S </a> <!-- Menu Navigation & Switch Theme Button --> <div class="flex items-center space-x-6"> <nav class="hidden md:flex space-x-8"> <a href="#hero" class="text-stone-600 dark:text-stone-400 hover:text-warm-700 dark:hover:text-warm-300 font-medium">หน้าแรก</a> <a href="#story" class="text-stone-600 dark:text-stone-400 hover:text-warm-700 dark:hover:text-warm-300 font-medium">เรื่องราวของฉัน</a> <a href="#skills" class="text-stone-600 dark:text-stone-400 hover:text-warm-700 dark:hover:text-warm-300 font-medium">ทักษะ</a> <a href="#contact" class="text-stone-600 dark:text-stone-400 hover:text-warm-700 dark:hover:text-warm-300 font-medium">ติดต่อ</a> </nav> <!-- ปุ่มสลับโหมด มืด / สว่าง (Dark/Light Toggle Button) --> <button id="theme-toggle" type="button" class="p-2.5 rounded-full bg-warm-200 dark:bg-stone-800 text-stone-700 dark:text-warm-300 hover:scale-105 active:scale-95 transition" aria-label="สลับโหมดมืดสว่าง"> <!-- ตัวเปลี่ยนไอคอน Sun/Moon จะทำงานผ่าน JavaScript ด้านล่าง --> <i id="theme-toggle-icon" data-lucide="sun" class="w-5 h-5"></i> </button> <!-- Mobile Hamburger Toggle Button --> <button id="mobile-menu-btn" type="button" class="md:hidden p-2 rounded-lg text-stone-600 dark:text-stone-400 hover:bg-warm-200 dark:hover:bg-stone-800 focus:outline-none" aria-label="เปิดเมนู"> <i id="icon-hamburger" data-lucide="menu" class="w-6 h-6"></i> <i id="icon-close" data-lucide="x" class="w-6 h-6 hidden"></i> </button> </div> </div> </div> <!-- Mobile Drawer Menu --> <div class="hidden md:hidden bg-warm-100 dark:bg-coffeeDark-100 border-b border-warm-200 dark:border-stone-800 flex-col px-4 pt-2 pb-4 space-y-2" id="mobile-menu"> <a href="#hero" class="text-stone-700 dark:text-stone-300 hover:text-warm-700 block px-3 py-2 rounded-md font-medium">หน้าแรก</a> <a href="#story" class="text-stone-700 dark:text-stone-300 hover:text-warm-700 block px-3 py-2 rounded-md font-medium">ประวัติของฉัน</a> <a href="#skills" class="text-stone-700 dark:text-stone-300 hover:text-warm-700 block px-3 py-2 rounded-md font-medium">ทักษะ</a> <a href="#contact" class="text-stone-700 dark:text-stone-300 hover:text-warm-700 block px-3 py-2 rounded-md font-medium">ติดต่อ</a> </div> </header> <main class="flex-grow"> <!-- ========================================== Hero Section ========================================== --> <section id="hero" class="min-h-[calc(100vh-4rem)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- Text intro --> <div class="lg:col-span-7 text-center lg:text-left space-y-6"> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-warm-200 dark:bg-stone-800 text-warm-850 dark:text-warm-300 text-sm font-medium"> <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Available for Internship </div> <!-- ================================================================== [แก้ไขข้อมูลตรงนี้] เปลี่ยนชื่อของคุณตรงนี้ได้เลย ================================================================== --> <h1 class="text-4xl sm:text-6xl font-bold tracking-tight"> สวัสดีครับ, ผม <span class="text-warm-700 dark:text-warm-400">รัฐภูมิ สุขแยง</span> </h1> <!-- ================================================================== [แก้ไขข้อมูลตรงนี้] เปลี่ยนตำแหน่ง / สิ่งที่ทำได้ที่นี่ ================================================================== --> <p class="text-xl font-medium text-stone-600 dark:text-stone-400"> นักศึกษาฝึกงานสายดีไซน์และสร้างเว็บไซต์ </p> <p class="text-stone-500 dark:text-stone-400 max-w-xl mx-auto lg:mx-0 leading-relaxed"> ยินดีต้อนรับเข้าสู่พื้นที่บอกเล่าเรื่องราว ความหลงใหลในงานออกแบบ และความมุ่งมั่นในการเรียนรู้เพื่อพัฒนาเทคโนโลยีเว็บไซต์ที่สวยงามและใช้งานง่ายสำหรับทุกคน ผมอายุ 19 ปี เกิดวันที่ 30 พฤษภาคม พ.ศ.2550 </p> <div class="flex flex-wrap justify-center lg:justify-start gap-4 pt-2"> <a href="#story" class="px-6 py-3 bg-warm-700 hover:bg-warm-800 text-white dark:bg-warm-500 dark:hover:bg-warm-600 font-medium rounded-xl shadow-sm hover:shadow-md transition"> อ่านเรื่องราวของผม </a> <a href="#contact" class="px-6 py-3 border border-warm-300 dark:border-stone-700 hover:bg-warm-200 dark:hover:bg-stone-800 font-medium rounded-xl transition"> พูดคุยติดต่อ </a> </div> </div> <!-- Profile Image Wrapper --> <div class="lg:col-span-5 flex justify-center"> <div class="relative group"> <div class="absolute inset-0 bg-gradient-to-tr from-warm-400 to-warm-200 dark:from-warm-700 dark:to-warm-900 rounded-2xl blur-xl opacity-35 group-hover:opacity-50 transition duration-500"> </div> <div class="relative w-72 h-80 sm:w-80 sm:h-96 rounded-2xl overflow-hidden border border-warm-300 dark:border-stone-800 shadow-lg bg-warm-200 dark:bg-stone-800"> <!-- ================================================================== [แก้ไขข้อมูลตรงนี้] ใส่ URL รูปภาพพอร์ตเทรตของคุณที่ src ด้านล่างนี้ได้เลย ================================================================== --> <img src="images/my-profile.jpg" alt="Rattaphoom Portrait" class="w-full h-full object-cover filter border-2 border-warm-300 rounded-lg hover:scale-105"> </div> </div> </div> </div> </section> <!-- ========================================== My Story Section ========================================== --> <section id="story" class="py-24 px-4 sm:px-6 lg:px-8 bg-warm-200/50 dark:bg-coffeeDark-200/30 border-t border-warm-200 dark:border-stone-900"> <div class="max-w-4xl mx-auto space-y-16"> <!-- Header --> <div class="text-center space-y-2"> <h2 class="text-3xl font-bold tracking-tight text-stone-850 dark:text-stone-100">เรื่องราวของฉัน</h2> <p class="text-stone-500 dark:text-stone-400">ประวัติความเป็นมา การศึกษา และงานอดิเรกของผม</p> <div class="h-1 w-16 bg-warm-600 dark:bg-warm-400 mx-auto rounded-full mt-3"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-start"> <!-- Story Narrative --> <div class="space-y-6"> <h3 class="text-2xl font-bold text-warm-850 dark:text-warm-350">ความเป็นมาและความสนใจ</h3> <p class="text-stone-600 dark:text-stone-400 leading-relaxed"> ผมมีความสนใจในโลกดิจิทัลและการออกแบบมาโดยตลอด การสร้างเว็บไซต์เป็นช่องทางหนึ่งที่ทำให้ผมสามารถถ่ายทอดจินตนาการและงานศิลปะออกมาผ่านโค้ดและโครงสร้างที่ผู้ใช้ทั่วไปสามารถโต้ตอบได้ </p> <h4 class="font-semibold text-stone-700 dark:text-stone-300">งานอดิเรกที่ชอบ:</h4> <div class="grid grid-cols-3 gap-3"> <div class="bg-warm-100 dark:bg-stone-800 p-3 rounded-lg text-center border border-warm-300/40 dark:border-stone-700/60"> <div class="w-10 h-10 rounded-full bg-warm-200 dark:bg-stone-700 flex items-center justify-center text-warm-700 dark:text-warm-300 mx-auto mb-2"> <i data-lucide="gamepad-2" class="w-5 h-5"></i> </div> <span class="text-xs font-medium">เล่นเกม</span> </div> <div class="bg-warm-100 dark:bg-stone-800 p-3 rounded-lg text-center border border-warm-300/40 dark:border-stone-700/60"> <div class="w-10 h-10 rounded-full bg-warm-200 dark:bg-stone-700 flex items-center justify-center text-warm-700 dark:text-warm-300 mx-auto mb-2"> <i data-lucide="dumbbell" class="w-5 h-5"></i> </div> <span class="text-xs font-medium">ออกกำลังกาย</span> </div> <div class="bg-warm-100 dark:bg-stone-800 p-3 rounded-lg text-center border border-warm-300/40 dark:border-stone-700/60"> <div class="w-10 h-10 rounded-full bg-warm-200 dark:bg-stone-700 flex items-center justify-center text-warm-700 dark:text-warm-300 mx-auto mb-2"> <i data-lucide="book-open" class="w-5 h-5"></i> </div> <span class="text-xs font-medium">อ่านการ์ตูน</span> </div> </div> </div> <!-- Education Timeline --> <div class="space-y-6"> <h3 class="text-2xl font-bold text-warm-850 dark:text-warm-350">ประวัติการศึกษา</h3> <div class="border-l-2 border-warm-300 dark:border-stone-800 pl-6 space-y-8 relative"> <!-- Education Item 1 --> <div class="relative"> <span class="absolute -left-[31px] top-1.5 bg-warm-500 dark:bg-warm-600 w-4 h-4 rounded-full border-4 border-warm-50 dark:border-coffeeDark-50"></span> <span class="text-sm font-semibold text-warm-600 dark:text-warm-400">ปัจจุบัน</span> <h4 class="text-lg font-bold">ประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.)</h4> <p class="text-stone-500 dark:text-stone-400 text-sm">วิทยาลัยเทคนิคเชียงใหม่</p> </div> <!-- Education Item 2 --> <div class="relative"> <span class="absolute -left-[31px] top-1.5 bg-warm-300 dark:bg-stone-700 w-4 h-4 rounded-full border-4 border-warm-50 dark:border-coffeeDark-50"></span> <span class="text-sm font-semibold text-stone-400">มัธยมศึกษาปีที่ 1 - 3</span> <h4 class="text-lg font-bold">โรงเรียนอนุบาลสานสายใยรัก</h4> <p class="text-stone-500 dark:text-stone-400 text-sm">การศึกษาระดับมัธยมศึกษาตอนต้น</p> </div> <!-- Education Item 3 --> <div class="relative"> <span class="absolute -left-[31px] top-1.5 bg-warm-300 dark:bg-stone-700 w-4 h-4 rounded-full border-4 border-warm-50 dark:border-coffeeDark-50"></span> <span class="text-sm font-semibold text-stone-400">ประถมศึกษาปีที่ 1 - 6</span> <h4 class="text-lg font-bold">โรงเรียนอนุบาลสานสายใยรัก</h4> <p class="text-stone-500 dark:text-stone-400 text-sm">การศึกษาขั้นพื้นฐานระดับประถมศึกษา</p> </div> </div> </div> </div> </div> </section> <!-- ========================================== Skills & Passions Section ========================================== --> <section id="skills" class="py-24 px-4 sm:px-6 lg:px-8 border-t border-warm-200 dark:border-stone-900"> <div class="max-w-6xl mx-auto space-y-16"> <!-- Header --> <div class="text-center space-y-2"> <h2 class="text-3xl font-bold tracking-tight">ทักษะและความสามารถ</h2> <p class="text-stone-500 dark:text-stone-400">เครื่องมือและเทคโนโลยีหลักที่สนใจและใช้งาน</p> <div class="h-1 w-16 bg-warm-600 dark:bg-warm-400 mx-auto rounded-full mt-3"></div> </div> <!-- Cards Layout --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- Card 1: Web Design --> <div class="bg-warm-100 dark:bg-stone-800 p-6 rounded-2xl border border-warm-200 dark:border-stone-700/60 hover:shadow-md transition group"> <div class="w-12 h-12 rounded-xl bg-warm-200 dark:bg-stone-700 flex items-center justify-center text-warm-700 dark:text-warm-300 mb-4 group-hover:scale-110 transition duration-300"> <i data-lucide="palette" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold mb-2">Web Design</h3> <p class="text-stone-500 dark:text-stone-400 text-sm leading-relaxed"> การออกแบบโครงสร้าง UI/UX และเลย์เอาต์หน้าเว็บให้ดึงดูดสายตาและสมดุล </p> </div> <!-- Card 2: Frontend Tech --> <div class="bg-warm-100 dark:bg-stone-800 p-6 rounded-2xl border border-warm-200 dark:border-stone-700/60 hover:shadow-md transition group"> <div class="w-12 h-12 rounded-xl bg-warm-200 dark:bg-stone-700 flex items-center justify-center text-warm-700 dark:text-warm-300 mb-4 group-hover:scale-110 transition duration-300"> <i data-lucide="code-2" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold mb-2">HTML & CSS</h3> <p class="text-stone-500 dark:text-stone-400 text-sm leading-relaxed"> การพัฒนาโครงสร้างหน้าเว็บด้วยเทคโนโลยี HTML5 และจัดแต่งสไตล์ด้วย Tailwind CSS/CSS3 </p> </div> <!-- Card 3: JS & Interactions --> <div class="bg-warm-100 dark:bg-stone-800 p-6 rounded-2xl border border-warm-200 dark:border-stone-700/60 hover:shadow-md transition group"> <div class="w-12 h-12 rounded-xl bg-warm-200 dark:bg-stone-700 flex items-center justify-center text-warm-700 dark:text-warm-300 mb-4 group-hover:scale-110 transition duration-300"> <i data-lucide="braces" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold mb-2">JavaScript</h3> <p class="text-stone-500 dark:text-stone-400 text-sm leading-relaxed"> สร้างลูกเล่น การตอบสนอง และฟังก์ชันเชิงโต้ตอบต่างๆ ให้ผู้ใช้ได้รับประสบการณ์ที่ยอดเยี่ยม </p> </div> <!-- Card 4: Responsive Layouts --> <div class="bg-warm-100 dark:bg-stone-800 p-6 rounded-2xl border border-warm-200 dark:border-stone-700/60 hover:shadow-md transition group"> <div class="w-12 h-12 rounded-xl bg-warm-200 dark:bg-stone-700 flex items-center justify-center text-warm-700 dark:text-warm-300 mb-4 group-hover:scale-110 transition duration-300"> <i data-lucide="tablet-smartphone" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold mb-2">Responsive</h3> <p class="text-stone-500 dark:text-stone-400 text-sm leading-relaxed"> พัฒนาเว็บไซต์ให้รองรับทุกอุปกรณ์ ตั้งแต่มือถือจอเล็ก แท็บเล็ต ไปจนถึงเดสก์ท็อปขนาดใหญ่ </p> </div> </div> </div> </section> <!-- ========================================== Contact Section ========================================== --> <section id="contact" class="py-24 px-4 sm:px-6 lg:px-8 bg-warm-200/50 dark:bg-coffeeDark-200/30 border-t border-warm-200 dark:border-stone-900"> <div class="max-w-4xl mx-auto space-y-12"> <!-- Header --> <div class="text-center space-y-2"> <h2 class="text-3xl font-bold tracking-tight">ช่องทางติดต่อ</h2> <p class="text-stone-500 dark:text-stone-400">คุณสามารถสอบถาม ติดตาม หรือพูดคุยเกี่ยวกับโปรเจกต์ได้ผ่านช่องทางเหล่านี้</p> <div class="h-1 w-16 bg-warm-600 dark:bg-warm-400 mx-auto rounded-full mt-3"></div> </div> <!-- Social Buttons Grid (Facebook, Instagram, Line, Email, Phone) --> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> <!-- Facebook Link --> <a href="https://www.facebook.com/rattaphum.sukyang" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center p-4 sm:p-6 bg-warm-100 dark:bg-stone-800 rounded-2xl border border-warm-200 dark:border-stone-700 hover:-translate-y-1 transition duration-300 group"> <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-3 group-hover:scale-110 transition duration-300"> <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z" /> </svg> </div> <span class="font-semibold">Facebook</span> <span class="text-xs text-stone-400 mt-1 whitespace-nowrap">Rattaphum Sukyang</span> </a> <!-- Instagram Link --> <a href="https://instagram.com/sxloez_q07" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center p-4 sm:p-6 bg-warm-100 dark:bg-stone-800 rounded-2xl border border-warm-200 dark:border-stone-700 hover:-translate-y-1 transition duration-300 group"> <div class="w-12 h-12 rounded-full bg-pink-100 dark:bg-pink-900/30 flex items-center justify-center text-pink-600 dark:text-pink-400 mb-3 group-hover:scale-110 transition duration-300"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <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> <span class="font-semibold">Instagram</span> <span class="text-xs text-stone-400 mt-1">@sxloez_q07</span> </a> <!-- Line Link --> <a href="https://line.me/ti/p/~yogung30" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center p-4 sm:p-6 bg-warm-100 dark:bg-stone-800 rounded-2xl border border-warm-200 dark:border-stone-700 hover:-translate-y-1 transition duration-300 group"> <div class="w-12 h-12 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400 mb-3 group-hover:scale-110 transition duration-300"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M24 10.304c0-5.369-5.383-9.738-12-9.738S0 4.935 0 10.304c0 4.814 4.269 8.846 10.036 9.608.391.084.922.258 1.058.59.121.295.079.757.038 1.054l-.168 1.021c-.052.302-.25 1.179 1.081.643 1.33-.536 7.172-4.223 9.782-7.225C23.154 14.717 24 12.639 24 10.304zm-14.73 2.115H7.502v-3.75c0-.203-.165-.368-.368-.368h-.561c-.203 0-.368.165-.368.368v4.678c0 .203.165.368.368.368h2.727c.203 0 .368-.165.368-.368v-.568c0-.202-.165-.368-.368-.368zm2.254-.742c0-.203-.165-.368-.368-.368h-.561c-.203 0-.368.165-.368.368v3.088c0 .203.165.368.368.368h.561c.203 0 .368-.165.368-.368v-3.088zm0-1.892c0-.203-.165-.368-.368-.368h-.561c-.203 0-.368.165-.368.368v.568c0 .203.165.368.368.368h.561c.203 0 .368-.165.368-.368v-.568zm5.72 2.634c0-.203-.165-.368-.368-.368h-.832V9.027c0-.203-.165-.368-.368-.368h-.561c-.203 0-.368.165-.368.368v4.678c0 .203.165.368.368.368h1.761c.203 0 .368-.165.368-.368v-.568zm4.492-2.905c0-.203-.165-.368-.368-.368h-2.166v1.492h2.09c.203 0 .368-.165.368-.368v-.435c0-.203-.165-.368-.368-.368h-2.09V9.027c0-.203-.165-.368-.368-.368h-.561c-.203 0-.368.165-.368.368v4.678c0 .203.165.368.368.368h2.727c.203 0 .368-.165.368-.368v-.568c0-.203-.165-.368-.368-.368h-2.09V11.23h2.09c.203 0 .368-.165.368-.368v-.444z" /> </svg> </div> <span class="font-semibold">Line</span> <span class="text-xs text-stone-400 mt-1">yogung30</span> </a> <!-- Email Link --> <a href="mailto:rattaphum1124@gmail.com" class="flex flex-col items-center p-4 sm:p-6 bg-warm-100 dark:bg-stone-800 rounded-2xl border border-warm-200 dark:border-stone-700 hover:-translate-y-1 transition duration-300 group"> <div class="w-12 h-12 rounded-full bg-amber-50 dark:bg-warm-400 flex items-center justify-center text-rose-500 dark:text-rose-800 mb-3 group-hover:scale-110 transition duration-300"> <i data-lucide="mail" class="w-6 h-6"></i> </div> <span class="font-semibold">Email</span> <span class="text-xs text-stone-400 mt-1">rattaphum1124@gmail.com</span> </a> <!-- Phone Link --> <a href="tel:062-212-5803" class="flex flex-col items-center p-4 sm:p-6 bg-warm-100 dark:bg-stone-800 rounded-2xl border border-warm-200 dark:border-stone-700 hover:-translate-y-1 transition duration-300 group"> <div class="w-12 h-12 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-amber-600 dark:text-amber-400 mb-3 group-hover:scale-110 transition duration-300"> <i data-lucide="phone" class="w-6 h-6"></i> </div> <span class="font-semibold">โทรศัพท์</span> <span class="text-xs text-stone-400 mt-1">062-212-5803</span> </a> </div> </div> </section> </main> <!-- ========================================== Footer ========================================== --> <footer class="bg-warm-100 dark:bg-coffeeDark-100 border-t border-warm-200 dark:border-stone-900 py-8 text-center text-sm text-stone-500 dark:text-stone-550"> <div class="max-w-7xl mx-auto px-4 space-y-2"> <p>© 2026 รัฐภูมิ สุขแยง. All rights reserved.</p> <p class="text-xs">สร้างสรรค์ด้วยใจ มินิมอลเรียบง่าย ตอบสนองทุกการแสดงผล</p> </div> </footer> <!-- ========================================== JavaScript: Theme Toggle & Navigation Logic ========================================== --> <script> document.addEventListener('DOMContentLoaded', () => { // --- การโหลดไอคอน Lucide --- lucide.createIcons(); // --- ฟังก์ชันจัดการโหมดมืด / โหมดสว่าง (Dark / Light Mode Toggle) --- const themeToggleBtn = document.getElementById('theme-toggle'); const themeToggleIcon = document.getElementById('theme-toggle-icon'); const htmlElement = document.documentElement; // ตรวจสอบสถานะดั้งเดิมจาก localStorage หรือสืบค้นการตั้งค่าของเบราว์เซอร์ const currentTheme = localStorage.getItem('theme'); const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; // ตั้งค่าเริ่มต้นเมื่อผู้ใช้เข้ามาที่เว็บ if (currentTheme === 'dark' \|\| (!currentTheme && systemPrefersDark)) { htmlElement.classList.add('dark'); updateToggleIcon('dark'); } else { htmlElement.classList.remove('dark'); updateToggleIcon('light'); } // ตรวจจับการกดคลิกปุ่มสลับโหมด themeToggleBtn.addEventListener('click', () => { if (htmlElement.classList.contains('dark')) { // สลับเป็น Light Mode htmlElement.classList.remove('dark'); localStorage.setItem('theme', 'light'); updateToggleIcon('light'); } else { // สลับเป็น Dark Mode htmlElement.classList.add('dark'); localStorage.setItem('theme', 'dark'); updateToggleIcon('dark'); } }); // ฟังก์ชันสำหรับอัปเดตไอคอนบนปุ่มสลับโหมด function updateToggleIcon(theme) { if (theme === 'dark') { // ใช้ไอคอนดวงอาทิตย์ในโหมดมืด (เพื่อระบุว่ากดแล้วจะสลับเป็นโหมดสว่าง) themeToggleIcon.setAttribute('data-lucide', 'sun'); } else { // ใช้ไอคอนดวงจันทร์ในโหมดสว่าง (เพื่อระบุว่ากดแล้วจะสลับเป็นโหมดมืด) themeToggleIcon.setAttribute('data-lucide', 'moon'); } // รันคำสั่งนี้เพื่อให้ Lucide ทำการ Render ไอคอนชิ้นใหม่ที่เปลี่ยนคลาสไป lucide.createIcons(); } // --- ฟังก์ชันจัดการ Hamburger Menu สำหรับมือถือ --- const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); const mobileMenuIcon = document.getElementById('mobile-menu-icon'); mobileMenuBtn.addEventListener('click', () => { const isClosed = mobileMenu.classList.contains('hidden'); if (isClosed) { // แสดงเมนู mobileMenu.classList.remove('hidden'); mobileMenu.classList.add('flex'); mobileMenuIcon.setAttribute('data-lucide', 'x'); } else { // ซ่อนเมนู mobileMenu.classList.add('hidden'); mobileMenu.classList.remove('flex'); mobileMenuIcon.setAttribute('data-lucide', 'menu'); } lucide.createIcons(); }); // ซ่อนเมนูลูกกรงเมื่อคลิกเลือกลิงก์เมนู const mobileNavLinks = mobileMenu.querySelectorAll('a'); mobileNavLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); mobileMenu.classList.remove('flex'); mobileMenuIcon.setAttribute('data-lucide', 'menu'); lucide.createIcons(); }); }); }); </script> <!-- ========================================== Bottom Navigation Bar (แสดงเฉพาะบนมือถือ) ========================================== --> <div class="md:hidden fixed bottom-0 left-0 right-0 bg-warm-100/90 dark:bg-coffeeDark-100/90 backdrop-blur-md border-t border-warm-200 dark:border-stone-850 z-50 px-4 py-1 shadow-lg"> <div class="flex justify-around items-center"> <!-- ปุ่มหน้าแรก --> <a href="#hero" class="flex flex-col items-center text-stone-600 dark:text-stone-400 hover:text-warm-700 dark:hover:text-warm-300 transition"> <i data-lucide="home" class="w-5 h-5"></i> <span class="text-[11px] mt-1 font-medium">หน้าแรก</span> </a> <!-- ปุ่มเรื่องราว --> <a href="#story" class="flex flex-col items-center text-stone-600 dark:text-stone-400 hover:text-warm-700 dark:hover:text-warm-300 transition"> <i data-lucide="user" class="w-5 h-5"></i> <span class="text-[11px] mt-1 font-medium">เรื่องราว</span> </a> <!-- ปุ่มทักษะ --> <a href="#skills" class="flex flex-col items-center text-stone-600 dark:text-stone-400 hover:text-warm-700 dark:hover:text-warm-300 transition"> <i data-lucide="palette" class="w-5 h-5"></i> <span class="text-[11px] mt-1 font-medium">ทักษะ</span> </a> <!-- ปุ่มติดต่อ --> <a href="#contact" class="flex flex-col items-center text-stone-600 dark:text-stone-400 hover:text-warm-700 dark:hover:text-warm-300 transition"> <i data-lucide="phone" class="w-5 h-5"></i> <span class="text-[11px] mt-1 font-medium">ติดต่อ</span> </a> </div> </div> </body> </html>

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