File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090053/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>Auckkharadej Pongphot \| Full-Stack Developer Portfolio</title> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ อัครเดช พงศ์โภชน์ (Auckkharadej Pongphot) - Full-Stack Web Developer. รับออกแบบและพัฒนาเว็บแอปพลิเคชันที่ทันสมัย สะอาดตา และมีประสิทธิภาพสูง"> <!-- Google Fonts: Outfit & Inter --> <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=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { brand: { 50: '#f0f7ff', 100: '#e0effe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 900: '#1e3a8a', darkBg: '#0b1329', darkCard: '#1c2541' } }, fontFamily: { sans: ['Inter', 'Outfit', 'sans-serif'], title: ['Outfit', 'sans-serif'] } } } } </script> <!-- Custom CSS --> <link rel="stylesheet" href="style.css"> </head> <body class="bg-slate-50 text-slate-800 dark:bg-[#0b132b] dark:text-slate-100 transition-colors duration-300 font-sans"> <!-- Header / Navigation --> <header id="navbar" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 border-b border-transparent"> <nav class="container mx-auto px-6 py-4 flex items-center justify-between"> <!-- Logo --> <a href="#home" class="text-2xl font-bold font-title bg-gradient-to-r from-brand-600 to-indigo-500 bg-clip-text text-transparent hover:opacity-80 transition-opacity"> AP.Dev </a> <!-- Desktop Navigation Menu --> <div class="hidden md:flex items-center space-x-8 font-medium"> <a href="#home" class="nav-link hover:text-brand-600 transition-colors duration-200">หน้าแรก</a> <a href="#about" class="nav-link hover:text-brand-600 transition-colors duration-200">เกี่ยวกับเรา</a> <a href="#projects" class="nav-link hover:text-brand-600 transition-colors duration-200">ผลงาน</a> <a href="#contact" class="nav-link hover:text-brand-600 transition-colors duration-200">ติดต่อ</a> </div> <!-- Actions (Theme Toggle & CTA) --> <div class="hidden md:flex items-center space-x-4"> <!-- Theme Toggle Button --> <button id="theme-toggle" class="p-2.5 rounded-xl bg-slate-200/60 dark:bg-slate-800/80 text-slate-700 dark:text-slate-200 hover:scale-105 transition-transform duration-200 focus:outline-none"> <i id="theme-toggle-icon" class="fas fa-moon"></i> </button> <a href="#contact" class="px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-700 text-white font-medium shadow-md shadow-brand-500/10 hover:shadow-brand-500/20 transform hover:-translate-y-0.5 transition-all duration-200"> ติดต่อฉัน </a> </div> <!-- Mobile Menu Elements --> <div class="flex items-center space-x-3 md:hidden"> <!-- Mobile Theme Toggle --> <button id="theme-toggle-mobile" class="p-2 rounded-lg bg-slate-200/60 dark:bg-slate-800/80 text-slate-700 dark:text-slate-200 focus:outline-none"> <i id="theme-toggle-icon-mobile" class="fas fa-moon"></i> </button> <!-- Hamburger Button --> <button id="menu-btn" class="text-slate-700 dark:text-slate-200 focus:outline-none p-2 rounded-lg hover:bg-slate-200/30 dark:hover:bg-slate-800/30"> <i class="fas fa-bars text-xl"></i> </button> </div> </nav> <!-- Mobile Navigation Menu --> <div id="mobile-menu" class="hidden md:hidden bg-white/95 dark:bg-[#0b132b]/95 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 transition-all duration-300"> <div class="flex flex-col px-6 py-4 space-y-4 font-medium"> <a href="#home" class="mobile-nav-link py-2 border-b border-slate-100 dark:border-slate-800 hover:text-brand-600">หน้าแรก</a> <a href="#about" class="mobile-nav-link py-2 border-b border-slate-100 dark:border-slate-800 hover:text-brand-600">เกี่ยวกับเรา</a> <a href="#projects" class="mobile-nav-link py-2 border-b border-slate-100 dark:border-slate-800 hover:text-brand-600">ผลงาน</a> <a href="#contact" class="mobile-nav-link py-2 hover:text-brand-600">ติดต่อ</a> <a href="#contact" class="w-full text-center px-5 py-3 rounded-xl bg-brand-600 text-white font-medium block"> ติดต่อฉัน </a> </div> </div> </header> <!-- Hero Section --> <section id="home" class="min-h-screen flex items-center justify-center pt-24 relative overflow-hidden"> <!-- Background Decorative Orbs --> <div class="absolute top-1/4 left-1/10 w-72 h-72 bg-blue-400/20 dark:bg-blue-600/10 rounded-full filter blur-3xl animate-pulse"> </div> <div class="absolute bottom-1/4 right-1/10 w-96 h-96 bg-indigo-400/20 dark:bg-indigo-600/10 rounded-full filter blur-3xl animate-pulse" style="animation-delay: 2s;"></div> <div class="container mx-auto px-6 py-12 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10"> <!-- Text Content --> <div class="lg:col-span-7 space-y-6 text-center lg:text-left"> <div class="inline-flex items-center space-x-2 px-3 py-1.5 rounded-full bg-brand-50 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 text-sm font-semibold tracking-wide"> <span class="w-2 h-2 rounded-full bg-brand-500 animate-ping"></span> <span>ยินดีต้อนรับสู่พอร์ตโฟลิโอของฉัน</span> </div> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold font-title tracking-tight leading-tight"> สวัสดีครับ ผม <span class="bg-gradient-to-r from-brand-600 to-indigo-500 bg-clip-text text-transparent">อัครเดช พงศ์โภชน์</span> </h1> <p class="text-xl sm:text-2xl font-semibold text-slate-700 dark:text-slate-300 font-title"> Full-Stack Web Developer & Designer </p> <p class="text-slate-600 dark:text-slate-400 max-w-xl mx-auto lg:mx-0 leading-relaxed"> นักศึกษาจากวิทยาลัยเทคนิคเชียงใหม่ ระดับการศึกษา ปวส.1 ผู้มีความมุ่งมั่นและสนใจในการพัฒนาทักษะด้านต่าง ๆ </p> <!-- Actions --> <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 px-8 py-3.5 rounded-xl bg-slate-900 hover:bg-slate-800 dark:bg-brand-600 dark:hover:bg-brand-700 text-white font-medium text-center shadow-lg shadow-slate-900/10 dark:shadow-brand-500/20 transform hover:-translate-y-0.5 transition-all duration-200"> ดูผลงานของฉัน <i class="fas fa-arrow-right ml-2 text-xs"></i> </a> <a href="#contact" class="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-white hover:bg-slate-50 dark:bg-slate-800/80 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-800 dark:text-white font-medium text-center transform hover:-translate-y-0.5 transition-all duration-200"> พูดคุยตกลงงาน </a> </div> </div> <!-- Visual Component (Card/Interactive Illustration) --> <div class="lg:col-span-5 flex justify-center"> <div class="relative w-full max-w-[380px] aspect-square rounded-3xl p-1 bg-gradient-to-tr from-brand-500 to-indigo-500 shadow-2xl shadow-indigo-500/10 dark:shadow-brand-500/10"> <div class="w-full h-full rounded-[22px] overflow-hidden bg-white dark:bg-[#1c2541]"> <img src="2093.jpg" alt="Auckkharadej Pongphot" class="w-full h-full object-cover"> </div> </div> </div> </div> </section> <!-- About Me Section --> <section id="about" class="py-24 bg-white dark:bg-[#10172e] border-y border-slate-100 dark:border-slate-800/60 transition-colors duration-300"> <div class="container mx-auto px-6"> <!-- Section Heading --> <div class="max-w-3xl mx-auto text-center mb-16 space-y-3"> <h2 class="text-3xl sm:text-4xl font-bold font-title">เกี่ยวกับผม (About Me)</h2> <div class="w-16 h-1 mx-auto bg-brand-600 rounded-full"></div> <p class="text-slate-500 dark:text-slate-400">เรียนรู้เกี่ยวกับประวัติส่วนตัว ทักษะทางเทคนิค และเครื่องมือที่ใช้ในการพัฒนาโปรเจกต์</p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-6xl mx-auto"> <!-- Info Left --> <div class="lg:col-span-5 space-y-6"> <div class="relative w-48 h-48 mx-auto lg:mx-0 rounded-3xl overflow-hidden border-4 border-white dark:border-brand-darkCard shadow-xl bg-gradient-to-tr from-brand-500 to-indigo-500 p-0.5"> <div class="w-full h-full rounded-[20px] overflow-hidden bg-slate-100"> <img src="2093.jpg" alt="Auckkharadej Pongphot" class="w-full h-full object-cover"> </div> </div> <!-- Biography Info --> <div class="space-y-4 pt-2"> <div class="border-b border-slate-100 dark:border-slate-800 pb-2"> <span class="text-xs text-slate-400 uppercase tracking-wider block font-semibold">ชื่อ-นามสกุล</span> <span class="text-lg font-bold text-slate-800 dark:text-slate-100">นายอัครเดช พงศ์โภชน์</span> </div> <div class="border-b border-slate-100 dark:border-slate-800 pb-2"> <span class="text-xs text-slate-400 uppercase tracking-wider block font-semibold">อายุ</span> <span class="text-lg font-bold text-slate-800 dark:text-slate-100">18 ปี</span> </div> <div class="border-b border-slate-100 dark:border-slate-800 pb-2"> <span class="text-xs text-slate-400 uppercase tracking-wider block font-semibold">วันเกิด</span> <span class="text-lg font-bold text-slate-800 dark:text-slate-100">14 มิถุนายน 2551</span> </div> <div class="border-b border-slate-100 dark:border-slate-800 pb-2"> <span class="text-xs text-slate-400 uppercase tracking-wider block font-semibold">อาชีพ</span> <span class="text-lg font-bold text-slate-800 dark:text-slate-100">นักศึกษา (ระดับ ปวส.1)</span> </div> <div class="pb-2"> <span class="text-xs text-slate-400 uppercase tracking-wider block font-semibold">สถานศึกษา</span> <span class="text-lg font-bold text-slate-800 dark:text-slate-100 flex items-center gap-2"> <i class="fa-solid fa-school text-brand-600"></i> วิทยาลัยเทคนิคเชียงใหม่ </span> </div> </div> </div> <!-- Skills Right --> <div class="lg:col-span-7 space-y-6"> <h3 class="text-xl font-bold font-title flex items-center space-x-2 text-slate-800 dark:text-slate-100"> <i class="fas fa-heart text-brand-600 animate-pulse"></i> <span>กิจกรรมและความสนใจ (Activities & Hobbies)</span> </h3> <!-- Skills Category Container --> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="skill-pill"> <i class="fa-solid fa-basketball text-orange-500 text-lg"></i> <span>เล่นบาสเกตบอล</span> </div> <div class="skill-pill"> <i class="fa-solid fa-person-swimming text-sky-500 text-lg"></i> <span>ว่ายน้ำ</span> </div> <div class="skill-pill"> <i class="fa-solid fa-chess-board text-amber-600 text-lg"></i> <span>แข่งหมากล้อม</span> </div> <div class="skill-pill"> <i class="fa-solid fa-gamepad text-emerald-500 text-lg"></i> <span>แข่งเกม (E-Sports)</span> </div> </div> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="py-24 bg-slate-50 dark:bg-[#0b132b] transition-colors duration-300"> <div class="container mx-auto px-6"> <!-- Section Heading --> <div class="max-w-3xl mx-auto text-center mb-12 space-y-3"> <h2 class="text-3xl sm:text-4xl font-bold font-title">ผลงานของฉัน (Featured Projects)</h2> <div class="w-16 h-1 mx-auto bg-brand-600 rounded-full"></div> <p class="text-slate-500 dark:text-slate-400">ตัวอย่างบางส่วนของระบบที่ผมได้ออกแบบ พัฒนา และดูแลแบบครบวงจร</p> </div> <!-- Projects Grid --> <div class="grid grid-cols-1 max-w-xl mx-auto" id="projects-grid"> <!-- Project 1: E-commerce --> <div class="project-card bg-white dark:bg-[#1c2541] rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-md hover:shadow-xl transition-all duration-300 flex flex-col" data-category="fullstack"> <!-- Project Image / Placeholder UI --> <div class="h-48 bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center p-6 relative group overflow-hidden"> <i class="fa-solid fa-cart-shopping text-6xl text-white/20 transform group-hover:scale-110 transition-transform duration-300"></i> <span class="absolute top-4 right-4 bg-blue-500/90 text-white text-xs px-2.5 py-1 rounded-full font-bold">Featured</span> <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 flex items-center justify-center space-x-3 transition-opacity duration-300"> <a href="#" class="p-3 bg-white text-slate-900 rounded-full hover:scale-110 transition-transform"><i class="fas fa-link"></i></a> <a href="#" class="p-3 bg-white text-slate-900 rounded-full hover:scale-110 transition-transform"><i class="fab fa-github"></i></a> </div> </div> <!-- Card Body --> <div class="p-6 flex flex-col flex-grow space-y-4"> <div class="flex flex-wrap gap-1.5"> <span class="tag">React.js</span> <span class="tag">Node.js</span> <span class="tag">MySQL</span> </div> <h3 class="text-xl font-bold font-title">กิจกรรม</h3> <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed flex-grow"> ประสบการณ์ที่ได้ศึกษาในวิทยาลัย </p> <div class="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-slate-700/60"> <span class="text-xs text-slate-400"><i class="fas fa-tag mr-1"></i> Full-Stack</span> <a href="#contact" class="text-sm font-semibold text-brand-600 dark:text-brand-400 hover:underline">สอบถามเพิ่มเติม <i class="fas fa-arrow-right text-xs ml-1"></i></a> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-24 bg-white dark:bg-[#10172e] transition-colors duration-300"> <div class="container mx-auto px-6"> <!-- Section Heading --> <div class="max-w-3xl mx-auto text-center mb-16 space-y-3"> <h2 class="text-3xl sm:text-4xl font-bold font-title">ติดต่อฉัน (Contact Me)</h2> <div class="w-16 h-1 mx-auto bg-brand-600 rounded-full"></div> <p class="text-slate-500 dark:text-slate-400">สนใจร่วมงานหรือปรึกษาโปรเจกต์ สามารถติดต่อผมได้ผ่านข้อมูลด้านล่างนี้</p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 max-w-6xl mx-auto items-start"> <!-- Contact Info Cards --> <div class="lg:col-span-5 space-y-6"> <div class="p-6 rounded-2xl bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-slate-800/80 flex items-start space-x-4"> <div class="w-12 h-12 rounded-xl bg-brand-500/10 text-brand-600 flex items-center justify-center flex-shrink-0 text-xl"> <i class="fas fa-envelope"></i> </div> <div> <h4 class="font-bold text-lg font-title">ส่งอีเมล</h4> <p class="text-slate-500 dark:text-slate-400 text-sm mb-2"> สอบถามหรือพูดคุยรายละเอียดโปรเจกต์</p> <a href="mailto:Auckkharadej.p@gmail.com" class="text-brand-600 dark:text-brand-400 font-semibold hover:underline"> Auckkharadej.p@gmail.com </a> </div> </div> <div class="p-6 rounded-2xl bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-slate-800/80 flex items-start space-x-4"> <div class="w-12 h-12 rounded-xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center flex-shrink-0 text-xl"> <i class="fas fa-phone"></i> </div> <div> <h4 class="font-bold text-lg font-title">เบอร์โทรศัพท์</h4> <p class="text-slate-500 dark:text-slate-400 text-sm mb-2">ติดต่อสอบถามได้โดยตรง</p> <a href="tel:0823378558" class="text-brand-600 dark:text-brand-400 font-semibold hover:underline"> 082-337-8558 </a> </div> </div> <div class="p-6 rounded-2xl bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-slate-800/80 flex items-start space-x-4"> <div class="w-12 h-12 rounded-xl bg-indigo-500/10 text-indigo-600 flex items-center justify-center flex-shrink-0 text-xl"> <i class="fas fa-clock"></i> </div> <div> <h4 class="font-bold text-lg font-title">เวลาที่สะดวกในการตอบกลับ</h4> <p class="text-slate-500 dark:text-slate-400 text-sm mb-1">จันทร์ - ศุกร์: 09:00 - 18:00 น. </p> <p class="text-slate-500 dark:text-slate-400 text-xs text-brand-600">ตอบกลับภายใน 24 ชม.</p> </div> </div> </div> <!-- Contact Form --> <div class="lg:col-span-7 bg-slate-50 dark:bg-slate-800/30 border border-slate-100 dark:border-slate-800/60 p-8 rounded-3xl shadow-sm"> <form id="contact-form" class="space-y-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div class="space-y-2"> <label for="name" class="text-sm font-semibold text-slate-600 dark:text-slate-300">ชื่อของคุณ</label> <input type="text" id="name" required class="form-input" placeholder="สมชาย ใจดี"> </div> <div class="space-y-2"> <label for="email" class="text-sm font-semibold text-slate-600 dark:text-slate-300">อีเมลติดต่อ</label> <input type="email" id="email" required class="form-input" placeholder="somchai@example.com"> </div> </div> <div class="space-y-2"> <label for="subject" class="text-sm font-semibold text-slate-600 dark:text-slate-300">หัวข้อเรื่อง</label> <input type="text" id="subject" required class="form-input" placeholder="สนใจพัฒนาระบบ E-Commerce / ปรึกษาโปรเจกต์"> </div> <div class="space-y-2"> <label for="message" class="text-sm font-semibold text-slate-600 dark:text-slate-300">ข้อความ</label> <textarea id="message" rows="5" required class="form-input" placeholder="พิมพ์ข้อความรายละเอียดที่นี่..."></textarea> </div> <button type="submit" class="w-full py-3.5 px-6 rounded-xl bg-brand-600 hover:bg-brand-700 text-white font-semibold flex items-center justify-center space-x-2 transform hover:-translate-y-0.5 transition-all duration-200"> <span>ส่งข้อความหาฉัน</span> <i class="fas fa-paper-plane text-xs"></i> </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-slate-900 text-slate-400 py-12 border-t border-slate-800"> <div class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6"> <div class="text-center md:text-left"> <a href="#home" class="text-xl font-bold font-title text-white">AP.Dev</a> <p class="text-sm mt-1 text-slate-500">นายอัครเดช พงศ์โภชน์ (Auckkharadej Pongphot)</p> </div> <div class="flex items-center space-x-6 text-xl"> <a href="mailto:Auckkharadej.p@gmail.com" class="hover:text-white transition-colors"><i class="fas fa-envelope"></i></a> <a href="#" class="hover:text-white transition-colors"><i class="fab fa-github"></i></a> <a href="#" class="hover:text-white transition-colors"><i class="fab fa-linkedin"></i></a> </div> <p class="text-sm text-slate-500 text-center md:text-right"> © 2026 Auckkharadej Pongphot. All rights reserved. </p> </div> </footer> <!-- Script imports --> <script src="script.js"></script> </body> </html>

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