File manager - Edit - /home/webapp69.cm.in.th/u69319090036/port/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 - [ชื่อของคุณ] | Frontend Developer & Designer</title> <meta name="description" content="Portfolio เว็บไซต์ส่วนตัวของ [ชื่อของคุณ] - แนะนำตัว ประวัติการศึกษา ผลงาน และทักษะด้านเทคโนโลยี"> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Tailwind CSS Play CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Inline JS to prevent light-theme flash before page loads --> <script> if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } </script> <!-- Tailwind Configuration --> <script> tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Outfit', 'Sarabun', 'sans-serif'], }, colors: { primary: { 50: '#eef2ff', 100: '#e0e7ff', 500: '#6366f1', /* Indigo */ 600: '#4f46e5', 700: '#4338ca', }, accent: { 500: '#ec4899', /* Pink/Fuchsia */ 600: '#db2777', } }, animation: { 'blob': 'blob 10s infinite', 'float': 'float 6s ease-in-out infinite', 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', }, keyframes: { blob: { '0%': { transform: 'translate(0px, 0px) scale(1)' }, '33%': { transform: 'translate(30px, -50px) scale(1.1)' }, '66%': { transform: 'translate(-30px, 20px) scale(0.9)' }, '100%': { transform: 'translate(0px, 0px) scale(1)' }, }, float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-15px)' }, } } } } } </script> <!-- Custom styles for scrollbars & styling tweaks --> <style type="text/css"> /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } .dark ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.2); border-radius: 8px; } ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.4); border-radius: 8px; } .dark ::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.5); } ::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.7); } /* Soft glassmorphism background utility */ .glassmorphism { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .dark .glassmorphism { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Smooth transitions for theme switching */ .transition-theme { transition: background-color 0.5s ease, border-color 0.5s ease, color 0.3s ease, box-shadow 0.3s ease; } </style> </head> <body class="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 min-h-screen transition-theme duration-500 overflow-x-hidden antialiased font-sans"> <!-- Ambient Animated Background Gradients (Atmospheric Glow) --> <div class="absolute top-0 left-0 w-full min-h-screen overflow-hidden -z-10 pointer-events-none"> <div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] rounded-full bg-indigo-400/20 dark:bg-indigo-600/10 blur-[120px] animate-blob"> </div> <div class="absolute top-[20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-pink-400/15 dark:bg-fuchsia-600/10 blur-[130px] animate-blob" style="animation-delay: 3s;"></div> <div class="absolute bottom-[10%] left-[10%] w-[450px] h-[450px] rounded-full bg-cyan-400/20 dark:bg-violet-600/10 blur-[110px] animate-blob" style="animation-delay: 6s;"></div> </div> <!-- Header / Navigation Bar --> <header class="fixed top-0 left-0 w-full z-50 transition-theme duration-500"> <nav class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4"> <div class="glassmorphism border border-slate-200/50 dark:border-slate-800/50 rounded-2xl px-6 py-3 flex items-center justify-between shadow-lg shadow-slate-100/50 dark:shadow-none transition-theme"> <!-- Logo / Name --> <a href="#" class="flex items-center space-x-2 group"> <div class="h-8 w-8 rounded-lg bg-gradient-to-tr from-indigo-500 to-accent-500 flex items-center justify-center text-white font-extrabold shadow-md shadow-indigo-500/20"> P </div> <span class="text-xl font-bold tracking-tight bg-gradient-to-r from-slate-900 to-indigo-700 dark:from-white dark:to-indigo-300 bg-clip-text text-transparent group-hover:to-accent-500 transition-all duration-300"> <!-- REPLACE: เปลี่ยนชื่อย่อ หรือโลโก้ตามใจชอบ --> [Web69] </span> </a> <!-- Desktop Menu Links --> <div class="hidden md:flex items-center space-x-8"> <a href="#about" class="text-sm font-medium text-slate-600 hover:text-indigo-600 dark:text-slate-300 dark:hover:text-indigo-400 transition-colors">เกี่ยวกับผม</a> <a href="#skills" class="text-sm font-medium text-slate-600 hover:text-indigo-600 dark:text-slate-300 dark:hover:text-indigo-400 transition-colors">ทักษะ</a> <a href="#projects" class="text-sm font-medium text-slate-600 hover:text-indigo-600 dark:text-slate-300 dark:hover:text-indigo-400 transition-colors">ผลงาน</a> <a href="#contact" class="text-sm font-medium text-slate-600 hover:text-indigo-600 dark:text-slate-300 dark:hover:text-indigo-400 transition-colors">ติดต่อ</a> </div> <!-- Right Side: Theme Toggle & Call To Action --> <div class="flex items-center space-x-4"> <!-- Theme Switcher Button --> <button id="theme-toggle" type="button" aria-label="Toggle theme" class="text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 focus:outline-none rounded-lg text-sm p-2.5 transition-colors"> <!-- Moon icon (Dark Mode) --> <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> </svg> <!-- Sun icon (Light Mode) --> <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 100 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path> </svg> </button> <!-- Hire Me CTA --> <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-600 hover:scale-[1.02] active:scale-[0.98] shadow-md shadow-indigo-600/10 hover:shadow-indigo-600/25 transition-all duration-200"> contact </a> <!-- Mobile Menu Hamburger Button --> <button id="mobile-menu-btn" type="button" aria-label="Toggle mobile menu" class="md:hidden text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg p-2.5 transition-colors"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> </svg> </button> </div> </div> <!-- Mobile Dropdown Menu --> <div id="mobile-menu" class="hidden md:hidden mt-2 p-4 glassmorphism border border-slate-200/50 dark:border-slate-800/50 rounded-2xl shadow-xl transition-all duration-300 transform origin-top scale-95 opacity-0"> <div class="flex flex-col space-y-4"> <a href="#about" class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-indigo-600 px-2 py-1 rounded-lg transition-colors">เกี่ยวกับผม</a> <a href="#skills" class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-indigo-600 px-2 py-1 rounded-lg transition-colors">ทักษะ</a> <a href="#projects" class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-indigo-600 px-2 py-1 rounded-lg transition-colors">ผลงาน</a> <a href="#contact" class="text-sm font-medium text-slate-600 dark:text-slate-300 hover:text-indigo-600 px-2 py-1 rounded-lg transition-colors">ติดต่อ</a> <a href="#contact" class="inline-flex w-full items-center justify-center px-4 py-2 border border-transparent rounded-xl text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-500 transition-colors"> พูดคุยงาน </a> </div> </div> </nav> </header> <!-- Hero Section --> <section class="relative pt-32 pb-20 md:pt-40 md:pb-28 overflow-hidden"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center"> <!-- Left Text Area (7 Cols) --> <div class="lg:col-span-7 space-y-6 text-center lg:text-left"> <!-- Status Badge --> <div class="inline-flex items-center space-x-2 px-3 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-700 dark:text-indigo-300 text-xs font-semibold tracking-wide uppercase shadow-sm"> <span class="relative flex h-2 w-2"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span> </span> <span>ยินดีต้อนรับสู่พอร์ตโฟลิโอของผม</span> </div> <!-- Headline --> <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight"> นายวีรภัทร ปิมป้อ <br class="hidden sm:inline" /> <span class="bg-gradient-to-r from-indigo-600 via-indigo-500 to-accent-500 bg-clip-text text-transparent"> <!-- REPLACE: เปลี่ยนเป็นชื่อจริงหรือชื่อเล่นของคุณ --> [เนท] </span> </h1> <!-- Subtitle --> <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-slate-700 dark:text-slate-300"> ฉันเป็นนักศึกษาวิทยาลัยเทคนิคเชียงใหม่ </h2> <!-- Short Bio --> <p class="text-slate-600 dark:text-slate-300 text-base sm:text-lg max-w-2xl mx-auto lg:mx-0 leading-relaxed"> ผมเป็นนักศึกษาที่รักการเขียนโค้ดและมีความมุ่งมั่นที่จะพัฒนาทักษะด้าน Frontend Development โดยเน้นสร้างเว็บไซต์ที่สวยงาม มี UI ที่ใช้งานง่าย และทำงานได้อย่างราบรื่นในทุกอุปกรณ์ครับ </p> <!-- Action CTA & Social 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-6 py-3 border border-transparent rounded-2xl text-base font-semibold text-white bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-600 hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-indigo-600/20 hover:shadow-indigo-600/35 transition-all duration-200"> ดูผลงานของผม <i class="fa-solid fa-arrow-down ml-2"></i> </a> <a href="#contact" class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 border border-slate-300 dark:border-slate-800 rounded-2xl text-base font-semibold text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-200"> ติดต่อพูดคุย </a> </div> <!-- Social Shortcuts --> <div class="flex items-center justify-center lg:justify-start space-x-4 pt-6 text-slate-400 dark:text-slate-500"> <span class="text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-600">ติดตาม:</span> <!-- REPLACE: ใส่ลิงก์โซเชียลของคุณใน href --> <a href="#" class="hover:text-indigo-500 transition-colors text-xl" title="GitHub"><i class="fa-brands fa-github"></i></a> <a href="#" class="hover:text-indigo-500 transition-colors text-xl" title="LinkedIn"><i class="fa-brands fa-linkedin"></i></a> <a href="#" class="hover:text-indigo-500 transition-colors text-xl" title="Twitter/X"><i class="fa-brands fa-x-twitter"></i></a> <a href="mailto:your-email@example.com" class="hover:text-indigo-500 transition-colors text-xl" title="Email"><i class="fa-regular fa-envelope"></i></a> </div> </div> <!-- Right Visual Area (5 Cols) --> <div class="lg:col-span-5 flex justify-center relative"> <!-- Animated Ring Deco --> <div class="absolute inset-0 m-auto w-72 h-72 sm:w-80 sm:h-80 rounded-full border border-indigo-500/20 animate-spin" style="animation-duration: 25s;"></div> <div class="absolute inset-0 m-auto w-64 h-64 sm:w-72 sm:h-72 rounded-full border border-dashed border-accent-500/25 animate-spin" style="animation-duration: 15s; animation-direction: reverse;"></div> <!-- Main Floating Profile Container --> <div class="relative w-60 h-60 sm:w-72 sm:h-72 rounded-3xl overflow-hidden shadow-2xl animate-float bg-gradient-to-tr from-indigo-500/10 to-accent-500/10 p-[3px]"> <div class="w-full h-full rounded-3xl bg-slate-900 overflow-hidden relative group"> <!-- Avatar image --> <!-- REPLACE: สลับ URL นี้เป็นรูปภาพโปรไฟล์จริงของคุณเอง --> <img src="IMG_6549.jpg" alt="Profile Photo" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> <!-- Subtle overlay gradient inside picture --> <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent opacity-60"> </div> <!-- Tag inside image --> <div class="absolute bottom-4 left-4 right-4 flex justify-between items-center bg-slate-950/80 backdrop-blur-md border border-white/10 rounded-xl px-3 py-1.5 text-xs text-white"> <span class="font-medium">📍 TH / Chiangmai</span> <span class="text-green-400 font-bold uppercase text-[9px] tracking-widest">ACTIVE</span> </div> </div> </div> </div> </div> </div> </section> <!-- About / Bio Section --> <section id="about" class="py-20 border-t border-slate-200/40 dark:border-slate-800/40 scroll-mt-20"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <!-- Section Heading --> <div class="text-center max-w-3xl mx-auto space-y-4 mb-16"> <h2 class="text-xs font-bold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">เกี่ยวกับตัวฉัน </h2> <p class="text-3xl sm:text-4xl font-extrabold tracking-tight">ประวัติส่วนตัว</p> <div class="h-1 w-16 bg-gradient-to-r from-indigo-600 to-accent-500 mx-auto rounded-full"></div> </div> <!-- About Info Grid --> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-stretch"> <!-- Left: Details Description (12 Cols) --> <div class="lg:col-span-12 max-w-4xl mx-auto space-y-6 flex flex-col justify-center"> <h3 class="text-2xl font-bold">เรียนรู้ พัฒนา และสร้างสรรค์สิ่งใหม่ด้วยโค้ด</h3> <p class="text-slate-600 dark:text-slate-300 leading-relaxed"> ผมเป็นนักศึกษาที่มีความหลงใหลในการเขียนโค้ดและการพัฒนาเว็บไซต์ (Web Development) รวมถึงมีความเข้าใจในงานออกแบบ UI/UX เพื่อสร้างสรรค์เว็บไซต์ที่มีความสวยงาม ใช้งานง่าย และรองรับการแสดงผลได้อย่างยอดเยี่ยมในทุกอุปกรณ์ </p> <p class="text-slate-600 dark:text-slate-300 leading-relaxed"> ปัจจุบันผมกำลังมองหาโอกาสฝึกงาน (Internship) ในสายงาน Frontend Developer เพื่อนำทักษะด้าน HTML, CSS, JavaScript และ Tailwind CSS มาปรับใช้และพัฒนาผลงานจริงร่วมกับทีมพัฒนา พร้อมเปิดรับคำแนะนำและการเรียนรู้ใหม่ๆ อยู่เสมอครับ </p> <!-- Education History Section --> <div class="pt-6 border-t border-slate-200/50 dark:border-slate-800/50"> <h4 class="text-lg font-bold mb-6 flex items-center text-slate-800 dark:text-slate-200"> <i class="fa-solid fa-graduation-cap mr-2 text-indigo-500"></i> ประวัติการศึกษา </h4> <div class="relative border-l-2 border-slate-200 dark:border-slate-850 ml-4 space-y-8"> <!-- Item 1: College --> <div class="relative pl-6"> <div class="absolute -left-[9px] top-1.5 h-4 w-4 rounded-full border-2 border-indigo-500 bg-white dark:bg-slate-950"> </div> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-1"> <div> <h5 class="font-bold text-slate-800 dark:text-slate-200 text-sm sm:text-base"> ระดับประกาศนียบัตรวิชาชีพชั้นสูง (ปวส. 1) สาขางานเทคนิคคอมพิวเตอร์ </h5> <p class="text-xs sm:text-sm text-slate-500 font-medium">วิทยาลัยเทคนิคเชียงใหม่</p> </div> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-indigo-500/10 text-indigo-700 dark:text-indigo-300 self-start"> กำลังศึกษาอยู่ </span> </div> </div> <!-- Item 2: High School --> <div class="relative pl-6"> <div class="absolute -left-[9px] top-1.5 h-4 w-4 rounded-full border-2 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950"> </div> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-1"> <div> <h5 class="font-bold text-slate-700 dark:text-slate-300 text-sm sm:text-base"> มัธยมศึกษาตอนปลาย (ม. 4-6) </h5> <p class="text-xs sm:text-sm text-slate-500 font-medium">โรงเรียนพร้าววิทยาคม</p> </div> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 dark:bg-slate-900 dark:text-slate-400 self-start"> สำเร็จการศึกษา </span> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills" class="py-20 border-t border-slate-200/40 dark:border-slate-800/40 bg-slate-100/30 dark:bg-slate-900/10 scroll-mt-20"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <!-- Section Heading --> <div class="text-center max-w-3xl mx-auto space-y-4 mb-16"> <h2 class="text-xs font-bold uppercase tracking-widest text-indigo-600 dark:text-indigo-400"> ความถนัดด้านเทคโนโลยี</h2> <p class="text-3xl sm:text-4xl font-extrabold tracking-tight">เทคโนโลยีและโปรแกรมที่ใช้งาน</p> <div class="h-1 w-16 bg-gradient-to-r from-indigo-600 to-accent-500 mx-auto rounded-full"></div> </div> <!-- Skills Cards Grid --> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Frontend Development (Card 1) --> <div class="glassmorphism border border-slate-200/50 dark:border-slate-800/50 rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1"> <div class="h-12 w-12 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center text-xl mb-4"> <i class="fa-solid fa-code"></i> </div> <h3 class="text-lg font-bold mb-4">Frontend Development</h3> <!-- Skill Tags Container --> <div class="flex flex-wrap gap-2"> <!-- HTML5 --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-950/40 dark:text-orange-300"> <i class="fa-brands fa-html5 mr-1 text-sm"></i> HTML5 </span> <!-- CSS3 --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-950/40 dark:text-blue-300"> <i class="fa-brands fa-css3-alt mr-1 text-sm"></i> CSS3 </span> <!-- JavaScript --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-950/40 dark:text-yellow-300"> <i class="fa-brands fa-js mr-1 text-sm"></i> JavaScript </span> <!-- React --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-sky-100 text-sky-800 dark:bg-sky-950/40 dark:text-sky-300"> <i class="fa-brands fa-react mr-1 text-sm"></i> React </span> <!-- Tailwind CSS --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-cyan-100 text-cyan-800 dark:bg-cyan-950/40 dark:text-cyan-300"> <svg class="h-3 w-3 mr-1 text-cyan-500 fill-current" viewBox="0 0 24 24"> <path d="M12 6.036c-2.667 0-4.333 1.325-5 3.976 1-1.325 2.167-1.855 3.5-1.59 1.524.305 2.614 1.412 3.82 2.64C16.29 13.084 18.23 15.06 22 15.06c2.667 0 4.333-1.325 5-3.977-1 1.325-2.167 1.856-3.5 1.59-1.524-.305-2.614-1.413-3.82-2.64-1.97-2.02-3.91-3.997-7.68-3.997zm-5 9.024c-2.667 0-4.333 1.325-5 3.977 1-1.325 2.167-1.856 3.5-1.59 1.524.305 2.614 1.412 3.82 2.64 1.97 2.02 3.91 3.997 7.68 3.997 2.667 0 4.333-1.325 5-3.976-1 1.325-2.167 1.855-3.5 1.59-1.524-.305-2.614-1.412-3.82-2.64-1.97-2.02-3.91-3.997-7.68-3.997z" /> </svg> Tailwind CSS </span> </div> </div> <!-- Development Tools (Card 2) --> <div class="glassmorphism border border-slate-200/50 dark:border-slate-800/50 rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1"> <div class="h-12 w-12 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center text-xl mb-4"> <i class="fa-solid fa-toolbox"></i> </div> <h3 class="text-lg font-bold mb-4">Workflow & Tools</h3> <div class="flex flex-wrap gap-2"> <!-- Git --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-red-100 text-red-800 dark:bg-red-950/40 dark:text-red-300"> <i class="fa-brands fa-git-alt mr-1 text-sm"></i> Git & GitHub </span> <!-- VS Code --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-950/40 dark:text-indigo-300"> <i class="fa-solid fa-laptop-code mr-1 text-sm"></i> VS Code </span> <!-- Command Line --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-slate-100 text-slate-800 dark:bg-slate-900 dark:text-slate-300"> <i class="fa-solid fa-terminal mr-1 text-sm"></i> Terminal </span> <!-- NPM --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-red-100 text-red-800 dark:bg-red-950/40 dark:text-red-300"> <i class="fa-brands fa-npm mr-1 text-sm"></i> NPM Package </span> </div> </div> <!-- Design & UI/UX (Card 3) --> <div class="glassmorphism border border-slate-200/50 dark:border-slate-800/50 rounded-2xl p-6 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1"> <div class="h-12 w-12 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center text-xl mb-4"> <i class="fa-solid fa-bezier-curve"></i> </div> <h3 class="text-lg font-bold mb-4">UI/UX & Design</h3> <div class="flex flex-wrap gap-2"> <!-- Figma --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-950/40 dark:text-purple-300"> <i class="fa-brands fa-figma mr-1 text-sm"></i> Figma </span> <!-- Responsive Design --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-green-100 text-green-800 dark:bg-green-950/40 dark:text-green-300"> <i class="fa-solid fa-mobile-screen-button mr-1 text-sm"></i> Responsive </span> <!-- Design System --> <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-rose-100 text-rose-800 dark:bg-rose-950/40 dark:text-rose-300"> <i class="fa-solid fa-palette mr-1 text-sm"></i> Design System </span> </div> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="py-20 border-t border-slate-200/40 dark:border-slate-800/40 scroll-mt-20"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <!-- Section Heading --> <div class="text-center max-w-3xl mx-auto space-y-4 mb-16"> <h2 class="text-xs font-bold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">ผลงานล่าสุด</h2> <p class="text-3xl sm:text-4xl font-extrabold tracking-tight">แฟ้มสะสมผลงาน</p> <div class="h-1 w-16 bg-gradient-to-r from-indigo-600 to-accent-500 mx-auto rounded-full"></div> </div> <!-- Projects Grid (2 columns) --> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <!-- Empty Project Slot 1 --> <div class="group relative rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 hover:border-indigo-500 dark:hover:border-indigo-500 transition-all duration-300 min-h-[380px] flex flex-col items-center justify-center p-8 text-center bg-slate-100/10 dark:bg-slate-900/5 backdrop-blur-sm"> <div class="h-16 w-16 rounded-2xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-300 shadow-sm"> <i class="fa-solid fa-folder-plus"></i> </div> <h3 class="text-lg font-bold text-slate-400 dark:text-slate-600 group-hover:text-slate-800 dark:group-hover:text-slate-200 transition-colors"> เตรียมเพิ่มผลงานใหม่ </h3> <p class="text-slate-400 dark:text-slate-600 text-sm max-w-xs mt-2 leading-relaxed"> พื้นที่ว่างสำหรับใส่ภาพประกอบ, เทคโนโลยีที่ใช้พัฒนา, ลิงก์ดูเว็บจริง และซอร์สโค้ดบน GitHub ในอนาคต </p> </div> <!-- Empty Project Slot 2 --> <div class="group relative rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 hover:border-indigo-500 dark:hover:border-indigo-500 transition-all duration-300 min-h-[380px] flex flex-col items-center justify-center p-8 text-center bg-slate-100/10 dark:bg-slate-900/5 backdrop-blur-sm"> <div class="h-16 w-16 rounded-2xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-300 shadow-sm"> <i class="fa-solid fa-folder-plus"></i> </div> <h3 class="text-lg font-bold text-slate-400 dark:text-slate-600 group-hover:text-slate-800 dark:group-hover:text-slate-200 transition-colors"> เตรียมเพิ่มผลงานใหม่ </h3> <p class="text-slate-400 dark:text-slate-600 text-sm max-w-xs mt-2 leading-relaxed"> พื้นที่ว่างสำหรับใส่ภาพประกอบ, เทคโนโลยีที่ใช้พัฒนา, ลิงก์ดูเว็บจริง และซอร์สโค้ดบน GitHub ในอนาคต </p> </div> </div> </div> </section> <!-- Contact Section & Form --> <section id="contact" class="py-20 border-t border-slate-200/40 dark:border-slate-800/40 bg-slate-100/30 dark:bg-slate-900/10 scroll-mt-20 relative"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <!-- Section Heading --> <div class="text-center max-w-3xl mx-auto space-y-4 mb-16"> <h2 class="text-xs font-bold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">ติดต่อร่วมงาน</h2> <p class="text-3xl sm:text-4xl font-extrabold tracking-tight">ส่งข้อความหาผมได้ทันที</p> <div class="h-1 w-16 bg-gradient-to-r from-indigo-600 to-accent-500 mx-auto rounded-full"></div> </div> <!-- Two Columns: Info & Form --> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-stretch"> <!-- Left: Quick Contacts (5 Cols) --> <div class="lg:col-span-5 flex flex-col justify-between space-y-8"> <div class="space-y-4"> <h3 class="text-2xl font-bold">สนใจเสนอโอกาสฝึกงาน หรือติดต่อพูดคุย?</h3> <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed"> หากคุณมีโอกาสฝึกงาน (Internship) โครงการดีๆ หรือมีคำแนะนำสำหรับการพัฒนาทักษะ สามารถส่งข้อความผ่านแบบฟอร์มด้านขวา หรือติดต่อผมผ่านช่องทางต่างๆ ด้านล่างนี้ได้เลยครับ ยินดีตอบกลับเสมอ! </p> </div> <!-- Quick channels list --> <div class="space-y-4"> <!-- Email Item --> <div class="flex items-center space-x-4 p-4 rounded-2xl glassmorphism border border-slate-200/50 dark:border-slate-800/50"> <div class="h-12 w-12 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center text-xl"> <i class="fa-solid fa-envelope"></i> </div> <div> <p class="text-[10px] text-slate-400 font-semibold uppercase tracking-wider">ติดต่อผ่านอีเมล</p> <p class="text-sm font-bold text-slate-800 dark:text-slate-200 hover:text-indigo-500"><a href="mailto:your-email@example.com">[อีเมลของคุณ]</a></p> </div> </div> <!-- Location Item --> <div class="flex items-center space-x-4 p-4 rounded-2xl glassmorphism border border-slate-200/50 dark:border-slate-800/50"> <div class="h-12 w-12 rounded-xl bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center text-xl"> <i class="fa-solid fa-location-dot"></i> </div> <div> <p class="text-[10px] text-slate-400 font-semibold uppercase tracking-wider">ตำแหน่ง / พื้นที่งาน</p> <p class="text-sm font-bold text-slate-800 dark:text-slate-200">เชียงใหม่, ประเทศไทย (หรือ Work from Home)</p> </div> </div> </div> <!-- Social Icons Area --> <div class="pt-4 text-center lg:text-left"> <p class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">พูดคุยแบบโซเชียล</p> <div class="flex justify-center lg:justify-start space-x-4"> <!-- REPLACE: ลิงก์ตรงของโซเชียลคุณ --> <a href="#" class="h-10 w-10 rounded-xl bg-slate-200 hover:bg-indigo-600 dark:bg-slate-800 dark:hover:bg-indigo-500 text-slate-600 dark:text-slate-300 hover:text-white dark:hover:text-white flex items-center justify-center transition-all duration-300 hover:-translate-y-1 shadow-sm"><i class="fa-brands fa-github text-lg"></i></a> <a href="#" class="h-10 w-10 rounded-xl bg-slate-200 hover:bg-indigo-600 dark:bg-slate-800 dark:hover:bg-indigo-500 text-slate-600 dark:text-slate-300 hover:text-white dark:hover:text-white flex items-center justify-center transition-all duration-300 hover:-translate-y-1 shadow-sm"><i class="fa-brands fa-linkedin text-lg"></i></a> <a href="#" class="h-10 w-10 rounded-xl bg-slate-200 hover:bg-indigo-600 dark:bg-slate-800 dark:hover:bg-indigo-500 text-slate-600 dark:text-slate-300 hover:text-white dark:hover:text-white flex items-center justify-center transition-all duration-300 hover:-translate-y-1 shadow-sm"><i class="fa-brands fa-x-twitter text-lg"></i></a> </div> </div> </div> <!-- Right: Contact Form (7 Cols) --> <div class="lg:col-span-7"> <div class="glassmorphism border border-slate-200/50 dark:border-slate-800/50 rounded-3xl p-6 sm:p-8 shadow-xl relative"> <form id="contact-form" class="space-y-5"> <!-- Form row 1 (Name & Email) --> <div class="grid grid-cols-1 sm:grid-cols-2 gap-5"> <div class="space-y-1"> <label for="form-name" class="text-xs font-semibold text-slate-500 dark:text-slate-400">ชื่อของคุณ</label> <input type="text" id="form-name" required placeholder="สมชาย รักเรียน" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-theme"> </div> <div class="space-y-1"> <label for="form-email" class="text-xs font-semibold text-slate-500 dark:text-slate-400">อีเมลสำหรับติดต่อกลับ</label> <input type="email" id="form-email" required placeholder="example@email.com" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-theme"> </div> </div> <!-- Subject --> <div class="space-y-1"> <label for="form-subject" class="text-xs font-semibold text-slate-500 dark:text-slate-400">หัวข้อข้อความ</label> <input type="text" id="form-subject" required placeholder="ติดต่อจ้างงาน / สอบถามรายละเอียดเพิ่มเติม" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-theme"> </div> <!-- Message --> <div class="space-y-1"> <label for="form-message" class="text-xs font-semibold text-slate-500 dark:text-slate-400">รายละเอียดข้อความ</label> <textarea id="form-message" rows="5" required placeholder="เขียนสิ่งที่ต้องการติดต่อหรือข้อมูลหัวข้องานที่นี่..." class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-theme resize-none"></textarea> </div> <!-- Submit button --> <button type="submit" id="form-submit-btn" class="w-full inline-flex items-center justify-center px-6 py-3.5 border border-transparent rounded-2xl text-sm font-semibold text-white bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-600 hover:scale-[1.01] active:scale-[0.99] shadow-lg shadow-indigo-600/10 hover:shadow-indigo-600/25 transition-all duration-200"> <span id="btn-text">ส่งข้อความด่วน</span> <span id="btn-spinner" class="hidden"><i class="fa-solid fa-spinner animate-spin text-sm ml-2"></i> กำลังส่ง...</span> </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-white dark:bg-slate-950 border-t border-slate-200/50 dark:border-slate-900 py-10 transition-theme"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center space-y-4"> <div class="flex items-center justify-center space-x-2"> <div class="h-6 w-6 rounded-md bg-indigo-500 flex items-center justify-center text-white font-extrabold text-xs">P </div> <span class="text-base font-bold tracking-tight text-slate-800 dark:text-white">Portfolio.</span> </div> <p class="text-xs text-slate-500 dark:text-slate-400"> © 2026 [ชื่อของคุณ]. All Rights Reserved. Crafted with <i class="fa-solid fa-heart text-red-500"></i> using HTML & Tailwind CSS. </p> </div> </footer> <!-- Floating Success Toast Notification (hidden initially) --> <div id="toast" class="fixed bottom-6 right-6 z-50 transform translate-y-24 opacity-0 transition-all duration-500 pointer-events-none"> <div class="flex items-center space-x-3 bg-slate-900/95 dark:bg-slate-900 border border-slate-800 backdrop-blur-md rounded-2xl p-4 shadow-2xl"> <div class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center text-white text-sm"> <i class="fa-solid fa-check"></i> </div> <div> <p class="text-xs font-bold text-white">ส่งข้อความเรียบร้อยแล้ว!</p> <p class="text-[10px] text-slate-400">ขอบคุณสำหรับการติดต่อ ผมจะตอบกลับโดยเร็วที่สุด</p> </div> </div> </div> <!-- Floating Back to Top Button --> <button id="back-to-top" type="button" aria-label="Scroll to top" class="fixed bottom-6 left-6 z-40 h-10 w-10 rounded-full bg-indigo-600 hover:bg-indigo-500 text-white flex items-center justify-center shadow-lg hover:scale-110 active:scale-95 transition-all duration-300 opacity-0 pointer-events-none"> <i class="fa-solid fa-arrow-up"></i> </button> <!-- Interactive JavaScript --> <script type="text/javascript"> // --- 1. LIGHT/DARK THEME SWITCH LOGIC --- const themeToggleBtn = document.getElementById('theme-toggle'); const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon'); const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon'); // Sync button icons with active mode on startup if (document.documentElement.classList.contains('dark')) { themeToggleLightIcon.classList.remove('hidden'); } else { themeToggleDarkIcon.classList.remove('hidden'); } themeToggleBtn.addEventListener('click', function () { // Toggle theme classes on document element if (document.documentElement.classList.contains('dark')) { document.documentElement.classList.remove('dark'); localStorage.setItem('theme', 'light'); themeToggleLightIcon.classList.add('hidden'); themeToggleDarkIcon.classList.remove('hidden'); } else { document.documentElement.classList.add('dark'); localStorage.setItem('theme', 'dark'); themeToggleDarkIcon.classList.add('hidden'); themeToggleLightIcon.classList.remove('hidden'); } }); // --- 2. MOBILE MENU DROPDOWN LOGIC --- const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', function () { const isHidden = mobileMenu.classList.contains('hidden'); if (isHidden) { mobileMenu.classList.remove('hidden'); // Simple animation delay triggers setTimeout(() => { mobileMenu.classList.remove('scale-95', 'opacity-0'); mobileMenu.classList.add('scale-100', 'opacity-100'); }, 10); } else { mobileMenu.classList.remove('scale-100', 'opacity-100'); mobileMenu.classList.add('scale-95', 'opacity-0'); setTimeout(() => { mobileMenu.classList.add('hidden'); }, 300); } }); // Close mobile menu when a link is clicked const mobileLinks = mobileMenu.querySelectorAll('a'); mobileLinks.forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.remove('scale-100', 'opacity-100'); mobileMenu.classList.add('scale-95', 'opacity-0'); setTimeout(() => { mobileMenu.classList.add('hidden'); }, 300); }); }); // --- 3. DYNAMIC TYPING CAROUSEL EFFECT --- // REPLACE: เปลี่ยนหรือลบคำเหล่านี้เพื่อความหลากหลายตามต้องการ const rolesList = [ "Frontend Developer", "UI/UX Designer", "Student / Developer", "Tech Enthusiast" ]; let currentRoleIndex = 0; let currentCharIndex = 0; let isDeletingChar = false; const typingSpeedMs = 120; const deletingSpeedMs = 60; const postTypeDelayMs = 2500; // Pause when word is completely typed const typingSpan = document.getElementById('typing-text'); function executeTypeAnimation() { const fullWord = rolesList[currentRoleIndex]; if (isDeletingChar) { // Delete characters typingSpan.textContent = fullWord.substring(0, currentCharIndex - 1); currentCharIndex--; } else { // Add characters typingSpan.textContent = fullWord.substring(0, currentCharIndex + 1); currentCharIndex++; } let speed = isDeletingChar ? deletingSpeedMs : typingSpeedMs; // Handle transition states if (!isDeletingChar && currentCharIndex === fullWord.length) { // Pause at completion before deleting isDeletingChar = true; speed = postTypeDelayMs; } else if (isDeletingChar && currentCharIndex === 0) { // Move to the next word isDeletingChar = false; currentRoleIndex = (currentRoleIndex + 1) % rolesList.length; speed = 500; // Short wait before typing the next word } setTimeout(executeTypeAnimation, speed); } // Run animation once document loads document.addEventListener("DOMContentLoaded", () => { if (typingSpan) executeTypeAnimation(); }); // --- 4. FLOATING CONTACT FORM SIMULATED SEND & TOAST FEEDBACK --- const contactForm = document.getElementById('contact-form'); const submitBtn = document.getElementById('form-submit-btn'); const btnText = document.getElementById('btn-text'); const btnSpinner = document.getElementById('btn-spinner'); const toast = document.getElementById('toast'); if (contactForm) { contactForm.addEventListener('submit', function (e) { e.preventDefault(); // Prevent page reload // Transition button state to loading submitBtn.disabled = true; btnText.classList.add('hidden'); btnSpinner.classList.remove('hidden'); // Simulate network API request delay (1.5 seconds) setTimeout(() => { // Reset form fields contactForm.reset(); // Restore button state submitBtn.disabled = false; btnSpinner.classList.add('hidden'); btnText.classList.remove('hidden'); // Trigger feedback Toast notification toast.classList.remove('translate-y-24', 'opacity-0'); toast.classList.add('translate-y-0', 'opacity-100'); // Auto-hide toast after 4 seconds setTimeout(() => { toast.classList.remove('translate-y-0', 'opacity-100'); toast.classList.add('translate-y-24', 'opacity-0'); }, 4000); }, 1500); }); } // --- 5. FLOATING BACK TO TOP BUTTON LOGIC --- const backToTopBtn = document.getElementById('back-to-top'); window.addEventListener('scroll', () => { if (window.scrollY > 400) { backToTopBtn.classList.remove('opacity-0', 'pointer-events-none'); backToTopBtn.classList.add('opacity-100', 'pointer-events-auto'); } else { backToTopBtn.classList.remove('opacity-100', 'pointer-events-auto'); backToTopBtn.classList.add('opacity-0', 'pointer-events-none'); } }); backToTopBtn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.27 |
proxy
|
phpinfo
|
Settings