File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090015/porfolio/69319090015/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 - Computer Technology & IT Support</title> <meta name="description" content="แฟ้มสะสมผลงาน (Portfolio) ของนักศึกษาสาขาเทคโนโลยีคอมพิวเตอร์ และ IT Support / IT Technician - ดีไซน์ทันสมัย รองรับทุกอุปกรณ์"> <!-- Google Fonts --> <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;800&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Theme Initialization --> <script> (function () { const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark' \|\| (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.setAttribute('data-theme', 'dark'); } else { document.documentElement.removeAttribute('data-theme'); } })(); </script> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: ['class', '[data-theme="dark"]'], theme: { extend: { colors: { bgDark: '#0B0F19', cardDark: 'rgba(17, 24, 39, 0.7)', }, fontFamily: { sans: ['Outfit', 'Prompt', 'sans-serif'], }, animation: { 'fade-in': 'fadeIn 0.3s ease-out forwards', }, keyframes: { fadeIn: { '0%': { opacity: '0', transform: 'translateY(-10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' }, } } } } } </script> <!-- Custom Styles --> <link rel="stylesheet" href="assets/css/style.css"> <!-- Lucide Icons CDN --> <script src="https://unpkg.com/lucide@latest"></script> </head> <body class="bg-[var(--color-bg)] text-gray-800 dark:text-gray-100 antialiased selection:bg-indigo-500/30 selection:text-indigo-200 transition-colors duration-300 pb-24 md:pb-0"> <!-- Glowing Background Grid --> <div class="bg-grid-glow"></div> <!-- --- 1. NAVIGATION BAR --- --> <nav class="fixed top-0 left-0 w-full z-40 glass-nav transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16 md:h-20"> <!-- Logo --> <a href="#home" class="flex items-center gap-2 group"> <div class="w-10 h-10 rounded-lg bg-gradient-to-tr from-indigo-500 to-cyan-400 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-indigo-500/20 group-hover:scale-105 transition-transform"> P </div> <span class="font-bold text-lg md:text-xl tracking-tight bg-gradient-to-r from-gray-800 via-gray-600 to-gray-500 dark:from-white dark:via-gray-200 dark:to-gray-400 bg-clip-text text-transparent transition-colors duration-300"> PORTFOLIO </span> </a> <!-- Desktop Menu --> <div class="hidden md:flex items-center gap-8"> <a href="#home" class="nav-link active text-sm font-medium transition-colors">หน้าแรก</a> <a href="#about" class="nav-link text-sm font-medium transition-colors">เกี่ยวกับฉัน</a> <a href="#skills" class="nav-link text-sm font-medium transition-colors">ทักษะความสามารถ</a> <a href="#projects" class="nav-link text-sm font-medium transition-colors">ผลงาน</a> <a href="#contact" class="nav-link text-sm font-medium transition-colors">ติดต่อฉัน</a> </div> <!-- Actions (Desktop) --> <div class="hidden md:flex items-center gap-4"> <!-- Theme Toggle Button --> <button id="theme-toggle" aria-label="Toggle Theme" class="p-2.5 rounded-lg border border-gray-200 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-850 text-gray-600 hover:text-gray-950 dark:text-gray-300 dark:hover:text-white active:scale-95 transition-all"> <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i> <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i> </button> <a href="#contact" class="px-5 py-2.5 rounded-lg text-sm font-medium text-white bg-gradient-to-r from-indigo-600 to-cyan-500 hover:from-indigo-500 hover:to-cyan-400 shadow-md shadow-indigo-600/20 active:scale-95 transition-all flex items-center gap-2 btn-glow"> <i data-lucide="send" class="w-4 h-4"></i> ติดต่อฉัน </a> </div> <!-- Mobile Actions --> <div class="md:hidden flex items-center gap-3"> <button id="theme-toggle-mobile" aria-label="Toggle Theme" class="p-2.5 rounded-lg bg-gray-100 border border-gray-200 dark:bg-gray-800/50 dark:border-gray-700/50 hover:bg-gray-200 dark:hover:bg-gray-800 active:scale-95 transition-all text-gray-600 dark:text-gray-300"> <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i> <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i> </button> </div> </div> </div> </nav> <!-- --- 2. HERO SECTION --- --> <section id="home" class="min-h-screen pt-24 md:pt-0 flex items-center relative overflow-hidden"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20 w-full"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- Text Content --> <div class="lg:col-span-7 space-y-6 text-center lg:text-left order-2 lg:order-1"> <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/30 text-indigo-300 text-xs md:text-sm font-semibold tracking-wider uppercase mx-auto lg:mx-0 animate-pulse"> <span class="w-2 h-2 rounded-full bg-emerald-400"></span> Available for Internship / Work </div> <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white leading-tight"> สวัสดีครับ, ผม <br class="hidden sm:inline"> <span class="bg-gradient-to-r from-indigo-500 via-cyan-500 to-emerald-500 dark:from-indigo-400 dark:via-cyan-400 dark:to-emerald-400 bg-clip-text text-transparent"> บวรวิทย์ ปัญญาแก้ว </span> </h1> <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-700 dark:text-gray-300 flex items-center justify-center lg:justify-start gap-2 h-10"> <span class="typing-text typing-cursor"></span> </h2> <p class="text-gray-650 dark:text-gray-400 text-base sm:text-lg max-w-xl mx-auto lg:mx-0 leading-relaxed"> นักศึกษาเทคโนโลยีคอมพิวเตอร์ผู้หลงใหลในการแก้ปัญหาฮาร์ดแวร์ การจัดการระบบเครือข่าย และการเขียนโปรแกรมควบคุม IoT ยินดีต้อนรับเข้าสู่แฟ้มสะสมผลงานออนไลน์ของผมครับ </p> <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 font-medium text-white bg-indigo-600 hover:bg-indigo-500 shadow-lg shadow-indigo-600/30 hover:shadow-indigo-500/40 active:scale-95 transition-all text-center flex items-center justify-center gap-2 btn-glow"> <i data-lucide="briefcase" class="w-5 h-5"></i> ดูผลงานของฉัน </a> <a href="#contact" class="w-full sm:w-auto px-8 py-3.5 rounded-xl font-medium text-gray-700 hover:text-gray-950 dark:text-gray-300 dark:hover:text-white bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-gray-350 dark:hover:border-gray-700 active:scale-95 transition-all text-center flex items-center justify-center gap-2 glass-panel"> <i data-lucide="mail" class="w-5 h-5"></i> ติดต่อฉัน </a> </div> </div> <!-- Profile Card/Illustration --> <div class="lg:col-span-5 flex justify-center order-1 lg:order-2"> <div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 float-animation"> <!-- Glow background effects --> <div class="absolute -inset-4 rounded-full bg-gradient-to-r from-indigo-500 to-cyan-400 opacity-20 blur-3xl"> </div> <!-- Styled image container --> <div class="w-full h-full rounded-2xl overflow-hidden glass-panel p-2 flex items-center justify-center"> <img src="assets/images/profile.png" alt="Profile" class="w-full h-full object-cover rounded-xl bg-white dark:bg-gray-950"> </div> <!-- Info Badge (Floating) --> <div class="absolute -bottom-6 -left-6 bg-white/95 dark:bg-gray-900/90 border border-gray-200 dark:border-gray-800 backdrop-blur px-5 py-3 rounded-2xl hidden sm:flex items-center gap-3 shadow-2xl transition-colors duration-300"> <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center text-emerald-500 dark:text-emerald-400"> <i data-lucide="award" class="w-6 h-6"></i> </div> <div> <p class="text-xs text-gray-500 dark:text-gray-400 font-medium">GPAX สะสม</p> <p class="text-sm font-bold text-gray-800 dark:text-white">2.85 / 4.00</p> </div> </div> <div class="absolute -top-6 -right-6 bg-white/95 dark:bg-gray-900/90 border border-gray-200 dark:border-gray-800 backdrop-blur px-5 py-3 rounded-2xl hidden sm:flex items-center gap-3 shadow-2xl transition-colors duration-300"> <div class="w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 dark:text-indigo-400"> <i data-lucide="wrench" class="w-6 h-6"></i> </div> <div> <p class="text-xs text-gray-500 dark:text-gray-400 font-medium">ตำแหน่งหลัก</p> <p class="text-sm font-bold text-gray-800 dark:text-white">IT Support / IoT</p> </div> </div> </div> </div> </div> </div> </section> <!-- --- 3. ABOUT ME SECTION --- --> <section id="about" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="text-center max-w-3xl mx-auto mb-16 space-y-4"> <h2 class="text-xs uppercase tracking-widest text-indigo-500 dark:text-indigo-400 font-bold">About Me</h2> <p class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">ประวัติส่วนตัวและการทำงาน</p> <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-cyan-400 mx-auto rounded-full"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"> <!-- Biography & Details --> <div class="lg:col-span-6 space-y-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">มุ่งมั่นพัฒนาทักษะด้านเทคโนโลยีแบบ Full-Stack </h3> <p class="text-gray-650 dark:text-gray-300 leading-relaxed"> สวัสดีครับ ผม บวรวิทย์ ปัญญาแก้ว ปัจจุบันเป็นนักศึกษาสาขาเทคโนโลยีคอมพิวเตอร์ ผมมีความสนใจอย่างลึกซึ้งเกี่ยวกับการทำงานของคอมพิวเตอร์ ทั้งในส่วนของโครงสร้างฮาร์ดแวร์ การจัดการเครือข่ายที่มีความซับซ้อน และการนำบอร์ดควบคุมอัจฉริยะ (IoT) มาประยุกต์ใช้งานในชีวิตจริง </p> <p class="text-gray-650 dark:text-gray-300 leading-relaxed"> ผมชอบความท้าทายในการค้นหาอาการเสียและซ่อมแซมระบบอุปกรณ์ไอที (Hardware Troubleshooting) รวมถึงการเรียนรู้เทคโนโลยีใหม่ๆ อยู่เสมอเพื่อพร้อมก้าวเข้าสู่การทำงานจริงในสายงานไอทีอย่างมีประสิทธิภาพ </p> <!-- Personal Info Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4"> <div class="p-4 rounded-xl bg-white/60 dark:bg-gray-900/50 border border-gray-250 dark:border-gray-800/80 flex items-center gap-3 transition-colors duration-300"> <i data-lucide="book-open" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0"></i> <div> <span class="text-xs text-gray-500 dark:text-gray-400 block">สาขาวิชา</span> <span class="text-sm font-semibold text-gray-800 dark:text-white">เทคโนโลยีคอมพิวเตอร์</span> </div> </div> <div class="p-4 rounded-xl bg-white/60 dark:bg-gray-900/50 border border-gray-250 dark:border-gray-800/80 flex items-center gap-3 transition-colors duration-300"> <i data-lucide="map-pin" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0"></i> <div> <span class="text-xs text-gray-500 dark:text-gray-400 block">ที่อยู่ปัจจุบัน</span> <span class="text-sm font-semibold text-gray-800 dark:text-white">เชียงใหม่, ประเทศไทย</span> </div> </div> <div class="p-4 rounded-xl bg-white/60 dark:bg-gray-900/50 border border-gray-250 dark:border-gray-800/80 flex items-center gap-3 transition-colors duration-300"> <i data-lucide="languages" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0"></i> <div> <span class="text-xs text-gray-500 dark:text-gray-400 block">ภาษา</span> <span class="text-sm font-semibold text-gray-800 dark:text-white">ไทย (Native), อังกฤษ (Basic)</span> </div> </div> <div class="p-4 rounded-xl bg-white/60 dark:bg-gray-900/50 border border-gray-250 dark:border-gray-800/80 flex items-center gap-3 transition-colors duration-300"> <i data-lucide="calendar" class="w-5 h-5 text-indigo-500 dark:text-indigo-400 shrink-0"></i> <div> <span class="text-xs text-gray-500 dark:text-gray-400 block">ว่างพร้อมทำงาน</span> <span class="text-sm font-semibold text-gray-800 dark:text-white">เริ่มต้น กรกฎาคม 2026</span> </div> </div> </div> </div> <!-- Education & Internship Timeline --> <div class="lg:col-span-6 space-y-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2"> <i data-lucide="history" class="text-indigo-500 dark:text-indigo-400"></i> ประวัติการศึกษาและการฝึกงาน </h3> <div class="relative border-l border-gray-200 dark:border-gray-800 ml-4 space-y-8"> <!-- Timeline Item 1 --> <div class="relative pl-8 group"> <!-- Timeline Dot --> <div class="absolute left-0 top-1.5 w-3 h-3 rounded-full bg-indigo-500 -translate-x-1.5 timeline-dot"> </div> <!-- Content Card --> <div class="p-5 rounded-xl glass-panel relative"> <span class="inline-block px-2.5 py-0.5 mb-2 text-xs font-semibold text-cyan-600 dark:text-cyan-300 bg-cyan-500/10 border border-cyan-200 dark:border-cyan-500/20 rounded"> มีนาคม 2026 - ปัจจุบัน </span> <h4 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-indigo-650 dark:group-hover:text-indigo-300 transition-colors"> ฝึกงานตำแหน่ง IT Technician</h4> <p class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">NCPCOMPUTER</p> <p class="text-xs text-gray-650 dark:text-gray-400 mt-2 leading-relaxed"> รับผิดชอบการซ่อมบำรุงและประกอบอุปกรณ์คอมพิวเตอร์ ตรวจสอบแก้ไขระบบเครือข่ายภายในร้าน คอยบริการให้คำปรึกษาแนะนำการจัดสเปกคอมพิวเตอร์ให้ตรงกับความต้องการของลูกค้า และลงระบบปฏิบัติการ/ซอฟต์แวร์ </p> </div> </div> <!-- Timeline Item 2 --> <div class="relative pl-8 group"> <div class="absolute left-0 top-1.5 w-3 h-3 rounded-full bg-indigo-500 -translate-x-1.5 timeline-dot"> </div> <div class="p-5 rounded-xl glass-panel relative"> <span class="inline-block px-2.5 py-0.5 mb-2 text-xs font-semibold text-indigo-600 dark:text-indigo-300 bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20 rounded"> 2023 - ปัจจุบัน </span> <h4 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-indigo-650 dark:group-hover:text-indigo-300 transition-colors"> ประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) เทคโนโลยีคอมพิวเตอร์</h4> <p class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">วิทยาลัยเทคโนโลยีชื่อดัง</p> <p class="text-xs text-gray-650 dark:text-gray-400 mt-2 leading-relaxed"> เรียนรู้โครงสร้างสถาปัตยกรรมคอมพิวเตอร์ การเขียนโปรแกรมไมโครคอนโทรลเลอร์ (Arduino, ESP32) การวางโครงสร้างสายสัญญาณและออกแบบเครือข่ายคอมพิวเตอร์ </p> </div> </div> </div> </div> </div> </div> </section> <!-- --- 4. SKILLS SECTION --- --> <section id="skills" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative bg-gray-100/30 dark:bg-gray-950/20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="text-center max-w-3xl mx-auto mb-16 space-y-4"> <h2 class="text-xs uppercase tracking-widest text-indigo-500 dark:text-indigo-400 font-bold">Skills</h2> <p class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">ความสามารถและความถนัด</p> <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-cyan-400 mx-auto rounded-full"></div> </div> <!-- Skills Categories Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Category 1: Hardware --> <div class="p-6 md:p-8 rounded-2xl glass-panel space-y-6"> <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 pb-4"> <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3"> <i data-lucide="cpu" class="text-indigo-500 dark:text-indigo-400 w-6 h-6"></i> Hardware Tech </h3> <span class="px-2 py-0.5 text-2xs bg-indigo-500/10 text-indigo-600 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-500/20 rounded font-semibold uppercase">Advanced</span> </div> <div class="space-y-4"> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">PC Assembly & Fitting</span> <span class="text-indigo-500 dark:text-indigo-400 font-semibold">95%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-indigo-500 to-cyan-400 rounded-full" style="width: 95%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">Hardware Troubleshooting</span> <span class="text-indigo-500 dark:text-indigo-400 font-semibold">90%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-indigo-500 to-cyan-400 rounded-full" style="width: 90%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">Arduino & IoT Controllers</span> <span class="text-indigo-500 dark:text-indigo-400 font-semibold">85%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-indigo-500 to-cyan-400 rounded-full" style="width: 85%"></div> </div> </div> <div class="pt-2"> <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-2">เครื่องมือที่เชี่ยวชาญ:</p> <div class="flex flex-wrap gap-1.5"> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">Multimeter</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-655 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">Soldering Iron</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">Oscilloscope</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">NodeMCU</span> </div> </div> </div> </div> <!-- Category 2: Software --> <div class="p-6 md:p-8 rounded-2xl glass-panel space-y-6"> <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 pb-4"> <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3"> <i data-lucide="terminal" class="text-cyan-605 dark:text-cyan-400 w-6 h-6"></i> Software & OS </h3> <span class="px-2 py-0.5 text-2xs bg-cyan-500/10 text-cyan-600 dark:text-cyan-300 border border-cyan-200 dark:border-cyan-500/20 rounded font-semibold uppercase">Intermediate</span> </div> <div class="space-y-4"> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">Windows OS (Client & Server)</span> <span class="text-cyan-650 dark:text-cyan-400 font-semibold">90%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-cyan-500 to-emerald-400 rounded-full" style="width: 90%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">C++ / Embedded Programming</span> <span class="text-cyan-650 dark:text-cyan-400 font-semibold">75%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-cyan-500 to-emerald-400 rounded-full" style="width: 75%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">HTML5 / CSS3 / JavaScript</span> <span class="text-cyan-655 dark:text-cyan-400 font-semibold">70%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-cyan-500 to-emerald-400 rounded-full" style="width: 70%"></div> </div> </div> <div class="pt-2"> <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-2">ซอฟต์แวร์ที่ใช้งานบ่อย:</p> <div class="flex flex-wrap gap-1.5"> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">Arduino IDE</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">VS Code</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">VMware ESXi</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">Rufus</span> </div> </div> </div> </div> <!-- Category 3: Networking --> <div class="p-6 md:p-8 rounded-2xl glass-panel space-y-6"> <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 pb-4"> <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-3"> <i data-lucide="network" class="text-emerald-500 dark:text-emerald-400 w-6 h-6"></i> Networking </h3> <span class="px-2 py-0.5 text-2xs bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-500/20 rounded font-semibold uppercase">Intermediate</span> </div> <div class="space-y-4"> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">LAN / WAN Cabling (UTP/Fiber)</span> <span class="text-emerald-500 dark:text-emerald-400 font-semibold">85%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-emerald-500 to-indigo-500 rounded-full" style="width: 85%"> </div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">Router & Switch Config</span> <span class="text-emerald-500 dark:text-emerald-400 font-semibold">80%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-emerald-500 to-indigo-500 rounded-full" style="width: 80%"> </div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="font-medium text-gray-700 dark:text-gray-300">IP Subnetting & Routing (OSPF)</span> <span class="text-emerald-500 dark:text-emerald-400 font-semibold">75%</span> </div> <div class="w-full h-2 bg-gray-200 dark:bg-gray-900 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-emerald-500 to-indigo-500 rounded-full" style="width: 75%"> </div> </div> </div> <div class="pt-2"> <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mb-2">ทฤษฎีและอุปกรณ์ที่เชี่ยวชาญ:</p> <div class="flex flex-wrap gap-1.5"> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">Cisco IOS</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">MikroTik RouterOS</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">IPv4/IPv6 VLSM</span> <span class="px-2 py-1 bg-gray-100 dark:bg-gray-900 text-xs text-gray-650 dark:text-gray-300 border border-gray-200 dark:border-gray-800 rounded transition-colors duration-300">RJ45 Crimping</span> </div> </div> </div> </div> </div> </div> </section> <!-- --- 5. PROJECTS & PORTFOLIO SECTION --- --> <section id="projects" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="text-center max-w-3xl mx-auto mb-16 space-y-4"> <h2 class="text-xs uppercase tracking-widest text-indigo-500 dark:text-indigo-400 font-bold">Portfolio</h2> <p class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">ผลงานเด่นของฉัน</p> <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-cyan-400 mx-auto rounded-full"></div> </div> <!-- Project Cards Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project Card 1: Arduino --> <div class="group rounded-2xl overflow-hidden glass-panel flex flex-col h-full border border-gray-200 dark:border-gray-800/80 hover:border-indigo-500/30 transition-all duration-300"> <div class="relative h-48 md:h-52 overflow-hidden bg-gray-100 dark:bg-gray-950"> <img src="https://images.unsplash.com/photo-1553406830-ef2513450d76?auto=format&fit=crop&w=800&q=80" alt="Smart Agriculture" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-gray-900/40 dark:from-gray-950 via-transparent to-transparent opacity-60"> </div> <span class="absolute top-4 right-4 px-2.5 py-1 text-2xs font-semibold uppercase tracking-wider bg-indigo-600 dark:bg-indigo-500/80 backdrop-blur-sm text-white rounded-md">IoT / Hardware</span> </div> <div class="p-6 flex flex-col flex-grow space-y-4"> <h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"> Smart Agriculture via Arduino IoT</h3> <p class="text-gray-650 dark:text-gray-400 text-sm leading-relaxed flex-grow line-clamp-3"> ระบบควบคุมและรดน้ำแปลงเกษตรอัจฉริยะ ตรวจวัดระดับความชื้นในดินและสั่งการผ่านแอพพลิเคชั่นและ Cloud Database ส่งข้อมูลแจ้งเตือนทันทีผ่าน Line Notify </p> <div class="flex flex-wrap gap-1.5"> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">Arduino</span> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">ESP8266</span> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">C++</span> </div> <div class="pt-4 border-t border-gray-200 dark:border-gray-800/80 flex items-center justify-between"> <button data-project-id="1" class="view-project-btn text-indigo-600 hover:text-indigo-550 dark:text-indigo-400 dark:hover:text-indigo-300 text-sm font-semibold flex items-center gap-1.5 transition-colors cursor-pointer"> ดูรายละเอียดเพิ่ม <i data-lucide="arrow-up-right" class="w-4 h-4"></i> </button> </div> </div> </div> <!-- Project Card 2: PC Assembly Guide --> <div class="group rounded-2xl overflow-hidden glass-panel flex flex-col h-full border border-gray-200 dark:border-gray-800/80 hover:border-indigo-500/30 transition-all duration-300"> <div class="relative h-48 md:h-52 overflow-hidden bg-gray-100 dark:bg-gray-950"> <img src="https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?auto=format&fit=crop&w=800&q=80" alt="PC Assembly" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-gray-900/40 dark:from-gray-950 via-transparent to-transparent opacity-60"> </div> <span class="absolute top-4 right-4 px-2.5 py-1 text-2xs font-semibold uppercase tracking-wider bg-cyan-600 dark:bg-cyan-500/80 backdrop-blur-sm text-white rounded-md">Maintenance</span> </div> <div class="p-6 flex flex-col flex-grow space-y-4"> <h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"> PC Assembly & Diagnostic Guide</h3> <p class="text-gray-650 dark:text-gray-400 text-sm leading-relaxed flex-grow line-clamp-3"> รวบรวมข้อมูลเทคนิคการประกอบคอมพิวเตอร์อย่างมืออาชีพ การจัดระเบียบสายไฟสายส่งลม และคู่มือซ่อมบำรุงวิเคราะห์อาการเสียเบื้องต้นสำหรับผู้เริ่มต้น </p> <div class="flex flex-wrap gap-1.5"> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">Hardware</span> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">Troubleshoot</span> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">Cabling</span> </div> <div class="pt-4 border-t border-gray-200 dark:border-gray-800/80 flex items-center justify-between"> <button data-project-id="2" class="view-project-btn text-indigo-600 hover:text-indigo-550 dark:text-indigo-400 dark:hover:text-indigo-300 text-sm font-semibold flex items-center gap-1.5 transition-colors cursor-pointer"> ดูรายละเอียดเพิ่ม <i data-lucide="arrow-up-right" class="w-4 h-4"></i> </button> </div> </div> </div> <!-- Project Card 3: Network Infrastructure --> <div class="group rounded-2xl overflow-hidden glass-panel flex flex-col h-full border border-gray-200 dark:border-gray-800/80 hover:border-indigo-500/30 transition-all duration-300"> <div class="relative h-48 md:h-52 overflow-hidden bg-gray-100 dark:bg-gray-950"> <img src="https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=800&q=80" alt="Network Topology" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-gray-900/40 dark:from-gray-950 via-transparent to-transparent opacity-60"> </div> <span class="absolute top-4 right-4 px-2.5 py-1 text-2xs font-semibold uppercase tracking-wider bg-emerald-600 dark:bg-emerald-500/80 backdrop-blur-sm text-white rounded-md">Networking</span> </div> <div class="p-6 flex flex-col flex-grow space-y-4"> <h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"> Network Topology Simulation</h3> <p class="text-gray-655 dark:text-gray-400 text-sm leading-relaxed flex-grow line-clamp-3"> แบบโครงสร้างเครือข่ายระดับองค์กร (SME) ในแบบจำลอง Cisco Packet Tracer จัดสรรไอพีแอดเดรส Subnetting คอนฟิก Routing Protocol และ ACL Firewall </p> <div class="flex flex-wrap gap-1.5"> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">Cisco</span> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">VLAN</span> <span class="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 rounded border border-gray-200 dark:border-gray-800">Subnetting</span> </div> <div class="pt-4 border-t border-gray-200 dark:border-gray-800/80 flex items-center justify-between"> <button data-project-id="3" class="view-project-btn text-indigo-600 hover:text-indigo-550 dark:text-indigo-400 dark:hover:text-indigo-300 text-sm font-semibold flex items-center gap-1.5 transition-colors cursor-pointer"> ดูรายละเอียดเพิ่ม <i data-lucide="arrow-up-right" class="w-4 h-4"></i> </button> </div> </div> </div> </div> </div> </section> <!-- --- 6. CONTACT SECTION --- --> <section id="contact" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative bg-gray-100/30 dark:bg-gray-950/20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="text-center max-w-3xl mx-auto mb-16 space-y-4"> <h2 class="text-xs uppercase tracking-widest text-indigo-500 dark:text-indigo-400 font-bold">Contact</h2> <p class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">ช่องทางติดต่อ</p> <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-cyan-400 mx-auto rounded-full"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12"> <!-- Contact Information Links --> <div class="lg:col-span-5 space-y-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white">มาร่วมงานกันเถอะ!</h3> <p class="text-gray-650 dark:text-gray-400 leading-relaxed text-base"> หากคุณมีความสนใจในประวัติผลงาน ทักษะความสามารถของผม หรือต้องการติดต่อนำเสนอโอกาสฝึกงาน/ตำแหน่งงาน สามารถส่งข้อความผ่านทางฟอร์มนี้ หรือติดต่อผมโดยตรงตามช่องทางด้านล่างได้ตลอดเวลาครับ </p> <div class="space-y-4 pt-4"> <!-- Email link --> <a href="mailto:maibuauty@gmail.com" class="p-4 rounded-xl glass-panel flex items-center gap-4 hover:translate-x-1 group"> <div class="w-11 h-11 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 dark:text-indigo-400 group-hover:scale-110 transition-transform"> <i data-lucide="mail" class="w-5 h-5"></i> </div> <div> <span class="text-xs text-gray-500 dark:text-gray-400 block font-medium">อีเมลตรง</span> <span class="text-sm font-semibold text-gray-800 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-300 transition-colors">maibuauty@gmail.com</span> </div> </a> <!-- Github Link --> <a href="https://github.com" target="_blank" class="p-4 rounded-xl glass-panel flex items-center gap-4 hover:translate-x-1 group"> <div class="w-11 h-11 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400 group-hover:scale-110 transition-transform"> <i data-lucide="github" class="w-5 h-5"></i> </div> <div> <span class="text-xs text-gray-500 dark:text-gray-400 block font-medium">ดูซอร์สโค้ดเพิ่มเติม</span> <span class="text-sm font-semibold text-gray-800 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-300 transition-colors">github.com/bawornwit-pc</span> </div> </a> <!-- Call/Phone --> <div class="p-4 rounded-xl glass-panel flex items-center gap-4 group"> <div class="w-11 h-11 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500 dark:text-indigo-400 group-hover:scale-110 transition-transform"> <i data-lucide="phone" class="w-5 h-5"></i> </div> <div> <span class="text-xs text-gray-500 dark:text-gray-400 block font-medium">เบอร์โทรศัพท์</span> <span class="text-sm font-semibold text-gray-800 dark:text-white">095-204-8124</span> </div> </div> </div> </div> <!-- Contact Form Card --> <div class="lg:col-span-7"> <form id="contact-form" class="p-6 md:p-8 rounded-2xl glass-panel space-y-6"> <h3 class="text-xl font-bold text-gray-900 dark:text-white">ส่งข้อความหาฉัน</h3> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="space-y-2"> <label for="name" class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">ชื่อของคุณ</label> <input type="text" id="name" required class="w-full px-4 py-3 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-indigo-500/60 focus:ring-1 focus:ring-indigo-500/60 transition-all text-sm"> </div> <div class="space-y-2"> <label for="email" class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">อีเมลผู้ติดต่อ</label> <input type="email" id="email" required class="w-full px-4 py-3 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-indigo-500/60 focus:ring-1 focus:ring-indigo-500/60 transition-all text-sm"> </div> </div> <div class="space-y-2"> <label for="message" class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">ข้อความ</label> <textarea id="message" rows="5" required class="w-full px-4 py-3 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-indigo-500/60 focus:ring-1 focus:ring-indigo-500/60 transition-all text-sm" placeholder="เขียนข้อความหรือรายละเอียดงานที่ต้องการนำเสนอ..."></textarea> </div> <button type="submit" class="w-full py-4 px-6 rounded-xl font-semibold text-white bg-indigo-600 hover:bg-indigo-500 active:scale-[0.98] transition-all flex items-center justify-center gap-2 btn-glow shadow-lg shadow-indigo-600/30"> <i data-lucide="send" class="w-4 h-4"></i> ส่งข้อความทันที </button> </form> </div> </div> </div> </section> <!-- --- 7. FOOTER --- --> <footer class="py-8 border-t border-gray-200 dark:border-gray-900/40 bg-gray-50 dark:bg-gray-950/80"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4"> <div class="flex items-center gap-2"> <div class="w-8 h-8 rounded bg-gradient-to-tr from-indigo-500 to-cyan-400 flex items-center justify-center text-white font-bold text-base shadow"> P </div> <span class="text-sm font-semibold tracking-wider text-gray-600 dark:text-gray-400"> Bawornwit Portfolio </span> </div> <p class="text-xs text-gray-500"> © 2026 Bawornwit Panyakaew. All rights reserved. Designed for excellence. </p> </div> </footer> <!-- --- MOBILE BOTTOM TAB BAR --- --> <div class="fixed bottom-0 left-0 right-0 z-40 md:hidden bg-white/80 dark:bg-gray-950/80 border-t border-gray-200 dark:border-gray-850 backdrop-blur-lg px-4 py-2 shadow-2xl transition-all duration-300 rounded-t-2xl"> <div class="flex justify-around items-center h-12"> <!-- Tab 1: Home --> <a href="#home" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1"> <i data-lucide="home" class="w-5 h-5"></i> <span class="text-[10px] font-semibold tracking-tight">หน้าแรก</span> </a> <!-- Tab 2: About --> <a href="#about" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1"> <i data-lucide="user" class="w-5 h-5"></i> <span class="text-[10px] font-semibold tracking-tight">เกี่ยวกับฉัน</span> </a> <!-- Tab 3: Skills --> <a href="#skills" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1"> <i data-lucide="award" class="w-5 h-5"></i> <span class="text-[10px] font-semibold tracking-tight">ทักษะ</span> </a> <!-- Tab 4: Projects --> <a href="#projects" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1"> <i data-lucide="briefcase" class="w-5 h-5"></i> <span class="text-[10px] font-semibold tracking-tight">ผลงาน</span> </a> <!-- Tab 5: Contact --> <a href="#contact" class="nav-link flex flex-col items-center justify-center text-center gap-1 flex-1 py-1"> <i data-lucide="mail" class="w-5 h-5"></i> <span class="text-[10px] font-semibold tracking-tight">ติดต่อ</span> </a> </div> </div> <!-- --- 8. PROJECT MODAL POPUP --- --> <div id="project-modal" class="hidden fixed inset-0 z-50 overflow-y-auto bg-gray-950/80 backdrop-blur-sm items-center justify-center p-4"> <div class="relative w-full max-w-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-2xl p-6 md:p-8 max-h-[90vh] overflow-y-auto animate-fade-in transition-colors duration-300"> <!-- Close button --> <button id="modal-close" class="absolute top-4 right-4 p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-800 active:scale-95 text-gray-500 hover:text-gray-950 dark:text-gray-400 dark:hover:text-white transition-all cursor-pointer"> <i data-lucide="x" class="w-5 h-5"></i> </button> <!-- Content Container --> <div id="modal-content" class="flex flex-col space-y-4"> <!-- Inside populated by JS dynamic content --> </div> </div> </div> <!-- --- 9. TOAST NOTIFICATION --- --> <div id="toast" class="hidden fixed bottom-5 right-5 z-50 flex items-center gap-3 px-4 py-3 bg-white dark:bg-gray-900 border border-indigo-500/30 rounded-xl shadow-2xl"> <div class="toast-icon-container"> <i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-500 dark:text-emerald-400"></i> </div> <span class="toast-text text-sm text-gray-850 dark:text-gray-200"></span> </div> <!-- Scripts --> <script src="assets/js/app.js"></script> </body> </html>

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