File manager - Edit - /home/webapp69.cm.in.th/u69319090042/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>Pin.Portfolio | กรพินธ์ เปี่ยมวัจนะพร</title> <!-- Google Fonts: Outfit (English headings) & Sarabun (Thai reading) --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Lucide Icons CDN --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Tailwind Configuration --> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', // Violet 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', }, darkBg: '#090d16', darkCard: '#121824', darkBorder: '#1e293b' }, fontFamily: { sans: ['Outfit', 'Sarabun', 'sans-serif'], }, animation: { 'blob': 'blob 7s infinite', 'float': 'float 6s ease-in-out infinite', 'fade-in': 'fadeIn 0.8s ease-out forwards', 'pulse-subtle': 'pulseSubtle 2s infinite', }, keyframes: { blob: { '0%': { transform: 'translate(0px, 0px) scale(1)' }, '33%': { transform: 'translate(30px, -50px) scale(1.1)' }, '66%': { transform: 'translate(-20px, 20px) scale(0.95)' }, '100%': { transform: 'translate(0px, 0px) scale(1)' }, }, float: { '0%, 100%': { transform: 'translateY(0px)' }, '50%': { transform: 'translateY(-12px)' }, }, fadeIn: { '0%': { opacity: '0', transform: 'translateY(15px)' }, '100%': { opacity: '1', transform: 'translateY(0)' }, }, pulseSubtle: { '0%, 100%': { opacity: '1', transform: 'scale(1)' }, '50%': { opacity: '.85', transform: 'scale(1.02)' }, } } } } } </script> <!-- Custom CSS for Extra Polish --> <style> /* Styling scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } .dark ::-webkit-scrollbar-track { background: #090d16; } ::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb { background: #1e293b; } ::-webkit-scrollbar-thumb:hover { background: #8b5cf6; } /* Selection Color */ ::selection { background-color: #ddd6fe; color: #1e1b4b; } .dark ::selection { background-color: #8b5cf6; color: #ffffff; } /* Typing cursor effect */ .typing-cursor::after { content: '|'; animation: blink 0.8s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Glow backdrop card effect */ .glow-hover { position: relative; transition: all 0.3s ease; } .glow-hover::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #8b5cf6, #ec4899); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .glow-hover:hover::before { opacity: 1; } /* Soft transition for theme toggling */ * { transition-property: background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } </style> </head> <body class="bg-slate-50 text-slate-800 dark:bg-darkBg dark:text-slate-100 font-sans min-h-screen relative overflow-x-hidden selection:bg-primary-100 dark:selection:bg-primary-800/40"> <!-- Floating Blob Background Graphics --> <div class="absolute top-[-10%] left-[-10%] w-[40rem] h-[40rem] rounded-full bg-violet-200/40 dark:bg-violet-900/10 blur-[100px] pointer-events-none -z-10 animate-blob"></div> <div class="absolute top-[40%] right-[-10%] w-[35rem] h-[35rem] rounded-full bg-fuchsia-200/40 dark:bg-fuchsia-900/10 blur-[120px] pointer-events-none -z-10 animate-blob [animation-delay:2s]"></div> <div class="absolute bottom-[-5%] left-[20%] w-[38rem] h-[38rem] rounded-full bg-cyan-200/30 dark:bg-cyan-900/5 blur-[90px] pointer-events-none -z-10 animate-blob [animation-delay:4s]"></div> <!-- TOAST NOTIFICATION CONTAINER --> <div id="toast-container" class="fixed bottom-6 right-6 z-50 flex flex-col gap-3"></div> <!-- MAIN NAVIGATION HEADER --> <header class="fixed top-0 left-0 right-0 z-40 transition-all duration-300 backdrop-blur-md bg-white/70 dark:bg-darkBg/70 border-b border-slate-200/40 dark:border-slate-800/40 py-4"> <div class="max-w-6xl mx-auto px-4 md:px-8 flex justify-between items-center"> <!-- Brand Logo --> <a href="#home" class="flex items-center space-x-2 group"> <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-primary-600 to-fuchsia-500 flex items-center justify-center text-white font-extrabold text-lg shadow-md shadow-primary-500/20 transform group-hover:scale-105 transition-transform"> K </div> <span class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">Pin<span class="text-primary-500">.</span>Dev</span> </a> <!-- Desktop Nav Menu Links --> <nav class="hidden md:flex items-center space-x-1"> <a href="#home" class="nav-link px-4 py-2 rounded-full text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-all">หน้าแรก</a> <a href="#about" class="nav-link px-4 py-2 rounded-full text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-all">เกี่ยวกับฉัน</a> <a href="#projects" class="nav-link px-4 py-2 rounded-full text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-all">ผลงานเด่น</a> <a href="#timeline" class="nav-link px-4 py-2 rounded-full text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-all">ประวัติ</a> <a href="#contact" class="nav-link px-4 py-2 rounded-full text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-all">ติดต่อ</a> </nav> <!-- Utility Actions (Theme switch + Contact CTA) --> <div class="hidden md:flex items-center space-x-4"> <!-- Theme Toggle Button --> <button id="theme-toggle" class="p-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-colors shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500" aria-label="Toggle theme"> <i data-lucide="moon" class="w-5 h-5 hidden dark:block text-amber-400"></i> <i data-lucide="sun" class="w-5 h-5 block dark:hidden text-violet-600"></i> </button> <!-- Hire CTA --> <a href="#contact" class="inline-flex items-center justify-center px-5 py-2.5 rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-primary-600 to-fuchsia-600 hover:from-primary-700 hover:to-fuchsia-700 transition-all transform hover:-translate-y-0.5 shadow-md shadow-primary-500/20 active:translate-y-0"> ร่วมงานกัน </a> </div> <!-- Mobile Screen Navigation & Actions --> <div class="flex items-center md:hidden space-x-2"> <button id="theme-toggle-mobile" class="p-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 transition-colors"> <i data-lucide="moon" class="w-5 h-5 hidden dark:block text-amber-400"></i> <i data-lucide="sun" class="w-5 h-5 block dark:hidden text-violet-600"></i> </button> <button id="mobile-menu-btn" class="p-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"> <i data-lucide="menu" class="w-6 h-6"></i> </button> </div> </div> <!-- Mobile Drawer Overlay Menu --> <div id="mobile-menu" class="hidden md:hidden absolute top-[73px] left-0 right-0 border-b border-slate-200 dark:border-slate-800 bg-white/95 dark:bg-darkBg/95 backdrop-blur-lg shadow-xl transition-all duration-300"> <nav class="flex flex-col px-6 py-6 space-y-4"> <a href="#home" class="mobile-nav-link text-lg font-medium text-slate-700 dark:text-slate-300 py-1 hover:text-primary-600 dark:hover:text-primary-400">หน้าแรก</a> <a href="#about" class="mobile-nav-link text-lg font-medium text-slate-700 dark:text-slate-300 py-1 hover:text-primary-600 dark:hover:text-primary-400">เกี่ยวกับฉัน</a> <a href="#projects" class="mobile-nav-link text-lg font-medium text-slate-700 dark:text-slate-300 py-1 hover:text-primary-600 dark:hover:text-primary-400">ผลงานเด่น</a> <a href="#timeline" class="mobile-nav-link text-lg font-medium text-slate-700 dark:text-slate-300 py-1 hover:text-primary-600 dark:hover:text-primary-400">ประวัติ</a> <a href="#contact" class="mobile-nav-link text-lg font-medium text-slate-700 dark:text-slate-300 py-1 hover:text-primary-600 dark:hover:text-primary-400">ติดต่อ</a> <div class="pt-4 border-t border-slate-100 dark:border-slate-800"> <a href="#contact" class="flex w-full items-center justify-center py-3 px-4 rounded-xl text-center font-bold text-white bg-primary-600 hover:bg-primary-700 transition-colors"> ร่วมงานกับฉัน </a> </div> </nav> </div> </header> <!-- 1. HERO SECTION --> <section id="home" class="min-h-screen flex items-center justify-center pt-24 pb-16 px-4 md:px-8"> <div class="max-w-6xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- Text Area (Left) --> <div class="lg:col-span-7 flex flex-col justify-center text-center lg:text-left space-y-6"> <!-- Welcome Badge --> <div class="inline-flex items-center space-x-2 px-3 py-1.5 bg-primary-100/60 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full text-xs font-semibold self-center lg:self-start w-fit tracking-wide shadow-sm"> <span class="w-2 h-2 rounded-full bg-primary-500 animate-ping"></span> <span>พร้อมร่วมสร้างสรรค์โปรเจกต์ใหม่</span> </div> <!-- Headline --> <div class="space-y-3"> <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.15]"> สวัสดีค่ะ, ฉันชื่อ <br> <span class="bg-gradient-to-r from-primary-600 via-violet-500 to-fuchsia-500 bg-clip-text text-transparent">กรพินธ์ เปี่ยมวัจนะพร</span> </h1> <!-- Typing Sub-headline --> <div class="text-xl sm:text-2xl font-medium text-slate-600 dark:text-slate-300 h-10"> ฉันเป็น <span id="typing-text" class="text-primary-600 dark:text-primary-400 font-semibold typing-cursor"></span> </div> </div> <!-- Description --> <p class="text-slate-600 dark:text-slate-400 max-w-xl text-base sm:text-lg leading-relaxed mx-auto lg:mx-0"> นักพัฒนาเว็บและผู้ออกแบบประสบการณ์ผู้ใช้ (UI/UX) วัย 18 ปี จากเชียงใหม่ มุ่งมั่นสร้างสรรค์อินเทอร์เฟซที่เรียบง่าย สวยงาม ทันสมัย และเป็นมิตรกับผู้ใช้งานอย่างแท้จริง </p> <!-- CTA Buttons --> <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4"> <a href="#projects" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3.5 rounded-xl font-bold text-white bg-primary-600 hover:bg-primary-700 transition-all hover:shadow-lg hover:shadow-primary-500/25 transform hover:-translate-y-0.5 active:translate-y-0 text-base"> <span>สำรวจผลงาน</span> <i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i> </a> <a href="#contact" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3.5 rounded-xl font-bold text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-700 transition-all text-base"> <span>คุยงานติดต่อฉัน</span> </a> </div> <!-- Social Icons Shortlist --> <div class="flex items-center justify-center lg:justify-start space-x-6 pt-6 text-slate-400 dark:text-slate-500"> <a href="#" class="hover:text-primary-500 transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a> <a href="#" class="hover:text-primary-500 transition-colors"><i data-lucide="instagram" class="w-5 h-5"></i></a> <a href="#" class="hover:text-primary-500 transition-colors"><i data-lucide="facebook" class="w-5 h-5"></i></a> </div> </div> <!-- Graphic Area (Right) --> <div class="lg:col-span-5 flex justify-center items-center relative py-6"> <!-- Glowing Ring Container --> <div class="w-72 h-72 sm:w-85 sm:h-85 md:w-96 md:h-96 rounded-full bg-gradient-to-tr from-primary-500 to-fuchsia-500 p-[3px] shadow-2xl animate-float relative"> <!-- Outer dynamic ring dots --> <div class="absolute -top-3 -left-3 w-6 h-6 rounded-full bg-indigo-500/40 blur-sm"></div> <div class="absolute -bottom-2 -right-2 w-8 h-8 rounded-full bg-fuchsia-500/30 blur-sm"></div> <!-- Inner Dark Box --> <div class="w-full h-full rounded-full bg-white dark:bg-darkBg overflow-hidden flex flex-col items-center justify-center p-6 text-center"> <!-- Profile Photo --> <div class="relative w-40 h-40 rounded-full mb-4 flex-shrink-0"> <img src="Screenshot 2026-07-01 010748.png" alt="กรพินธ์ เปี่ยมวัจนะพร (พิน)" class="w-full h-full rounded-full object-cover object-top shadow-lg ring-4 ring-primary-500/30" > <!-- Floating Sparkle --> <span class="absolute -top-1 -right-1 text-2xl animate-pulse">✨</span> </div> <!-- Profile Summary inside illustration --> <div class="space-y-1"> <h3 class="font-extrabold text-xl text-slate-900 dark:text-white">กรพินธ์ (พิน)</h3> <p class="text-xs font-semibold tracking-wider text-slate-400 uppercase">Chiang Mai, TH</p> </div> <div class="mt-4 px-4 py-1.5 rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200/50 dark:border-slate-700/50 text-xs font-medium text-slate-600 dark:text-slate-300"> ⚡ UI/UX & Frontend Developer </div> </div> </div> </div> </div> </section> <!-- 2. ABOUT ME & SKILLS SECTION --> <section id="about" class="py-24 px-4 md:px-8 bg-slate-100/40 dark:bg-slate-900/20 border-t border-b border-slate-100 dark:border-slate-800/40 relative"> <div class="max-w-6xl mx-auto"> <!-- Section Header --> <div class="text-center md:text-left space-y-3 mb-16"> <h2 class="text-xs font-bold uppercase tracking-widest text-primary-600 dark:text-primary-400">ประวัติและทักษะ</h2> <p class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">เกี่ยวกับตัวฉัน & ทักษะความสามารถ</p> <div class="w-12 h-1 bg-gradient-to-r from-primary-500 to-fuchsia-500 rounded-full mx-auto md:mx-0 mt-2"></div> </div> <!-- Main Info & Skill Grid Layout --> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"> <!-- Left: Personal Detail Cards --> <div class="lg:col-span-5 space-y-6"> <div class="bg-white dark:bg-darkCard rounded-3xl p-6 md:p-8 border border-slate-200/60 dark:border-slate-800 shadow-xl shadow-slate-100/50 dark:shadow-none space-y-6"> <h3 class="text-xl font-bold text-slate-950 dark:text-white flex items-center"> <i data-lucide="user" class="w-5 h-5 mr-2.5 text-primary-500"></i> ข้อมูลส่วนตัว </h3> <div class="space-y-4"> <!-- Info Row: Age --> <div class="flex items-center justify-between py-2 border-b border-slate-100 dark:border-slate-800"> <span class="text-slate-400 dark:text-slate-500 text-sm">อายุ</span> <span class="font-semibold text-slate-800 dark:text-slate-200">18 ปี</span> </div> <!-- Info Row: Location --> <div class="flex items-start justify-between py-2 border-b border-slate-100 dark:border-slate-800"> <span class="text-slate-400 dark:text-slate-500 text-sm mt-0.5">ที่อยู่</span> <span class="font-semibold text-slate-800 dark:text-slate-200 text-right max-w-[200px]"> 558/25 ถ.เจริญเมือง ต.ท่าศาลา อ.เมือง จ.เชียงใหม่ </span> </div> <!-- Interactive Info Row: Email --> <div class="flex items-center justify-between py-2 border-b border-slate-100 dark:border-slate-800"> <span class="text-slate-400 dark:text-slate-500 text-sm">อีเมล</span> <button onclick="copyToClipboard('pin59142@gmail.com', 'คัดลอกอีเมลแล้ว!')" class="group flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold focus:outline-none" title="คลิกเพื่อคัดลอก"> <span>pin59142@gmail.com</span> <i data-lucide="copy" class="w-4 h-4 ml-1.5 opacity-60 group-hover:opacity-100 transition-opacity"></i> </button> </div> <!-- Interactive Info Row: Phone --> <div class="flex items-center justify-between py-2"> <span class="text-slate-400 dark:text-slate-500 text-sm">เบอร์โทรศัพท์</span> <button onclick="copyToClipboard('0834491081', 'คัดลอกเบอร์โทรแล้ว!')" class="group flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold focus:outline-none" title="คลิกเพื่อคัดลอก"> <span>083-449-1081</span> <i data-lucide="copy" class="w-4 h-4 ml-1.5 opacity-60 group-hover:opacity-100 transition-opacity"></i> </button> </div> </div> <!-- Custom Location Callout Card --> <div class="mt-6 p-4 bg-violet-50/50 dark:bg-slate-800/40 rounded-2xl border border-violet-100/50 dark:border-slate-800 flex items-center space-x-3"> <div class="p-2.5 rounded-xl bg-violet-100 dark:bg-violet-950/50 text-violet-600 dark:text-violet-400"> <i data-lucide="map-pin" class="w-5 h-5"></i> </div> <div> <p class="text-xs font-semibold text-violet-500 uppercase tracking-wider">ภูมิลำเนา</p> <p class="text-sm font-bold text-slate-800 dark:text-slate-200">จังหวัดเชียงใหม่, ประเทศไทย</p> </div> </div> </div> </div> <!-- Right: Bio Statement & Skill Category Cards --> <div class="lg:col-span-7 space-y-8"> <!-- Quick Biography Bio --> <div class="space-y-4"> <h3 class="text-2xl font-bold text-slate-900 dark:text-white">สร้างสรรค์ความลงตัวระหว่างโค้ดและการออกแบบ</h3> <p class="text-slate-600 dark:text-slate-400 leading-relaxed"> ฉันมีความสนใจในการพัฒนาเว็บไซต์และการออกแบบ UI/UX ตั้งแต่อายุยังน้อย ฉันเชื่อมั่นว่าเว็บไซต์ที่ดีไม่ใช่เพียงแค่ทำงานได้ถูกต้อง แต่ต้องมีรูปลักษณ์ภายนอกที่สวยงาม โดดเด่น และช่วยให้ผู้ใช้งานสามารถทำเป้าหมายของตนสำเร็จได้อย่างราบรื่นที่สุด </p> <p class="text-slate-600 dark:text-slate-400 leading-relaxed"> ฉันมุ่งมั่นฝึกฝนตนเองอย่างสม่ำเสมอในการศึกษาเทคโนโลยีฝั่ง Frontend (อาทิ HTML, CSS, JavaScript และเฟรมเวิร์กยอดนิยม) พร้อมศึกษาเทคนิคการออกแบบจิตวิทยาผู้ใช้ผ่าน Figma เพื่อส่งมอบโปรเจกต์ที่เป็นสากลและตรงตามความต้องการผู้ใช้มากที่สุด </p> </div> <!-- Skills Cards Categories --> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4"> <!-- Category 1: Frontend Development --> <div class="bg-white dark:bg-darkCard rounded-2xl p-6 border border-slate-200/60 dark:border-slate-800 shadow-lg shadow-slate-100/40 dark:shadow-none hover:shadow-xl transition-all glow-hover"> <div class="flex items-center space-x-3 mb-4"> <div class="p-2.5 rounded-lg bg-emerald-100 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400"> <i data-lucide="code-2" class="w-5 h-5"></i> </div> <h4 class="font-extrabold text-slate-900 dark:text-white">Frontend Web</h4> </div> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-emerald-500 hover:text-white dark:hover:bg-emerald-600 transition-colors">HTML5</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-emerald-500 hover:text-white dark:hover:bg-emerald-600 transition-colors">CSS3</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-emerald-500 hover:text-white dark:hover:bg-emerald-600 transition-colors">JavaScript (ES6+)</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-emerald-500 hover:text-white dark:hover:bg-emerald-600 transition-colors">Tailwind CSS</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-emerald-500 hover:text-white dark:hover:bg-emerald-600 transition-colors">React (Vite)</span> </div> </div> <!-- Category 2: UI/UX Design --> <div class="bg-white dark:bg-darkCard rounded-2xl p-6 border border-slate-200/60 dark:border-slate-800 shadow-lg shadow-slate-100/40 dark:shadow-none hover:shadow-xl transition-all glow-hover"> <div class="flex items-center space-x-3 mb-4"> <div class="p-2.5 rounded-lg bg-pink-100 dark:bg-pink-950/40 text-pink-600 dark:text-pink-400"> <i data-lucide="palette" class="w-5 h-5"></i> </div> <h4 class="font-extrabold text-slate-900 dark:text-white">Design & UX</h4> </div> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-pink-500 hover:text-white dark:hover:bg-pink-600 transition-colors">Figma UI/UX</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-pink-500 hover:text-white dark:hover:bg-pink-600 transition-colors">Prototyping</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-pink-500 hover:text-white dark:hover:bg-pink-600 transition-colors">Wireframing</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-pink-500 hover:text-white dark:hover:bg-pink-600 transition-colors">Responsive Layouts</span> </div> </div> <!-- Category 3: Workflows & Tools --> <div class="bg-white dark:bg-darkCard rounded-2xl p-6 border border-slate-200/60 dark:border-slate-800 shadow-lg shadow-slate-100/40 dark:shadow-none hover:shadow-xl transition-all glow-hover"> <div class="flex items-center space-x-3 mb-4"> <div class="p-2.5 rounded-lg bg-amber-100 dark:bg-amber-950/40 text-amber-600 dark:text-amber-400"> <i data-lucide="settings" class="w-5 h-5"></i> </div> <h4 class="font-extrabold text-slate-900 dark:text-white">Workflow & Tools</h4> </div> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-amber-500 hover:text-white dark:hover:bg-amber-600 transition-colors">Git & GitHub</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-amber-500 hover:text-white dark:hover:bg-amber-600 transition-colors">VS Code</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-amber-500 hover:text-white dark:hover:bg-amber-600 transition-colors">NPM / Bun</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-amber-500 hover:text-white dark:hover:bg-amber-600 transition-colors">XAMPP Server</span> </div> </div> <!-- Category 4: Soft Skills --> <div class="bg-white dark:bg-darkCard rounded-2xl p-6 border border-slate-200/60 dark:border-slate-800 shadow-lg shadow-slate-100/40 dark:shadow-none hover:shadow-xl transition-all glow-hover"> <div class="flex items-center space-x-3 mb-4"> <div class="p-2.5 rounded-lg bg-sky-100 dark:bg-sky-950/40 text-sky-600 dark:text-sky-400"> <i data-lucide="message-square" class="w-5 h-5"></i> </div> <h4 class="font-extrabold text-slate-900 dark:text-white">Interpersonal</h4> </div> <div class="flex flex-wrap gap-2"> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-sky-500 hover:text-white dark:hover:bg-sky-600 transition-colors">ความคิดสร้างสรรค์</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-sky-500 hover:text-white dark:hover:bg-sky-600 transition-colors">การเรียนรู้สิ่งใหม่เร็ว</span> <span class="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-xs font-semibold text-slate-700 dark:text-slate-300 rounded-full hover:bg-sky-500 hover:text-white dark:hover:bg-sky-600 transition-colors">การสื่อสารสากล</span> </div> </div> </div> </div> </div> </div> </section> <!-- 3. PROJECTS SECTION --> <section id="projects" class="py-24 px-4 md:px-8 max-w-6xl mx-auto"> <!-- Section Header --> <div class="text-center space-y-3 mb-16"> <h2 class="text-xs font-bold uppercase tracking-widest text-primary-600 dark:text-primary-400">ผลงานสร้างสรรค์</h2> <p class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">โครงการที่ฉันได้ร่วมพัฒนา (Projects)</p> <div class="w-12 h-1 bg-gradient-to-r from-primary-500 to-fuchsia-500 rounded-full mx-auto mt-2"></div> </div> <!-- Projects Grid Container --> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <!-- Project 1 Card --> <div class="group bg-white dark:bg-darkCard rounded-3xl overflow-hidden border border-slate-200/60 dark:border-slate-800 shadow-xl shadow-slate-100/50 dark:shadow-none hover:shadow-2xl hover:translate-y-[-4px] transition-all duration-300 flex flex-col justify-between"> <div> <!-- Custom Premium Gradient/Pattern Image Placeholder --> <div class="relative h-56 w-full bg-gradient-to-tr from-violet-600 via-indigo-600 to-cyan-500 flex items-center justify-center overflow-hidden"> <!-- Background pattern overlay --> <div class="absolute inset-0 bg-grid-slate-200 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] opacity-10"></div> <!-- Decorative floating icon --> <div class="w-20 h-20 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300"> <i data-lucide="book-open" class="w-10 h-10 text-white"></i> </div> <span class="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full border border-white/20">Featured Project</span> </div> <!-- Project Metadata details --> <div class="p-6 md:p-8 space-y-3"> <h3 class="text-xl md:text-2xl font-extrabold text-slate-900 dark:text-white group-hover:text-primary-500 transition-colors">MindSpace</h3> <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed"> เว็บบันทึกไดอารี่ออนไลน์ที่เน้นดีไซน์เรียบง่าย สบายตา เพื่อดูแลสุขภาพจิตใจของผู้ใช้ (Mental Well-being Journal App) มาพร้อม mood tracker กราฟวิเคราะห์อารมณ์ และระบบ avatar ปรับแต่งเองได้ </p> </div> </div> <!-- Tech Badges & CTA links --> <div class="px-6 md:px-8 pb-6 md:pb-8 pt-2 space-y-4"> <div class="flex flex-wrap gap-1.5"> <span class="text-[10px] font-bold uppercase tracking-wider bg-violet-50 dark:bg-slate-800 text-violet-600 dark:text-violet-400 px-2.5 py-1 rounded-md">HTML5/CSS3</span> <span class="text-[10px] font-bold uppercase tracking-wider bg-violet-50 dark:bg-slate-800 text-violet-600 dark:text-violet-400 px-2.5 py-1 rounded-md">JavaScript ES6</span> <span class="text-[10px] font-bold uppercase tracking-wider bg-violet-50 dark:bg-slate-800 text-violet-600 dark:text-violet-400 px-2.5 py-1 rounded-md">Tailwind CSS</span> </div> <div class="flex items-center space-x-4 pt-2 border-t border-slate-100 dark:border-slate-800"> <a href="#" class="inline-flex items-center text-xs font-extrabold text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"> <span>เข้าชมผลงานจริง</span> <i data-lucide="external-link" class="w-4 h-4 ml-1"></i> </a> <a href="#" class="inline-flex items-center text-xs font-semibold text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"> <i data-lucide="github" class="w-4 h-4 mr-1"></i> <span>Source Code</span> </a> </div> </div> </div> <!-- Project 2 Card --> <div class="group bg-white dark:bg-darkCard rounded-3xl overflow-hidden border border-slate-200/60 dark:border-slate-800 shadow-xl shadow-slate-100/50 dark:shadow-none hover:shadow-2xl hover:translate-y-[-4px] transition-all duration-300 flex flex-col justify-between"> <div> <!-- Custom Premium Gradient/Pattern Image Placeholder --> <div class="relative h-56 w-full bg-gradient-to-tr from-fuchsia-600 via-pink-600 to-amber-500 flex items-center justify-center overflow-hidden"> <div class="absolute inset-0 opacity-10"></div> <!-- Decorative floating icon --> <div class="w-20 h-20 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300"> <i data-lucide="compass" class="w-10 h-10 text-white"></i> </div> <span class="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full border border-white/20">Concept Design</span> </div> <!-- Project Metadata details --> <div class="p-6 md:p-8 space-y-3"> <h3 class="text-xl md:text-2xl font-extrabold text-slate-900 dark:text-white group-hover:text-primary-500 transition-colors">Chiang Mai Gems</h3> <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed"> เว็บไซต์แนะนำสถานที่ท่องเที่ยว คาเฟ่ลับ และวัดสวยงามในจังหวัดเชียงใหม่ที่ยังไม่ค่อยเป็นที่รู้จัก เพื่อกระตุ้นเศรษฐกิจท้องถิ่น มุ่งเน้นการใช้รูปภาพขนาดใหญ่และ typography สไตล์โมเดิร์น </p> </div> </div> <!-- Tech Badges & CTA links --> <div class="px-6 md:px-8 pb-6 md:pb-8 pt-2 space-y-4"> <div class="flex flex-wrap gap-1.5"> <span class="text-[10px] font-bold uppercase tracking-wider bg-fuchsia-50 dark:bg-slate-800 text-fuchsia-600 dark:text-fuchsia-400 px-2.5 py-1 rounded-md">Figma Design</span> <span class="text-[10px] font-bold uppercase tracking-wider bg-fuchsia-50 dark:bg-slate-800 text-fuchsia-600 dark:text-fuchsia-400 px-2.5 py-1 rounded-md">HTML/CSS</span> <span class="text-[10px] font-bold uppercase tracking-wider bg-fuchsia-50 dark:bg-slate-800 text-fuchsia-600 dark:text-fuchsia-400 px-2.5 py-1 rounded-md">UI/UX</span> </div> <div class="flex items-center space-x-4 pt-2 border-t border-slate-100 dark:border-slate-800"> <a href="#" class="inline-flex items-center text-xs font-extrabold text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"> <span>เข้าชม Figma Design</span> <i data-lucide="figma" class="w-4 h-4 ml-1.5"></i> </a> <a href="#" class="inline-flex items-center text-xs font-semibold text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"> <i data-lucide="github" class="w-4 h-4 mr-1"></i> <span>Source Code</span> </a> </div> </div> </div> <!-- Project 3 Card --> <div class="group bg-white dark:bg-darkCard rounded-3xl overflow-hidden border border-slate-200/60 dark:border-slate-800 shadow-xl shadow-slate-100/50 dark:shadow-none hover:shadow-2xl hover:translate-y-[-4px] transition-all duration-300 flex flex-col justify-between"> <div> <!-- Custom Premium Gradient/Pattern Image Placeholder --> <div class="relative h-56 w-full bg-gradient-to-tr from-cyan-600 via-sky-600 to-blue-500 flex items-center justify-center overflow-hidden"> <div class="absolute inset-0 opacity-10"></div> <!-- Decorative floating icon --> <div class="w-20 h-20 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300"> <i data-lucide="check-square" class="w-10 h-10 text-white"></i> </div> <span class="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full border border-white/20">Task Tool</span> </div> <!-- Project Metadata details --> <div class="p-6 md:p-8 space-y-3"> <h3 class="text-xl md:text-2xl font-extrabold text-slate-900 dark:text-white group-hover:text-primary-500 transition-colors">ZenTask Planner</h3> <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed"> เครื่องมือจัดการตารางงานประจำวันแบบ Minimalist Drag-and-Drop ที่ช่วยจัดสัดส่วนเวลาเรียน การบ้าน และโปรเจกต์ส่วนตัว มาพร้อมฟังก์ชัน Pomodoro timer สำหรับการจดจ่อในตัว </p> </div> </div> <!-- Tech Badges & CTA links --> <div class="px-6 md:px-8 pb-6 md:pb-8 pt-2 space-y-4"> <div class="flex flex-wrap gap-1.5"> <span class="text-[10px] font-bold uppercase tracking-wider bg-cyan-50 dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 px-2.5 py-1 rounded-md">Vite + React</span> <span class="text-[10px] font-bold uppercase tracking-wider bg-cyan-50 dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 px-2.5 py-1 rounded-md">Tailwind CSS</span> <span class="text-[10px] font-bold uppercase tracking-wider bg-cyan-50 dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 px-2.5 py-1 rounded-md">Local Storage API</span> </div> <div class="flex items-center space-x-4 pt-2 border-t border-slate-100 dark:border-slate-800"> <a href="#" class="inline-flex items-center text-xs font-extrabold text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"> <span>เปิดระบบจำลอง</span> <i data-lucide="external-link" class="w-4 h-4 ml-1"></i> </a> <a href="#" class="inline-flex items-center text-xs font-semibold text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"> <i data-lucide="github" class="w-4 h-4 mr-1"></i> <span>Source Code</span> </a> </div> </div> </div> <!-- Project 4 Card --> <div class="group bg-white dark:bg-darkCard rounded-3xl overflow-hidden border border-slate-200/60 dark:border-slate-800 shadow-xl shadow-slate-100/50 dark:shadow-none hover:shadow-2xl hover:translate-y-[-4px] transition-all duration-300 flex flex-col justify-between"> <div> <!-- Custom Premium Gradient/Pattern Image Placeholder --> <div class="relative h-56 w-full bg-gradient-to-tr from-rose-500 via-red-500 to-orange-400 flex items-center justify-center overflow-hidden"> <div class="absolute inset-0 opacity-10"></div> <!-- Decorative floating icon --> <div class="w-20 h-20 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center group-hover:scale-110 transition-transform duration-300"> <i data-lucide="layers" class="w-10 h-10 text-white"></i> </div> <span class="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white text-xs font-semibold px-3 py-1 rounded-full border border-white/20">CSS Framework</span> </div> <!-- Project Metadata details --> <div class="p-6 md:p-8 space-y-3"> <h3 class="text-xl md:text-2xl font-extrabold text-slate-900 dark:text-white group-hover:text-primary-500 transition-colors">Aether UI Library</h3> <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed"> ชุดคอมโพเนนต์ CSS ที่นำกลับมาใช้ใหม่ได้ (Reusable CSS components) เน้นแนวคิดแบบ Glassmorphism และความคล่องตัวในการพัฒนาเว็บไซต์ รองรับ Responsive และปรับเปลี่ยนธีมได้ง่ายดาย </p> </div> </div> <!-- Tech Badges & CTA links --> <div class="px-6 md:px-8 pb-6 md:pb-8 pt-2 space-y-4"> <div class="flex flex-wrap gap-1.5"> <span class="text-[10px] font-bold uppercase tracking-wider bg-rose-50 dark:bg-slate-800 text-rose-600 dark:text-rose-400 px-2.5 py-1 rounded-md">Tailwind UI</span> <span class="text-[10px] font-bold uppercase tracking-wider bg-rose-50 dark:bg-slate-800 text-rose-600 dark:text-rose-400 px-2.5 py-1 rounded-md">CSS Flexbox/Grid</span> <span class="text-[10px] font-bold uppercase tracking-wider bg-rose-50 dark:bg-slate-800 text-rose-600 dark:text-rose-400 px-2.5 py-1 rounded-md">Semantic HTML</span> </div> <div class="flex items-center space-x-4 pt-2 border-t border-slate-100 dark:border-slate-800"> <a href="#" class="inline-flex items-center text-xs font-extrabold text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300"> <span>เยี่ยมชม Docs</span> <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i> </a> <a href="#" class="inline-flex items-center text-xs font-semibold text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"> <i data-lucide="github" class="w-4 h-4 mr-1"></i> <span>Source Code</span> </a> </div> </div> </div> </div> </section> <!-- 4. EXPERIENCE & EDUCATION TIMELINE --> <section id="timeline" class="py-24 px-4 md:px-8 bg-slate-100/40 dark:bg-slate-900/20 border-t border-b border-slate-100 dark:border-slate-800/40"> <div class="max-w-4xl mx-auto"> <!-- Section Header --> <div class="text-center space-y-3 mb-16"> <h2 class="text-xs font-bold uppercase tracking-widest text-primary-600 dark:text-primary-400">ประวัติความเป็นมา</h2> <p class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">ประวัติการศึกษา & ประสบการณ์ทำงาน</p> <div class="w-12 h-1 bg-gradient-to-r from-primary-500 to-fuchsia-500 rounded-full mx-auto mt-2"></div> </div> <!-- Vertical Timeline Component --> <div class="relative border-l-2 border-slate-200 dark:border-slate-800 ml-4 md:ml-32 space-y-12"> <!-- Timeline Item 1 --> <div class="relative pl-8 md:pl-10"> <!-- Timeline Marker Circle Dot --> <div class="absolute -left-[11px] top-1.5 w-5 h-5 rounded-full bg-gradient-to-tr from-primary-600 to-fuchsia-500 border-4 border-white dark:border-darkBg shadow-md shadow-primary-500/20"></div> <!-- Desktop Year Flag (Absolute to the left) --> <div class="hidden md:block absolute right-[100%] mr-10 top-0.5 text-right"> <span class="font-extrabold text-slate-900 dark:text-white text-lg">2026 - ปัจจุบัน</span> <p class="text-xs font-medium text-slate-400 dark:text-slate-500 uppercase tracking-wider">Freelance Path</p> </div> <!-- Timeline Card --> <div class="bg-white dark:bg-darkCard rounded-2xl p-6 border border-slate-200/60 dark:border-slate-800 shadow-md"> <span class="inline-block md:hidden text-xs font-bold bg-primary-100 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 px-2.5 py-1 rounded-full mb-3">2026 - ปัจจุบัน</span> <h3 class="text-lg md:text-xl font-bold text-slate-950 dark:text-white">ผู้ออกแบบ UI/UX อิสระ & นักพัฒนา Frontend มือใหม่</h3> <p class="text-sm font-semibold text-primary-600 dark:text-primary-400 mt-1">รับงานฟรีแลนซ์ & โปรเจกต์ทดลองพัฒนาตนเอง</p> <p class="text-slate-500 dark:text-slate-400 text-sm mt-3 leading-relaxed"> รับออกแบบโครงร่าง (Wireframe) และเว็บต้นแบบสำเร็จรูป (High-Fidelity UI Prototype) ผ่าน Figma ให้แก่สตาร์ทอัปในกลุ่มเพื่อนและผู้ประกอบการท้องถิ่นในเชียงใหม่ พร้อมนำดีไซน์มาลงโค้ดเป็นหน้าเว็บ Responsive คลีน ๆ </p> </div> </div> <!-- Timeline Item 2 --> <div class="relative pl-8 md:pl-10"> <!-- Timeline Marker Circle Dot --> <div class="absolute -left-[11px] top-1.5 w-5 h-5 rounded-full bg-slate-300 dark:bg-slate-700 border-4 border-white dark:border-darkBg"></div> <!-- Desktop Year Flag --> <div class="hidden md:block absolute right-[100%] mr-10 top-0.5 text-right"> <span class="font-extrabold text-slate-900 dark:text-white text-lg">2024 - 2025</span> <p class="text-xs font-medium text-slate-400 dark:text-slate-500 uppercase tracking-wider">Self-Learning</p> </div> <!-- Timeline Card --> <div class="bg-white dark:bg-darkCard rounded-2xl p-6 border border-slate-200/60 dark:border-slate-800 shadow-md"> <span class="inline-block md:hidden text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 px-2.5 py-1 rounded-full mb-3">2024 - 2025</span> <h3 class="text-lg md:text-xl font-bold text-slate-950 dark:text-white">ศึกษาศาสตร์การออกแบบเว็บและเทคโนโลยีเชิงลึก</h3> <p class="text-sm font-semibold text-slate-600 dark:text-slate-400 mt-1">การเรียนรู้ด้วยตนเองผ่านแหล่งความรู้สากล</p> <p class="text-slate-500 dark:text-slate-400 text-sm mt-3 leading-relaxed"> ฝึกหัดเขียนโค้ดเบื้องต้นผ่านเว็บไซต์ Coursera, FreeCodeCamp และ YouTube สร้างมินิโปรเจกต์ของตัวเองกว่า 10 ชิ้น พร้อมเรียนรู้การใช้ประโยชน์จาก Git/GitHub และ Tailwind CSS ในกระบวนการทำงานจริง </p> </div> </div> <!-- Timeline Item 3 --> <div class="relative pl-8 md:pl-10"> <!-- Timeline Marker Circle Dot --> <div class="absolute -left-[11px] top-1.5 w-5 h-5 rounded-full bg-slate-300 dark:bg-slate-700 border-4 border-white dark:border-darkBg"></div> <!-- Desktop Year Flag --> <div class="hidden md:block absolute right-[100%] mr-10 top-0.5 text-right"> <span class="font-extrabold text-slate-900 dark:text-white text-lg">2021 - 2024</span> <p class="text-xs font-medium text-slate-400 dark:text-slate-500 uppercase tracking-wider">High School</p> </div> <!-- Timeline Card --> <div class="bg-white dark:bg-darkCard rounded-2xl p-6 border border-slate-200/60 dark:border-slate-800 shadow-md"> <span class="inline-block md:hidden text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 px-2.5 py-1 rounded-full mb-3">2021 - 2024</span> <h3 class="text-lg md:text-xl font-bold text-slate-950 dark:text-white">การศึกษาระดับมัธยมศึกษาตอนปลาย</h3> <p class="text-sm font-semibold text-slate-600 dark:text-slate-400 mt-1">โรงเรียนท้องถิ่นจังหวัดเชียงใหม่ (สายวิทย์-คณิต)</p> <p class="text-slate-500 dark:text-slate-400 text-sm mt-3 leading-relaxed"> เรียนรู้ตรรกะคณิตศาสตร์และการคิดอย่างเป็นระบบ เข้าร่วมกิจกรรมค่ายไอที จัดทำมินิโปรเจกต์ประกวดในโรงเรียน และเริ่มสนใจเส้นทางสายงานออกแบบหน้าจอเว็บไซต์และโปรแกรมมิ่ง </p> </div> </div> </div> </div> </section> <!-- 5. CONTACT SECTION --> <section id="contact" class="py-24 px-4 md:px-8 max-w-6xl mx-auto"> <!-- Section Header --> <div class="text-center space-y-3 mb-16"> <h2 class="text-xs font-bold uppercase tracking-widest text-primary-600 dark:text-primary-400">ติดต่อร่วมงาน</h2> <p class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">ส่งข้อความหาฉัน (Get in touch)</p> <div class="w-12 h-1 bg-gradient-to-r from-primary-500 to-fuchsia-500 rounded-full mx-auto mt-2"></div> </div> <!-- Contact Layout Grid --> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-stretch"> <!-- Left Column: Contact details card --> <div class="lg:col-span-5 flex flex-col justify-between space-y-6"> <div class="bg-gradient-to-tr from-slate-900 to-slate-950 text-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-800 space-y-8 flex-1 flex flex-col justify-between"> <div class="space-y-6"> <h3 class="text-2xl font-bold tracking-tight">คุยโครงการเด็ด ๆ ร่วมกัน!</h3> <p class="text-slate-400 text-sm leading-relaxed"> มีไอเดียเว็บไซต์เก๋ ๆ หรืออยากจ้างงานร่วมมือกัน? ส่งเมลมาหาฉันหรือโทรคุยกันได้โดยตรงเลยค่ะ ฉันยินดีให้คำปรึกษาและออกแบบตามไอเดียของคุณ </p> <!-- Action Link Cards inside main card --> <div class="space-y-4 pt-4"> <!-- Tel contact option --> <a href="tel:0834491081" class="flex items-center space-x-4 p-4 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 transition-all group"> <div class="p-3 rounded-xl bg-primary-600/30 text-primary-400 group-hover:bg-primary-500/35 transition-colors"> <i data-lucide="phone" class="w-5 h-5"></i> </div> <div> <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">โทรด่วน</p> <p class="text-sm font-bold text-white tracking-wider">083-449-1081</p> </div> </a> <!-- Email contact option --> <a href="mailto:pin59142@gmail.com" class="flex items-center space-x-4 p-4 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 transition-all group"> <div class="p-3 rounded-xl bg-fuchsia-600/30 text-fuchsia-400 group-hover:bg-fuchsia-500/35 transition-colors"> <i data-lucide="mail" class="w-5 h-5"></i> </div> <div> <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">ส่งอีเมล</p> <p class="text-sm font-bold text-white">pin59142@gmail.com</p> </div> </a> <!-- Address option --> <div class="flex items-center space-x-4 p-4 rounded-2xl bg-white/5 border border-white/10"> <div class="p-3 rounded-xl bg-cyan-600/30 text-cyan-400"> <i data-lucide="map-pin" class="w-5 h-5"></i> </div> <div> <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">พิกัด</p> <p class="text-xs font-bold text-slate-200 leading-snug">558/25 ถ.เจริญเมือง ต.ท่าศาลา อ.เมือง เชียงใหม่</p> </div> </div> </div> </div> <!-- Bottom: Full social link icons --> <div class="pt-8 border-t border-white/10"> <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-4">ช่องทางติดตามโซเชียลมีเดีย</p> <div class="flex items-center space-x-4"> <a href="#" class="w-10 h-10 rounded-xl bg-white/5 hover:bg-primary-600/25 hover:text-primary-400 flex items-center justify-center border border-white/10 hover:border-primary-500/30 transition-all" aria-label="Facebook"> <i data-lucide="facebook" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-xl bg-white/5 hover:bg-primary-600/25 hover:text-primary-400 flex items-center justify-center border border-white/10 hover:border-primary-500/30 transition-all" aria-label="Instagram"> <i data-lucide="instagram" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-xl bg-white/5 hover:bg-primary-600/25 hover:text-primary-400 flex items-center justify-center border border-white/10 hover:border-primary-500/30 transition-all" aria-label="GitHub"> <i data-lucide="github" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-xl bg-white/5 hover:bg-primary-600/25 hover:text-primary-400 flex items-center justify-center border border-white/10 hover:border-primary-500/30 transition-all" aria-label="Figma"> <i data-lucide="figma" class="w-5 h-5"></i> </a> </div> </div> </div> </div> <!-- Right Column: Interactive mock contact form --> <div class="lg:col-span-7"> <form id="contact-form" class="bg-white dark:bg-darkCard rounded-3xl p-6 md:p-8 shadow-xl border border-slate-200/60 dark:border-slate-800 space-y-6 h-full flex flex-col justify-between"> <div class="space-y-4"> <h3 class="text-xl font-bold text-slate-950 dark:text-white flex items-center"> <i data-lucide="message-square" class="w-5 h-5 mr-2.5 text-primary-500"></i> ฟอร์มติดต่อกลับจำลอง </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="space-y-1"> <label for="name" class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase">ชื่อของคุณ</label> <input type="text" id="name" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:bg-white dark:focus:bg-darkBg transition-all" placeholder="กรอกชื่อ-นามสกุล"> </div> <div class="space-y-1"> <label for="email" class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase">อีเมลติดต่อกลับ</label> <input type="email" id="email" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:bg-white dark:focus:bg-darkBg transition-all" placeholder="yourmail@domain.com"> </div> </div> <div class="space-y-1"> <label for="subject" class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase">หัวข้อข้อความ</label> <input type="text" id="subject" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:bg-white dark:focus:bg-darkBg transition-all" placeholder="เช่น ขอสอบถามราคาจ้างออกแบบเว็บ"> </div> <div class="space-y-1"> <label for="message" class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase">รายละเอียดข้อความ</label> <textarea id="message" rows="5" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:bg-white dark:focus:bg-darkBg transition-all resize-none" placeholder="เขียนข้อความหรือแผนโปรเจกต์สั้น ๆ ได้ที่นี่..."></textarea> </div> </div> <div class="pt-4"> <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3.5 rounded-xl font-extrabold text-white bg-gradient-to-r from-primary-600 to-fuchsia-600 hover:from-primary-700 hover:to-fuchsia-700 transition-all shadow-md shadow-primary-500/20 transform hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> <i data-lucide="send" class="w-5 h-5 mr-2"></i> <span>ส่งข้อมูลติดต่อกลับ</span> </button> </div> </form> </div> </div> </section> <!-- FOOTER BRANDING AND ACCREDITATION --> <footer class="border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 py-12 px-4 md:px-8 text-center"> <div class="max-w-6xl mx-auto space-y-6"> <!-- Brand Link back to home --> <a href="#home" class="inline-flex items-center space-x-2"> <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary-600 to-fuchsia-500 flex items-center justify-center text-white font-black text-sm"> K </div> <span class="font-extrabold text-slate-900 dark:text-white">Pin.Portfolio</span> </a> <!-- Quick nav links footer copy --> <div class="flex flex-wrap items-center justify-center gap-6 text-slate-400 dark:text-slate-500 text-sm font-medium"> <a href="#home" class="hover:text-primary-500 transition-colors">หน้าแรก</a> <a href="#about" class="hover:text-primary-500 transition-colors">เกี่ยวกับฉัน</a> <a href="#projects" class="hover:text-primary-500 transition-colors">ผลงานเด่น</a> <a href="#timeline" class="hover:text-primary-500 transition-colors">ประวัติ</a> <a href="#contact" class="hover:text-primary-500 transition-colors">ติดต่อ</a> </div> <!-- Copyright text metadata --> <p class="text-xs text-slate-400 dark:text-slate-600"> © 2026 กรพินธ์ เปี่ยมวัจนะพร. All Rights Reserved. <br class="sm:hidden"> Designed & Developed with 💜 </p> </div> </footer> <!-- SCRIPT IMPLEMENTATION SECTION (Theme engine, Typing effect, Forms, Scroll updates) --> <script> // --- 1. DARK/LIGHT THEME CONTROLLER & PERSISTENCE --- const htmlElement = document.documentElement; const themeToggleBtn = document.getElementById('theme-toggle'); const themeToggleMobileBtn = document.getElementById('theme-toggle-mobile'); // Detect user preference function initTheme() { const savedTheme = localStorage.getItem('theme'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (savedTheme === 'dark' || (!savedTheme && prefersDark)) { htmlElement.classList.add('dark'); } else { htmlElement.classList.remove('dark'); } } function toggleTheme() { if (htmlElement.classList.contains('dark')) { htmlElement.classList.remove('dark'); localStorage.setItem('theme', 'light'); } else { htmlElement.classList.add('dark'); localStorage.setItem('theme', 'dark'); } } themeToggleBtn.addEventListener('click', toggleTheme); themeToggleMobileBtn.addEventListener('click', toggleTheme); initTheme(); // --- 2. MOBILE DRAWER NAVIGATION MENU --- const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); const isExpanded = !mobileMenu.classList.contains('hidden'); const menuIcon = mobileMenuBtn.querySelector('i'); if (isExpanded) { menuIcon.setAttribute('data-lucide', 'x'); } else { menuIcon.setAttribute('data-lucide', 'menu'); } lucide.createIcons(); }); // Close menu when mobile nav link click const mobileNavLinks = document.querySelectorAll('.mobile-nav-link'); mobileNavLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); mobileMenuBtn.querySelector('i').setAttribute('data-lucide', 'menu'); lucide.createIcons(); }); }); // --- 3. DYNAMIC HERO SUBTITLE TYPING EFFECT --- const typingSpan = document.getElementById('typing-text'); const terms = ["Frontend Developer", "UI/UX Designer", "Creative Thinker", "ปัญหาแก้ด้วยดีไซน์"]; let termIndex = 0; let charIndex = 0; let isDeleting = false; let typingSpeed = 100; function typeEffect() { const currentTerm = terms[termIndex]; if (isDeleting) { typingSpan.textContent = currentTerm.substring(0, charIndex - 1); charIndex--; typingSpeed = 50; // faster deletion } else { typingSpan.textContent = currentTerm.substring(0, charIndex + 1); charIndex++; typingSpeed = 120; // normal typing speed } if (!isDeleting && charIndex === currentTerm.length) { isDeleting = true; typingSpeed = 2000; // pause at full text } else if (isDeleting && charIndex === 0) { isDeleting = false; termIndex = (termIndex + 1) % terms.length; typingSpeed = 500; // brief pause before next word } setTimeout(typeEffect, typingSpeed); } document.addEventListener("DOMContentLoaded", () => { // Start typing effect typeEffect(); // Initialize Lucide Icons lucide.createIcons(); }); // --- 4. NAVIGATION SCROLL SPY ACTIVE STATE --- const sections = document.querySelectorAll('section'); const navLinks = document.querySelectorAll('.nav-link'); window.addEventListener('scroll', () => { let currentSectionId = 'home'; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; // Check if scroll index falls inside current section view range if (window.scrollY >= (sectionTop - 150)) { currentSectionId = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('text-primary-600', 'dark:text-primary-400', 'bg-slate-100/80', 'dark:bg-slate-800/80'); if (link.getAttribute('href') === `#${currentSectionId}`) { link.classList.add('text-primary-600', 'dark:text-primary-400', 'bg-slate-100/80', 'dark:bg-slate-800/80'); } }); }); // --- 5. TOAST MESSAGE NOTIFIER & COPY TO CLIPBOARD --- function copyToClipboard(text, message) { navigator.clipboard.writeText(text).then(() => { showToast(message, 'success'); }).catch(err => { showToast('ไม่สามารถคัดลอกได้กรุณาคัดลอกด้วยตนเอง', 'error'); }); } function showToast(message, type = 'success') { const container = document.getElementById('toast-container'); const toast = document.createElement('div'); const isSuccess = type === 'success'; const icon = isSuccess ? 'check-circle' : 'alert-circle'; const colorClasses = isSuccess ? 'bg-emerald-50 dark:bg-emerald-950 border-emerald-200 dark:border-emerald-900 text-emerald-800 dark:text-emerald-300' : 'bg-rose-50 dark:bg-rose-950 border-rose-200 dark:border-rose-900 text-rose-800 dark:text-rose-300'; toast.className = `flex items-center space-x-3 px-5 py-4 border rounded-2xl shadow-xl transition-all duration-300 transform translate-y-4 opacity-0 max-w-sm ${colorClasses}`; toast.innerHTML = ` <i data-lucide="${icon}" class="w-5 h-5 flex-shrink-0"></i> <span class="text-sm font-semibold">${message}</span> `; container.appendChild(toast); lucide.createIcons(); // Trigger transition animate-in setTimeout(() => { toast.classList.remove('translate-y-4', 'opacity-0'); }, 10); // Dismiss and destroy toast after timeout setTimeout(() => { toast.classList.add('translate-y-4', 'opacity-0'); setTimeout(() => { toast.remove(); }, 300); }, 3000); } // --- 6. MOCK CONTACT FORM SUBMISSION --- const contactForm = document.getElementById('contact-form'); contactForm.addEventListener('submit', (e) => { e.preventDefault(); const name = document.getElementById('name').value; const email = document.getElementById('email').value; const subject = document.getElementById('subject').value; const message = document.getElementById('message').value; // Mock processing state const submitBtn = contactForm.querySelector('button[type="submit"]'); const btnSpan = submitBtn.querySelector('span'); const btnIcon = submitBtn.querySelector('i'); submitBtn.disabled = true; btnSpan.textContent = 'กำลังส่งข้อมูล...'; btnIcon.setAttribute('data-lucide', 'loader-2'); btnIcon.classList.add('animate-spin'); lucide.createIcons(); setTimeout(() => { // Success response mock showToast(`ขอบคุณค่ะคุณ ${name}! ส่งข้อความสำเร็จแล้ว`, 'success'); contactForm.reset(); // Reset button submitBtn.disabled = false; btnSpan.textContent = 'ส่งข้อมูลติดต่อกลับ'; btnIcon.setAttribute('data-lucide', 'send'); btnIcon.classList.remove('animate-spin'); lucide.createIcons(); }, 1500); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.35 |
proxy
|
phpinfo
|
Settings