File manager - Edit - /home/webapp69.cm.in.th/u69319090002/porfolio/Untitled-1.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>Professional Portfolio | Kitphirat Dev</title> <!-- Theme Checker (Prevents FFF/Black Flashes) --> <script> (function () { const savedTheme = localStorage.getItem('theme') || 'dark'; if (savedTheme === 'light') { document.documentElement.classList.remove('dark'); document.documentElement.classList.add('light'); } else { document.documentElement.classList.add('dark'); document.documentElement.classList.remove('light'); } })(); </script> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Google Fonts: Plus Jakarta Sans & Inter --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <!-- FontAwesome for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script> tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Inter', 'Plus Jakarta Sans', 'sans-serif'], heading: ['Plus Jakarta Sans', 'sans-serif'], }, colors: { primary: { 50: '#f0f7ff', 100: '#e0effe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 900: '#1e3a8a', }, charcoal: { 50: '#f6f7f9', 100: '#edf0f4', 800: '#1f2937', 900: '#111827', 950: '#0b0f19', }, slateBlue: { 500: '#475569', 600: '#334155', 700: '#1e293b', 900: '#0f172a', } } } } } </script> <style> body { font-family: 'Inter', 'Plus Jakarta Sans', sans-serif; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; transition: background-image 0.3s ease, color 0.3s ease; } /* Theme-Based Body Backgrounds */ html.dark body { background-image: linear-gradient(rgba(11, 15, 25, 0.85), rgba(11, 15, 25, 0.85)), url('background.png'); color: #f3f4f6; } html.light body { background-image: linear-gradient(rgba(243, 244, 246, 0.93), rgba(243, 244, 246, 0.93)), url('background.png'); color: #1f2937; } .glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.3s, border-color 0.3s, padding 0.3s; } html.dark .glass { background: rgba(15, 23, 42, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } html.light .glass { background: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } html.dark .glass.scrolled { background: rgba(11, 15, 25, 0.92); } html.light .glass.scrolled { background: rgba(255, 255, 255, 0.92); } .glass-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s; } html.dark .glass-card { background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); } html.light .glass-card { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.08); } .text-gradient { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .skill-bar { transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Theme Switch Toggle Animations */ .theme-toggle i { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .theme-toggle:hover i { transform: rotate(20deg) scale(1.1); } html.dark .theme-toggle .light-icon { display: block; } html.dark .theme-toggle .dark-icon { display: none; } html.light .theme-toggle .light-icon { display: none; } html.light .theme-toggle .dark-icon { display: block; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { opacity: 0; animation: fadeInUp 0.8s cubic-bezier(0.15, 0.85, 0.45, 1) forwards; } .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.15, 0.85, 0.45, 1); } .reveal.active { opacity: 1; transform: translateY(0); } /* ===== Welcome Popup Overlay ===== */ #welcome-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(7, 10, 20, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity 0.6s ease, visibility 0.6s ease; } #welcome-popup.hidden-popup { opacity: 0; visibility: hidden; pointer-events: none; } .popup-card { background: linear-gradient(145deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95)); border: 1px solid rgba(99, 162, 250, 0.2); border-radius: 2rem; padding: 3rem 2.5rem; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(59, 130, 246, 0.08); position: relative; overflow: hidden; animation: popupEntrance 0.7s cubic-bezier(0.15, 0.85, 0.45, 1) forwards; } .popup-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 180deg at 50% 50%, #3b82f620 0deg, transparent 60deg, #60a5fa18 120deg, transparent 180deg, #3b82f620 240deg, transparent 300deg, #60a5fa18 360deg); animation: rotateBg 12s linear infinite; z-index: 0; } .popup-card>* { position: relative; z-index: 1; } @keyframes rotateBg { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes popupEntrance { from { opacity: 0; transform: scale(0.88) translateY(24px); } to { opacity: 1; transform: scale(1) translateY(0); } } .popup-avatar-ring { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #60a5fa, #1d4ed8); padding: 3px; margin: 0 auto 1.5rem; animation: avatarPulse 2.5s ease-in-out infinite; } @keyframes avatarPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } 50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); } } .popup-avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgba(15, 23, 42, 0.8); } .popup-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 9999px; padding: 0.3rem 0.9rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 1.2rem; } .popup-badge span.dot { width: 7px; height: 7px; border-radius: 50%; background: #f87171; animation: ping 1.2s ease infinite; display: inline-block; } @keyframes ping { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } } .popup-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.65rem; font-weight: 800; color: #f1f5f9; line-height: 1.25; margin-bottom: 0.75rem; } .popup-title .highlight { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #818cf8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .popup-desc { color: #94a3b8; font-size: 0.88rem; line-height: 1.65; margin-bottom: 2rem; } .popup-enter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.9rem 2.5rem; border-radius: 0.9rem; border: none; cursor: pointer; width: 100%; box-shadow: 0 8px 32px rgba(37, 99, 235, 0.4); transition: all 0.25s ease; position: relative; overflow: hidden; } .popup-enter-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent); opacity: 0; transition: opacity 0.25s; } .popup-enter-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(37, 99, 235, 0.55); } .popup-enter-btn:hover::after { opacity: 1; } .popup-enter-btn:active { transform: translateY(0); } .popup-divider { width: 48px; height: 3px; background: linear-gradient(90deg, #3b82f6, #818cf8); border-radius: 999px; margin: 0 auto 1.5rem; } </style> </head> <body class="selection:bg-primary-500 selection:text-white overflow-x-hidden pb-24 lg:pb-0"> <!-- ===== Welcome Popup Overlay ===== --> <div id="welcome-popup" role="dialog" aria-modal="true" aria-label="ยินดีต้อนรับ"> <div class="popup-card"> <!-- Avatar --> <div class="popup-avatar-ring"> <img src="profile.png" alt="Kitphirat Dev"> </div> <!-- Status Badge --> <div class="popup-badge"> <span class="dot"></span> ทำงาน part-time burgerking </div> <!-- Divider --> <div class="popup-divider"></div> <!-- Title --> <h2 class="popup-title"> ยินดีต้อนรับสู่<br> <span class="highlight">Kitphirat.DEV</span> </h2> <!-- Description --> <p class="popup-desc"> พอร์ตโฟลิโอส่วนตัวของ <strong style="color:#e2e8f0">กฤษณ์พีรัช กวีชาญวิเชียร</strong><br> นักพัฒนาเว็บไซต์ผู้หลงใหลในการสร้างสรรค์ผลงาน<br>ที่มีคุณภาพและความประณีตสูงสุด </p> <!-- Enter Button --> <button id="popup-enter-btn" class="popup-enter-btn" onclick="closeWelcomePopup()"> <i class="fa-solid fa-door-open"></i> เข้าสู่เว็บไซต์ </button> </div> </div> <!-- Header / Navbar --> <header class="fixed top-0 left-0 w-full z-50 glass transition-all duration-300" id="navbar"> <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center"> <!-- Logo --> <a href="#hero" class="flex items-center gap-2 group"> <span class="w-10 h-10 rounded-xl bg-gradient-to-tr from-primary-600 to-blue-400 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-primary-600/30 group-hover:scale-105 transition-transform duration-300">K</span> <span class="font-heading font-extrabold text-xl tracking-tight text-slate-900 dark:text-white group-hover:text-primary-500 transition-colors">Kitphirat<span class="text-primary-500">.</span>DEV</span> </a> <!-- Desktop Menu --> <nav class="hidden lg:flex items-center gap-8"> <a href="#hero" class="text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white font-medium text-sm transition-colors relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-primary-500 after:transition-all hover:after:w-full">หน้าแรก</a> <a href="#about" class="text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white font-medium text-sm transition-colors relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-primary-500 after:transition-all hover:after:w-full">ประวัติส่วนตัว</a> <a href="#skills" class="text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white font-medium text-sm transition-colors relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-primary-500 after:transition-all hover:after:w-full">ทักษะ</a> <a href="#portfolio" class="text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white font-medium text-sm transition-colors relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-primary-500 after:transition-all hover:after:w-full">ผลงาน</a> <a href="#contact" class="text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white font-medium text-sm transition-colors relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-primary-500 after:transition-all hover:after:w-full">ติดต่อฉัน</a> <!-- Theme Toggle (Desktop) --> <button id="theme-toggle" class="theme-toggle text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white w-10 h-10 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 dark:bg-charcoal-900/50 dark:hover:bg-charcoal-800/50 border border-slate-200 dark:border-gray-700/60 flex items-center justify-center transition-all" aria-label="Toggle Theme"> <i class="fa-solid fa-moon text-lg dark-icon"></i> <i class="fa-solid fa-sun text-lg light-icon"></i> </button> <a href="#contact" class="bg-primary-600 hover:bg-primary-700 text-white font-semibold text-sm px-5 py-2.5 rounded-xl shadow-lg shadow-primary-600/25 transition-all hover:-translate-y-0.5">จ้างงานเลย</a> </nav> <!-- Mobile Controls --> <div class="flex items-center gap-4 lg:hidden"> <!-- Theme Toggle (Mobile) --> <button id="theme-toggle-mobile" class="theme-toggle text-slate-600 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white w-9 h-9 rounded-lg bg-slate-100/50 hover:bg-slate-200/50 dark:bg-charcoal-900/50 dark:hover:bg-charcoal-800/50 border border-slate-200 dark:border-gray-700/60 flex items-center justify-center transition-all" aria-label="Toggle Theme"> <i class="fa-solid fa-moon text-base dark-icon"></i> <i class="fa-solid fa-sun text-base light-icon"></i> </button> <!-- Hamburger Button (Mobile) --> <button id="menu-btn" class="flex flex-col justify-between w-6 h-5 focus:outline-none z-50 group" aria-label="Toggle Menu"> <span class="w-full h-0.5 bg-slate-600 dark:bg-gray-300 rounded transition-all duration-300 origin-left group-[.open]:rotate-45 group-[.open]:translate-y-[2px]"></span> <span class="w-full h-0.5 bg-slate-600 dark:bg-gray-300 rounded transition-all duration-300 group-[.open]:opacity-0"></span> <span class="w-full h-0.5 bg-slate-600 dark:bg-gray-300 rounded transition-all duration-300 origin-left group-[.open]:-rotate-45 group-[.open]:-translate-y-[2px]"></span> </button> </div> </div> <!-- Mobile Drawer Menu --> <div id="mobile-menu" class="fixed inset-0 bg-white/98 dark:bg-charcoal-950/98 z-40 transform translate-x-full transition-transform duration-500 flex flex-col justify-center items-center gap-8 lg:hidden"> <a href="#hero" class="mobile-link text-2xl font-heading font-semibold text-slate-700 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white transition-colors">หน้าแรก</a> <a href="#about" class="mobile-link text-2xl font-heading font-semibold text-slate-700 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white transition-colors">ประวัติส่วนตัว</a> <a href="#skills" class="mobile-link text-2xl font-heading font-semibold text-slate-700 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white transition-colors">ทักษะ</a> <a href="#portfolio" class="mobile-link text-2xl font-heading font-semibold text-slate-700 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white transition-colors">ผลงาน</a> <a href="#contact" class="mobile-link text-2xl font-heading font-semibold text-slate-700 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white transition-colors">ติดต่อฉัน</a> <a href="#contact" class="mobile-link bg-primary-600 text-white font-semibold text-lg px-8 py-3.5 rounded-xl shadow-lg shadow-primary-600/20 w-48 text-center transition-all hover:bg-primary-700">จ้างงานเลย</a> </div> </header> <main class="pt-20"> <!-- Hero Section --> <section id="hero" class="min-h-screen flex items-center justify-center px-6 relative overflow-hidden"> <!-- Background Decorative Lights --> <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary-600/10 rounded-full blur-3xl -z-10 animate-pulse"> </div> <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl -z-10 animate-pulse" style="animation-delay: 2s;"></div> <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-center w-full py-12"> <!-- Text Area (Column-span 7) --> <div class="lg:col-span-7 flex flex-col justify-center text-center lg:text-left space-y-6 order-2 lg:order-1 animate-fade-in-up"> <span class="inline-flex items-center justify-center lg:justify-start gap-2 bg-red-500/10 text-red-500 dark:text-red-400 font-semibold px-4 py-1.5 rounded-full text-sm border border-red-500/30 dark:border-red-500/20 self-center lg:self-start"> <span class="w-2.5 h-2.5 rounded-full bg-red-500 animate-ping"></span> ทำงาน part-time burgerking </span> <h1 class="text-4xl md:text-5xl lg:text-6xl font-heading font-extrabold text-slate-900 dark:text-white leading-tight"> สวัสดีครับ, ผม <br> <span class="text-gradient">กฤษณ์พีรัช กวีชาญวิเชียร</span> </h1> <p class="text-slate-600 dark:text-gray-400 text-base md:text-lg max-w-xl mx-auto lg:mx-0 leading-relaxed"> ผู้เชี่ยวชาญที่มีความละเอียดรอบคอบ หลงใหลในการต่อประกอบโมเดลและการจัดการงานเอกสารอย่างเป็นระบบ พร้อมส่งมอบงานที่ถูกต้องและมีคุณภาพสูงสุด </p> <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-4"> <a href="#portfolio" class="bg-primary-600 hover:bg-primary-700 text-white font-semibold px-8 py-3.5 rounded-xl shadow-lg shadow-primary-600/30 flex items-center justify-center gap-2 hover:-translate-y-0.5 transition-all"> <i class="fa-solid fa-briefcase"></i> ดูผลงานของผม </a> <a href="#" download class="border border-slate-200 dark:border-gray-700 bg-slate-100 hover:bg-slate-200 dark:bg-charcoal-900/50 dark:hover:bg-charcoal-800 text-slate-800 dark:text-white font-semibold px-8 py-3.5 rounded-xl flex items-center justify-center gap-2 hover:-translate-y-0.5 transition-all"> <i class="fa-solid fa-file-arrow-down text-primary-500 dark:text-primary-400"></i> ดาวน์โหลด Resume (PDF) </a> </div> </div> <!-- Graphic/Avatar Area (Column-span 5) --> <div class="lg:col-span-5 flex flex-col items-center justify-center order-1 lg:order-2 animate-fade-in-up" style="animation-delay: 0.2s;"> <div class="relative w-72 h-72 md:w-80 md:h-80 lg:w-96 lg:h-96 mb-6"> <!-- Decorative Frame --> <div class="absolute inset-0 bg-gradient-to-tr from-primary-600 to-blue-400 rounded-3xl rotate-6 opacity-30 blur-sm animate-spin-slow" style="animation-duration: 20s;"></div> <div class="absolute inset-0 bg-white dark:bg-charcoal-900 rounded-3xl border border-slate-200 dark:border-white/10 overflow-hidden shadow-2xl flex items-center justify-center group"> <img src="profile.png" alt="Kitphirat Dev" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"> </div> </div> <!-- Education Level Badge --> <div class="text-center"> <span class="inline-flex items-center gap-2 bg-blue-500/10 text-blue-600 dark:text-blue-400 font-semibold px-4 py-1.5 rounded-full text-sm border border-blue-500/30 dark:border-blue-500/20 shadow-lg shadow-blue-500/5"> <i class="fa-solid fa-graduation-cap"></i> กำลังศึกษาอยู่ระดับ ปวส.1 </span> </div> </div> </div> </section> <!-- About Me Section --> <section id="about" class="py-24 px-6 relative overflow-hidden reveal"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-2xl mx-auto mb-16"> <span class="text-primary-500 font-semibold uppercase tracking-wider text-sm">ข้อมูลเกี่ยวกับผม</span> <h2 class="text-3xl md:text-4xl font-heading font-bold text-slate-900 dark:text-white mt-2"> ประวัติส่วนตัว</h2> <p class="text-slate-600 dark:text-gray-400 mt-3 text-sm md:text-base"> ข้อมูลส่วนตัว ประวัติการศึกษา ครอบครัว ทักษะ และภาษา</p> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <!-- Column 1: Personal Info & Education --> <div class="space-y-8"> <!-- Personal Details Card --> <div class="glass-card p-8 rounded-2xl border border-slate-200/50 dark:border-white/5 shadow-xl"> <h3 class="text-xl font-heading font-semibold text-slate-900 dark:text-white mb-6 flex items-center gap-3"> <i class="fa-solid fa-user text-primary-500 dark:text-primary-400"></i> ประวัติส่วนตัว </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">ชื่อ - สกุล</span> <span class="text-slate-800 dark:text-white font-medium text-base">นาย กฤษณ์พีรัช กวีชาญวิเชียร</span> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">ชื่อเล่น</span> <span class="text-slate-800 dark:text-white font-medium text-base">แบงค์</span> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">วันเกิด</span> <span class="text-slate-800 dark:text-white font-medium text-base">8 พฤศจิกายน 2550</span> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">อายุ</span> <span class="text-slate-800 dark:text-white font-medium text-base">19 ปี</span> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">สัญชาติ</span> <span class="text-slate-800 dark:text-white font-medium text-base">ไทย</span> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">เชื้อชาติ</span> <span class="text-slate-800 dark:text-white font-medium text-base">ไทย</span> </div> </div> </div> <!-- Education Card --> <div class="glass-card p-8 rounded-2xl border border-slate-200/50 dark:border-white/5 shadow-xl"> <h3 class="text-xl font-heading font-semibold text-slate-900 dark:text-white mb-6 flex items-center gap-3"> <i class="fa-solid fa-graduation-cap text-primary-500 dark:text-primary-400"></i> การศึกษา </h3> <div class="space-y-4"> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">สถาบันการศึกษา</span> <span class="text-slate-800 dark:text-white font-medium text-base">วิทยาลัยเทคนิคเชียงใหม่</span> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">สาขาวิชา</span> <span class="text-slate-800 dark:text-white font-medium text-base">เทคโนโลยีคอมพิวเตอร์</span> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">ปีการศึกษาที่จบ</span> <span class="text-slate-800 dark:text-white font-medium text-base">2569</span> </div> </div> </div> </div> </div> <!-- Column 2: Family & Experience/Languages --> <div class="space-y-8"> <!-- Family Info Card --> <div class="glass-card p-8 rounded-2xl border border-slate-200/50 dark:border-white/5 shadow-xl"> <h3 class="text-xl font-heading font-semibold text-slate-900 dark:text-white mb-6 flex items-center gap-3"> <i class="fa-solid fa-house-chimney text-primary-500 dark:text-primary-400"></i> ข้อมูลครอบครัว </h3> <div class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">บิดา</span> <span class="text-slate-800 dark:text-white font-medium text-base">นาย อัครเดช กวีชาญวิเชียร</span> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">อาชีพ</span> <span class="text-slate-800 dark:text-white font-medium text-base">รับจ้าง</span> </div> </div> <div class="border-t border-slate-200/60 dark:border-white/5 my-2"></div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">มารดา</span> <span class="text-slate-800 dark:text-white font-medium text-base">นางสาว ศิริกาญจน์ ชัชชวาลค์</span> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider">อาชีพ</span> <span class="text-slate-800 dark:text-white font-medium text-base">พนักงาน</span> </div> </div> </div> </div> <!-- Skills & Languages Card --> <div class="glass-card p-8 rounded-2xl border border-slate-200/50 dark:border-white/5 shadow-xl"> <h3 class="text-xl font-heading font-semibold text-slate-900 dark:text-white mb-6 flex items-center gap-3"> <i class="fa-solid fa-gears text-primary-500 dark:text-primary-400"></i> ทักษะและภาษา </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider mb-2">ทักษะความสามารถ</span> <ul class="space-y-2"> <li class="flex items-center gap-2 text-sm text-slate-700 dark:text-gray-300"> <i class="fa-solid fa-circle-check text-green-500 text-xs"></i> ประสบการณ์การฝึกงานร้านคอม </li> <li class="flex items-center gap-2 text-sm text-slate-700 dark:text-gray-300"> <i class="fa-solid fa-circle-check text-green-500 text-xs"></i> สามารถประกอบคอมพิวเตอร์ </li> </ul> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400 uppercase tracking-wider mb-2">ภาษา</span> <ul class="space-y-2"> <li class="flex items-center gap-2 text-sm text-slate-700 dark:text-gray-300"> <i class="fa-solid fa-language text-primary-500 dark:text-primary-400 text-sm"></i> <strong>ภาษาไทย:</strong> ระดับเจ้าของภาษา </li> <li class="flex items-center gap-2 text-sm text-slate-700 dark:text-gray-300"> <i class="fa-solid fa-language text-primary-500 dark:text-primary-400 text-sm"></i> <strong>ภาษาอังกฤษ:</strong> พอใช้ได้เล็กน้อย </li> </ul> </div> </div> </div> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills" class="py-24 px-6 bg-slate-100/50 dark:bg-charcoal-950/50 reveal"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-2xl mx-auto mb-16"> <span class="text-primary-500 font-semibold uppercase tracking-wider text-sm">ทักษะของฉัน</span> <h2 class="text-3xl md:text-4xl font-heading font-bold text-slate-900 dark:text-white mt-2"> เทคโนโลยีและความเชี่ยวชาญ </h2> <p class="text-slate-600 dark:text-gray-400 mt-3 text-sm md:text-base"> สิ่งที่ผมเชี่ยวชาญเพื่อช่วยขับเคลื่อนโปรเจกต์ของคุณให้ประสบความสำเร็จอย่างสมบูรณ์แบบ</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- Skill Card 1: Frontend --> <div class="glass-card p-8 rounded-2xl border border-slate-200/50 dark:border-transparent hover:border-primary-500/30 dark:hover:border-primary-500/30 transition-all duration-300 hover:-translate-y-1"> <div class="w-12 h-12 bg-primary-500/10 rounded-xl flex items-center justify-center text-primary-500 dark:text-primary-400 mb-6 text-2xl shadow-inner"> <i class="fa-solid fa-code"></i> </div> <h3 class="text-xl font-heading font-semibold text-slate-900 dark:text-white mb-4">Frontend Development</h3> <div class="space-y-4"> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">HTML5 & CSS3 / Tailwind CSS</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">95%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 95%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">JavaScript (ES6+)</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">90%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 90%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">React / Next.js</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">85%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 85%"></div> </div> </div> </div> </div> <!-- Skill Card 2: Backend --> <div class="glass-card p-8 rounded-2xl border border-slate-200/50 dark:border-transparent hover:border-primary-500/30 dark:hover:border-primary-500/30 transition-all duration-300 hover:-translate-y-1"> <div class="w-12 h-12 bg-primary-500/10 rounded-xl flex items-center justify-center text-primary-500 dark:text-primary-400 mb-6 text-2xl shadow-inner"> <i class="fa-solid fa-server"></i> </div> <h3 class="text-xl font-heading font-semibold text-slate-900 dark:text-white mb-4">Backend Development</h3> <div class="space-y-4"> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">Node.js / Express</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">80%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 80%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">Databases (MongoDB, MySQL)</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">85%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 85%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">RESTful APIs</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">90%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 90%"></div> </div> </div> </div> </div> <!-- Skill Card 3: Other tools --> <div class="glass-card p-8 rounded-2xl border border-slate-200/50 dark:border-transparent hover:border-primary-500/30 dark:hover:border-primary-500/30 transition-all duration-300 hover:-translate-y-1"> <div class="w-12 h-12 bg-primary-500/10 rounded-xl flex items-center justify-center text-primary-500 dark:text-primary-400 mb-6 text-2xl shadow-inner"> <i class="fa-solid fa-screwdriver-wrench"></i> </div> <h3 class="text-xl font-heading font-semibold text-slate-900 dark:text-white mb-4">Tools & Workflows</h3> <div class="space-y-4"> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">Git / GitHub Version Control</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">90%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 90%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">Docker / Containerization</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">70%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 70%"></div> </div> </div> <div> <div class="flex justify-between text-sm mb-1"> <span class="text-slate-700 dark:text-gray-300 font-medium">UI Design (Figma)</span> <span class="text-primary-500 dark:text-primary-400 font-semibold">75%</span> </div> <div class="w-full h-2 bg-slate-200 dark:bg-slateBlue-700/50 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-primary-500 to-blue-400 rounded-full" style="width: 75%"></div> </div> </div> </div> </div> </div> </div> </section> <!-- Portfolio Grid Section --> <section id="portfolio" class="py-24 px-6 reveal"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-2xl mx-auto mb-16"> <span class="text-primary-500 font-semibold uppercase tracking-wider text-sm">แฟ้มสะสมผลงาน</span> <h2 class="text-3xl md:text-4xl font-heading font-bold text-slate-900 dark:text-white mt-2"> โปรเจกต์เด่นที่ผ่านมา</h2> <p class="text-slate-600 dark:text-gray-400 mt-3 text-sm md:text-base"> ส่วนหนึ่งของระบบและงานพัฒนาเว็บไซต์ที่ส่งมอบตรงเวลาพร้อมคุณภาพในระดับพรีเมียม</p> </div> <!-- Desktop: 3 Columns, Mobile: 1 Column --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project 1 --> <div class="glass-card rounded-2xl overflow-hidden group hover:shadow-2xl hover:shadow-primary-500/10 hover:border-primary-500/20 border border-slate-200/50 dark:border-transparent transition-all duration-300 flex flex-col"> <!-- Image Container with Hover Effect --> <div class="relative overflow-hidden aspect-video bg-slate-200 dark:bg-slateBlue-600 flex items-center justify-center"> <span class="text-5xl text-slate-600 dark:text-white opacity-40 group-hover:scale-110 transition-transform duration-300"><i class="fa-solid fa-screwdriver-wrench"></i></span> <div class="absolute top-3 left-3 bg-primary-600 text-white text-xs font-semibold px-2.5 py-1 rounded-md"> Intern </div> </div> <!-- Content --> <div class="p-6 flex flex-col flex-grow"> <h3 class="text-lg font-heading font-semibold text-slate-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400 transition-colors"> Computer Technician Intern (RedStar)</h3> <p class="text-slate-600 dark:text-gray-400 text-sm mt-2 flex-grow"> ประสบการณ์ฝึกงานด้านเทคนิคคอมพิวเตอร์ ได้รับมอบหมายในการตรวจเช็กสภาพ ซ่อมบำรุง ประกอบคอมพิวเตอร์ตามบรีฟของลูกค้า และลงระบบปฏิบัติการ/โปรแกรมต่างๆ พร้อมทั้งให้คำแนะนำและแก้ไขปัญหาหน้างานได้อย่างถูกต้องและรวดเร็ว </p> <div class="flex flex-wrap gap-2 mt-4 mb-6"> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Hardware</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Computer Assembly</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Troubleshooting</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Customer Service</span> </div> <a href="#" class="inline-flex items-center gap-1.5 text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-semibold text-sm self-start group/btn"> ดูรายละเอียดโปรเจกต์ <i class="fa-solid fa-arrow-right text-xs transform group-hover/btn:translate-x-1 transition-transform"></i> </a> </div> </div> <!-- Project 2 --> <div class="glass-card rounded-2xl overflow-hidden group hover:shadow-2xl hover:shadow-primary-500/10 hover:border-primary-500/20 border border-slate-200/50 dark:border-transparent transition-all duration-300 flex flex-col"> <!-- Image Container with Hover Effect --> <div class="relative overflow-hidden aspect-video bg-slate-200 dark:bg-slateBlue-600 flex items-center justify-center"> <span class="text-5xl text-slate-600 dark:text-white opacity-40 group-hover:scale-110 transition-transform duration-300"><i class="fa-solid fa-gamepad"></i></span> <div class="absolute top-3 left-3 bg-green-600 text-white text-xs font-semibold px-2.5 py-1 rounded-md"> Game Dev </div> </div> <!-- Content --> <div class="p-6 flex flex-col flex-grow"> <h3 class="text-lg font-heading font-semibold text-slate-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400 transition-colors"> Final Project: Game Development</h3> <p class="text-slate-600 dark:text-gray-400 text-sm mt-2 flex-grow"> โปรเจกต์จบการศึกษาในรูปแบบการพัฒนาเกมคอมพิวเตอร์ ออกแบบและเขียนโปรแกรมระบบกลไกการเล่น (Game Mechanics) สร้างสรรค์เนื้อเรื่อง และจัดการระบบเสียง/กราฟิก เพื่อสร้างประสบการณ์การเล่นที่สนุกสนาน ลื่นไหล และเสถียร </p> <div class="flex flex-wrap gap-2 mt-4 mb-6"> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Game Design</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Unity</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">C#</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Project Management</span> </div> <a href="#" class="inline-flex items-center gap-1.5 text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-semibold text-sm self-start group/btn"> ดูรายละเอียดโปรเจกต์ <i class="fa-solid fa-arrow-right text-xs transform group-hover/btn:translate-x-1 transition-transform"></i> </a> </div> </div> <!-- Project 3 --> <div class="glass-card rounded-2xl overflow-hidden group hover:shadow-2xl hover:shadow-primary-500/10 hover:border-primary-500/20 border border-slate-200/50 dark:border-transparent transition-all duration-300 flex flex-col"> <!-- Image Container with Hover Effect --> <div class="relative overflow-hidden aspect-video bg-slate-200 dark:bg-slateBlue-600 flex items-center justify-center"> <span class="text-5xl text-slate-600 dark:text-white opacity-40 group-hover:scale-110 transition-transform duration-300"><i class="fa-solid fa-cubes"></i></span> <div class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2.5 py-1 rounded-md"> Crafting </div> </div> <!-- Content --> <div class="p-6 flex flex-col flex-grow"> <h3 class="text-lg font-heading font-semibold text-slate-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400 transition-colors"> Large-Scale Scale Model Assembly</h3> <p class="text-slate-600 dark:text-gray-400 text-sm mt-2 flex-grow"> ผลงานการต่อประกอบและจัดทำโมเดลจำลองขนาดใหญ่ที่ได้รับความไว้วางใจจากอาจารย์ ใช้ความประณีต ความอดทน และความละเอียดรอบคอบในทุกขั้นตอน ตั้งแต่การตีความแบบแปลน การตัดแต่งชิ้นส่วนอย่างแม่นยำ ไปจนถึงการลงสีและเก็บรายละเอียดจนสมบูรณ์แบบ </p> <div class="flex flex-wrap gap-2 mt-4 mb-6"> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Scale Modeling</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Craftsmanship</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Attention to Detail</span> <span class="bg-slate-100 dark:bg-charcoal-800 text-slate-700 dark:text-gray-300 text-xs px-2.5 py-1 rounded-md">Planning</span> </div> <a href="#" class="inline-flex items-center gap-1.5 text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-semibold text-sm self-start group/btn"> ดูรายละเอียดโปรเจกต์ <i class="fa-solid fa-arrow-right text-xs transform group-hover/btn:translate-x-1 transition-transform"></i> </a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-24 px-6 bg-slate-100/50 dark:bg-charcoal-950/50 relative reveal"> <div class="max-w-7xl mx-auto"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12"> <!-- Left: Contact Details (Column-span 5) --> <div class="lg:col-span-5 flex flex-col justify-center space-y-6"> <span class="text-primary-500 font-semibold uppercase tracking-wider text-sm">ติดต่อผม</span> <h2 class="text-3xl md:text-4xl font-heading font-bold text-slate-900 dark:text-white"> มาเริ่มทำโปรเจกต์ต่อไปของคุณด้วยกัน</h2> <p class="text-slate-600 dark:text-gray-400 text-sm md:text-base leading-relaxed"> สนใจร่วมงาน พัฒนาเว็บไซต์ หรือต้องการสอบถามรายละเอียดเพิ่มเติม สามารถกรอกฟอร์มหรือติดต่อผ่านช่องทางต่างๆ ได้ทันทีครับ </p> <div class="space-y-4 pt-4"> <div class="flex items-center gap-4"> <div class="w-10 h-10 rounded-xl bg-primary-500/10 border border-primary-500/20 flex items-center justify-center text-primary-500 dark:text-primary-400 text-lg"> <i class="fa-solid fa-envelope"></i> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400">อีเมลส่วนตัว</span> <a href="mailto:kitphirat@gmail.com" class="text-slate-800 dark:text-gray-200 font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors">kitphirat@gmail.com</a> </div> </div> <div class="flex items-center gap-4"> <div class="w-10 h-10 rounded-xl bg-primary-500/10 border border-primary-500/20 flex items-center justify-center text-primary-500 dark:text-primary-400 text-lg"> <i class="fa-solid fa-phone"></i> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400">เบอร์โทรศัพท์</span> <a href="tel:+66825596865" class="text-slate-800 dark:text-gray-200 font-medium hover:text-primary-500 dark:hover:text-primary-400 transition-colors">0825596865</a> </div> </div> <div class="flex items-center gap-4"> <div class="w-10 h-10 rounded-xl bg-primary-500/10 border border-primary-500/20 flex items-center justify-center text-primary-500 dark:text-primary-400 text-lg"> <i class="fa-solid fa-location-dot"></i> </div> <div> <span class="block text-xs text-slate-500 dark:text-gray-400">สถานที่</span> <span class="text-slate-800 dark:text-gray-200 font-medium">เชียงใหม่, ประเทศไทย</span> </div> </div> </div> </div> <!-- Right: Form (Column-span 7) --> <div class="lg:col-span-7"> <div class="glass-card p-8 rounded-3xl border border-slate-200/50 dark:border-transparent"> <form action="#" method="POST" class="space-y-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div> <label for="name" class="block text-xs font-semibold text-slate-700 dark:text-gray-300 uppercase tracking-wider mb-2">ชื่อของคุณ</label> <input type="text" id="name" name="name" required class="w-full bg-slate-50 dark:bg-charcoal-900/50 border border-slate-200 dark:border-gray-700/60 rounded-xl px-4 py-3 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 focus:outline-none focus:border-primary-500 transition-colors text-sm" placeholder="สมชาย ใจดี"> </div> <div> <label for="email" class="block text-xs font-semibold text-slate-700 dark:text-gray-300 uppercase tracking-wider mb-2">อีเมลติดต่อ</label> <input type="email" id="email" name="email" required class="w-full bg-slate-50 dark:bg-charcoal-900/50 border border-slate-200 dark:border-gray-700/60 rounded-xl px-4 py-3 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 focus:outline-none focus:border-primary-500 transition-colors text-sm" placeholder="example@domain.com"> </div> </div> <div> <label for="subject" class="block text-xs font-semibold text-slate-700 dark:text-gray-300 uppercase tracking-wider mb-2">หัวข้อเรื่อง</label> <input type="text" id="subject" name="subject" required class="w-full bg-slate-50 dark:bg-charcoal-900/50 border border-slate-200 dark:border-gray-700/60 rounded-xl px-4 py-3 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 focus:outline-none focus:border-primary-500 transition-colors text-sm" placeholder="สนใจพัฒนาระบบ e-Commerce / ติดต่องาน"> </div> <div> <label for="message" class="block text-xs font-semibold text-slate-700 dark:text-gray-300 uppercase tracking-wider mb-2">ข้อความรายละเอียด</label> <textarea id="message" name="message" rows="5" required class="w-full bg-slate-50 dark:bg-charcoal-900/50 border border-slate-200 dark:border-gray-700/60 rounded-xl px-4 py-3 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-gray-500 focus:outline-none focus:border-primary-500 transition-colors text-sm" placeholder="เขียนรายละเอียดงานหรือข้อความที่คุณต้องการติดต่อ..."></textarea> </div> <button type="submit" class="w-full bg-primary-600 hover:bg-primary-700 text-white font-semibold py-4 rounded-xl shadow-lg shadow-primary-600/30 flex items-center justify-center gap-2 hover:-translate-y-0.5 transition-all"> <i class="fa-solid fa-paper-plane"></i> ส่งข้อความหาผมเลย </button> </form> </div> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="border-t border-slate-200 dark:border-gray-800/60 bg-slate-100 dark:bg-charcoal-950 py-12 px-6"> <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6"> <!-- Left: Logo & copyright --> <div class="text-center md:text-left space-y-2"> <span class="font-heading font-extrabold text-lg text-slate-900 dark:text-white">Kitphirat<span class="text-primary-500">.</span>DEV</span> <p class="text-slate-500 dark:text-gray-500 text-xs">© 2026 kitphirat. All rights reserved. Designed & built with care. </p> </div> <!-- Right: Social Links --> <div class="flex gap-4"> <a href="#" aria-label="GitHub" class="w-10 h-10 rounded-full bg-white dark:bg-charcoal-900 border border-slate-200 dark:border-gray-800 flex items-center justify-center text-slate-600 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-slate-300 dark:hover:border-gray-600 transition-colors"><i class="fa-brands fa-github text-lg"></i></a> <a href="#" aria-label="LinkedIn" class="w-10 h-10 rounded-full bg-white dark:bg-charcoal-900 border border-slate-200 dark:border-gray-800 flex items-center justify-center text-slate-600 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-slate-300 dark:hover:border-gray-600 transition-colors"><i class="fa-brands fa-linkedin-in text-lg"></i></a> <a href="#" aria-label="Facebook" class="w-10 h-10 rounded-full bg-white dark:bg-charcoal-900 border border-slate-200 dark:border-gray-800 flex items-center justify-center text-slate-600 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-slate-300 dark:hover:border-gray-600 transition-colors"><i class="fa-brands fa-facebook-f text-lg"></i></a> <a href="#" aria-label="Medium" class="w-10 h-10 rounded-full bg-white dark:bg-charcoal-900 border border-slate-200 dark:border-gray-800 flex items-center justify-center text-slate-600 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:border-slate-300 dark:hover:border-gray-600 transition-colors"><i class="fa-brands fa-medium text-lg"></i></a> </div> </div> </footer> <!-- JavaScript to Handle Hamburger and Dynamic Interactions --> <script> // ===== Welcome Popup Logic ===== function closeWelcomePopup() { const popup = document.getElementById('welcome-popup'); popup.classList.add('hidden-popup'); document.body.style.overflow = ''; // Remove from DOM after transition setTimeout(() => popup.remove(), 700); } // Lock body scroll while popup is visible document.body.style.overflow = 'hidden'; // Optional: allow closing by pressing Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeWelcomePopup(); }); </script> <script> const menuBtn = document.getElementById('menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); const mobileLinks = document.querySelectorAll('.mobile-link'); const navbar = document.getElementById('navbar'); // Toggle mobile drawer menuBtn.addEventListener('click', () => { menuBtn.classList.toggle('open'); if (mobileMenu.classList.contains('translate-x-full')) { mobileMenu.classList.remove('translate-x-full'); } else { mobileMenu.classList.add('translate-x-full'); } }); // Close mobile drawer when link clicked mobileLinks.forEach(link => { link.addEventListener('click', () => { menuBtn.classList.remove('open'); mobileMenu.classList.add('translate-x-full'); }); }); // Add scrolled class to navbar on scroll window.addEventListener('scroll', () => { if (window.scrollY > 50) { navbar.classList.add('py-3', 'shadow-xl', 'scrolled'); navbar.classList.remove('py-4'); } else { navbar.classList.remove('py-3', 'shadow-xl', 'scrolled'); navbar.classList.add('py-4'); } }); // Theme Toggle Logic const themeToggleBtn = document.getElementById('theme-toggle'); const themeToggleMobileBtn = document.getElementById('theme-toggle-mobile'); const toggleTheme = () => { const currentTheme = localStorage.getItem('theme') || 'dark'; let newTheme = 'dark'; if (currentTheme === 'dark') { newTheme = 'light'; document.documentElement.classList.remove('dark'); document.documentElement.classList.add('light'); } else { newTheme = 'dark'; document.documentElement.classList.remove('light'); document.documentElement.classList.add('dark'); } localStorage.setItem('theme', newTheme); }; if (themeToggleBtn) { themeToggleBtn.addEventListener('click', toggleTheme); } if (themeToggleMobileBtn) { themeToggleMobileBtn.addEventListener('click', toggleTheme); } // Scroll Reveal Animation Logic const revealElements = document.querySelectorAll('.reveal'); const revealOnScroll = () => { const triggerBottom = window.innerHeight * 0.85; revealElements.forEach(el => { const rect = el.getBoundingClientRect(); if (rect.top < triggerBottom) { el.classList.add('active'); } }); }; window.addEventListener('scroll', revealOnScroll); // Trigger immediately to show elements already in view revealOnScroll(); // Active Bottom Nav Item on Scroll Highlight Logic const sections = document.querySelectorAll('section'); const bottomNavLinks = document.querySelectorAll('.mobile-nav-link'); const highlightBottomNav = () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (window.scrollY >= (sectionTop - 220)) { current = section.getAttribute('id'); } }); bottomNavLinks.forEach(link => { link.classList.remove('text-primary-600', 'dark:text-primary-400'); link.classList.add('text-slate-500', 'dark:text-gray-400'); if (link.getAttribute('href') === `#${current}`) { link.classList.remove('text-slate-500', 'dark:text-gray-400'); link.classList.add('text-primary-600', 'dark:text-primary-400'); } }); }; window.addEventListener('scroll', highlightBottomNav); highlightBottomNav(); </script> <!-- Sticky Bottom Navigation (Mobile) --> <div class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 lg:hidden w-[92%] max-w-md bg-white/75 dark:bg-charcoal-950/75 backdrop-blur-md border border-slate-200/50 dark:border-white/10 rounded-2xl px-6 py-3 shadow-xl transition-all duration-300"> <nav class="flex justify-between items-center w-full"> <a href="#hero" class="mobile-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"> <i class="fa-solid fa-house text-lg"></i> <span class="text-[10px] font-medium">หน้าแรก</span> </a> <a href="#about" class="mobile-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"> <i class="fa-solid fa-user text-lg"></i> <span class="text-[10px] font-medium">ประวัติ</span> </a> <a href="#skills" class="mobile-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"> <i class="fa-solid fa-code text-lg"></i> <span class="text-[10px] font-medium">ทักษะ</span> </a> <a href="#portfolio" class="mobile-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"> <i class="fa-solid fa-briefcase text-lg"></i> <span class="text-[10px] font-medium">ผลงาน</span> </a> <a href="#contact" class="mobile-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"> <i class="fa-solid fa-envelope text-lg"></i> <span class="text-[10px] font-medium">ติดต่อ</span> </a> </nav> </div> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.37 |
proxy
|
phpinfo
|
Settings