File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090040/01 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"> <!-- SEO Meta Tags --> <title>นาย อดิเทพ อาภัย (แจ็คกี้) - Portfolio ส่วนตัว</title> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ นาย อดิเทพ อาภัย (แจ็คกี้) นักศึกษาและผู้พัฒนาเว็บที่มุ่งเน้นความเป็นมืออาชีพ ทักษะ และผลงานที่ยอดเยี่ยม"> <meta name="keywords" content="อดิเทพ อาภัย, แจ็คกี้, Adithep Aphai, Portfolio, พอร์ตโฟลิโอ, วิทยาลัยเทคนิคเชียงใหม่, โรงเรียนแม่แตง"> <meta name="author" content="นาย อดิเทพ อาภัย"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', // Default primary (Sky 500) 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', } }, fontFamily: { sans: ['Prompt', 'sans-serif'], title: ['Kanit', 'sans-serif'], }, animation: { fadeIn: 'fadeIn 0.5s ease-out forwards', slideUp: 'slideUp 0.6s ease-out forwards', }, keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, slideUp: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' }, } } } } } </script> <!-- Lucide Icons CDN --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Custom Styles --> <link rel="stylesheet" href="style.css"> </head> <body class="transition-colors duration-300 dark:bg-slate-900 bg-slate-50 text-slate-800 dark:text-slate-100"> <!-- 1. Loading Screen --> <div id="loader" class="fixed inset-0 z-50 flex flex-col items-center justify-center bg-slate-900 transition-opacity duration-500"> <div class="spinner mb-4"></div> <h2 class="text-xl font-semibold text-white tracking-widest font-title">JACKIE PORTFOLIO</h2> <p class="text-xs text-sky-400 mt-2 animate-pulse">กำลังโหลดข้อมูล...</p> </div> <!-- Background Decorative Orbs --> <div class="fixed top-[-10%] left-[-10%] w-[500px] h-[500px] rounded-full bg-sky-400/10 dark:bg-sky-500/5 blur-[80px] pointer-events-none animate-pulse-slow"></div> <div class="fixed bottom-[-10%] right-[-10%] w-[500px] h-[500px] rounded-full bg-blue-400/10 dark:bg-blue-600/5 blur-[80px] pointer-events-none animate-pulse-slow"></div> <!-- Header & Sticky Navigation --> <header class="fixed top-0 left-0 right-0 z-40 transition-all duration-300 py-5 glass-nav"> <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 --> <a href="#hero" class="flex items-center space-x-2"> <span class="w-10 h-10 rounded-xl bg-gradient-to-tr from-sky-500 to-blue-600 flex items-center justify-center text-white font-bold text-lg font-title shadow-lg shadow-sky-500/20">A</span> <span class="font-bold text-lg tracking-wider font-title bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">ADITHEP</span> </a> <!-- Desktop Menu --> <nav class="hidden md:flex space-x-8 text-sm font-medium"> <a href="#hero" class="text-sky-500 font-medium transition-colors hover:text-sky-500">หน้าแรก</a> <a href="#about" class="text-slate-600 dark:text-slate-300 transition-colors hover:text-sky-500">เกี่ยวกับฉัน</a> <a href="#education" class="text-slate-600 dark:text-slate-300 transition-colors hover:text-sky-500">การศึกษา</a> <a href="#skills" class="text-slate-600 dark:text-slate-300 transition-colors hover:text-sky-500">ทักษะ</a> <a href="#contact" class="text-slate-600 dark:text-slate-300 transition-colors hover:text-sky-500">ติดต่อ</a> </nav> <!-- Navbar Right Items --> <div class="flex items-center space-x-4"> <!-- Light/Dark Mode Switcher --> <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"> <i id="theme-toggle-dark-icon" data-lucide="moon" class="w-5 h-5 hidden"></i> <i id="theme-toggle-light-icon" data-lucide="sun" class="w-5 h-5"></i> </button> <!-- Mobile Menu Button --> <button id="mobile-menu-btn" type="button" class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-slate-400 hover:text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> <i data-lucide="menu" class="w-6 h-6"></i> </button> </div> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden px-4 pt-2 pb-4 space-y-1 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border-b border-slate-200 dark:border-slate-800"> <a href="#hero" class="block px-3 py-2.5 rounded-md text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-sky-50 dark:hover:bg-slate-800 hover:text-sky-500">หน้าแรก</a> <a href="#about" class="block px-3 py-2.5 rounded-md text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-sky-50 dark:hover:bg-slate-800 hover:text-sky-500">เกี่ยวกับฉัน</a> <a href="#education" class="block px-3 py-2.5 rounded-md text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-sky-50 dark:hover:bg-slate-800 hover:text-sky-500">การศึกษา</a> <a href="#skills" class="block px-3 py-2.5 rounded-md text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-sky-50 dark:hover:bg-slate-800 hover:text-sky-500">ทักษะ</a> <a href="#contact" class="block px-3 py-2.5 rounded-md text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-sky-50 dark:hover:bg-slate-800 hover:text-sky-500">ติดต่อ</a> </div> </header> <!-- 1. Hero Section --> <section id="hero" class="min-h-screen flex items-center relative overflow-hidden pt-24 md:pt-0"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <!-- Content Left --> <div class="space-y-6 text-center md:text-left reveal-left"> <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-sky-100 dark:bg-sky-950/40 text-sky-600 dark:text-sky-400 border border-sky-200/50 dark:border-sky-900/30 text-sm font-medium"> <span class="w-2 h-2 rounded-full bg-green-500 animate-ping"></span> <span>ยินดีต้อนรับสู่พอร์ตโฟลิโอส่วนตัว</span> </div> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight font-title leading-tight"> สวัสดีครับ ผมชื่อ <br> <span class="bg-gradient-to-r from-sky-500 via-blue-500 to-indigo-600 bg-clip-text text-transparent">นาย อดิเทพ อาภัย</span> </h1> <p class="text-xl font-medium text-slate-600 dark:text-slate-300"> ชื่อเล่น: <span class="text-sky-500 dark:text-sky-400 font-bold">แจ็คกี้ (Jackie)</span> </p> <p class="text-base text-slate-500 dark:text-slate-400 max-w-lg leading-relaxed mx-auto md:mx-0"> มุ่งมั่นพัฒนาทักษะด้านเทคโนโลยี การพัฒนาเว็บไซต์ และพร้อมที่จะเรียนรู้เพื่อพัฒนาสิ่งใหม่ๆ อย่างมืออาชีพ </p> <div class="flex flex-wrap items-center justify-center md:justify-start gap-4 pt-2"> <a href="#about" class="px-6 py-3 rounded-xl bg-gradient-to-r from-sky-500 to-blue-600 text-white font-medium hover:shadow-lg hover:shadow-sky-500/20 transform hover:-translate-y-0.5 transition-all flex items-center space-x-2"> <span>เกี่ยวกับฉัน</span> <i data-lucide="arrow-right" class="w-4 h-4"></i> </a> <a href="#contact" class="px-6 py-3 rounded-xl border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 font-medium transition-all flex items-center space-x-2"> <span>ติดต่อสอบถาม</span> <i data-lucide="mail" class="w-4 h-4"></i> </a> </div> </div> <!-- Visual / Profile Image Right --> <div class="flex justify-center items-center reveal-right"> <div class="relative w-72 h-72 sm:w-80 sm:h-80 lg:w-[400px] lg:h-[400px]"> <!-- Border Ring --> <div class="absolute inset-0 rounded-full border-2 border-dashed border-sky-400/40 dark:border-sky-500/20 animate-[spin_60s_linear_infinite]"></div> <!-- Glowing background --> <div class="absolute inset-4 rounded-full bg-gradient-to-tr from-sky-500/20 to-blue-600/20 blur-xl"></div> <!-- Image Frame --> <div class="absolute inset-4 rounded-[40px] overflow-hidden border-4 border-white dark:border-slate-800 shadow-2xl bg-slate-200 dark:bg-slate-800 animate-float flex items-center justify-center"> <img src="profile.png" alt="นาย อดิเทพ อาภัย" class="w-full h-full object-cover" onerror="this.onerror=null; this.src='../../../Users/ure090/.gemini/antigravity-ide/brain/2d2f32f6-ea30-4b65-bec2-9cd535a8f50e/media__1782709329008.png';"> </div> <!-- Floating badge --> <div class="absolute bottom-10 left-0 bg-white dark:bg-slate-800 px-4 py-2.5 rounded-2xl shadow-xl border border-slate-100 dark:border-slate-700 flex items-center space-x-3 transform -translate-x-4"> <span class="w-8 h-8 rounded-lg bg-green-100 dark:bg-green-950/40 flex items-center justify-center text-green-500"> <i data-lucide="award" class="w-4 h-4"></i> </span> <div> <p class="text-[10px] text-slate-400">ระดับการศึกษา</p> <p class="text-xs font-bold font-title">นักศึกษา ปวส.</p> </div> </div> </div> </div> </div> </div> </section> <!-- 2. About Me Section --> <section id="about" class="py-24 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <!-- Section Title --> <div class="text-center max-w-3xl mx-auto mb-16 reveal"> <h2 class="text-3xl font-bold tracking-tight sm:text-4xl font-title bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">เกี่ยวกับตัวฉัน</h2> <div class="w-12 h-1 bg-sky-500 mx-auto mt-4 rounded-full"></div> <p class="mt-4 text-base text-slate-500 dark:text-slate-400">ทำความรู้จักข้อมูลประวัติและความสนใจคร่าว ๆ ของผม</p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- Content left details --> <div class="lg:col-span-7 space-y-6 reveal-left"> <h3 class="text-2xl font-bold font-title text-slate-800 dark:text-white"> มุ่งมั่นพัฒนาตนเอง เพื่อความเชี่ยวชาญด้านเทคโนโลยี </h3> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-base"> "ผมเป็นนักศึกษาที่มีความสนใจด้านเทคโนโลยี การพัฒนาเว็บไซต์ และการเขียนโปรแกรม พร้อมเรียนรู้สิ่งใหม่ ๆ และพัฒนาทักษะของตนเองอยู่เสมอ" </p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-4"> <div class="p-4 rounded-2xl glass-panel flex items-start space-x-3"> <span class="p-2.5 rounded-xl bg-sky-500/10 text-sky-500 dark:bg-sky-500/20"> <i data-lucide="cake" class="w-5 h-5"></i> </span> <div> <p class="text-xs text-slate-400">วันเกิด / อายุ</p> <p class="text-sm font-semibold mt-0.5">24 สิงหาคม 2549 (อายุ 19 ปี)</p> </div> </div> <div class="p-4 rounded-2xl glass-panel flex items-start space-x-3"> <span class="p-2.5 rounded-xl bg-sky-500/10 text-sky-500 dark:bg-sky-500/20"> <i data-lucide="phone" class="w-5 h-5"></i> </span> <div> <p class="text-xs text-slate-400">เบอร์โทรศัพท์</p> <p class="text-sm font-semibold mt-0.5">093-241-1280</p> </div> </div> <div class="p-4 rounded-2xl glass-panel flex items-start space-x-3"> <span class="p-2.5 rounded-xl bg-sky-500/10 text-sky-500 dark:bg-sky-500/20"> <i data-lucide="mail" class="w-5 h-5"></i> </span> <div> <p class="text-xs text-slate-400">อีเมลติดต่อ</p> <p class="text-sm font-semibold mt-0.5 break-all">adithep1234@gmail.com</p> </div> </div> <div class="p-4 rounded-2xl glass-panel flex items-start space-x-3"> <span class="p-2.5 rounded-xl bg-sky-500/10 text-sky-500 dark:bg-sky-500/20"> <i data-lucide="map-pin" class="w-5 h-5"></i> </span> <div> <p class="text-xs text-slate-400">สถานที่พำนัก</p> <p class="text-sm font-semibold mt-0.5">จังหวัดเชียงใหม่, ประเทศไทย</p> </div> </div> </div> </div> <!-- Info Card right --> <div class="lg:col-span-5 reveal-right"> <div class="p-8 rounded-3xl bg-gradient-to-tr from-sky-500 to-blue-600 text-white shadow-2xl relative overflow-hidden"> <!-- Background glow lines --> <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white/20 via-transparent to-transparent"></div> <div class="relative z-10 space-y-6"> <h4 class="text-xl font-bold font-title tracking-wide border-b border-white/20 pb-4">เป้าหมาย & แรงบันดาลใจ</h4> <blockquote class="text-slate-100 italic leading-relaxed text-sm"> "การก้าวเข้าสู่สายงานพัฒนาเว็บไซต์และเทคโนโลยีเป็นสิ่งที่ผมสนใจอย่างยิ่ง ผมเชื่อว่าการศึกษาอย่างต่อเนื่องและการเรียนรู้ข้อผิดพลาดจะช่วยให้ผมสามารถพัฒนาแอปพลิเคชันที่สร้างประโยชน์ให้กับสังคมได้" </blockquote> <div class="flex items-center space-x-4 pt-2"> <span class="w-12 h-12 rounded-2xl bg-white/20 flex items-center justify-center"> <i data-lucide="code-2" class="w-6 h-6"></i> </span> <div> <p class="font-bold text-base font-title">Junior Developer</p> <p class="text-xs text-sky-200">สายงานที่มุ่งหวังในอนาคต</p> </div> </div> </div> </div> </div> </div> </div> </section> <!-- 3. Education Section --> <section id="education" class="py-24 bg-slate-100/50 dark:bg-slate-900/40 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <!-- Section Title --> <div class="text-center max-w-3xl mx-auto mb-16 reveal"> <h2 class="text-3xl font-bold tracking-tight sm:text-4xl font-title bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">ประวัติการศึกษา</h2> <div class="w-12 h-1 bg-sky-500 mx-auto mt-4 rounded-full"></div> <p class="mt-4 text-base text-slate-500 dark:text-slate-400">เส้นทางการเรียนรู้ตั้งแต่อดีตจนถึงปัจจุบัน</p> </div> <!-- Timeline Container --> <div class="max-w-4xl mx-auto relative"> <!-- Main Line --> <div class="absolute left-4 md:left-1/2 top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-slate-800"></div> <!-- Step 1: Chiang Mai Technical College --> <div class="relative flex flex-col md:flex-row md:justify-between items-start md:items-center mb-12 reveal-left"> <!-- Timeline Dot --> <div class="absolute left-4 md:left-1/2 w-8 h-8 rounded-full bg-white dark:bg-slate-900 border-4 border-sky-500 transform -translate-x-1/2 flex items-center justify-center z-10"> <span class="w-2.5 h-2.5 rounded-full bg-sky-500"></span> </div> <!-- Card Content (Left / Top aligned for Desktop) --> <div class="w-full md:w-[45%] pl-12 md:pl-0 md:text-right mt-1"> <div class="p-6 rounded-2xl glass-panel shadow-md hover:shadow-lg transition-shadow"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-sky-100 text-sky-600 dark:bg-sky-950/60 dark:text-sky-400 mb-3"> กำลังศึกษาอยู่ </span> <h3 class="text-lg font-bold font-title text-slate-800 dark:text-white">วิทยาลัยเทคนิคเชียงใหม่</h3> <p class="text-sm text-sky-500 font-medium mt-1">ระดับประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.)</p> <p class="text-xs text-slate-400 mt-2">ศึกษาเกี่ยวกับการจัดการทางด้านคอมพิวเตอร์ โปรแกรมมิ่ง และระบบเครือข่าย เพื่อเพิ่มทักษะด้านอาชีพขั้นสูง</p> </div> </div> <!-- Spacing Spacer for Right --> <div class="hidden md:block w-[45%]"></div> </div> <!-- Step 2: Mae Taeng School --> <div class="relative flex flex-col md:flex-row md:justify-between items-start md:items-center reveal-right"> <!-- Timeline Dot --> <div class="absolute left-4 md:left-1/2 w-8 h-8 rounded-full bg-white dark:bg-slate-900 border-4 border-slate-300 dark:border-slate-700 transform -translate-x-1/2 flex items-center justify-center z-10"> <span class="w-2.5 h-2.5 rounded-full bg-slate-400"></span> </div> <!-- Spacing Spacer for Left --> <div class="hidden md:block w-[45%]"></div> <!-- Card Content (Right for Desktop) --> <div class="w-full md:w-[45%] pl-12 md:pl-0 mt-1"> <div class="p-6 rounded-2xl glass-panel shadow-md hover:shadow-lg transition-shadow"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400 mb-3"> มัธยมศึกษาปีที่ 1 - 6 </span> <h3 class="text-lg font-bold font-title text-slate-800 dark:text-white">โรงเรียนแม่แตง</h3> <p class="text-sm text-slate-500 mt-1">ระดับมัธยมศึกษาตอนต้นและตอนปลาย</p> <p class="text-xs text-slate-400 mt-2">ศึกษาด้านวิทยาศาสตร์และคณิตศาสตร์พื้นฐาน มุ่งเน้นการทำกิจกรรมสร้างเสริมประสบการณ์และการทำงานร่วมกับผู้อื่น</p> </div> </div> </div> </div> </div> </section> <!-- 4. Skills Section --> <section id="skills" class="py-24 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <!-- Section Title --> <div class="text-center max-w-3xl mx-auto mb-16 reveal"> <h2 class="text-3xl font-bold tracking-tight sm:text-4xl font-title bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">ทักษะและความสามารถ</h2> <div class="w-12 h-1 bg-sky-500 mx-auto mt-4 rounded-full"></div> <p class="mt-4 text-base text-slate-500 dark:text-slate-400">ทักษะที่เกี่ยวข้องทางด้านกิจกรรมและการทำงานร่วมกับผู้อื่น</p> </div> <!-- Skill Cards Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Football --> <div class="p-6 rounded-2xl glass-panel hover:border-sky-500/50 shadow-md hover:shadow-xl transition-all duration-300 group hover:-translate-y-1 reveal"> <div class="w-12 h-12 rounded-xl bg-sky-500/10 text-sky-500 flex items-center justify-center group-hover:bg-sky-500 group-hover:text-white transition-colors"> <i data-lucide="trophy" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold font-title mt-4 text-slate-800 dark:text-white">ฟุตบอล</h3> <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 leading-relaxed"> มีความถนัดด้านกีฬาฟุตบอล ช่วยฝึกวินัย การทำงานร่วมกันภายใต้ทีม และการวางกลยุทธ์ร่วมกันในสนามแข่ง </p> </div> <!-- Petanque --> <div class="p-6 rounded-2xl glass-panel hover:border-sky-500/50 shadow-md hover:shadow-xl transition-all duration-300 group hover:-translate-y-1 reveal reveal-delay-1"> <div class="w-12 h-12 rounded-xl bg-sky-500/10 text-sky-500 flex items-center justify-center group-hover:bg-sky-500 group-hover:text-white transition-colors"> <i data-lucide="target" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold font-title mt-4 text-slate-800 dark:text-white">เปตอง</h3> <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 leading-relaxed"> กีฬาที่ต้องอาศัยสมาธิ ความแม่นยำ และการวางแผนแก้ปัญหาเฉพาะหน้าอย่างรอบคอบในการแข่งขัน </p> </div> <!-- Badminton --> <div class="p-6 rounded-2xl glass-panel hover:border-sky-500/50 shadow-md hover:shadow-xl transition-all duration-300 group hover:-translate-y-1 reveal reveal-delay-2"> <div class="w-12 h-12 rounded-xl bg-sky-500/10 text-sky-500 flex items-center justify-center group-hover:bg-sky-500 group-hover:text-white transition-colors"> <i data-lucide="activity" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold font-title mt-4 text-slate-800 dark:text-white">แบดมินตัน</h3> <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 leading-relaxed"> เสริมสร้างความรวดเร็วในการตัดสินใจ การเคลื่อนไหว และช่วยเสริมสร้างความแข็งแกร่งทางร่างกายอย่างต่อเนื่อง </p> </div> <!-- Teamwork --> <div class="p-6 rounded-2xl glass-panel hover:border-sky-500/50 shadow-md hover:shadow-xl transition-all duration-300 group hover:-translate-y-1 reveal reveal-delay-1"> <div class="w-12 h-12 rounded-xl bg-sky-500/10 text-sky-500 flex items-center justify-center group-hover:bg-sky-500 group-hover:text-white transition-colors"> <i data-lucide="users" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold font-title mt-4 text-slate-800 dark:text-white">การทำงานเป็นทีม</h3> <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 leading-relaxed"> ความเข้าใจบทบาทของตนเองในกลุ่ม การเปิดกว้างรับฟังความคิดเห็น และช่วยประสานความเข้าใจร่วมกัน </p> </div> <!-- Responsibility --> <div class="p-6 rounded-2xl glass-panel hover:border-sky-500/50 shadow-md hover:shadow-xl transition-all duration-300 group hover:-translate-y-1 reveal reveal-delay-2"> <div class="w-12 h-12 rounded-xl bg-sky-500/10 text-sky-500 flex items-center justify-center group-hover:bg-sky-500 group-hover:text-white transition-colors"> <i data-lucide="shield-check" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold font-title mt-4 text-slate-800 dark:text-white">ความรับผิดชอบ</h3> <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 leading-relaxed"> การทำงานเสร็จสิ้นตรงต่อเวลา มุ่งหวังผลลัพธ์ที่ดี และรักษาสัญญาที่ได้รับมอบหมาย </p> </div> <!-- Lifelong Learning --> <div class="p-6 rounded-2xl glass-panel hover:border-sky-500/50 shadow-md hover:shadow-xl transition-all duration-300 group hover:-translate-y-1 reveal reveal-delay-3"> <div class="w-12 h-12 rounded-xl bg-sky-500/10 text-sky-500 flex items-center justify-center group-hover:bg-sky-500 group-hover:text-white transition-colors"> <i data-lucide="book-open" class="w-6 h-6"></i> </div> <h3 class="text-lg font-bold font-title mt-4 text-slate-800 dark:text-white">การเรียนรู้สิ่งใหม่</h3> <p class="text-sm text-slate-500 dark:text-slate-400 mt-2 leading-relaxed"> กระตือรือร้นในการศึกษาทักษะใหม่ๆ ติดตามวิทยาการทางด้านซอฟต์แวร์และการพัฒนาไอทีอยู่สม่ำเสมอ </p> </div> </div> </div> </section> <!-- 6. Contact Section --> <section id="contact" class="py-24 relative overflow-hidden"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <!-- Section Title --> <div class="text-center max-w-3xl mx-auto mb-16 reveal"> <h2 class="text-3xl font-bold tracking-tight sm:text-4xl font-title bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">ติดต่อฉัน</h2> <div class="w-12 h-1 bg-sky-500 mx-auto mt-4 rounded-full"></div> <p class="mt-4 text-base text-slate-500 dark:text-slate-400">ส่งข้อความหาผมเพื่อเริ่มการเจรจางานหรือสอบถามข้อมูล</p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"> <!-- Contact Information (Left) --> <div class="lg:col-span-5 space-y-6 reveal-left"> <div class="p-6 rounded-2xl glass-panel flex items-start space-x-4"> <span class="p-3.5 rounded-xl bg-sky-500/10 text-sky-500 dark:bg-sky-500/20"> <i data-lucide="phone" class="w-6 h-6"></i> </span> <div> <h4 class="font-bold text-base font-title">เบอร์โทรศัพท์</h4> <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">0932411280</p> <a href="tel:0932411280" class="inline-flex items-center text-xs text-sky-500 hover:underline mt-2"> <span>โทรออกทันที</span> <i data-lucide="external-link" class="w-3 h-3 ml-1"></i> </a> </div> </div> <div class="p-6 rounded-2xl glass-panel flex items-start space-x-4"> <span class="p-3.5 rounded-xl bg-sky-500/10 text-sky-500 dark:bg-sky-500/20"> <i data-lucide="mail" class="w-6 h-6"></i> </span> <div> <h4 class="font-bold text-base font-title">อีเมลติดต่อ</h4> <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">adithep1234@gmail.com</p> <a href="mailto:adithep1234@gmail.com" class="inline-flex items-center text-xs text-sky-500 hover:underline mt-2"> <span>ส่งอีเมลหาผม</span> <i data-lucide="external-link" class="w-3 h-3 ml-1"></i> </a> </div> </div> </div> <!-- Contact Form (Right) --> <div class="lg:col-span-7 reveal-right"> <form id="contact-form" class="p-8 rounded-3xl glass-panel shadow-lg space-y-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div> <label for="name" class="block text-xs font-semibold uppercase text-slate-400 mb-2">ชื่อของคุณ</label> <input type="text" id="name" placeholder="ระบุชื่อ-นามสกุล" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white/50 dark:bg-slate-900/50 focus:border-sky-500 focus:ring-1 focus:ring-sky-500 outline-none transition-all text-sm"> </div> <div> <label for="email" class="block text-xs font-semibold uppercase text-slate-400 mb-2">อีเมลติดต่อ</label> <input type="email" id="email" placeholder="example@email.com" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white/50 dark:bg-slate-900/50 focus:border-sky-500 focus:ring-1 focus:ring-sky-500 outline-none transition-all text-sm"> </div> </div> <div> <label for="message" class="block text-xs font-semibold uppercase text-slate-400 mb-2">ข้อความ</label> <textarea id="message" rows="5" placeholder="พิมพ์ข้อความของคุณที่นี่..." required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white/50 dark:bg-slate-900/50 focus:border-sky-500 focus:ring-1 focus:ring-sky-500 outline-none transition-all text-sm resize-none"></textarea> </div> <button type="submit" class="w-full py-4 rounded-xl bg-gradient-to-r from-sky-500 to-blue-600 text-white font-medium hover:shadow-lg hover:shadow-sky-500/20 transform hover:-translate-y-0.5 transition-all flex items-center justify-center space-x-2"> <span>ส่งข้อความ</span> <i data-lucide="send" class="w-4 h-4"></i> </button> </form> </div> </div> </div> </section> <!-- 7. Footer Section --> <footer class="border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 py-12 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-4"> <p class="text-sm text-slate-500 dark:text-slate-400">© 2026 นาย อดิเทพ อาภัย. All rights reserved.</p> <p class="text-xs text-slate-400">Thank you for visiting my Portfolio.</p> <div class="flex justify-center space-x-4 pt-2"> <a href="tel:0932411280" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:text-sky-500 flex items-center justify-center transition-colors"> <i data-lucide="phone" class="w-4 h-4"></i> </a> <a href="mailto:adithep1234@gmail.com" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 hover:text-sky-500 flex items-center justify-center transition-colors"> <i data-lucide="mail" class="w-4 h-4"></i> </a> </div> </div> </footer> <!-- Toast Notification Alert --> <div id="toast" class="fixed bottom-5 right-5 z-50 flex items-center w-full max-w-xs p-4 space-x-4 text-slate-800 bg-white rounded-lg shadow-xl dark:text-slate-100 dark:bg-slate-800 transform translate-y-20 opacity-0 transition-all duration-300"> <div id="toast-message" class="text-sm font-medium"></div> </div> <!-- Back to Top Button --> <button id="back-to-top" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-5 right-5 z-30 p-3 rounded-full bg-sky-500 hover:bg-sky-600 text-white shadow-xl hover:shadow-sky-500/20 transform translate-y-20 opacity-0 transition-all duration-300 focus:outline-none"> <i data-lucide="arrow-up" class="w-5 h-5"></i> </button> <!-- Load Lucide icons scripts --> <script> lucide.createIcons(); </script> <!-- Main Script --> <script src="script.js"></script> </body> </html>

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