File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090020/Portfolio/020 สิปปกร วงค์พรหม/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"> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ นาย สิปปกร วงค์พรหม - Content Creator & Tech Specialist"> <meta name="author" content="นาย สิปปกร วงค์พรหม"> <title>สิปปกร วงค์พรหม \| Portfolio</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Outfit', 'Sarabun', 'sans-serif'], }, animation: { 'spin-slow': 'spin 12s linear infinite', } } } } </script> <!-- Lucide Icons CDN --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Custom Styles Sheet --> <link rel="stylesheet" href="style.css?v=1.5"> </head> <body class="bg-slate-50 text-slate-800 dark:bg-[#080d0a] dark:text-emerald-50 transition-theme min-h-screen relative overflow-x-hidden"> <!-- Background Decorative Blobs --> <div class="gradient-blob bg-emerald-500/10 dark:bg-emerald-500/5 top-20 left-10 pulse-glow-violet"></div> <div class="gradient-blob bg-teal-500/10 dark:bg-teal-500/5 bottom-40 right-10" style="animation: float 8s ease-in-out infinite;"></div> <!-- Desktop Collapsible Sidebar --> <aside id="desktop-sidebar" class="hidden md:flex fixed left-4 top-1/2 -translate-y-1/2 z-50 flex-col bg-white/80 dark:bg-[#080d0a]/80 backdrop-blur-xl border border-slate-200/50 dark:border-emerald-950/30 rounded-2xl shadow-xl transition-all duration-300 w-16 overflow-hidden py-4 px-3 gap-6"> <!-- Toggle Button --> <button id="sidebar-toggle-btn" class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-emerald-950/30 flex items-center justify-center text-slate-600 dark:text-emerald-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-all cursor-pointer self-center" aria-label="Toggle Sidebar"> <i data-lucide="chevron-right" id="sidebar-toggle-icon" class="w-5 h-5 transition-transform duration-300"></i> </button> <!-- Navigation Links --> <nav class="flex flex-col gap-3"> <!-- About Link --> <a href="#about" class="sidebar-link flex items-center gap-3 px-3 py-3 rounded-xl text-slate-500 dark:text-emerald-300/60 transition-all duration-300 hover:bg-slate-100/50 dark:hover:bg-emerald-950/20"> <div class="shrink-0 flex items-center justify-center w-5 h-5"> <i data-lucide="user" class="w-5 h-5"></i> </div> <span class="sidebar-text opacity-0 hidden transition-all duration-300 whitespace-nowrap text-sm font-semibold">เกี่ยวกับฉัน</span> </a> <!-- Education Link --> <a href="#education" class="sidebar-link flex items-center gap-3 px-3 py-3 rounded-xl text-slate-500 dark:text-emerald-300/60 transition-all duration-300 hover:bg-slate-100/50 dark:hover:bg-emerald-950/20"> <div class="shrink-0 flex items-center justify-center w-5 h-5"> <i data-lucide="graduation-cap" class="w-5 h-5"></i> </div> <span class="sidebar-text opacity-0 hidden transition-all duration-300 whitespace-nowrap text-sm font-semibold">การศึกษา & ประสบการณ์</span> </a> <!-- Skills Link --> <a href="#skills" class="sidebar-link flex items-center gap-3 px-3 py-3 rounded-xl text-slate-500 dark:text-emerald-300/60 transition-all duration-300 hover:bg-slate-100/50 dark:hover:bg-emerald-950/20"> <div class="shrink-0 flex items-center justify-center w-5 h-5"> <i data-lucide="cpu" class="w-5 h-5"></i> </div> <span class="sidebar-text opacity-0 hidden transition-all duration-300 whitespace-nowrap text-sm font-semibold">ทักษะความสามารถ</span> </a> <!-- Projects Link --> <a href="#projects" class="sidebar-link flex items-center gap-3 px-3 py-3 rounded-xl text-slate-500 dark:text-emerald-300/60 transition-all duration-300 hover:bg-slate-100/50 dark:hover:bg-emerald-950/20"> <div class="shrink-0 flex items-center justify-center w-5 h-5"> <i data-lucide="briefcase" class="w-5 h-5"></i> </div> <span class="sidebar-text opacity-0 hidden transition-all duration-300 whitespace-nowrap text-sm font-semibold">ผลงานเด่น</span> </a> <!-- Contact Link --> <a href="#contact" class="sidebar-link flex items-center gap-3 px-3 py-3 rounded-xl text-slate-500 dark:text-emerald-300/60 transition-all duration-300 hover:bg-slate-100/50 dark:hover:bg-emerald-950/20"> <div class="shrink-0 flex items-center justify-center w-5 h-5"> <i data-lucide="mail" class="w-5 h-5"></i> </div> <span class="sidebar-text opacity-0 hidden transition-all duration-300 whitespace-nowrap text-sm font-semibold">ติดต่อฉัน</span> </a> </nav> </aside> <!-- Header & Navigation Bar --> <header class="fixed top-0 left-0 right-0 z-50 transition-theme glass-panel"> <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between"> <!-- Brand Logo / Name --> <a href="#" class="flex items-center gap-2 group"> <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-500 to-teal-400 flex items-center justify-center text-white font-bold text-lg shadow-md group-hover:scale-105 transition-transform"> S </div> <span class="font-bold text-xl tracking-tight text-slate-800 dark:text-emerald-400 group-hover:text-emerald-500 dark:group-hover:text-emerald-300 transition-colors"> สิปปกร. </span> </a> <!-- Desktop Navigation Menu --> <nav class="hidden md:flex items-center gap-8 font-medium"> <a href="#about" class="text-slate-600 dark:text-emerald-300/80 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors">เกี่ยวกับฉัน</a> <a href="#education" class="text-slate-600 dark:text-emerald-300/80 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors">การศึกษา & ประสบการณ์</a> <a href="#skills" class="text-slate-600 dark:text-emerald-300/80 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors">ทักษะ</a> <a href="#projects" class="text-slate-600 dark:text-emerald-300/80 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors">ผลงาน</a> <a href="#contact" class="text-slate-600 dark:text-emerald-300/80 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors">ติดต่อฉัน</a> </nav> <!-- Action Area: Theme Toggle & CTA --> <div class="flex items-center gap-2 sm:gap-4"> <!-- Shopee Store Link --> <button id="shopee-btn-top" class="w-11 h-11 rounded-xl bg-white/80 dark:bg-slate-900/80 border border-slate-200 dark:border-[#ee4d2d]/30 flex items-center justify-center text-[#ee4d2d] hover:bg-[#ee4d2d]/10 transition-all cursor-pointer shadow-sm min-h-[44px] min-w-[44px]" aria-label="Shopee Store"> <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg"> <path d="M19 8.3h-2.9v-.9c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6v.9H6.1c-.8 0-1.5.7-1.5 1.5v9.1c0 .8.7 1.5 1.5 1.5h13.1c.8 0 1.5-.7 1.5-.7V9.8c-.1-.8-.8-1.5-1.6-1.5zm-8.6-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8v.9h-3.6v-.9zm5.5 5.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-1.8c0-.5.4-.9.9-.9s.9.4.9.9v1.8zm-5.5 0c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-1.8c0-.5.4-.9.9-.9s.9.4.9.9v1.8z" /> </svg> </button> <!-- Toggle Dark/Light Mode Button --> <button class="theme-toggle-btn w-11 h-11 rounded-xl bg-white/80 dark:bg-slate-900/80 border border-slate-200 dark:border-emerald-900/30 flex items-center justify-center text-slate-600 dark:text-emerald-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all cursor-pointer shadow-sm min-h-[44px] min-w-[44px]" aria-label="สลับโหมดสว่าง/มืด"> <!-- Sun Icon (visible in dark mode) --> <i data-lucide="sun" class="sun-icon w-5 h-5 hidden text-emerald-400"></i> <!-- Moon Icon (visible in light mode) --> <i data-lucide="moon" class="moon-icon w-5 h-5 text-emerald-500"></i> </button> <!-- Desktop Contact CTA --> <a href="#contact" class="hidden md:inline-flex items-center justify-center px-5 py-2.5 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-400 hover:from-emerald-600 hover:to-teal-550 text-white font-medium shadow-md hover:shadow-emerald-500/10 hover:scale-[1.02] active:scale-95 transition-all min-h-[44px]"> คุยงานกับฉัน </a> <!-- Mobile Menu Hamburger Button --> <button id="mobile-menu-btn" class="md:hidden w-11 h-11 rounded-xl bg-white/80 dark:bg-slate-900/80 border border-slate-200 dark:border-emerald-900/30 flex items-center justify-center text-slate-600 dark:text-emerald-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all cursor-pointer min-h-[44px] min-w-[44px]" aria-expanded="false" aria-label="เมนูหลัก"> <!-- Menu Bar Icons --> <i data-lucide="menu" class="icon-open w-5 h-5"></i> <i data-lucide="x" class="icon-close w-5 h-5 hidden"></i> </button> </div> </div> <!-- Mobile Navigation Drawer --> <div id="mobile-menu" class="hidden md:hidden border-t border-slate-200/50 dark:border-emerald-950/30 bg-white/80 dark:bg-[#080d0a]/80 backdrop-blur-xl px-6 py-6 flex flex-col gap-4 shadow-xl transition-all duration-300 opacity-0 -translate-y-4"> <a href="#about" class="mobile-menu-link text-lg font-medium text-slate-700 dark:text-emerald-200 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors py-2 block">เกี่ยวกับฉัน</a> <a href="#education" class="mobile-menu-link text-lg font-medium text-slate-700 dark:text-emerald-200 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors py-2 block">การศึกษา & ประสบการณ์</a> <a href="#skills" class="mobile-menu-link text-lg font-medium text-slate-700 dark:text-emerald-200 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors py-2 block">ทักษะ</a> <a href="#projects" class="mobile-menu-link text-lg font-medium text-slate-700 dark:text-emerald-200 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors py-2 block">ผลงาน</a> <a href="#contact" class="mobile-menu-link text-lg font-medium text-slate-700 dark:text-emerald-200 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors py-2 block">ติดต่อฉัน</a> <hr class="border-slate-200/50 dark:border-emerald-950/30 my-2"> <a href="#contact" class="mobile-menu-link w-full text-center py-3 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-400 text-white font-medium shadow-md block"> คุยงานกับฉัน </a> </div> </header> <!-- Main Content Wrappers --> <main class="relative z-10 pt-24"> <!-- 1. Hero Section --> <section class="min-h-[calc(100vh-80px)] flex items-center px-6 py-12 max-w-7xl mx-auto"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center w-full"> <!-- Left Side: Typography and CTA --> <div class="space-y-6 text-center lg:text-left order-2 lg:order-1"> <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-800/40 text-emerald-600 dark:text-emerald-400 text-sm font-semibold tracking-wide"> <span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span> มุ่งมั่นเรียนรู้และสร้างสรรค์สิ่งใหม่ๆ เสมอ </div> <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight"> สวัสดีครับ, ผม <br> <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-500 via-green-400 to-teal-400 dark:from-emerald-400 dark:via-green-400 dark:to-teal-300"> สิปปกร วงค์พรหม </span> </h1> <p class="text-lg md:text-xl text-slate-600 dark:text-emerald-300/80 font-medium"> ชื่อเล่น: โบอิ้ง (Boing) \| Content Creator & Tech Specialist </p> <div class="space-y-2 text-slate-500 dark:text-emerald-400/80 max-w-lg mx-auto lg:mx-0"> <p class="font-semibold text-slate-800 dark:text-emerald-200">เป้าหมายในอนาคต:</p> <div class="flex flex-wrap justify-center lg:justify-start gap-2 pt-1"> <span class="px-3 py-1 rounded-full bg-emerald-100 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300 text-xs font-bold border border-emerald-200/30">Content Creator</span> <span class="px-3 py-1 rounded-full bg-green-100 dark:bg-green-950/60 text-green-700 dark:text-green-300 text-xs font-bold border border-green-200/30">นายกรัฐมนตรี</span> <span class="px-3 py-1 rounded-full bg-teal-100 dark:bg-teal-950/60 text-teal-700 dark:text-teal-300 text-xs font-bold border border-teal-200/30">ข้าราชการครู</span> </div> </div> <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 inline-flex items-center justify-center px-8 py-4 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-400 hover:from-emerald-650 hover:to-teal-450 text-white font-semibold shadow-lg hover:shadow-emerald-500/10 transition-all text-center min-h-[48px] min-w-[150px]"> ดูผลงานของฉัน <i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i> </a> <a href="#contact" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-emerald-950/50 text-slate-700 dark:text-emerald-200 font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 transition-all text-center min-h-[48px] min-w-[150px]"> ติดต่อฉัน </a> </div> </div> <!-- Right Side: Graphic Visual Animation --> <div class="flex items-center justify-center order-1 lg:order-2"> <div class="relative w-72 h-72 sm:w-96 sm:h-96 animate-float"> <!-- Background glow --> <div class="absolute inset-0 bg-gradient-to-tr from-emerald-500 to-teal-500 rounded-3xl opacity-20 blur-3xl"> </div> <!-- Main Glass Card Graphic --> <div class="profile-container absolute inset-4 rounded-3xl border border-white/20 dark:border-emerald-900/30 bg-white/40 dark:bg-slate-900/40 backdrop-blur-xl flex flex-col items-center justify-center p-3 shadow-2xl overflow-hidden cursor-pointer transition-all duration-300"> <!-- Inside: Profile Image --> <img src="images/Profile.png" alt="สิปปกร วงค์พรหม" class="profile-img w-full h-full object-cover rounded-2xl shadow-sm max-w-full"> <!-- Inside: Profile Video --> <video src="images/Profile.mp4" autoplay loop muted playsinline class="profile-video w-full h-full object-cover rounded-2xl shadow-sm max-w-full hidden"></video> </div> </div> </div> </div> </section> <!-- 2. About Me Section --> <section id="about" class="px-6 py-24 border-t border-slate-200/50 dark:border-emerald-950/30"> <div class="max-w-7xl mx-auto space-y-12"> <div class="text-center max-w-xl mx-auto space-y-3"> <h2 class="text-3xl md:text-4xl font-bold tracking-tight">เกี่ยวกับตัวฉัน</h2> <div class="w-16 h-1.5 bg-emerald-500 dark:bg-emerald-500 mx-auto rounded-full"></div> <p class="text-slate-500 dark:text-emerald-400/80">ประวัติความเป็นมาและข้อมูลส่วนตัวของโบอิ้ง</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <!-- Text Details --> <div class="space-y-6"> <h3 class="text-2xl font-bold text-slate-800 dark:text-white"> นาย สิปปกร วงค์พรหม (Sippakorn Wongphrom) </h3> <p class="text-slate-600 dark:text-emerald-200/80 leading-relaxed"> สวัสดีครับ! ผมชื่อเล่นว่า <strong>โบอิ้ง (Boing)</strong> ปัจจุบันอายุ 18 ปี เป็นผู้ที่สนใจและมีความเชี่ยวชาญทั้งในด้านเทคโนโลยี อิเล็กทรอนิกส์ คอมพิวเตอร์ และการสร้างสรรค์คอนเทนต์ดิจิทัล (Content Creator), กำลังศึกษาอยู่ที่วิทยาลัยเทคนิคเชียงใหม่ เทคโนโลยีคอมพิวเตอร์ ระดับชั้น ปวส. 1 </p> <p class="text-slate-600 dark:text-emerald-200/80 leading-relaxed"> ด้วยพื้นฐานด้านอิเล็กทรอนิกส์และเทคโนโลยีคอมพิวเตอร์ ทำให้ผมเข้าใจโครงสร้างการทำงานทั้งฮาร์ดแวร์และซอฟต์แวร์อย่างถ่องแท้ พร้อมที่จะนำทักษะเหล่านี้ไปพัฒนาความรู้และต่อยอดสู่เป้าหมายในอนาคตเพื่อสร้างสรรค์ประโยชน์ให้กับสังคม </p> <div class="grid grid-cols-2 gap-6 pt-4"> <div class="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40"> <h4 class="text-3xl font-extrabold text-emerald-550 dark:text-emerald-400">18 ปี</h4> <p class="text-xs text-slate-500 dark:text-emerald-400 mt-1 uppercase font-semibold tracking-wider">อายุ </p> </div> <div class="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40"> <h4 class="text-3xl font-extrabold text-teal-500 dark:text-teal-400">โบอิ้ง</h4> <p class="text-xs text-slate-500 dark:text-emerald-400 mt-1 uppercase font-semibold tracking-wider"> ชื่อเล่น (Boing)</p> </div> </div> </div> <!-- Focus Styles / Cards --> <div class="space-y-4"> <!-- Focus Card 1 --> <div class="p-6 rounded-2xl bg-white/70 dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 backdrop-blur-md flex gap-4"> <div class="w-12 h-12 rounded-xl bg-emerald-50 dark:bg-emerald-950/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0 shadow-sm"> <i data-lucide="video"></i> </div> <div> <h4 class="font-bold text-lg">Content Creator</h4> <p class="text-slate-500 dark:text-emerald-400/80 text-sm mt-1">มุ่งสร้างสรรค์และถ่ายทอดเรื่องราว เทคโนโลยี และความรู้ผ่านสื่อดิจิทัลให้เข้าใจง่ายและน่าสนใจ</p> </div> </div> <!-- Focus Card 2 --> <div class="p-6 rounded-2xl bg-white/70 dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 backdrop-blur-md flex gap-4"> <div class="w-12 h-12 rounded-xl bg-teal-50 dark:bg-teal-950/60 text-teal-500 dark:text-teal-400 flex items-center justify-center shrink-0 shadow-sm"> <i data-lucide="award"></i> </div> <div> <h4 class="font-bold text-lg">Future Leadership</h4> <p class="text-slate-500 dark:text-emerald-400/80 text-sm mt-1"> มีเป้าหมายที่ยิ่งใหญ่ในการก้าวสู่การทำงานบริหารระดับประเทศ (นายกรัฐมนตรี) เพื่อพัฒนาการศึกษาและสังคม </p> </div> </div> <!-- Focus Card 3 --> <div class="p-6 rounded-2xl bg-white/70 dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 backdrop-blur-md flex gap-4"> <div class="w-12 h-12 rounded-xl bg-emerald-50 dark:bg-emerald-950/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0 shadow-sm"> <i data-lucide="book-open"></i> </div> <div> <h4 class="font-bold text-lg">Education Specialist</h4> <p class="text-slate-500 dark:text-emerald-400/80 text-sm mt-1">รักในการเป็น(Content Creator) เพื่อส่งต่อทักษะ ความรู้ และสร้างแรงบันดาลใจให้กับผู้ชมถัดไป</p> </div> </div> </div> </div> </div> </section> <!-- 2.5 Education & Experience Section --> <section id="education" class="px-6 py-24 bg-slate-100/50 dark:bg-slate-900/10 border-t border-slate-200/50 dark:border-emerald-950/30"> <div class="max-w-7xl mx-auto space-y-12"> <div class="text-center max-w-xl mx-auto space-y-3"> <h2 class="text-3xl md:text-4xl font-bold tracking-tight">การศึกษา & ประสบการณ์</h2> <div class="w-16 h-1.5 bg-emerald-500 dark:bg-emerald-500 mx-auto rounded-full"></div> <p class="text-slate-500 dark:text-emerald-400/80">ประวัติการศึกษาและการสั่งสมประสบการณ์ทำงานที่ผ่านมา</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <!-- Education Column --> <div class="space-y-6"> <h3 class="text-2xl font-bold flex items-center gap-3"> <i data-lucide="graduation-cap" class="text-emerald-500"></i> ประวัติการศึกษา </h3> <div class="space-y-6 relative border-l-2 border-emerald-250 dark:border-emerald-900/60 pl-6 ml-4"> <!-- Item 1 --> <div class="relative"> <div class="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full bg-emerald-500 dark:bg-emerald-400 border-4 border-slate-50 dark:border-[#080d0a]"> </div> <h4 class="font-bold text-lg">มัธยมศึกษาตอนต้น</h4> <p class="text-emerald-600 dark:text-emerald-400 text-sm font-medium">โรงเรียนสันกำแพง</p> <p class="text-slate-500 dark:text-emerald-400/60 text-sm mt-1">สำเร็จการศึกษาระดับมัธยมศึกษาตอนต้น</p> </div> <!-- Item 2 --> <div class="relative"> <div class="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full bg-emerald-500 dark:bg-emerald-400 border-4 border-slate-50 dark:border-[#080d0a]"> </div> <h4 class="font-bold text-lg">ประกาศนียบัตรวิชาชีพ (ปวช.)</h4> <p class="text-emerald-600 dark:text-emerald-400 text-sm font-medium">วิทยาลัยเทคนิคเชียงใหม่ (สาขาวิชาอิเล็กทรอนิกส์)</p> <p class="text-slate-500 dark:text-emerald-400/60 text-sm mt-1"> สำเร็จการศึกษาและปูพื้นฐานงานอิเล็กทรอนิกส์ วงจรไฟฟ้าอย่างเชี่ยวชาญ</p> </div> <!-- Item 3 --> <div class="relative"> <div class="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full bg-teal-500 border-4 border-slate-50 dark:border-[#080d0a] animate-pulse"> </div> <h4 class="font-bold text-lg">กำลังศึกษา ประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.)</h4> <p class="text-teal-600 dark:text-teal-400 text-sm font-medium">วิทยาลัยเทคนิคเชียงใหม่</p> <p class="text-slate-500 dark:text-emerald-400/60 text-sm mt-1">สาขาวิชาเทคโนโลยีคอมพิวเตอร์ (กำลังศึกษาอยู่ปัจจุบัน)</p> </div> </div> </div> <!-- Experience Column --> <div class="space-y-6"> <h3 class="text-2xl font-bold flex items-center gap-3"> <i data-lucide="briefcase" class="text-teal-500"></i> ประสบการณ์ทำงาน </h3> <div class="p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40 shadow-sm space-y-4"> <div class="flex items-start gap-4"> <div class="w-10 h-10 rounded-lg bg-teal-50 dark:bg-teal-950/20 text-teal-500 flex items-center justify-center shrink-0"> <i data-lucide="check-circle-2"></i> </div> <div> <h4 class="font-bold text-lg">การฝึกงานวิชาชีพเสร็จสมบูรณ์</h4> <p class="text-slate-500 dark:text-emerald-400/60 text-sm mt-1"> ผ่านการฝึกประสบการณ์วิชาชีพจริงที่พัฒนาทักษะการปฏิบัติงานอย่างเข้มข้น:</p> <ul class="list-disc list-inside text-slate-600 dark:text-emerald-300 text-sm mt-2 space-y-1"> <li>บริษัท <strong>P&I Service</strong></li> <li><strong>วิทยาลัยเทคนิคเชียงใหม่</strong></li> </ul> <p class="text-xs text-emerald-500 dark:text-emerald-400 font-semibold mt-3"> เรียนรู้ระบบงานบริการด้านไอที ซ่อมบำรุง และระบบอิเล็กทรอนิกส์ในระดับมืออาชีพ</p> </div> </div> </div> </div> </div> </div> </section> <!-- 3. Skills Section --> <section id="skills" class="px-6 py-24 border-t border-slate-200/50 dark:border-emerald-950/30"> <div class="max-w-7xl mx-auto space-y-12"> <div class="text-center max-w-xl mx-auto space-y-3"> <h2 class="text-3xl md:text-4xl font-bold tracking-tight">ทักษะความสามารถ</h2> <div class="w-16 h-1.5 bg-emerald-500 dark:bg-emerald-500 mx-auto rounded-full"></div> <p class="text-slate-500 dark:text-emerald-400/80">ทักษะความเชี่ยวชาญทั้งด้านเทคนิค งานสร้างสรรค์ และไลฟ์สไตล์ </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Skill Card 1: ซ่อมคอมพิวเตอร์ --> <div class="p-8 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 shadow-sm flex flex-col space-y-4"> <div class="w-full aspect-video rounded-2xl overflow-hidden mb-2 bg-slate-100 dark:bg-slate-800"> <img src="images/ซ่อมคอมพิวเตอร์.png" alt="ซ่อมคอมพิวเตอร์" class="w-full h-full object-cover max-w-full"> </div> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-lg bg-emerald-50 dark:bg-emerald-950/60 text-emerald-555 flex items-center justify-center"> <i data-lucide="wrench"></i> </div> <h3 class="font-bold text-xl">ซ่อมคอมพิวเตอร์</h3> </div> <p class="text-slate-500 dark:text-emerald-400/60 text-sm"> ตรวจเช็คอาการเสีย ซ่อมแซม อัปเกรดฮาร์ดแวร์ จัดสเปกคอมพิวเตอร์ และติดตั้งระบบปฏิบัติการต่างๆ ได้อย่างเชี่ยวชาญ </p> <div class="pt-2"> <div class="flex justify-between text-xs font-semibold mb-1"> <span>ความชำนาญ</span> <span class="text-emerald-500">95%</span> </div> <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-emerald-500 to-teal-400 rounded-full" style="width: 95%"></div> </div> </div> </div> <!-- Skill Card 2: Content Creator --> <div class="p-8 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 shadow-sm flex flex-col space-y-4"> <div class="w-full aspect-video rounded-2xl overflow-hidden mb-2 bg-slate-100 dark:bg-slate-800"> <img src="images/Content Creator.png" alt="Content Creator" class="w-full h-full object-cover max-w-full"> </div> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-lg bg-emerald-50 dark:bg-emerald-950/60 text-emerald-500 flex items-center justify-center"> <i data-lucide="megaphone"></i> </div> <h3 class="font-bold text-xl">Content Creator</h3> </div> <p class="text-slate-500 dark:text-emerald-400/60 text-sm"> คิดริเริ่มสร้างสรรค์เนื้อหา วางแผนนำเสนอคอนเทนต์ทางสื่อออนไลน์ให้น่าสนใจและสื่อสารได้อย่างมีประสิทธิภาพ </p> <div class="pt-2"> <div class="flex justify-between text-xs font-semibold mb-1"> <span>ความชำนาญ</span> <span class="text-emerald-500">90%</span> </div> <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-emerald-500 to-teal-400 rounded-full" style="width: 90%"></div> </div> </div> </div> <!-- Skill Card 3: ตัดต่อ Video --> <div class="p-8 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 shadow-sm flex flex-col space-y-4"> <div class="w-full aspect-video rounded-2xl overflow-hidden mb-2 bg-slate-100 dark:bg-slate-800"> <img src="images/ตัดต่อ Video.png" alt="ตัดต่อ Video" class="w-full h-full object-cover max-w-full"> </div> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-lg bg-teal-50 dark:bg-teal-950/60 text-teal-500 flex items-center justify-center"> <i data-lucide="video-off"></i> </div> <h3 class="font-bold text-xl">ตัดต่อ Video</h3> </div> <p class="text-slate-500 dark:text-emerald-400/60 text-sm"> ตัดต่อวิดีโอเพื่อโปรโมต นำเสนอเรื่องราว หรือสื่อเอ็นเตอร์เทนเมนต์ด้วยโปรแกรมระดับมาตรฐาน จัดวางเสียงและภาพได้ดีเยี่ยม </p> <div class="pt-2"> <div class="flex justify-between text-xs font-semibold mb-1"> <span>ความชำนาญ</span> <span class="text-teal-500">88%</span> </div> <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-teal-400 to-emerald-550 rounded-full" style="width: 88%"></div> </div> </div> </div> <!-- Skill Card 4: เขียนแบบวงจรอิเล็กทรอนิกส์ --> <div class="p-8 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 shadow-sm flex flex-col space-y-4 md:col-span-1 lg:col-span-1"> <div class="w-full aspect-video rounded-2xl overflow-hidden mb-2 bg-slate-100 dark:bg-slate-800"> <img src="images/ขียนแบบวงจรอิเล็กทรอนิกส์.png" alt="เขียนแบบวงจรอิเล็กทรอนิกส์" class="w-full h-full object-cover max-w-full"> </div> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-lg bg-emerald-50 dark:bg-emerald-950/60 text-emerald-500 flex items-center justify-center"> <i data-lucide="cpu"></i> </div> <h3 class="font-bold text-xl">เขียนแบบวงจรอิเล็กทรอนิกส์</h3> </div> <p class="text-slate-500 dark:text-emerald-400/60 text-sm"> ออกแบบลายวงจรไฟฟ้า เขียนแบบลายปริ้นท์ (PCB Design) และจัดวางระบบการทำงานสำหรับไมโครคอนโทรลเลอร์ </p> <div class="pt-2"> <div class="flex justify-between text-xs font-semibold mb-1"> <span>ความชำนาญ</span> <span class="text-emerald-500">85%</span> </div> <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-emerald-500 to-teal-400 rounded-full" style="width: 85%"></div> </div> </div> </div> <!-- Skill Card 5: เล่นเกม (Gaming) --> <div class="p-8 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 shadow-sm flex flex-col space-y-4 md:col-span-1 lg:col-span-1"> <div class="w-full aspect-video rounded-2xl overflow-hidden mb-2 bg-slate-100 dark:bg-slate-800"> <img src="images/เล่นเกม (Gaming).png" alt="เล่นเกม (Gaming)" class="w-full h-full object-cover max-w-full"> </div> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-lg bg-teal-50 dark:bg-teal-950/60 text-teal-500 flex items-center justify-center"> <i data-lucide="gamepad-2"></i> </div> <h3 class="font-bold text-xl">เล่นเกม (Gaming)</h3> </div> <p class="text-slate-500 dark:text-emerald-400/60 text-sm"> เล่นเกมในระดับแข่งขันและสตรีมมิ่ง พัฒนาไหวพริบ การทำงานเป็นทีมอย่างมีระบบ และเข้าใจเทรนด์ของกลุ่มเยาวชน </p> <div class="pt-2"> <div class="flex justify-between text-xs font-semibold mb-1"> <span>ความชำนาญ</span> <span class="text-teal-500">90%</span> </div> <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-teal-400 to-emerald-500 rounded-full" style="width: 90%"></div> </div> </div> </div> </div> </div> </section> <!-- 4. Projects Section --> <section id="projects" class="px-6 py-24 border-t border-slate-200/50 dark:border-emerald-950/30"> <div class="max-w-7xl mx-auto space-y-12"> <div class="text-center max-w-xl mx-auto space-y-3"> <h2 class="text-3xl md:text-4xl font-bold tracking-tight">ผลงานเด่น</h2> <div class="w-16 h-1.5 bg-emerald-500 dark:bg-emerald-500 mx-auto rounded-full"></div> <p class="text-slate-500 dark:text-emerald-400/80">ตัวอย่างบางส่วนของโปรเจกต์และผลงานสร้างสรรค์</p> </div> <!-- 1 column on Mobile, 2 on Tablet, 3 on Desktop --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project Card 1 --> <article class="project-card rounded-3xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40 overflow-hidden shadow-sm flex flex-col h-full group"> <div class="relative overflow-hidden aspect-video bg-emerald-950/10"> <!-- Actual Image showing YouTube Dashboard --> <img src="images/Content Creator.png" alt="ช่อง YouTube ส่วนตัว" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 max-w-full"> <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent flex items-end p-4"> <span class="px-2.5 py-1 rounded-md bg-emerald-600 text-white text-xs font-bold uppercase tracking-wider">YOUTUBE CHANNEL</span> </div> </div> <div class="p-6 space-y-4 flex-grow flex flex-col justify-between"> <div class="space-y-2"> <h3 class="font-bold text-xl group-hover:text-emerald-500 dark:group-hover:text-emerald-400 transition-colors"> ช่อง YouTube ส่วนตัว</h3> <p class="text-slate-500 dark:text-emerald-400/60 text-sm line-clamp-3"> ช่องสร้างสรรค์คอนเทนต์เกี่ยวกับไอที อิเล็กทรอนิกส์ และเทคโนโลยี นำเสนอสาระในรูปแบบที่เข้าใจง่ายและสนุกสนาน </p> </div> <div class="space-y-4"> <div class="flex flex-wrap gap-1.5"> <span class="px-2.5 py-1 rounded bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-600 dark:text-emerald-300">Content Creator</span> <span class="px-2.5 py-1 rounded bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-600 dark:text-emerald-300">Technology</span> </div> <div class="flex items-center justify-between border-t border-slate-100 dark:border-emerald-950/30 pt-4"> <a href="https://www.youtube.com/@Sir_Sippakorn222" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm font-bold text-emerald-555 dark:text-emerald-400 hover:underline min-h-[44px]"> <i data-lucide="external-link" class="w-4 h-4"></i> รับชมผลงาน </a> <a href="https://www.youtube.com/@Sir_Sippakorn222" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm font-bold text-slate-600 dark:text-emerald-300 hover:text-slate-900 dark:hover:text-white min-h-[44px]" aria-label="YouTube Channel"> <i data-lucide="youtube" class="w-4 h-4"></i> YouTube </a> </div> </div> </div> </article> <!-- Project Card 2 --> <article class="project-card rounded-3xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40 overflow-hidden shadow-sm flex flex-col h-full group"> <div class="relative overflow-hidden aspect-video bg-emerald-950/10"> <!-- Actual Image showing Video Editing Timeline --> <img src="images/ตัดต่อ Video.png" alt="คลิปวิดีโอที่ประสบความสำเร็จที่สุด" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 max-w-full"> <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent flex items-end p-4"> <span class="px-2.5 py-1 rounded-md bg-emerald-600 text-white text-xs font-bold uppercase tracking-wider">BEST VIDEO</span> </div> </div> <div class="p-6 space-y-4 flex-grow flex flex-col justify-between"> <div class="space-y-2"> <h3 class="font-bold text-xl group-hover:text-emerald-500 dark:group-hover:text-emerald-400 transition-colors"> คลิปวิดีโอที่ทำสำเร็จมากที่สุด</h3> <p class="text-slate-500 dark:text-emerald-400/60 text-sm line-clamp-3"> ผลงานการตัดต่อและสร้างสรรค์วิดีโอคอนเทนต์ที่มียอดผู้ชมและการตอบรับดีที่สุด แสดงทักษะด้าน Video Editing และการเล่าเรื่อง (Storytelling) </p> </div> <div class="space-y-4"> <div class="flex flex-wrap gap-1.5"> <span class="px-2.5 py-1 rounded bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-600 dark:text-emerald-300">Video Editing</span> <span class="px-2.5 py-1 rounded bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-600 dark:text-emerald-300">Storytelling</span> </div> <div class="flex items-center justify-between border-t border-slate-100 dark:border-emerald-950/30 pt-4"> <a href="https://youtube.com/shorts/E7WMI-TCZpM" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm font-bold text-emerald-555 dark:text-emerald-400 hover:underline min-h-[44px]"> <i data-lucide="external-link" class="w-4 h-4"></i> รายละเอียด </a> <a href="https://youtube.com/shorts/E7WMI-TCZpM" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm font-bold text-slate-600 dark:text-emerald-300 hover:text-slate-900 dark:hover:text-white min-h-[44px]" aria-label="Best Video"> <i data-lucide="video" class="w-4 h-4"></i> Video </a> </div> </div> </div> </article> <!-- Project Card 3 --> <article class="project-card rounded-3xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40 overflow-hidden shadow-sm flex flex-col h-full group"> <div class="relative overflow-hidden aspect-video bg-emerald-950/10"> <!-- Actual Image showing Electronics circuit layout --> <img src="images/ขียนแบบวงจรอิเล็กทรอนิกส์.png" alt="แข่งขันเครื่องขยายเสียง OCL 30 วัตต์" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 max-w-full"> <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent flex items-end p-4"> <span class="px-2.5 py-1 rounded-md bg-emerald-600 text-white text-xs font-bold uppercase tracking-wider">COMPETITION</span> </div> </div> <div class="p-6 space-y-4 flex-grow flex flex-col justify-between"> <div class="space-y-2"> <h3 class="font-bold text-xl group-hover:text-emerald-500 dark:group-hover:text-emerald-400 transition-colors"> การแข่งขันเครื่องขยายเสียง OCL 30 วัตต์ ระดับจังหวัด</h3> <p class="text-slate-500 dark:text-emerald-400/60 text-sm line-clamp-3"> โปรเจกต์เข้าร่วมการแข่งขันสร้างและออกแบบเครื่องขยายเสียง ขนาด 30 วัตต์ ชนิด OCL ในระดับจังหวัด โดยใช้วิชาความรู้ด้านอิเล็กทรอนิกส์ </p> </div> <div class="space-y-4"> <div class="flex flex-wrap gap-1.5"> <span class="px-2.5 py-1 rounded bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-600 dark:text-emerald-300">OCL Amplifier</span> <span class="px-2.5 py-1 rounded bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-600 dark:text-emerald-300">Electronics</span> </div> <div class="flex items-center justify-end border-t border-slate-100 dark:border-emerald-950/30 pt-4"> <span class="inline-flex items-center gap-1 text-sm font-bold text-slate-500 dark:text-emerald-300 min-h-[44px]"> <i data-lucide="cpu" class="w-4 h-4"></i> Hardware </span> </div> </div> </div> </article> </div> </div> </section> <!-- 5. Contact Section --> <section id="contact" class="px-6 py-24 bg-slate-100/50 dark:bg-slate-900/10 border-t border-slate-200/50 dark:border-emerald-950/30"> <div class="max-w-7xl mx-auto space-y-12"> <div class="text-center max-w-xl mx-auto space-y-3"> <h2 class="text-3xl md:text-4xl font-bold tracking-tight">ติดต่อฉัน</h2> <div class="w-16 h-1.5 bg-emerald-500 dark:bg-emerald-500 mx-auto rounded-full"></div> <p class="text-slate-500 dark:text-emerald-400/80">มาร่วมงานและทำโปรเจกต์เจ๋งๆ ไปด้วยกัน</p> </div> <div class="grid grid-cols-1 lg:grid-cols-5 gap-12 items-start"> <!-- Contact Details / Info Cards (2/5 size) --> <div class="lg:col-span-2 space-y-6"> <h3 class="text-2xl font-bold">ช่องทางหลัก</h3> <p class="text-slate-600 dark:text-emerald-300/80"> คุณสามารถส่งข้อความหาผมได้โดยตรงผ่านฟอร์ม หรือใช้ช่องทางออนไลน์ที่ด้านล่างนี้ได้เลยครับ! </p> <div class="space-y-4"> <!-- Info Card 1: Phone --> <div class="flex items-center gap-4 p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40"> <div class="w-11 h-11 rounded-xl bg-emerald-50 dark:bg-emerald-950/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0"> <i data-lucide="phone"></i> </div> <div> <h4 class="text-xs font-semibold text-slate-400 uppercase tracking-wider">เบอร์โทรศัพท์</h4> <a href="tel:0992415445" class="text-slate-700 dark:text-emerald-250 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium">099-241-5445</a> </div> </div> <!-- Info Card 2: Email --> <div class="flex items-center gap-4 p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40"> <div class="w-11 h-11 rounded-xl bg-emerald-50 dark:bg-emerald-950/60 text-emerald-600 dark:text-emerald-400 flex items-center justify-center shrink-0"> <i data-lucide="mail"></i> </div> <div> <h4 class="text-xs font-semibold text-slate-400 uppercase tracking-wider">อีเมลติดต่อ</h4> <a href="mailto:wsebkorn@gmail.com" class="text-slate-700 dark:text-emerald-250 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium">wsebkorn@gmail.com</a> </div> </div> <!-- Info Card 3: Address --> <div class="flex items-center gap-4 p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40"> <div class="w-11 h-11 rounded-xl bg-teal-50 dark:bg-teal-950/60 text-teal-500 flex items-center justify-center shrink-0"> <i data-lucide="map-pin"></i> </div> <div> <h4 class="text-xs font-semibold text-slate-400 uppercase tracking-wider">ที่อยู่</h4> <span class="text-slate-700 dark:text-emerald-200 font-medium text-sm leading-relaxed"> 230/59 หมู่ 6 ต.แม่คือ อ.ดอยสะเก็ด จ.เชียงใหม่ 50220 </span> </div> </div> <!-- Info Card 4: Facebook --> <div class="flex items-center gap-4 p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40"> <div class="w-11 h-11 rounded-xl bg-blue-50 dark:bg-blue-950/60 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0"> <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg"> <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /> </svg> </div> <div> <h4 class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Facebook</h4> <a href="https://web.facebook.com/sebkorn.workporm" target="_blank" rel="noopener noreferrer" class="text-slate-700 dark:text-emerald-250 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium">Sippakorn Wongphrom</a> </div> </div> </div> <!-- Social Links Area --> <div class="space-y-4"> <h4 class="font-bold text-slate-800 dark:text-white">ช่องทางโซเชียลมีเดีย</h4> <div class="flex gap-3"> <a href="https://web.facebook.com/sebkorn.workporm" target="_blank" rel="noopener noreferrer" class="w-12 h-12 rounded-xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40 flex items-center justify-center text-slate-600 dark:text-emerald-300 hover:bg-blue-50 dark:hover:bg-blue-950 hover:text-blue-600 dark:hover:text-blue-400 transition-all min-h-[44px] min-w-[44px]" aria-label="Facebook"> <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg"> <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /> </svg> </a> <a href="https://www.youtube.com/@Sir_Sippakorn222" target="_blank" rel="noopener noreferrer" class="w-12 h-12 rounded-xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-emerald-950/40 flex items-center justify-center text-slate-600 dark:text-emerald-300 hover:bg-rose-50 dark:hover:bg-[#4c0519] hover:text-rose-600 dark:hover:text-rose-450 transition-all min-h-[44px] min-w-[44px]" aria-label="YouTube"> <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg"> <path d="M23.498 6.163a3.003 3.003 0 0 0-2.11-2.11C19.52 3.545 12 3.545 12 3.545s-7.52 0-9.388.508a3.003 3.003 0 0 0-2.11 2.11C0 8.033 0 12 0 12s0 3.967.502 5.837a3.003 3.003 0 0 0 2.11 2.11c1.868.507 9.388.507 9.388.507s7.52 0 9.388-.507a3.003 3.003 0 0 0 2.11-2.11C24 15.967 24 12 24 12s0-3.967-.502-5.837zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" /> </svg> </a> <a href="https://s.shopee.co.th/BRCPfPqrw" target="_blank" rel="noopener noreferrer" class="w-12 h-12 rounded-xl bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-[#ee4d2d]/40 flex items-center justify-center text-slate-600 dark:text-emerald-300 hover:bg-[#ee4d2d]/10 hover:text-[#ee4d2d] transition-all min-h-[44px] min-w-[44px]" aria-label="Shopee Store"> <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg"> <path d="M19 8.3h-2.9v-.9c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6v.9H6.1c-.8 0-1.5.7-1.5 1.5v9.1c0 .8.7 1.5 1.5 1.5h13.1c.8 0 1.5-.7 1.5-.7V9.8c-.1-.8-.8-1.5-1.6-1.5zm-8.6-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8v.9h-3.6v-.9zm5.5 5.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-1.8c0-.5.4-.9.9-.9s.9.4.9.9v1.8zm-5.5 0c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-1.8c0-.5.4-.9.9-.9s.9.4.9.9v1.8z" /> </svg> </a> </div> </div> </div> <!-- Contact Form Panel (3/5 size) --> <div class="lg:col-span-3"> <div class="p-8 rounded-3xl bg-white dark:bg-slate-900/60 border border-slate-200/60 dark:border-emerald-950/40 shadow-sm backdrop-blur-md"> <form id="contact-form" class="space-y-6"> <!-- Alert box placeholder --> <div id="contact-alert" class="hidden"></div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div class="space-y-2"> <label for="cf-name" class="text-sm font-semibold text-slate-600 dark:text-emerald-300">ชื่อของคุณ <span class="text-rose-500"></span></label> <input type="text" id="cf-name" name="name" required placeholder="" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-emerald-950 bg-transparent focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none text-slate-800 dark:text-white transition-all"> </div> <div class="space-y-2"> <label for="cf-email" class="text-sm font-semibold text-slate-600 dark:text-emerald-300">อีเมลสำหรับติดต่อกลับ <span class="text-rose-500"></span></label> <input type="email" id="cf-email" name="email" required placeholder="" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-emerald-950 bg-transparent focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none text-slate-800 dark:text-white transition-all"> </div> </div> <div class="space-y-2"> <label for="cf-subject" class="text-sm font-semibold text-slate-600 dark:text-emerald-300">หัวเรื่อง (ถ้ามี)</label> <input type="text" id="cf-subject" name="subject" placeholder="" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-emerald-950 bg-transparent focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none text-slate-800 dark:text-white transition-all"> </div> <div class="space-y-2"> <label for="cf-message" class="text-sm font-semibold text-slate-600 dark:text-emerald-300">ข้อความของคุณ <span class="text-rose-500">*</span></label> <textarea id="cf-message" name="message" required rows="5" placeholder="" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-emerald-950 bg-transparent focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none text-slate-800 dark:text-white transition-all resize-none"></textarea> </div> <button type="submit" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-400 hover:from-emerald-600 hover:to-teal-450 text-white font-bold shadow-md hover:shadow-lg transition-all cursor-pointer text-center min-h-[48px]"> ส่งข้อความติดต่อ </button> </form> </div> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="border-t border-slate-200/50 dark:border-emerald-950/30 py-8 px-6 text-center text-sm text-slate-500 dark:text-emerald-400 relative z-10"> <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4"> <p>© 2026 นาย สิปปกร วงค์พรหม. สงวนลิขสิทธิ์ทั้งหมด.</p> <p class="flex items-center gap-1 justify-center"> สร้างสรรค์ด้วยความใส่ใจโดย <span class="text-emerald-500 dark:text-emerald-400 font-semibold">โบอิ้ง</span> </p> </div> </footer> <!-- Mobile Bottom Sticky Navigation Bar --> <div class="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/80 dark:bg-[#080d0a]/80 backdrop-blur-xl border-t border-slate-200/50 dark:border-emerald-950/30 px-4 py-2 shadow-lg safe-bottom"> <div class="flex items-center justify-around"> <a href="#about" class="mobile-bottom-link flex flex-col items-center gap-1 text-slate-500 dark:text-emerald-300/60 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors"> <i data-lucide="user" class="w-5 h-5"></i> <span class="text-[10px] font-medium">เกี่ยวกับฉัน</span> </a> <a href="#education" class="mobile-bottom-link flex flex-col items-center gap-1 text-slate-500 dark:text-emerald-300/60 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors"> <i data-lucide="graduation-cap" class="w-5 h-5"></i> <span class="text-[10px] font-medium">การศึกษา</span> </a> <a href="#skills" class="mobile-bottom-link flex flex-col items-center gap-1 text-slate-500 dark:text-emerald-300/60 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors"> <i data-lucide="cpu" class="w-5 h-5"></i> <span class="text-[10px] font-medium">ทักษะ</span> </a> <a href="#projects" class="mobile-bottom-link flex flex-col items-center gap-1 text-slate-500 dark:text-emerald-300/60 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors"> <i data-lucide="briefcase" class="w-5 h-5"></i> <span class="text-[10px] font-medium">ผลงาน</span> </a> <a href="#contact" class="mobile-bottom-link flex flex-col items-center gap-1 text-slate-500 dark:text-emerald-300/60 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors"> <i data-lucide="mail" class="w-5 h-5"></i> <span class="text-[10px] font-medium">ติดต่อฉัน</span> </a> </div> </div> <!-- Lucide Script initialization --> <script> lucide.createIcons(); </script> <!-- Custom UI Scripts --> <script src="script.js?v=1.7"></script> <!-- Shopee Drawer --> <div id="shopee-drawer" class="fixed top-0 left-0 right-0 z-[100] bg-white/90 dark:bg-[#080d0a]/90 backdrop-blur-xl border-b border-slate-200/50 dark:border-emerald-950/30 shadow-2xl py-8 px-6 transition-all duration-500 transform -translate-y-full invisible pointer-events-none"> <div class="max-w-md mx-auto flex flex-col gap-4"> <div class="flex items-center justify-between"> <h4 class="font-bold text-lg text-slate-800 dark:text-emerald-400 flex items-center gap-2"> <svg viewBox="0 0 24 24" class="w-6 h-6 fill-[#ee4d2d]" xmlns="http://www.w3.org/2000/svg"> <path d="M19 8.3h-2.9v-.9c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6v.9H6.1c-.8 0-1.5.7-1.5 1.5v9.1c0 .8.7 1.5 1.5 1.5h13.1c.8 0 1.5-.7 1.5-.7V9.8c-.1-.8-.8-1.5-1.6-1.5zm-8.6-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8v.9h-3.6v-.9zm5.5 5.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-1.8c0-.5.4-.9.9-.9s.9.4.9.9v1.8zm-5.5 0c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-1.8c0-.5.4-.9.9-.9s.9.4.9.9v1.8z" /> </svg> รายการแนะนำของสิปปกร (Shopee) </h4> <button id="close-shopee-drawer" class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-white flex items-center justify-center transition-colors"> <i data-lucide="x" class="w-4 h-4"></i> </button> </div> <div class="flex flex-col gap-3"> <!-- Item 1: บอร์ดทดลอง --> <a href="https://s.shopee.co.th/8AMHDhUi88" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between p-4 rounded-xl bg-slate-50 dark:bg-slate-950/60 border border-slate-200/60 dark:border-emerald-950/40 hover:bg-[#ee4d2d]/10 hover:border-[#ee4d2d]/30 transition-all group"> <div class="flex items-center gap-3"> <div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-800 border border-slate-200/50 dark:border-emerald-950/20 shrink-0"> <img src="images/บอร์ดทดลอง.png" alt="บอร์ดทดลอง" class="w-full h-full object-cover"> </div> <div class="text-left"> <div class="font-bold text-sm text-slate-800 dark:text-emerald-300">บอร์ดทดลอง (Breadboard)</div> <div class="text-xs text-slate-500 dark:text-emerald-400/60">อุปกรณ์สำหรับทดสอบและจัดวงจรไฟฟ้า</div> </div> </div> <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-[#ee4d2d] transition-colors"></i> </a> <!-- Item 2: สายไฟ --> <a href="https://s.shopee.co.th/4fmP3J3E4N" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between p-4 rounded-xl bg-slate-50 dark:bg-slate-950/60 border border-slate-200/60 dark:border-emerald-950/40 hover:bg-[#ee4d2d]/10 hover:border-[#ee4d2d]/30 transition-all group"> <div class="flex items-center gap-3"> <div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-800 border border-slate-200/50 dark:border-emerald-950/20 shrink-0"> <img src="images/สายจัมป์.png" alt="สายไฟ" class="w-full h-full object-cover"> </div> <div class="text-left"> <div class="font-bold text-sm text-slate-800 dark:text-emerald-300">สายไฟ (Jumper Wires)</div> <div class="text-xs text-slate-500 dark:text-emerald-400/60">สายเชื่อมต่อวงจรอย่างดี</div> </div> </div> <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-[#ee4d2d] transition-colors"></i> </a> <!-- Item 3: บลูทูธ --> <a href="https://s.shopee.co.th/7KnAEKi0OP" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between p-4 rounded-xl bg-slate-50 dark:bg-slate-950/60 border border-slate-200/60 dark:border-emerald-950/40 hover:bg-[#ee4d2d]/10 hover:border-[#ee4d2d]/30 transition-all group"> <div class="flex items-center gap-3"> <div class="w-12 h-12 rounded-xl overflow-hidden bg-slate-100 dark:bg-slate-800 border border-slate-200/50 dark:border-emerald-950/20 shrink-0"> <img src="images/บลูทูธ.png" alt="บลูทูธ" class="w-full h-full object-cover"> </div> <div class="text-left"> <div class="font-bold text-sm text-slate-800 dark:text-emerald-300">บลูทูธ (Bluetooth)</div> <div class="text-xs text-slate-500 dark:text-emerald-400/60">โมดูลเชื่อมต่อไร้สาย</div> </div> </div> <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-[#ee4d2d] transition-colors"></i> </a> </div> </div> </div> <script> lucide.createIcons(); </script> <!-- Backdrop for Shopee Drawer --> <div id="shopee-drawer-backdrop" class="hidden fixed inset-0 bg-slate-950/40 backdrop-blur-sm z-[90] transition-opacity duration-300 opacity-0"></div> <!-- Floating Shopee Button --> <button id="shopee-btn-bottom" class="fixed bottom-20 md:bottom-6 left-6 z-50 w-14 h-14 rounded-full bg-[#ee4d2d] text-white flex items-center justify-center shadow-lg hover:scale-110 hover:shadow-[#ee4d2d]/35 transition-all duration-300 group cursor-pointer" aria-label="Shopee Store"> <svg viewBox="0 0 24 24" class="w-7 h-7 fill-current transition-transform duration-300 group-hover:rotate-12" xmlns="http://www.w3.org/2000/svg"> <path d="M19 8.3h-2.9v-.9c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6v.9H6.1c-.8 0-1.5.7-1.5 1.5v9.1c0 .8.7 1.5 1.5 1.5h13.1c.8 0 1.5-.7 1.5-.7V9.8c-.1-.8-.8-1.5-1.6-1.5zm-8.6-.9c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8v.9h-3.6v-.9zm5.5 5.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-1.8c0-.5.4-.9.9-.9s.9.4.9.9v1.8zm-5.5 0c0 .5-.4.9-.9.9s-.9-.4-.9-.9v-1.8c0-.5.4-.9.9-.9s.9.4.9.9v1.8z" /> </svg> </button> </body> </html>

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