File manager - Edit - /home/webapp69.cm.in.th/u69319090015/Portfolio/index.php
Back
<?php // Dynamic Portfolio - Bawornwit Panyakaew require_once 'db.php'; // Projects Data Array $projects = [ 1 => [ 'title' => "Smart Agriculture via Arduino IoT", 'subtitle' => "โปรเจกต์ Arduino ระบบควบคุมฟาร์มอัจฉริยะ", 'image' => "https://images.unsplash.com/photo-1553406830-ef2513450d76?auto=format&fit=crop&w=800&q=80", 'tag' => "IoT / Hardware", 'tags' => ["Arduino", "IoT", "ESP8266", "Hardware", "C++"], 'short_desc' => "ระบบควบคุมและรดน้ำแปลงเกษตรอัจฉริยะ ตรวจวัดระดับความชื้นในดินและสั่งการผ่านแอพพลิเคชั่นและ Cloud Database ส่งข้อมูลแจ้งเตือนทันทีผ่าน Line Notify", 'description' => "ระบบควบคุมฟาร์มอัจฉริยะตรวจวัดความชื้นในดิน อุณหภูมิ และระดับน้ำ เชื่อมต่อสั่งการผ่าน Application และ Cloud Service แบบ Real-time ตัวเครื่องจะรดน้ำอัตโนมัติเมื่อค่าความชื้นต่ำกว่าเกณฑ์ และส่งการแจ้งเตือนไปยังสมาร์ทโฟนของผู้ใช้งาน", 'features' => [ "ตรวจจับระดับความชื้นในดินและอุณหภูมิอากาศแบบ Real-time", "ระบบสั่งเปิด-ปิดปั๊มน้ำอัตโนมัติ (Relay Switch Control)", "เชื่อมต่อ WiFi ด้วยบอร์ด NodeMCU ESP8266", "แจ้งเตือนผ่าน Line Notify ทันทีเมื่อเกิดความผิดปกติในระบบ", "เก็บข้อมูลสถิติประวัติย้อนหลังด้วยฐานข้อมูล Firebase" ] ], 2 => [ 'title' => "PC Assembly Guide & Diagnostic Manual", 'subtitle' => "คู่มือประกอบคอมพิวเตอร์และการตรวจเช็กอาการเสีย", 'image' => "https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?auto=format&fit=crop&w=800&q=80", 'tag' => "Maintenance", 'tags' => ["Hardware", "Maintenance", "Windows", "Manual"], 'short_desc' => "รวบรวมข้อมูลเทคนิคการประกอบคอมพิวเตอร์อย่างมืออาชีพ การจัดระเบียบสายไฟสายส่งลม และคู่มือซ่อมบำรุงวิเคราะห์อาการเสียเบื้องต้นสำหรับผู้เริ่มต้น", 'description' => "คู่มือแบบบูรณาการที่รวบรวมเทคนิค วิธีการจัดสเปก และขั้นตอนการประกอบเครื่องคอมพิวเตอร์ทีละขั้นตอนอย่างละเอียด รวมถึงเทคนิคการแก้ไขปัญหาพื้นฐาน (Troubleshooting) ที่เขียนขึ้นเพื่อใช้งานเป็นสื่อการเรียนการสอนในสาขาวิชาชีพ", 'features' => [ "อธิบายขั้นตอนการเลือกชิ้นส่วนหลัก CPU, RAM, Mainboard, GPU ให้สอดคล้องกัน", "เทคนิคการจัดสายไฟ (Cable Management) ภายในเคสอย่างถูกต้องเพื่อการไหลเวียนของลม", "ตารางวิเคราะห์อาการเสียทั่วไป (เช่น ไฟไม่เข้าเครื่อง, บอร์ดร้องเตือน, จอฟ้า)", "คู่มือการติดตั้งและตั้งค่า BIOS / UEFI เบื้องต้นอย่างละเอียด" ] ], 3 => [ 'title' => "Network Infrastructure Design", 'subtitle' => "การออกแบบและวางระบบเครือข่ายภายในองค์กรจำลอง", 'image' => "https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=800&q=80", 'tag' => "Networking", 'tags' => ["Networking", "Cisco Packet Tracer", "Subnetting", "Routing"], 'short_desc' => "ออกแบบและวางระบบเครือข่ายความปลอดภัยสูงภายในองค์กรจำลอง แบ่งแยกแผนกด้วย VLAN กำหนด IP Address และควบคุม ACL สิทธิ์การเข้าถึงข้อมูล", 'description' => "จำลองการวางโครงสร้างระบบเครือข่าย (Network Design) สำหรับองค์กรขนาดเล็กถึงกลาง มีการแบ่งโซนความปลอดภัย VLANs, จัดการ IP Address Subnetting และการกำหนดสิทธิ์การเข้าถึงข้อมูลผ่าน ACL", 'features' => [ "แบ่งแผนกเพื่อความปลอดภัยด้วย VLAN (HR, IT, Guest, Management)", "กำหนดนโยบาย IP address ด้วย Class C Variable Length Subnet Masking (VLSM)", "ตั้งค่า Dynamic Routing OSPF ระหว่างสาขา", "ทดสอบและจำลองประสิทธิภาพเครือข่ายใน Cisco Packet Tracer" ] ] ]; // Experience Data Array $timeline = [ [ 'date' => "มีนาคม 2026 - ปัจจุบัน", 'title' => "ฝึกงานตำแหน่ง IT Technician", 'company' => "NCPCOMPUTER", 'desc' => "รับผิดชอบการซ่อมบำรุงและประกอบอุปกรณ์คอมพิวเตอร์ ตรวจสอบแก้ไขระบบเครือข่ายภายในร้าน คอยบริการให้คำปรึกษาแนะนำการจัดสเปกคอมพิวเตอร์ให้ตรงกับความต้องการของลูกค้า และลงระบบปฏิบัติการ/ซอฟต์แวร์", 'badge' => "Internship", 'badge_color' => "cyan" ], [ 'date' => "2023 - ปัจจุบัน", 'title' => "ประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) เทคโนโลยีคอมพิวเตอร์", 'company' => "วิทยาลัยเทคโนโลยีชื่อดัง", 'desc' => "เรียนรู้โครงสร้างสถาปัตยกรรมคอมพิวเตอร์ การเขียนโปรแกรมไมโครคอนโทรลเลอร์ (Arduino, ESP32) การวางโครงสร้างสายสัญญาณและออกแบบเครือข่ายคอมพิวเตอร์", 'badge' => "Education", 'badge_color' => "indigo" ] ]; // Check if user wants to view messages $viewMessages = isset($_GET['view']) && $_GET['view'] === 'messages'; $messagesList = []; if ($viewMessages) { if ($pdo !== null) { try { $messagesList = $pdo->query('SELECT * FROM portfolio_contacts ORDER BY created_at DESC')->fetchAll(); } catch (\Exception $e) { // Failed, try read JSON $messagesList = json_decode(@file_get_contents('messages.json'), true) ?: []; } } else { $messagesList = json_decode(@file_get_contents('messages.json'), true) ?: []; } } ?> <!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'); document.documentElement.classList.add('dark'); } else { document.documentElement.removeAttribute('data-theme'); document.documentElement.classList.remove('dark'); } })(); </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> <!-- 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="index.php#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="index.php#home" class="nav-link active text-sm font-medium transition-colors">หน้าแรก</a> <a href="index.php#about" class="nav-link text-sm font-medium transition-colors">เกี่ยวกับฉัน</a> <a href="index.php#skills" class="nav-link text-sm font-medium transition-colors">ทักษะความสามารถ</a> <a href="index.php#projects" class="nav-link text-sm font-medium transition-colors">ผลงาน</a> <a href="index.php#contact" class="nav-link text-sm font-medium transition-colors">ติดต่อฉัน</a> <?php if ($viewMessages): ?> <a href="index.php" class="text-sm font-bold text-indigo-500">ย้อนกลับ</a> <?php else: ?> <a href="?view=messages" class="text-sm text-gray-450 dark:text-gray-500 hover:text-indigo-500" title="ดูข้อความที่ส่งมา"><i data-lucide="inbox" class="w-4 h-4 inline"></i></a> <?php endif; ?> </div> <!-- Actions (Desktop) --> <div class="hidden md:flex items-center gap-4"> <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="index.php#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> <?php if ($viewMessages): ?> <!-- MESSAGES LOG VIEW --> <main class="max-w-4xl mx-auto px-4 pt-28 pb-12"> <div class="glass-panel p-6 md:p-8 rounded-2xl"> <h2 class="text-2xl font-bold mb-6 flex items-center gap-2"> <i data-lucide="inbox" class="text-indigo-500"></i> ข้อความติดต่อกลับล่าสุด </h2> <?php if (empty($messagesList)): ?> <p class="text-gray-500 text-center py-10">ยังไม่มีข้อความส่งเข้ามาในขณะนี้</p> <?php else: ?> <div class="space-y-4"> <?php foreach ($messagesList as $msg): ?> <div class="p-5 rounded-xl border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-gray-900/50"> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-3"> <span class="font-bold text-gray-900 dark:text-white"><?= htmlspecialchars($msg['name']) ?></span> <span class="text-xs text-gray-500"><?= htmlspecialchars($msg['created_at'] ?? $msg['timestamp'] ?? '') ?></span> </div> <p class="text-sm text-indigo-500 mb-2 font-medium"><?= htmlspecialchars($msg['email']) ?></p> <p class="text-sm text-gray-750 dark:text-gray-300 bg-gray-50 dark:bg-gray-950 p-4 rounded-lg"><?= nl2br(htmlspecialchars($msg['message'])) ?></p> </div> <?php endforeach; ?> </div> <?php endif; ?> </div> </main> <?php else: ?> <!-- 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-350 dark: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-600 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/60 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 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"> <div class="absolute -inset-4 rounded-full bg-gradient-to-r from-indigo-500 to-cyan-400 opacity-20 blur-3xl"></div> <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> <!-- Floating Badge 1 --> <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-850 dark:text-white">2.85 / 4.00</p> </div> </div> <!-- Floating Badge 2 --> <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-850 dark:text-white">IT Support / IoT</p> </div> </div> </div> </div> </div> </div> </section> <!-- 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"> <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"> <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> <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> <!-- Experience 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"> <?php foreach ($timeline as $item): ?> <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-<?= $item['badge_color'] ?>-600 dark:text-<?= $item['badge_color'] ?>-300 bg-<?= $item['badge_color'] ?>-500/10 border border-<?= $item['badge_color'] ?>-200 dark:border-<?= $item['badge_color'] ?>-500/20 rounded"> <?= $item['date'] ?> </span> <h4 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-300 transition-colors"> <?= $item['title'] ?> </h4> <p class="text-sm font-semibold text-indigo-600 dark:text-indigo-400"><?= $item['company'] ?></p> <p class="text-xs text-gray-650 dark:text-gray-400 mt-2 leading-relaxed"> <?= $item['desc'] ?> </p> </div> </div> <?php endforeach; ?> </div> </div> </div> </div> </section> <!-- 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"> <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> <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-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Multimeter</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Soldering Iron</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Oscilloscope</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">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-500 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-600 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-600 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-600 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-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Arduino IDE</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">VS Code</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">VMware ESXi</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">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</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-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">Cisco IOS</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">MikroTik RouterOS</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">IPv4/IPv6 VLSM</span> <span class="px-2 py-1 bg-gray-150 dark:bg-gray-900 text-xs border border-gray-200 dark:border-gray-800 rounded">RJ45 Crimping</span> </div> </div> </div> </div> </div> </div> </section> <!-- 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"> <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> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <?php foreach ($projects as $id => $p): ?> <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="<?= $p['image'] ?>" alt="<?= $p['title'] ?>" 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"><?= $p['tag'] ?></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-650 dark:group-hover:text-indigo-400 transition-colors"> <?= $p['title'] ?> </h3> <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed flex-grow line-clamp-3"> <?= $p['short_desc'] ?> </p> <div class="flex flex-wrap gap-1.5"> <?php foreach ($p['tags'] as $tag): ?> <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"><?= $tag ?></span> <?php endforeach; ?> </div> <div class="pt-4 border-t border-gray-200 dark:border-gray-800/80 flex items-center justify-between"> <button data-project-id="<?= $id ?>" class="view-project-btn text-indigo-650 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> <?php endforeach; ?> </div> </div> </section> <!-- CONTACT SECTION --> <section id="contact" class="py-20 border-t border-gray-200 dark:border-gray-900/50 relative bg-gray-100/10 dark:bg-gray-950/10"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <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 items-start"> <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-sm md:text-base"> หากคุณมีความคิดสร้างสรรค์ที่อยากพัฒนา ระบบฮาร์ดแวร์ที่ต้องการการบำรุงรักษา หรือต้องการที่ปรึกษาด้านเทคโนโลยีคอมพิวเตอร์และเครือข่าย สามารถส่งรายละเอียดเพื่อพูดคุยแลกเปลี่ยนกันได้เลยครับ </p> <div class="space-y-4"> <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-650 dark:group-hover:text-indigo-300 transition-colors">maibuauty@gmail.com</span> </div> </a> <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-650 dark:group-hover:text-indigo-300 transition-colors">github.com/bawornwit-pc</span> </div> </a> <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" name="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" name="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" name="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> <?php endif; ?> <!-- FOOTER --> <footer class="py-8 border-t border-gray-200 dark:border-gray-900/40 bg-gray-55 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-550 dark: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"> <a href="index.php#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> <a href="index.php#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> <a href="index.php#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> <a href="index.php#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> <a href="index.php#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> <!-- 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"> <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-850 active:scale-95 text-gray-500 hover:text-gray-950 dark:text-gray-400 dark:hover:text-white transition-all cursor-pointer border border-transparent dark:border-gray-800"> <i data-lucide="x" class="w-5 h-5"></i> </button> <div id="modal-content" class="flex flex-col space-y-4"></div> </div> </div> <!-- 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-800 dark:text-gray-200 font-medium"></span> </div> <!-- Share Projects Data dynamically to JS --> <script> window.projectsData = <?= json_encode($projects, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>; </script> <!-- Scripts --> <script src="assets/js/app.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.25 |
proxy
|
phpinfo
|
Settings