File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090009/portfolio/index.html

Back
<!DOCTYPE html> <html lang="th" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ณัฏฐกิตติ์ ครุฑจันทร์ \| Portfolio</title> <!-- Meta Description for SEO --> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ ณัฏฐกิตติ์ ครุฑจันทร์ นักพัฒนาเว็บรุ่นใหม่ไฟแรง อายุ 18 ปี สัญชาติไทย รวบรวมผลงาน ทักษะ และช่องทางการติดต่อ"> <!-- Google Fonts: Noto Sans Thai & Plus Jakarta Sans --> <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=Noto+Sans+Thai:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Tailwind Custom Configuration --> <script> tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['"Noto Sans Thai"', '"Plus Jakarta Sans"', 'sans-serif'], }, colors: { brand: { light: '#ECF3EE', // Soft Sage Green Pastel DEFAULT: '#4E735B', // Sage Green Accents dark: '#2D4435', }, neutral: { offwhite: '#F9FAFB', // Off-white base softdark: '#1A202C', // Slate-like Dark Mode base cardlight: '#FFFFFF', carddark: '#2D3748', } } } } } </script> <style> /* Modern Glassmorphic Scrollbar / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(241, 245, 249, 0.5); } .dark ::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.5); } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.5); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.7); } / Smooth fade-in transitions */ .fade-in-section { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; visibility: hidden; } .fade-in-section.is-visible { opacity: 1; transform: none; visibility: visible; } </style> </head> <body class="bg-[#F4F6F4] dark:bg-[#121820] text-slate-700 dark:text-slate-300 font-sans transition-colors duration-300 ease-in-out antialiased"> <body class="bg-[#F4F6F4] dark:bg-[#121820] text-slate-700 dark:text-slate-300 font-sans transition-colors duration-300 ease-in-out antialiased"> <!-- Desktop Left Sidebar --> <aside id="sidebar" class="hidden md:flex flex-col w-64 h-screen fixed left-0 top-0 z-40 bg-[#F4F6F4] dark:bg-[#121820] border-r border-slate-200/50 dark:border-slate-800/50 transition-all duration-300 p-6 justify-between"> <div> <!-- Brand Logo --> <a href="#" class="text-xl font-bold tracking-tight text-slate-800 dark:text-slate-100 flex items-center gap-2 mb-10 hover:opacity-85 transition-opacity"> <span class="w-9 h-9 rounded-full bg-brand/10 dark:bg-brand/20 flex items-center justify-center text-brand text-base font-semibold">ณ</span> <span>Nattakitt</span> </a> <!-- Navigation Links --> <nav class="flex flex-col gap-2.5"> <a href="#home" class="sidebar-link flex items-center gap-3.5 px-4 py-3 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"> </path> </svg> <span>หน้าแรก</span> </a> <a href="#about" class="sidebar-link flex items-center gap-3.5 px-4 py-3 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> </svg> <span>เกี่ยวกับ</span> </a> <a href="#skills" class="sidebar-link flex items-center gap-3.5 px-4 py-3 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> <span>ทักษะ</span> </a> <a href="#hobbies" class="sidebar-link flex items-center gap-3.5 px-4 py-3 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"> </path> </svg> <span>สิ่งที่ชอบ</span> </a> <a href="#contact" class="sidebar-link flex items-center gap-3.5 px-4 py-3 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"> </path> </svg> <span>ติดต่อ</span> </a> </nav> </div> <!-- Sidebar Footer --> <div class="flex flex-col gap-4 border-t border-slate-200/50 dark:border-slate-800/50 pt-6"> <button id="sidebarThemeToggle" aria-label="สลับโหมดหน้าจอ" class="w-full h-11 rounded-2xl bg-white dark:bg-[#1E2631] shadow-sm hover:shadow-md dark:shadow-none border border-slate-200/60 dark:border-slate-700/60 flex items-center justify-center gap-3 transition-all duration-300 hover:scale-[1.02] text-sm font-medium"> <span id="sidebarThemeIconContainer" class="flex items-center justify-center"></span> <span id="sidebarThemeText">โหมดกลางคืน</span> </button> <p class="text-xs text-slate-400 dark:text-slate-500 text-center"> © 2026 Nattakitt </p> </div> </aside> <!-- Header for Mobile Screens (Hidden on Desktop) --> <header class="md:hidden sticky top-0 z-50 backdrop-blur-md bg-[#F4F6F4]/90 dark:bg-[#121820]/90 border-b border-slate-200/50 dark:border-slate-800/50 transition-colors duration-300"> <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between"> <a href="#" class="text-lg font-bold tracking-tight text-slate-800 dark:text-slate-100 flex items-center gap-2"> <span class="w-8 h-8 rounded-full bg-brand/10 dark:bg-brand/20 flex items-center justify-center text-brand font-semibold">ณ</span> <span>Nattakitt</span> </a> <div class="flex items-center gap-4"> <!-- Soft Dark Mode Toggle Button for Mobile --> <button id="themeToggle" aria-label="สลับโหมดหน้าจอ" class="w-10 h-10 rounded-xl bg-white dark:bg-[#1E2631] shadow-sm hover:shadow-md dark:shadow-none border border-slate-200/60 dark:border-slate-700/60 flex items-center justify-center transition-all duration-300 hover:scale-105"> <!-- Sun Icon (Show in Dark Mode) --> <svg id="sunIcon" class="w-5 h-5 text-amber-500 hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> <!-- Moon Icon (Show in Light Mode) --> <svg id="moonIcon" class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> </button> <!-- Mobile Menu Button (Hamburger) --> <button id="mobileMenuBtn" aria-label="เมนูหลัก" class="w-10 h-10 rounded-xl bg-white dark:bg-[#1E2631] border border-slate-200/60 dark:border-slate-700/60 flex items-center justify-center transition-all duration-300"> <svg id="hamburgerIcon" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> </svg> <svg id="closeIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> </header> <!-- Mobile Navigation Drawer Overlay Backdrop --> <div id="mobileMenuBackdrop" class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm hidden transition-opacity duration-300 opacity-0 md:hidden"> </div> <!-- Mobile Navigation Drawer Menu --> <div id="mobileMenu" class="fixed inset-y-0 left-0 z-50 w-72 bg-[#F4F6F4] dark:bg-[#121820] border-r border-slate-200/60 dark:border-slate-800/60 shadow-2xl p-6 transform -translate-x-full transition-transform duration-300 ease-in-out flex flex-col justify-between md:hidden"> <div> <!-- Mobile Brand Logo --> <div class="flex items-center justify-between mb-8"> <a href="#" class="text-lg font-bold tracking-tight text-slate-800 dark:text-slate-100 flex items-center gap-2"> <span class="w-8 h-8 rounded-full bg-brand/10 dark:bg-brand/20 flex items-center justify-center text-brand font-semibold">ณ</span> <span>Nattakitt</span> </a> <!-- Mobile Close button inside drawer --> <button id="mobileMenuCloseBtn" class="text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Mobile Nav Links --> <nav class="flex flex-col gap-2"> <a href="#home" class="mobile-nav-link flex items-center gap-3 px-4 py-3.5 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"> </path> </svg> <span>หน้าแรก</span> </a> <a href="#about" class="mobile-nav-link flex items-center gap-3 px-4 py-3.5 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> </svg> <span>เกี่ยวกับ</span> </a> <a href="#skills" class="mobile-nav-link flex items-center gap-3 px-4 py-3.5 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> <span>ทักษะ</span> </a> <a href="#hobbies" class="mobile-nav-link flex items-center gap-3 px-4 py-3.5 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"> </path> </svg> <span>สิ่งที่ชอบ</span> </a> <a href="#contact" class="mobile-nav-link flex items-center gap-3 px-4 py-3.5 rounded-2xl text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-[#1E2631] hover:text-brand dark:hover:text-brand-light font-medium transition-all duration-300"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"> </path> </svg> <span>ติดต่อ</span> </a> </nav> </div> <div class="text-center text-xs text-slate-400 dark:text-slate-500 border-t border-slate-200/50 dark:border-slate-800/50 pt-4"> © 2026 Nattakitt </div> </div> <!-- Mobile Sticky Bottom Navigation Menu --> <div id="bottomNav" class="fixed bottom-0 left-0 right-0 z-50 bg-[#F4F6F4]/90 dark:bg-[#121820]/90 backdrop-blur-md border-t border-slate-200/50 dark:border-slate-800/50 py-2.5 px-4 md:hidden flex justify-around items-center shadow-[0_-4px_12px_rgba(0,0,0,0.05)] transition-colors duration-300"> <a href="#home" class="bottom-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-light transition-all duration-300"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"> </path> </svg> <span class="text-[10px] font-medium">หน้าแรก</span> </a> <a href="#about" class="bottom-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-light transition-all duration-300"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> </svg> <span class="text-[10px] font-medium">เกี่ยวกับ</span> </a> <a href="#skills" class="bottom-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-light transition-all duration-300"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"> </path> </svg> <span class="text-[10px] font-medium">ทักษะ</span> </a> <a href="#hobbies" class="bottom-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-light transition-all duration-300"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"> </path> </svg> <span class="text-[10px] font-medium">สิ่งที่ชอบ</span> </a> <a href="#contact" class="bottom-nav-link flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-brand dark:hover:text-brand-light transition-all duration-300"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"> </path> </svg> <span class="text-[10px] font-medium">ติดต่อ</span> </a> </div> <!-- Main Content Wrapper (Shifted right on desktop, padded at bottom on mobile) --> <main class="md:pl-64 pb-20 md:pb-0 transition-all duration-300"> <!-- Hero Section --> <section id="home" class="min-h-[calc(100vh-4rem)] flex items-center py-12 px-6"> <div class="max-w-6xl mx-auto w-full grid grid-cols-1 md:grid-cols-12 gap-12 items-center"> <!-- Hero Left: Info --> <div class="md:col-span-7 flex flex-col items-center md:items-start text-center md:text-left space-y-6 order-2 md:order-1"> <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-brand/10 dark:bg-brand/20 text-brand dark:text-brand-light text-sm font-semibold uppercase tracking-wider"> <span class="w-2 h-2 rounded-full bg-brand animate-pulse"></span> Available for Work </div> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-slate-800 dark:text-slate-100 leading-tight"> สวัสดีครับ, ผม <br class="hidden sm:inline"> <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand to-emerald-600 dark:from-brand-light dark:to-emerald-400">ณัฏฐกิตติ์ ครุฑจันทร์</span> </h1> <p class="text-lg sm:text-xl text-slate-600 dark:text-slate-400 max-w-lg font-light leading-relaxed"> นักเรียนชั้นมัธยมศึกษาและนักพัฒนาเว็บไซต์รุ่นใหม่ (Junior Web Developer) ที่มีความมุ่งมั่นและหลงใหลในการออกแบบเว็บแอปพลิเคชันที่เรียบง่าย ทันสมัย และเป็นมิตรต่อผู้ใช้งาน </p> <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"> <a href="#hobbies" class="px-8 py-3.5 rounded-2xl bg-brand text-white font-medium shadow-md hover:bg-brand-dark transition-all duration-300 hover:-translate-y-0.5 text-center"> สิ่งที่ชอบทำ </a> <a href="#contact" class="px-8 py-3.5 rounded-2xl bg-white dark:bg-[#1E2631] text-slate-700 dark:text-slate-200 border border-slate-200/80 dark:border-slate-700/80 font-medium shadow-sm hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-300 hover:-translate-y-0.5 text-center"> พูดคุย/ติดต่อ </a> </div> </div> <!-- Hero Right: Portrait --> <div class="md:col-span-5 flex justify-center order-1 md:order-2"> <div class="relative group"> <!-- Decorative back glow --> <div class="absolute -inset-1.5 bg-gradient-to-r from-brand to-emerald-500 rounded-3xl blur-xl opacity-30 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"> </div> <!-- Card Frame --> <div class="relative w-64 h-64 sm:w-80 sm:h-80 rounded-3xl overflow-hidden border-4 border-white dark:border-[#1E2631] shadow-xl transition-all duration-500"> <img src="profile.jpeg" alt="ณัฏฐกิตติ์ ครุฑจันทร์" class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500"> </div> </div> </div> </div> </section> <!-- About & Personal Info Section --> <section id="about" class="fade-in-section py-24 px-6 bg-white dark:bg-[#181F2A] transition-colors duration-300"> <div class="max-w-6xl mx-auto"> <div class="text-center max-w-2xl mx-auto mb-16"> <h2 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-4"> ข้อมูลส่วนตัวและประวัติย่อ</h2> <div class="w-12 h-1 bg-brand mx-auto rounded-full"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <!-- Description --> <div class="space-y-6"> <h3 class="text-2xl font-semibold text-slate-800 dark:text-slate-200">แนะนำตัวเบื้องต้น</h3> <p class="text-slate-600 dark:text-slate-400 leading-relaxed font-light"> ผมชื่อณัฏฐกิตติ์ หรือเรียกสั้นๆ ว่า "ต้นข้าว" ปัจจุบันกำลังศึกษาอยู่ที่ <strong>วิทยาลัยเทคนิคเชียงใหม่ ระดับชั้น ปวส.1</strong> ผมมีความสนใจการออกแบบเว็บแอปพลิเคชันอย่างมาก เริ่มต้นฝึกฝนทักษะการเขียนโปรแกรมด้วยตัวเอง มีเป้าหมายในการพัฒนาประสบการณ์ผู้ใช้ (UX/UI) ที่ลื่นไหล มีระบบระเบียบ สะอาดตา และเข้าถึงได้ง่ายบนอุปกรณ์ทุกขนาด </p> <!-- Structured Tags Section --> <div class="flex flex-wrap gap-3 pt-4"> <!-- Tag: Education --> <div class="flex items-center gap-2 px-4 py-2 rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-200/50 dark:border-slate-700/50"> <span class="text-lg">🏫</span> <div> <p class="text-xs text-slate-400 dark:text-slate-500 leading-none">การศึกษา</p> <p class="text-sm font-semibold text-slate-700 dark:text-slate-300">วท.เชียงใหม่ (ปวส.1) </p> </div> </div> <!-- Tag: Age --> <div class="flex items-center gap-2 px-4 py-2 rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-200/50 dark:border-slate-700/50"> <span class="text-lg">🎂</span> <div> <p class="text-xs text-slate-400 dark:text-slate-500 leading-none">อายุ</p> <p class="text-sm font-semibold text-slate-700 dark:text-slate-300">18 ปี</p> </div> </div> <!-- Tag: Nationality --> <div class="flex items-center gap-2 px-4 py-2 rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-200/50 dark:border-slate-700/50"> <span class="text-lg">🇹🇭</span> <div> <p class="text-xs text-slate-400 dark:text-slate-500 leading-none">สัญชาติ</p> <p class="text-sm font-semibold text-slate-700 dark:text-slate-300">ไทย</p> </div> </div> <!-- Tag: Religion --> <div class="flex items-center gap-2 px-4 py-2 rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-200/50 dark:border-slate-700/50"> <span class="text-lg">☸️</span> <div> <p class="text-xs text-slate-400 dark:text-slate-500 leading-none">ศาสนา</p> <p class="text-sm font-semibold text-slate-700 dark:text-slate-300">พุทธ</p> </div> </div> </div> </div> <!-- Soft Visual Callout --> <div class="bg-brand/5 dark:bg-brand/10 p-8 rounded-3xl border border-brand/10 dark:border-brand/20 relative overflow-hidden"> <!-- Decorative Circle Backgrounds --> <div class="absolute -right-8 -bottom-8 w-32 h-32 rounded-full bg-brand/5"></div> <div class="absolute -left-6 -top-6 w-24 h-24 rounded-full bg-brand/5"></div> <h4 class="text-lg font-semibold text-brand dark:text-brand-light mb-4">แนวคิดในการพัฒนาเว็บ </h4> <p class="text-slate-600 dark:text-slate-400 font-light leading-relaxed mb-6"> "งานออกแบบที่ดีไม่ใช่แค่ความสวยงาม แต่เป็นเรื่องของความรู้สึกสบายตา ความสมบูรณ์แบบในการจัดระเบียบ และการที่ผู้ใช้งานสามารถเข้าถึงข้อมูลได้อย่างง่ายดายที่สุดในทุกช่วงเวลา" </p> <div class="flex items-center gap-4"> <span class="w-10 h-10 rounded-xl bg-brand/10 dark:bg-brand/20 flex items-center justify-center text-brand">💡</span> <div class="text-sm"> <p class="font-semibold text-slate-700 dark:text-slate-300">ความใส่ใจต่อรายละเอียด </p> <p class="text-slate-500 dark:text-slate-400">Mobile-First, Web Accessibility, Clean Code </p> </div> </div> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills" class="fade-in-section py-24 px-6"> <div class="max-w-6xl mx-auto"> <div class="text-center max-w-2xl mx-auto mb-16"> <h2 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-4">ทักษะความสามารถ</h2> <div class="w-12 h-1 bg-brand mx-auto rounded-full"></div> </div> <!-- Responsive Cards Layout: 1 col on Mobile, 2 on Tablet, 3 on Desktop --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Skill Card 1: Frontend Development --> <div class="bg-white dark:bg-[#1E2631] p-8 rounded-3xl border border-slate-200/50 dark:border-slate-700/50 hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-950/50 flex items-center justify-center text-indigo-500 mb-6"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> </div> <h3 class="text-xl font-bold text-slate-800 dark:text-slate-100 mb-4">Frontend Dev</h3> <ul class="space-y-3"> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>HTML5 / Semantic Tags</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>CSS3 & Modern Layouts (Grid/Flexbox)</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>Tailwind CSS</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>JavaScript (ES6+)</span> </li> </ul> </div> <!-- Skill Card 2: UI/UX & Design Tools --> <div class="bg-white dark:bg-[#1E2631] p-8 rounded-3xl border border-slate-200/50 dark:border-slate-700/50 hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="w-12 h-12 rounded-2xl bg-amber-50 dark:bg-amber-950/50 flex items-center justify-center text-amber-500 mb-6"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"> </path> </svg> </div> <h3 class="text-xl font-bold text-slate-800 dark:text-slate-100 mb-4">UI/UX Design</h3> <ul class="space-y-3"> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>Figma (Mockups & Prototyping)</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>Responsive Design Principles</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>Color Palette Curation</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>Typography Layout Guidelines</span> </li> </ul> </div> <!-- Skill Card 3: Other Technologies & Tools --> <div class="bg-white dark:bg-[#1E2631] p-8 rounded-3xl border border-slate-200/50 dark:border-slate-700/50 hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> <div class="w-12 h-12 rounded-2xl bg-emerald-50 dark:bg-emerald-950/50 flex items-center justify-center text-emerald-500 mb-6"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"> </path> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"> </path> </svg> </div> <h3 class="text-xl font-bold text-slate-800 dark:text-slate-100 mb-4">Tools & Workflows</h3> <ul class="space-y-3"> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>Git Version Control</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>GitHub Integration</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>VS Code Environment</span> </li> <li class="flex items-center gap-2"> <span class="w-1.5 h-1.5 rounded-full bg-brand"></span> <span>Chrome Developer Tools</span> </li> </ul> </div> </div> </div> </section> <!-- Hobbies Section --> <section id="hobbies" class="fade-in-section py-24 px-6 bg-white dark:bg-[#181F2A] transition-colors duration-300"> <div class="max-w-6xl mx-auto"> <div class="text-center max-w-2xl mx-auto mb-16"> <h2 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-4">สิ่งที่ชอบทำ (Hobbies & Interests)</h2> <div class="w-12 h-1 bg-brand mx-auto rounded-full"></div> </div> <!-- Responsive Hobbies Grid: 1 col on Mobile, 2 on Tablet, 3 on Desktop --> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Hobby 1 --> <div class="bg-[#F8F9FA] dark:bg-[#1E2631] p-8 rounded-3xl border border-slate-200/50 dark:border-slate-700/50 hover:shadow-lg transition-all duration-300 group hover:-translate-y-1"> <div class="w-14 h-14 rounded-2xl bg-brand/10 text-brand flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> <!-- Controller Icon --> <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464a5 5 0 010 7.072M18.364 5.636a9 9 0 010 12.728M12 18a6 6 0 100-12 6 6 0 000 12z"> </path> <path stroke-linecap="round" stroke-linejoin="round" d="M6 10h4M8 8v4M16 10h.01M18 12h.01"> </path> </svg> </div> <h3 class="text-xl font-bold text-slate-800 dark:text-slate-100 mb-3">เล่นเกม (Gaming)</h3> <p class="text-slate-600 dark:text-slate-400 text-sm font-light leading-relaxed"> ชอบเล่นเกมแนววางแผนการรบ (Strategy) และผจญภัย (Adventure) เพื่อความผ่อนคลายและฝึกฝนทักษะการทำงานเป็นทีมร่วมกับเพื่อนๆ รวมถึงการพัฒนาความสามารถในการแก้ปัญหาเฉพาะหน้าอย่างมีระบบ </p> </div> <!-- Hobby 2 --> <div class="bg-[#F8F9FA] dark:bg-[#1E2631] p-8 rounded-3xl border border-slate-200/50 dark:border-slate-700/50 hover:shadow-lg transition-all duration-300 group hover:-translate-y-1"> <div class="w-14 h-14 rounded-2xl bg-brand/10 text-brand flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> <!-- Book Open Icon --> <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"> </path> </svg> </div> <h3 class="text-xl font-bold text-slate-800 dark:text-slate-100 mb-3">อ่านการ์ตูน (Reading Comics) </h3> <p class="text-slate-600 dark:text-slate-400 text-sm font-light leading-relaxed"> การอ่านมังงะและหนังสือการ์ตูนช่วยสร้างจินตนาการ ค้นพบแนวคิดในการเล่าเรื่องราวเชิงสร้างสรรค์ และชื่นชมในศิลปะการวาดภาพลายเส้นที่มีความใส่ใจต่อรายละเอียด </p> </div> <!-- Hobby 3 --> <div class="bg-[#F8F9FA] dark:bg-[#1E2631] p-8 rounded-3xl border border-slate-200/50 dark:border-slate-700/50 hover:shadow-lg transition-all duration-300 group hover:-translate-y-1"> <div class="w-14 h-14 rounded-2xl bg-brand/10 text-brand flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> <!-- Code / Technology Search Icon --> <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"> </path> </svg> </div> <h3 class="text-xl font-bold text-slate-800 dark:text-slate-100 mb-3">เรียนรู้เทคโนโลยีใหม่ๆ </h3> <p class="text-slate-600 dark:text-slate-400 text-sm font-light leading-relaxed"> ชอบศึกษาวิธีการเขียนโค้ดและเทรนด์เทคโนโลยีการออกแบบเว็บไซต์ใหม่ๆ บนสื่อออนไลน์อยู่เสมอ เพื่อเพิ่มพูนความรู้สำหรับการนำไปใช้ออกแบบและสร้างเว็บไซต์ที่ตอบโจทย์ความต้องการของผู้ใช้อย่างครบถ้วน </p> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="fade-in-section py-24 px-6"> <div class="max-w-6xl mx-auto"> <div class="text-center max-w-2xl mx-auto mb-16"> <h2 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-4">ติดต่อ / ส่งข้อความ</h2> <div class="w-12 h-1 bg-brand mx-auto rounded-full"></div> </div> <div class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start"> <!-- Contact Info Column --> <div class="md:col-span-5 space-y-6"> <div class="bg-white dark:bg-[#1E2631] p-8 rounded-3xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm space-y-6"> <h3 class="text-xl font-bold text-slate-800 dark:text-slate-100">ข้อมูลติดต่อ</h3> <p class="text-slate-600 dark:text-slate-400 text-sm font-light leading-relaxed"> คุณสามารถติดต่อผมโดยตรงได้ทางช่องทางด้านล่างนี้ครับ </p> <!-- Contact Cards Container (Responsive Light/Dark Mode) --> <div class="bg-slate-100/70 dark:bg-black/40 p-6 rounded-3xl border border-slate-200/80 dark:border-slate-800/80 mt-6 transition-colors duration-300 space-y-5"> <!-- Contact Info Section --> <div class="flex flex-col gap-3"> <!-- Email Item --> <a href="mailto:tonkhao.natthakit@gmail.com" class="flex items-center gap-3.5 p-3.5 rounded-2xl bg-white dark:bg-[#16161a] border border-slate-200/60 dark:border-[#242429] hover:border-brand/40 dark:hover:border-brand/40 hover:bg-slate-50/80 dark:hover:bg-[#1f1f24] transition-all duration-300 hover:scale-[1.01] hover:shadow-sm group"> <!-- Icon Box --> <div class="w-10 h-10 rounded-xl bg-slate-200/60 dark:bg-[#1E2631] flex items-center justify-center text-slate-600 dark:text-slate-300 transition-colors duration-300 shadow-sm"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> </div> <div class="flex-1 min-w-0"> <p class="text-[11px] text-slate-500 dark:text-slate-400 font-medium transition-colors duration-300">อีเมล</p> <p class="text-sm font-semibold text-slate-900 dark:text-white truncate transition-colors duration-300">tonkhao.natthakit@gmail.com</p> </div> </a> <!-- Phone Item --> <a href="tel:093-219-0111" class="flex items-center gap-3.5 p-3 rounded-2xl bg-white dark:bg-[#16161a] border border-slate-200/60 dark:border-[#242429] hover:border-brand/40 dark:hover:border-brand/40 hover:bg-slate-50/80 dark:hover:bg-[#1f1f24] transition-all duration-300 hover:scale-[1.01] hover:shadow-sm group"> <!-- Icon Box --> <div class="w-10 h-10 rounded-xl bg-slate-200/60 dark:bg-[#1E2631] flex items-center justify-center text-slate-600 dark:text-slate-300 transition-colors duration-300 shadow-sm"> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.725l.548 2.2a1 1 0 01-.321.988l-1.305.98a10.582 10.582 0 004.872 4.872l.98-1.305a1 1 0 01.988-.321l2.2.548a1 1 0 01.725.94V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> </div> <div class="flex-1 min-w-0"> <p class="text-[11px] text-slate-500 dark:text-slate-400 font-medium transition-colors duration-300">เบอร์โทรศัพท์</p> <p class="text-sm font-semibold text-slate-900 dark:text-white truncate transition-colors duration-300">093-219-0111</p> </div> </a> </div> <!-- Divider Line --> <div class="border-t border-slate-200/80 dark:border-slate-800/80 my-2"></div> <!-- Social Media Box --> <div> <p class="text-[11px] font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4 transition-colors duration-300">ช่องทางโซเชียลมีเดีย</p> <div class="flex flex-row gap-4 justify-center sm:justify-start"> <!-- Card 1 (Facebook) --> <a href="https://www.facebook.com/tonkhao.natthakit" target="_blank" rel="noopener noreferrer" class="flex-1 aspect-square max-w-[160px] bg-white dark:bg-[#16161a] border border-slate-200 dark:border-[#242429] hover:border-blue-500/50 dark:hover:border-blue-500/50 hover:bg-slate-50 dark:hover:bg-[#1f1f24] rounded-2xl p-4 flex flex-col items-center justify-between text-center transition-all duration-300 hover:-translate-y-1.5 hover:shadow-md dark:hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)] group"> <!-- Top: Icon --> <div class="w-12 h-12 rounded-full bg-blue-600/10 flex items-center justify-center text-blue-600 dark:text-blue-500 group-hover:scale-110 transition-transform duration-300"> <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"> <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z" /> </svg> </div> <!-- Center: Title --> <span class="font-bold text-slate-800 dark:text-white text-base transition-colors duration-300">Facebook</span> <!-- Bottom: Detail --> <span class="text-xs text-slate-500 dark:text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300 transition-colors duration-300">natthakit Khrutchan</span> </a> <!-- Card 2 (Line) --> <a href="https://line.me/ti/p/PR1NqLUlhL" target="_blank" rel="noopener noreferrer" class="flex-1 aspect-square max-w-[160px] bg-white dark:bg-[#16161a] border border-slate-200 dark:border-[#242429] hover:border-green-500/50 dark:hover:border-green-500/50 hover:bg-slate-50 dark:hover:bg-[#1f1f24] rounded-2xl p-4 flex flex-col items-center justify-between text-center transition-all duration-300 hover:-translate-y-1.5 hover:shadow-md dark:hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)] group"> <!-- Top: Icon --> <div class="w-12 h-12 rounded-full bg-green-600/10 flex items-center justify-center text-green-600 dark:text-green-500 group-hover:scale-110 transition-transform duration-300"> <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"> <path d="M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.814 4.269 8.846 10.036 9.586.39.084.922.258 1.057.592.12.3.077.769.038 1.077l-.19 1.14c-.058.34-.27 1.329 1.161.725 1.431-.604 7.732-4.554 10.545-7.799 2.134-2.5 1.303-5.358 1.303-5.358zm-15.82 2.658h-2.125a.398.398 0 01-.396-.398v-3.924a.398.398 0 01.396-.397h.397a.398.398 0 01.398.397v3.129h1.33a.398.398 0 01.398.397v.399a.398.398 0 01-.398.397zm2.463-.398a.398.398 0 01-.397.398h-.397a.399.399 0 01-.398-.398v-3.924a.399.399 0 01.398-.397h.397a.398.398 0 01.397.397v3.924zm4.27 0a.398.398 0 01-.303.388c-.03.007-.063.01-.095.01h-.359a.398.398 0 01-.318-.158l-1.583-2.179v1.939a.398.398 0 01-.398.398h-.396a.398.398 0 01-.398-.398v-3.924a.398.398 0 01.398-.397h.396c.119 0 .232.053.308.146l1.545 2.129v-1.878a.398.398 0 01.398-.397h.397a.398.398 0 01.398.397v3.924zm3.962-1.92h-1.33v-.812h1.33a.398.398 0 01.398.397v.018a.398.398 0 01-.398.397zm0-1.611h-1.33v-.706h1.33a.398.398 0 01.398.398v.015a.398.398 0 01-.398.398zm0 3.531h-1.33v-.813h1.33a.398.398 0 01.398.398v.017a.398.398 0 01-.398.398z"/> </svg> </div> <!-- Center: Title --> <span class="font-bold text-slate-800 dark:text-white text-base transition-colors duration-300">Line</span> <!-- Bottom: Detail --> <span class="text-xs text-slate-500 dark:text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300 transition-colors duration-300">@tonkhao.natthakit</span> </a> </div> </div> </div> </div> </div> <!-- Form Column --> <div class="md:col-span-7"> <div class="bg-white dark:bg-[#1E2631] p-8 sm:p-10 rounded-3xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm"> <form id="contactForm" class="space-y-6"> <!-- Name Field --> <div> <label for="contactName" class="block text-sm font-semibold text-slate-600 dark:text-slate-300 mb-2">ชื่อของคุณ</label> <input type="text" id="contactName" name="name" required placeholder="สมชาย ใจดี" class="w-full px-4 py-3 rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-[#121820] text-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-brand/30 focus:border-brand transition-all"> </div> <!-- Email Field --> <div> <label for="contactEmail" class="block text-sm font-semibold text-slate-600 dark:text-slate-300 mb-2">อีเมลติดต่อ</label> <input type="email" id="contactEmail" name="email" required placeholder="example@email.com" class="w-full px-4 py-3 rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-[#121820] text-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-brand/30 focus:border-brand transition-all"> </div> <!-- Message Field --> <div> <label for="contactMessage" class="block text-sm font-semibold text-slate-600 dark:text-slate-300 mb-2">ข้อความ</label> <textarea id="contactMessage" name="message" rows="4" required placeholder="พิมพ์ข้อความของคุณที่นี่..." class="w-full px-4 py-3 rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-[#121820] text-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-brand/30 focus:border-brand transition-all"></textarea> </div> <!-- Submit Button --> <button type="submit" class="w-full py-4 px-6 rounded-2xl bg-brand hover:bg-brand-dark text-white font-semibold transition duration-300 shadow-md hover:shadow-lg hover:-translate-y-0.5 flex items-center justify-center gap-2"> <span>ส่งข้อความ</span> <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path> </svg> </button> </form> <!-- Alert Success Box (Initially Hidden) --> <div id="successMessage" class="hidden mt-6 p-4 bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-800 text-emerald-800 dark:text-emerald-300 rounded-2xl text-center text-sm flex items-center justify-center gap-2"> <span>✅</span> <span>ส่งข้อมูลเรียบร้อยแล้ว! ผมจะตอบกลับโดยเร็วที่สุด</span> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="border-t border-slate-200/50 dark:border-slate-800/50 py-12 px-6 bg-slate-50 dark:bg-[#121820]/50 transition-colors duration-300"> <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6"> <p class="text-sm text-slate-500 dark:text-slate-400 text-center md:text-left"> © 2026 ณัฏฐกิตติ์ ครุฑจันทร์. All rights reserved. </p> <!-- Social Media Icons with SVGs --> <div class="flex items-center gap-6"> <!-- GitHub Link --> <a href="https://github.com" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile" class="w-10 h-10 rounded-full bg-white dark:bg-[#1E2631] border border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 hover:text-brand dark:hover:text-brand-light hover:border-brand transition-colors duration-300"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.577.688.479C19.138 20.162 22 16.418 22 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" /> </svg> </a> <!-- Facebook Link --> <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" aria-label="Facebook Profile" class="w-10 h-10 rounded-full bg-white dark:bg-[#1E2631] border border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 hover:text-brand dark:hover:text-brand-light hover:border-brand transition-colors duration-300"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z" /> </svg> </a> <!-- LinkedIn Link --> <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile" class="w-10 h-10 rounded-full bg-white dark:bg-[#1E2631] border border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 hover:text-brand dark:hover:text-brand-light hover:border-brand transition-colors duration-300"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.779-1.75-1.75s.784-1.75 1.75-1.75 1.75.779 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" /> </svg> </a> </div> </footer> </main> <!-- Interactive Scripts --> <script> // --- Theme Synchronization (Dark/Light Mode) --- const themeToggle = document.getElementById('themeToggle'); const sidebarThemeToggle = document.getElementById('sidebarThemeToggle'); const sunIcon = document.getElementById('sunIcon'); const moonIcon = document.getElementById('moonIcon'); const sidebarThemeIconContainer = document.getElementById('sidebarThemeIconContainer'); const sidebarThemeText = document.getElementById('sidebarThemeText'); function setTheme(isDark) { if (isDark) { document.documentElement.classList.add('dark'); localStorage.setItem('theme', 'dark'); // Header (mobile) Toggle update sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); // Sidebar Toggle update if (sidebarThemeIconContainer) { sidebarThemeIconContainer.innerHTML = ` <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> `; } if (sidebarThemeText) sidebarThemeText.textContent = 'โหมดกลางวัน'; } else { document.documentElement.classList.remove('dark'); localStorage.setItem('theme', 'light'); // Header (mobile) Toggle update sunIcon.classList.add('hidden'); moonIcon.classList.remove('hidden'); // Sidebar Toggle update if (sidebarThemeIconContainer) { sidebarThemeIconContainer.innerHTML = ` <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> `; } if (sidebarThemeText) sidebarThemeText.textContent = 'โหมดกลางคืน'; } } // Initialize theme const isDarkMode = localStorage.getItem('theme') === 'dark' \|\| (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches); setTheme(isDarkMode); // Toggle listeners if (themeToggle) { themeToggle.addEventListener('click', () => { const isDarkNow = document.documentElement.classList.contains('dark'); setTheme(!isDarkNow); }); } if (sidebarThemeToggle) { sidebarThemeToggle.addEventListener('click', () => { const isDarkNow = document.documentElement.classList.contains('dark'); setTheme(!isDarkNow); }); } // --- Mobile Drawer Menu --- const mobileMenuBtn = document.getElementById('mobileMenuBtn'); const mobileMenuCloseBtn = document.getElementById('mobileMenuCloseBtn'); const mobileMenu = document.getElementById('mobileMenu'); const mobileMenuBackdrop = document.getElementById('mobileMenuBackdrop'); const hamburgerIcon = document.getElementById('hamburgerIcon'); const closeIcon = document.getElementById('closeIcon'); function openMobileMenu() { mobileMenu.classList.remove('-translate-x-full'); mobileMenuBackdrop.classList.remove('hidden'); setTimeout(() => { mobileMenuBackdrop.classList.add('opacity-100'); }, 10); hamburgerIcon.classList.add('hidden'); closeIcon.classList.remove('hidden'); } function closeMobileMenu() { mobileMenu.classList.add('-translate-x-full'); mobileMenuBackdrop.classList.remove('opacity-100'); mobileMenuBackdrop.classList.add('opacity-0'); setTimeout(() => { mobileMenuBackdrop.classList.add('hidden'); }, 300); hamburgerIcon.classList.remove('hidden'); closeIcon.classList.add('hidden'); } if (mobileMenuBtn) { mobileMenuBtn.addEventListener('click', () => { const isOpened = !mobileMenu.classList.contains('-translate-x-full'); if (isOpened) { closeMobileMenu(); } else { openMobileMenu(); } }); } if (mobileMenuCloseBtn) { mobileMenuCloseBtn.addEventListener('click', closeMobileMenu); } if (mobileMenuBackdrop) { mobileMenuBackdrop.addEventListener('click', closeMobileMenu); } // Close menu when mobile links are clicked document.querySelectorAll('.mobile-nav-link').forEach(link => { link.addEventListener('click', closeMobileMenu); }); // --- Active Navigation Link Highlighting on Scroll --- const sectionsToWatch = document.querySelectorAll('section[id]'); const sidebarLinks = document.querySelectorAll('.sidebar-link'); const mobileNavLinks = document.querySelectorAll('.mobile-nav-link'); const bottomNavLinks = document.querySelectorAll('.bottom-nav-link'); const highlightOptions = { root: null, threshold: 0.2, rootMargin: '-20% 0px -60% 0px' // Narrow active zone around upper middle screen }; const navObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const activeId = entry.target.getAttribute('id'); // Highlight Desktop Sidebar Links sidebarLinks.forEach(link => { const href = link.getAttribute('href'); if (href === `#${activeId}`) { link.classList.add('bg-white', 'dark:bg-[#1E2631]', 'text-brand', 'dark:text-brand-light', 'shadow-sm'); link.classList.remove('text-slate-600', 'dark:text-slate-400'); } else { link.classList.remove('bg-white', 'dark:bg-[#1E2631]', 'text-brand', 'dark:text-brand-light', 'shadow-sm'); link.classList.add('text-slate-600', 'dark:text-slate-400'); } }); // Highlight Mobile Drawer Links mobileNavLinks.forEach(link => { const href = link.getAttribute('href'); if (href === `#${activeId}`) { link.classList.add('bg-white', 'dark:bg-[#1E2631]', 'text-brand', 'dark:text-brand-light', 'shadow-sm'); link.classList.remove('text-slate-600', 'dark:text-slate-400'); } else { link.classList.remove('bg-white', 'dark:bg-[#1E2631]', 'text-brand', 'dark:text-brand-light', 'shadow-sm'); link.classList.add('text-slate-600', 'dark:text-slate-400'); } }); // Highlight Sticky Bottom Menu links bottomNavLinks.forEach(link => { const href = link.getAttribute('href'); if (href === `#${activeId}`) { link.classList.add('text-brand', 'dark:text-brand-light', 'scale-105', 'font-semibold'); link.classList.remove('text-slate-500', 'dark:text-slate-400'); } else { link.classList.remove('text-brand', 'dark:text-brand-light', 'scale-105', 'font-semibold'); link.classList.add('text-slate-500', 'dark:text-slate-400'); } }); } }); }, highlightOptions); sectionsToWatch.forEach(section => { navObserver.observe(section); }); // --- Intersection Observer for Scroll Animations --- const sections = document.querySelectorAll('.fade-in-section'); const observerOptions = { root: null, threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, observerOptions); sections.forEach(section => { observer.observe(section); }); // --- Contact Form Submission Handling --- const contactForm = document.getElementById('contactForm'); const successMessage = document.getElementById('successMessage'); contactForm.addEventListener('submit', (e) => { e.preventDefault(); const submitBtn = contactForm.querySelector('button[type="submit"]'); const originalBtnText = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = ` <svg class="animate-spin h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path> </svg> <span>กำลังส่งข้อมูล...</span> `; setTimeout(() => { submitBtn.disabled = false; submitBtn.innerHTML = originalBtnText; successMessage.classList.remove('hidden'); contactForm.reset(); setTimeout(() => { successMessage.classList.add('hidden'); }, 5000); }, 1200); }); </script> </body> </html>

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