File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090004/Portfolio004/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>Portfolio \| แฟ้มสะสมผลงานส่วนตัว</title> <!-- Meta SEO --> <meta name="description" content="แฟ้มสะสมผลงานส่วนตัว (Portfolio) รวบรวมข้อมูลส่วนตัว ทักษะความรู้ และโปรเจกต์ต่าง ๆ สำหรับนักพัฒนาเว็บไซต์และนักออกแบบ UI/UX"> <!-- Tailwind CSS Play CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { brand: { 50: '#faf8f5', 100: '#f3ece3', 200: '#e5d7c5', 300: '#d3bca1', 400: '#c5a880', 500: '#a3845c', 600: '#836540', 700: '#644b2f', 800: '#463421', 900: '#2c2014', } } } } } </script> <!-- Custom Style Sheet --> <link rel="stylesheet" href="styles.css"> </head> <body class="bg-[#FAF9F6] dark:bg-[#0B0C10] text-[#1C1C1C] dark:text-[#E4E4E7] min-h-screen flex flex-col transition-colors duration-300 pb-16 md:pb-0"> <!-- Decorative background elements (Ultra subtle premium glow) --> <div class="fixed top-[-25%] left-[-10%] w-[600px] h-[600px] rounded-full bg-brand-200/20 dark:bg-brand-900/10 blur-[130px] -z-10 pointer-events-none"></div> <!-- Navigation Header --> <header class="sticky top-0 z-40 w-full glass transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between"> <!-- Brand Logo --> <a href="#" class="text-xl sm:text-2xl font-bold tracking-tight text-brand-500 dark:text-brand-400 min-w-[44px] flex items-center"> MyPortfolio </a> <!-- Desktop Nav Menu --> <nav class="hidden md:flex items-center space-x-8"> <a href="#hero" class="text-sm font-medium text-slate-600 hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-400 transition-colors py-2 px-1">หน้าแรก</a> <a href="#about" class="text-sm font-medium text-slate-600 hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-400 transition-colors py-2 px-1">เกี่ยวกับฉัน</a> <a href="#projects" class="text-sm font-medium text-slate-600 hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-400 transition-colors py-2 px-1">สิ่งที่สนใจ</a> <a href="#contact" class="text-sm font-medium text-slate-600 hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-400 transition-colors py-2 px-1">ติดต่อฉัน</a> </nav> <!-- Actions: Light/Dark Mode Switcher & Hamburger Button --> <div class="flex items-center space-x-2"> <!-- Theme Toggle Button (Touch Target >= 44x44px) --> <button id="theme-toggle" type="button" aria-label="Toggle Dark Mode" class="p-3 text-slate-500 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-full transition-all duration-200 w-11 h-11 flex items-center justify-center"> <!-- Moon Icon (for Light Mode) --> <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> </svg> <!-- Sun Icon (for Dark Mode) --> <svg id="theme-toggle-light-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 100 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path> </svg> </button> <!-- Hamburger Menu Button (Touch Target >= 44x44px, hidden on desktop) --> <button id="menu-btn" type="button" aria-label="Open Menu" class="md:hidden p-3 text-slate-600 dark:text-slate-300 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-full transition-all duration-200 w-11 h-11 flex items-center justify-center"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> </header> <!-- Mobile Drawer Sidebar (Sliding Drawer Navigation) --> <div id="mobile-menu" class="fixed inset-y-0 right-0 z-50 w-full max-w-sm glass shadow-2xl translate-x-full transition-transform duration-300 ease-out md:hidden flex flex-col"> <!-- Drawer Header --> <div class="h-16 sm:h-20 px-6 flex items-center justify-between border-b border-slate-200/20 dark:border-slate-800/20"> <span class="text-lg font-bold text-brand-500 dark:text-brand-400">เมนู</span> <!-- Close Button (Touch Target >= 44x44px) --> <button id="close-btn" type="button" aria-label="Close Menu" class="p-3 text-slate-500 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-full transition-all duration-200 w-11 h-11 flex items-center justify-center"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Navigation Links inside Mobile Menu --> <nav class="flex-1 px-6 py-8 flex flex-col space-y-4"> <a href="#hero" class="mobile-menu-link text-lg font-medium text-slate-800 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400 transition-colors py-3 border-b border-slate-100 dark:border-slate-900">หน้าแรก</a> <a href="#about" class="mobile-menu-link text-lg font-medium text-slate-800 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400 transition-colors py-3 border-b border-slate-100 dark:border-slate-900">เกี่ยวกับฉัน</a> <a href="#projects" class="mobile-menu-link text-lg font-medium text-slate-800 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400 transition-colors py-3 border-b border-slate-100 dark:border-slate-900">สิ่งที่สนใจ</a> <a href="#contact" class="mobile-menu-link text-lg font-medium text-slate-800 dark:text-slate-200 hover:text-brand-600 dark:hover:text-brand-400 transition-colors py-3 border-b border-slate-100 dark:border-slate-900">ติดต่อฉัน</a> </nav> </div> <!-- Main Content Area --> <main class="flex-grow"> <!-- 1. Hero Section --> <section id="hero" class="relative min-h-[calc(100vh-4rem)] sm:min-h-[calc(100vh-5rem)] flex items-center justify-center py-12 md:py-24 px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <!-- Hero Content (Text details) --> <div class="space-y-6 text-center lg:text-left order-2 lg:order-1"> <div class="inline-flex items-center space-x-2 bg-brand-500/10 dark:bg-brand-500/20 text-brand-600 dark:text-brand-400 px-3 py-1.5 rounded-full text-xs sm:text-sm font-semibold tracking-wide"> <span>👋 ยินดีต้อนรับสู่เว็บไซต์ทางการของฉัน</span> </div> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight"> สวัสดีครับผม <span class="text-brand-500 dark:text-brand-400">กิตติพัฒน์ บริบูรณ์</span> </h1> <p class="text-xl sm:text-2xl font-bold text-slate-750 dark:text-slate-350"> นักศึกษา </p> <p class="text-base sm:text-lg text-slate-600 dark:text-slate-400 max-w-xl mx-auto lg:mx-0 leading-relaxed"> ที่ชอบทดลองสิ่งใหม่ๆ ชื่นชอบการเขียนโค้ด และการตัดต่อรูปภาพ </p> <!-- CTA Buttons (Touch Target >= 44x44px) --> <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4"> <a href="#projects" class="w-full sm:w-auto text-center bg-brand-500 hover:bg-brand-600 dark:bg-brand-400 dark:hover:bg-brand-500 text-white dark:text-[#0B0C10] font-medium px-8 py-3.5 rounded-lg transition-all duration-200 min-h-[48px] flex items-center justify-center shadow-sm"> ดูสิ่งที่สนใจ </a> <a href="#contact" class="w-full sm:w-auto text-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-900 dark:hover:bg-slate-800 text-slate-800 dark:text-slate-200 font-medium px-8 py-3.5 rounded-lg transition-all duration-200 min-h-[48px] flex items-center justify-center"> ติดต่อฉัน </a> </div> </div> <!-- Hero Graphic (Minimalist elegant frame) --> <div class="flex items-center justify-center order-1 lg:order-2"> <div class="relative w-64 h-64 sm:w-80 sm:h-80 lg:w-[350px] lg:h-[350px]"> <!-- Decorative elegant backing card --> <div class="absolute inset-0 bg-gradient-to-tr from-brand-100 to-brand-200/50 dark:from-brand-900/10 dark:to-brand-900/25 rounded-3xl rotate-3 scale-[1.02] -z-10 transition-transform duration-500 hover:rotate-0"></div> <!-- Main image container --> <div class="w-full h-full rounded-3xl overflow-hidden shadow-xl border border-slate-200/50 dark:border-slate-800/50 bg-white dark:bg-slate-900"> <img src="avatar.jpg" alt="กิตติพัฒน์ บริบูรณ์ โปรไฟล์" class="w-full h-full object-cover scale-100 hover:scale-105 transition-transform duration-700 ease-out"> </div> </div> </div> </div> </section> <!-- 2. About Me Section --> <section id="about" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-white/50 dark:bg-slate-900/40 border-y border-slate-200/50 dark:border-slate-800/50"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-3xl mx-auto mb-12 md:mb-16 scroll-reveal opacity-0 translate-y-8 transition-all duration-700"> <h2 class="text-3xl sm:text-4xl font-bold tracking-tight">เกี่ยวกับฉัน</h2> <div class="w-8 h-[2px] bg-brand-400 mx-auto mt-3 rounded-full"></div> <p class="text-lg sm:text-xl font-medium text-slate-700 dark:text-slate-350 mt-6 leading-relaxed"> สูง 183 เขียนโค้ด เลี้ยงแมว ชอบอ่านมังงะ </p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"> <!-- Biography Info Details --> <div class="space-y-8 scroll-reveal opacity-0 translate-y-8 transition-all duration-700"> <div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">ข้อมูลส่วนตัว</h3> <div class="space-y-3 bg-slate-100/50 dark:bg-slate-800/40 p-6 rounded-2xl border border-slate-200/50 dark:border-slate-800/50"> <p class="text-slate-700 dark:text-slate-300"><strong class="text-slate-900 dark:text-white">ชื่อ - สกุล :</strong> กิตติพัฒน์ บริบูรณ์</p> <p class="text-slate-700 dark:text-slate-300"><strong class="text-slate-900 dark:text-white">ชื่อเล่น :</strong> ภูมิ</p> <p class="text-slate-700 dark:text-slate-300"><strong class="text-slate-900 dark:text-white">อายุ :</strong> 18 ปี</p> <p class="text-slate-700 dark:text-slate-300"><strong class="text-slate-900 dark:text-white">สัญชาติ :</strong> ไทย</p> </div> </div> <!-- Timeline list: Education --> <div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">ประวัติการศึกษา</h3> <div class="space-y-6 relative border-l border-slate-200 dark:border-slate-800 ml-2 pl-6"> <div class="relative"> <div class="absolute -left-[30px] top-2 bg-brand-400 rounded-full w-3 h-3 border border-white dark:border-[#0B0C10] shadow-sm"> </div> <h4 class="font-bold text-slate-800 dark:text-slate-200">2562 - 2565</h4> <p class="text-sm text-slate-650 dark:text-slate-400">จบจาก กาวิละวิทยาลัย</p> </div> <div class="relative"> <div class="absolute -left-[30px] top-2 bg-brand-400 rounded-full w-3 h-3 border border-white dark:border-[#0B0C10] shadow-sm"> </div> <h4 class="font-bold text-slate-800 dark:text-slate-200">2566 - 2569</h4> <p class="text-sm text-slate-650 dark:text-slate-400">จบจากปวช เทคนิคเชียงใหม่</p> </div> </div> </div> </div> <!-- Skills and Work Experience --> <div class="space-y-8 scroll-reveal opacity-0 translate-y-8 transition-all duration-700" style="transition-delay: 200ms;"> <!-- Timeline list: Work --> <div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">ประวัติการทำงาน</h3> <div class="space-y-4 relative border-l border-slate-200 dark:border-slate-800 ml-2 pl-6"> <div class="relative"> <div class="absolute -left-[30px] top-2 bg-brand-400 rounded-full w-3 h-3 border border-white dark:border-[#0B0C10] shadow-sm"> </div> <h4 class="font-bold text-slate-800 dark:text-slate-200">2568</h4> <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">ฝึกงานที่ VIP computer 5 เดือน</p> </div> </div> </div> <!-- Skills --> <div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">ทักษะความสามารถ</h3> <div class="grid grid-cols-2 sm:grid-cols-2 gap-3"> <!-- Skill Item --> <div class="flex items-center space-x-2.5 px-4 py-3 bg-white dark:bg-slate-900 rounded-xl border border-slate-200/50 dark:border-slate-800/50 hover:border-brand-400 dark:hover:border-brand-400/50 transition-all duration-300"> <span class="w-2 h-2 bg-brand-400 rounded-full"></span> <span class="font-medium text-xs sm:text-sm text-slate-700 dark:text-slate-350">ทำบัญชี</span> </div> <div class="flex items-center space-x-2.5 px-4 py-3 bg-white dark:bg-slate-900 rounded-xl border border-slate-200/50 dark:border-slate-800/50 hover:border-brand-400 dark:hover:border-brand-400/50 transition-all duration-300"> <span class="w-2 h-2 bg-brand-400 rounded-full"></span> <span class="font-medium text-xs sm:text-sm text-slate-700 dark:text-slate-350">เขียนโค้ดภาษา Python</span> </div> <div class="flex items-center space-x-2.5 px-4 py-3 bg-white dark:bg-slate-900 rounded-xl border border-slate-200/50 dark:border-slate-800/50 hover:border-brand-400 dark:hover:border-brand-400/50 transition-all duration-300"> <span class="w-2 h-2 bg-brand-400 rounded-full"></span> <span class="font-medium text-xs sm:text-sm text-slate-700 dark:text-slate-350">ประกอบคอม</span> </div> <div class="flex items-center space-x-2.5 px-4 py-3 bg-white dark:bg-slate-900 rounded-xl border border-slate-200/50 dark:border-slate-800/50 hover:border-brand-400 dark:hover:border-brand-400/50 transition-all duration-300"> <span class="w-2 h-2 bg-brand-400 rounded-full"></span> <span class="font-medium text-xs sm:text-sm text-slate-700 dark:text-slate-350">ซ่อมคอมพิวเตอร์</span> </div> </div> </div> </div> </div> </div> </section> <!-- 3. Interests Section --> <section id="projects" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-3xl mx-auto mb-12 md:mb-16 scroll-reveal opacity-0 translate-y-8 transition-all duration-700"> <h2 class="text-3xl sm:text-4xl font-bold tracking-tight">สิ่งที่สนใจ</h2> <div class="w-8 h-[2px] bg-brand-400 mx-auto mt-3 rounded-full"></div> <p class="text-base sm:text-lg text-slate-600 dark:text-slate-400 mt-6 leading-relaxed"> สิ่งที่ผมให้ความชื่นชอบและใช้เวลาว่างในการศึกษาเรียนรู้และทำเป็นกิจกรรมยามว่าง </p> </div> <!-- Responsive Grid: 1 col on mobile, 2 cols on tablet, 3 cols on desktop --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Interest Card 1: Coding --> <article class="project-card flex flex-col bg-white dark:bg-slate-900 rounded-2xl overflow-hidden border border-slate-200/50 dark:border-slate-800/50 shadow-md"> <div class="relative aspect-video w-full overflow-hidden bg-slate-100 dark:bg-slate-800"> <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=800&q=80" alt="การเขียนโค้ด" class="w-full h-full object-cover"> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div class="space-y-3"> <h3 class="text-xl font-bold text-slate-950 dark:text-white flex items-center gap-2"> <span>💻</span> การเขียนโค้ด & พัฒนาเว็บ </h3> <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed"> ชื่นชอบการเขียนโค้ดเพื่อสร้างสรรค์เว็บไซต์ แอปพลิเคชัน และเทคโนโลยีสมัยใหม่ สนุกกับการคิดแก้ปัญหาผ่านการเขียนโปรแกรม </p> </div> </div> </article> <!-- Interest Card 2: College Activities --> <article class="project-card flex flex-col bg-white dark:bg-slate-900 rounded-2xl overflow-hidden border border-slate-200/50 dark:border-slate-800/50 shadow-md"> <div class="relative aspect-video w-full overflow-hidden bg-slate-100 dark:bg-slate-800"> <img src="friends.jpg" alt="รูปภาพกิจกรรมในวิทยาลัย" class="w-full h-full object-cover scale-100 hover:scale-105 transition-transform duration-500"> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div class="space-y-3"> <h3 class="text-xl font-bold text-slate-950 dark:text-white flex items-center gap-2"> <span>🏫</span> รูปภาพกิจกรรมในวิทยาลัย </h3> <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed"> เข้าร่วมกิจกรรมต่างๆ ในวิทยาลัย ร่วมมือทำกิจกรรมกลุ่มร่วมกับอาจารย์และเพื่อนๆ เพื่อเสริมสร้างทักษะทางสังคมและการทำงานร่วมกัน </p> </div> </div> </article> <!-- Interest Card 3: Cat Care with Interactive Gallery --> <article class="project-card flex flex-col bg-white dark:bg-slate-900 rounded-2xl overflow-hidden border border-slate-200/50 dark:border-slate-800/50 shadow-sm hover:shadow-md transition-all duration-300"> <div class="relative aspect-video w-full overflow-hidden bg-slate-100 dark:bg-slate-800 group"> <!-- Image display with an ID so JS can modify it --> <img id="cat-gallery-img" src="cat1.jpg" alt="น้องแมวสุดรัก" class="w-full h-full object-cover transition-all duration-300"> <!-- Thumbnail selection overlays --> <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-2 bg-slate-950/60 backdrop-blur-md px-3 py-1.5 rounded-full z-10"> <button type="button" class="cat-thumb-btn w-6 h-6 rounded-full overflow-hidden border-2 border-white focus:outline-none transition-all duration-200 active" data-img="cat1.jpg" aria-label="รูปที่ 1"> <img src="cat1.jpg" alt="cat1" class="w-full h-full object-cover"> </button> <button type="button" class="cat-thumb-btn w-6 h-6 rounded-full overflow-hidden border-2 border-transparent hover:border-white/50 focus:outline-none transition-all duration-200" data-img="cat2.jpg" aria-label="รูปที่ 2"> <img src="cat2.jpg" alt="cat2" class="w-full h-full object-cover"> </button> <button type="button" class="cat-thumb-btn w-6 h-6 rounded-full overflow-hidden border-2 border-transparent hover:border-white/50 focus:outline-none transition-all duration-200" data-img="cat3.jpg" aria-label="รูปที่ 3"> <img src="cat3.jpg" alt="cat3" class="w-full h-full object-cover"> </button> </div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div class="space-y-3"> <h3 class="text-xl font-bold text-slate-950 dark:text-white flex items-center gap-2"> <span>🐈</span> การเลี้ยงแมว & สัตว์เลี้ยง </h3> <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed"> รักการเลี้ยงแมวและดูแลเอาใจใส่สัตว์เลี้ยง ใช้เวลาว่างเล่นกับน้องแมวเพื่อคลายความเครียด (คลิกเลือกดูน้องแมวตัวอื่นๆ ได้จากแถบกลมด้านบน) </p> </div> </div> </article> </div> </div> </section> <!-- 4. Contact Section --> <section id="contact" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-white/50 dark:bg-slate-900/40 border-t border-slate-200/50 dark:border-slate-800/50"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-3xl mx-auto mb-12 md:mb-16 scroll-reveal opacity-0 translate-y-8 transition-all duration-700"> <h2 class="text-3xl sm:text-4xl font-bold tracking-tight">ติดต่อฉัน</h2> <div class="w-8 h-[2px] bg-brand-400 mx-auto mt-3 rounded-full"></div> <p class="text-base sm:text-lg text-slate-600 dark:text-slate-400 mt-6 leading-relaxed"> หากท่านสนใจร่วมงาน มีคำถามเกี่ยวกับโปรเจกต์ หรือต้องการปรึกษา สามารถส่งข้อความหาผมได้โดยตรงผ่านแบบฟอร์มหรือช่องทางโซเชียลมีเดีย </p> </div> <div class="max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-5 gap-12"> <!-- Left Side: Contact Information Details (2 columns on large screen) --> <div class="lg:col-span-2 space-y-6 scroll-reveal opacity-0 translate-y-8 transition-all duration-700"> <h3 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white">ข้อมูลติดต่อ</h3> <div class="space-y-4"> <!-- Phone Detail --> <a href="tel:098-816-9252" class="flex items-center space-x-4 p-4 bg-slate-100/50 dark:bg-slate-800/40 hover:bg-slate-200/50 dark:hover:bg-slate-800/80 rounded-xl transition-all duration-200 min-h-[48px]"> <span class="bg-brand-500/20 text-brand-600 dark:text-brand-400 p-2.5 rounded-lg"> <!-- Phone SVG --> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" 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"> </path> </svg> </span> <div> <h4 class="text-xs text-slate-500 dark:text-slate-400 font-semibold tracking-wide uppercase"> เบอร์โทรศัพท์</h4> <span class="text-sm font-medium">098-816-9252</span> </div> </a> <!-- Email Detail --> <a href="mailto:kittipat049@gmail.com" class="flex items-center space-x-4 p-4 bg-slate-100/50 dark:bg-slate-800/40 hover:bg-slate-200/50 dark:hover:bg-slate-800/80 rounded-xl transition-all duration-200 min-h-[48px]"> <span class="bg-brand-500/20 text-brand-600 dark:text-brand-400 p-2.5 rounded-lg"> <!-- Email Envelope SVG --> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" 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"> </path> </svg> </span> <div> <h4 class="text-xs text-slate-500 dark:text-slate-400 font-semibold tracking-wide uppercase"> อีเมล</h4> <span class="text-sm font-medium">kittipat049@gmail.com</span> </div> </a> <!-- Address Detail --> <div class="flex items-center space-x-4 p-4 bg-slate-100/50 dark:bg-slate-800/40 rounded-xl min-h-[48px]"> <span class="bg-brand-500/20 text-brand-600 dark:text-brand-400 p-2.5 rounded-lg"> <!-- Map Pin SVG --> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" 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> <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> </span> <div> <h4 class="text-xs text-slate-500 dark:text-slate-400 font-semibold tracking-wide uppercase"> ที่อยู่</h4> <span class="text-sm font-medium">205/3 อำเภอสารภี ตำบลยางเนิ้ง จังหวัดเชียงใหม่</span> </div> </div> <!-- Social Icons --> <div class="flex items-center gap-3 pt-4"> <!-- GitHub Touch target >= 44x44px --> <a href="https://github.com" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile" class="w-11 h-11 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-full flex items-center justify-center text-slate-700 dark:text-slate-300 transition-colors"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /> </svg> </a> <!-- LinkedIn Touch target >= 44x44px --> <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile" class="w-11 h-11 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-full flex items-center justify-center text-slate-700 dark:text-slate-300 transition-colors"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.779-1.75-1.75s.784-1.75 1.75-1.75 1.75.779 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" /> </svg> </a> </div> </div> </div> <!-- Right Side: Contact Form (3 columns layout wrapper on desktop) --> <div class="lg:col-span-3 scroll-reveal opacity-0 translate-y-8 transition-all duration-700" style="transition-delay: 150ms;"> <form id="contact-form" class="space-y-5 bg-white dark:bg-slate-900 p-6 sm:p-8 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 shadow-lg"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="space-y-2"> <label for="name" class="text-sm font-semibold text-slate-700 dark:text-slate-300">ชื่อของคุณ</label> <input type="text" id="name" required class="w-full form-input bg-slate-50 dark:bg-slate-850 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 rounded-xl px-4 py-3 text-sm focus:outline-none min-h-[44px]"> </div> <div class="space-y-2"> <label for="email" class="text-sm font-semibold text-slate-700 dark:text-slate-300">อีเมล</label> <input type="email" id="email" required class="w-full form-input bg-slate-50 dark:bg-slate-850 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 rounded-xl px-4 py-3 text-sm focus:outline-none min-h-[44px]"> </div> </div> <div class="space-y-2"> <label for="message" class="text-sm font-semibold text-slate-700 dark:text-slate-300">ข้อความ</label> <textarea id="message" rows="4" required class="w-full form-input bg-slate-50 dark:bg-slate-850 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 rounded-xl px-4 py-3 text-sm focus:outline-none"></textarea> </div> <!-- Success alert feedback toast --> <div id="form-feedback" class="hidden items-center p-4 bg-emerald-500/10 dark:bg-emerald-500/20 border border-emerald-500/30 text-emerald-600 dark:text-emerald-400 rounded-xl space-x-3 text-sm"> <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <span>ส่งข้อความสำเร็จแล้ว! ขอบคุณที่ติดต่อเข้ามาครับผมจะตอบกลับโดยเร็วที่สุด</span> </div> <button type="submit" class="w-full bg-brand-650 hover:bg-brand-700 bg-brand-600 dark:bg-brand-500 dark:hover:bg-brand-600 text-white font-medium py-3 px-6 rounded-xl transition-all duration-200 shadow-md shadow-brand-500/10 hover:shadow-brand-500/20 min-h-[44px] flex items-center justify-center"> ส่งข้อความ </button> </form> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="bg-slate-100 dark:bg-slate-950 border-t border-slate-200/50 dark:border-slate-850/50 py-8 px-4 sm:px-6 lg:px-8 text-center text-sm text-slate-500 dark:text-slate-400"> <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4"> <p>© 2026 กิตติพัฒน์ บริบูรณ์. สงวนลิขสิทธิ์ทั้งหมด.</p> <p>ออกแบบและพัฒนาด้วย ❤️ โดยใช้ Tailwind CSS</p> </div> </footer> <!-- Sticky Bottom Menu (Mobile Navigation Bar) --> <div class="fixed bottom-0 left-0 right-0 z-40 md:hidden glass border-t border-slate-200/20 dark:border-slate-800/20 shadow-2xl safe-bottom"> <nav class="flex justify-around items-center h-16 px-2"> <a href="#hero" class="bottom-nav-link flex flex-col items-center justify-center flex-1 py-1 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"> <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> <span class="text-[10px] font-medium">หน้าแรก</span> </a> <a href="#about" class="bottom-nav-link flex flex-col items-center justify-center flex-1 py-1 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"> <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> </svg> <span class="text-[10px] font-medium">เกี่ยวกับฉัน</span> </a> <a href="#projects" class="bottom-nav-link flex flex-col items-center justify-center flex-1 py-1 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"> <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" 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"></path> </svg> <span class="text-[10px] font-medium">สิ่งที่สนใจ</span> </a> <a href="#contact" class="bottom-nav-link flex flex-col items-center justify-center flex-1 py-1 text-slate-600 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors"> <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" 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"></path> </svg> <span class="text-[10px] font-medium">ติดต่อฉัน</span> </a> </nav> </div> <!-- Core App Logic --> <script src="app.js"></script> </body> </html>

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