File manager - Edit - /home/webapp69.cm.in.th/u69319090017/69319090017/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>MIN PHUMIN | Portfolio</title> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ มินทร์-ภูมินทร์ กนกหทัยพงศ์ นักศึกษา ปวส.1 วิทยาลัยเทคนิคเชียงใหม่"> <!-- Google Fonts: Outfit & Sarabun --> <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> <script> tailwind.config = { theme: { extend: { fontFamily: { sans: ['Outfit', 'Sarabun', 'sans-serif'], }, colors: { brand: { primary: 'var(--brand-primary)', secondary: 'var(--brand-secondary)', accent: 'var(--brand-accent)', deep: 'var(--brand-deep)', card: 'var(--brand-card)', border: 'var(--brand-border)', } } } } } </script> <!-- Inlined Styles to prevent browser caching issues --> <style> :root { /* Default: Noir Silver Glow */ --brand-primary: #ffffff; --brand-secondary: #a3a3a3; --brand-accent: #ffffff; --brand-deep: #000000; --brand-card: #0a0a0a; --brand-border: #262626; --brand-text-glow: rgba(255, 255, 255, 0.2); --brand-glow-color: rgba(255, 255, 255, 0.55); } [data-theme="blue"] { /* Noir Cyan Glow */ --brand-primary: #ffffff; --brand-secondary: #06b6d4; --brand-accent: #22d3ee; --brand-deep: #000000; --brand-card: #08090c; --brand-border: #162030; --brand-text-glow: rgba(6, 182, 212, 0.3); --brand-glow-color: rgba(34, 211, 238, 0.65); } [data-theme="teal"] { /* Noir Violet Glow */ --brand-primary: #ffffff; --brand-secondary: #d946ef; --brand-accent: #f472b6; --brand-deep: #000000; --brand-card: #0c0812; --brand-border: #2a113d; --brand-text-glow: rgba(217, 70, 239, 0.3); --brand-glow-color: rgba(244, 114, 182, 0.65); } /* Glowing Text Shadow on Headings */ h1, h2, h3 { text-shadow: 0 0 10px var(--brand-glow-color), 0 0 20px var(--brand-text-glow) !important; } /* Global Transition for Theme Switching */ body, nav, section, footer, div, span, a, h1, h2, h3, p, label, input, textarea, button { transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--brand-deep); } ::-webkit-scrollbar-thumb { background: var(--brand-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); } /* Nav Link Custom Underline Effect */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background: linear-gradient(to right, var(--brand-primary), var(--brand-accent)); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* Custom card glow & floating animation */ .project-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .project-card:hover { transform: translateY(-8px); border-color: var(--brand-primary); box-shadow: 0 20px 40px -15px var(--brand-text-glow); } /* Skill pills hover scale and glow */ .skill-pill { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .skill-pill:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 20px -6px var(--brand-text-glow); } </style> </head> <body class="min-h-screen bg-gradient-to-b from-brand-deep via-brand-card to-brand-deep text-slate-100 font-sans selection:bg-brand-primary/30 selection:text-brand-accent overflow-x-hidden"> <!-- 1. Header / Navigation --> <nav class="fixed w-full top-0 left-0 z-50 border-b border-brand-border/60 bg-brand-deep/80 backdrop-blur-xl transition-all duration-300" id="navbar"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-20 items-center"> <a href="#home" class="text-2xl font-extrabold tracking-wider bg-gradient-to-r from-brand-accent via-brand-primary to-brand-secondary bg-clip-text text-transparent transition-transform hover:scale-105 duration-300"> MIN.PORTFOLIO </a> <!-- Desktop Menu --> <div class="hidden md:flex space-x-8 items-center"> <a href="#home" class="nav-link text-slate-300 hover:text-brand-primary transition-colors font-medium">หน้าแรก</a> <a href="#about" class="nav-link text-slate-300 hover:text-brand-primary transition-colors font-medium">เกี่ยวกับฉัน</a> <a href="#education" class="nav-link text-slate-300 hover:text-brand-primary transition-colors font-medium">ประวัติการศึกษา</a> <a href="#hobbies" class="nav-link text-slate-300 hover:text-brand-primary transition-colors font-medium">งานอดิเรก</a> <a href="#contact" class="nav-link text-slate-300 hover:text-brand-primary transition-colors font-medium">ติดต่อ</a> <a href="#contact" class="px-6 py-2.5 bg-gradient-to-r from-brand-primary to-brand-secondary hover:from-brand-accent hover:to-brand-primary text-slate-900 font-bold rounded-full transition-all shadow-lg shadow-brand-primary/20 hover:shadow-brand-primary/40 hover:-translate-y-0.5 duration-300"> ติดต่อเลย </a> </div> <!-- Mobile Menu Button --> <div class="md:hidden"> <button id="menu-btn" class="p-2 text-slate-400 hover:text-brand-primary transition-colors focus:outline-none"> <i data-lucide="menu" class="w-8 h-8"></i> </button> </div> </div> </div> <!-- Mobile Dropdown --> <div id="mobile-menu" class="hidden md:hidden absolute w-full left-0 bg-brand-deep/95 border-b border-brand-border/80 py-6 px-6 space-y-4 shadow-2xl backdrop-blur-xl transition-all duration-300"> <a href="#home" class="mobile-nav-link block text-lg font-medium text-slate-300 hover:text-brand-primary py-2">หน้าแรก</a> <a href="#about" class="mobile-nav-link block text-lg font-medium text-slate-300 hover:text-brand-primary py-2">เกี่ยวกับฉัน</a> <a href="#education" class="mobile-nav-link block text-lg font-medium text-slate-300 hover:text-brand-primary py-2">ประวัติการศึกษา</a> <a href="#hobbies" class="mobile-nav-link block text-lg font-medium text-slate-300 hover:text-brand-primary py-2">งานอดิเรก</a> <a href="#contact" class="mobile-nav-link block text-lg font-medium text-slate-300 hover:text-brand-primary py-2">ติดต่อ</a> <a href="#contact" class="mobile-nav-link block w-full text-center py-3 bg-gradient-to-r from-brand-primary to-brand-secondary text-slate-900 font-bold rounded-xl"> ติดต่อเลย </a> </div> </nav> <!-- 2. Hero Section --> <section id="home" class="relative pt-40 pb-24 px-4 overflow-hidden flex items-center min-h-screen"> <!-- Cool Tone glowing backgrounds --> <div class="absolute top-1/4 left-1/3 w-[500px] h-[500px] bg-brand-primary/10 rounded-full blur-[140px] pointer-events-none"> </div> <div class="absolute bottom-1/4 right-1/3 w-[600px] h-[600px] bg-brand-secondary/10 rounded-full blur-[160px] pointer-events-none"> </div> <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-16 relative z-10 w-full"> <div class="text-center md:text-left md:w-1/2 space-y-8"> <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-brand-primary/10 border border-brand-primary/20 text-brand-accent text-sm font-semibold tracking-wide uppercase"> <i data-lucide="sparkles" class="w-4 h-4 text-brand-primary animate-pulse"></i> ยินดีต้อนรับสู่พอร์ตโฟลิโอของฉัน </div> <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold leading-tight tracking-tight"> สวัสดีครับ ผมชื่อ <br> <span class="bg-gradient-to-r from-brand-accent via-brand-primary to-brand-secondary bg-clip-text text-transparent">ภูมินทร์ กนกหทัยพงศ์</span><br> <span class="text-2xl sm:text-3xl md:text-4xl text-slate-300 font-medium font-sans block mt-2">ชื่อเล่น: มินทร์ (Min)</span> </h1> <p class="text-lg md:text-xl text-slate-300 max-w-lg mx-auto md:mx-0 leading-relaxed font-light"> นักศึกษา ปวส.1 วิทยาลัยเทคนิคเชียงใหม่ ที่มีใจรักในการเรียนรู้สิ่งใหม่ๆ ทำอาหาร เล่นเกม และรักความเรียบง่ายในแบบของตัวเอง </p> <div class="flex flex-wrap justify-center md:justify-start gap-4"> <a href="#about" class="px-8 py-4 bg-gradient-to-r from-brand-primary to-brand-secondary hover:from-brand-accent hover:to-brand-primary text-slate-900 font-bold rounded-full transition-all shadow-xl shadow-brand-primary/20 hover:shadow-brand-primary/40 hover:-translate-y-1 duration-300"> ทำความรู้จักฉัน </a> <a href="#contact" class="px-8 py-4 border border-brand-border hover:border-brand-primary/50 hover:bg-brand-primary/5 text-slate-300 hover:text-brand-primary rounded-full transition-all hover:-translate-y-1 duration-300"> ข้อมูลการติดต่อ </a> </div> </div> <div class="md:w-1/2 flex justify-center"> <div class="relative group"> <!-- Glow frame --> <div class="absolute -inset-1.5 bg-gradient-to-r from-brand-accent via-brand-primary to-brand-secondary rounded-3xl blur opacity-30 group-hover:opacity-60 transition duration-1000 group-hover:duration-200"> </div> <div class="relative w-72 h-72 md:w-96 md:h-96 rounded-3xl bg-brand-card border border-brand-border/80 overflow-hidden shadow-2xl transition-transform duration-500 hover:scale-[1.02]"> <img src="profile.jpg" alt="Min Profile" class="w-full h-full object-cover transition-all duration-700 hover:scale-105" /> </div> </div> </div> </div> </section> <!-- 3. About Me Section --> <section id="about" class="py-32 bg-brand-card/40 relative border-y border-brand-border/40"> <div class="max-w-4xl mx-auto px-6"> <div class="text-center space-y-4 mb-16"> <h2 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-brand-accent to-brand-primary bg-clip-text text-transparent"> เกี่ยวกับตัวฉัน (About Me)</h2> <div class="w-20 h-1 bg-gradient-to-r from-brand-primary to-brand-secondary mx-auto rounded-full"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch"> <!-- Info Card --> <div class="bg-brand-card border border-brand-border p-8 rounded-2xl flex flex-col justify-between space-y-6"> <h3 class="text-2xl font-bold text-brand-primary flex items-center gap-2"> <i data-lucide="user" class="w-6 h-6"></i> ข้อมูลส่วนตัว </h3> <ul class="space-y-4 text-slate-300"> <li class="flex items-start gap-3"> <span class="font-semibold text-brand-accent min-w-[100px]">ชื่อ-นามสกุล:</span> <span>ภูมินทร์ กนกหทัยพงศ์</span> </li> <li class="flex items-start gap-3"> <span class="font-semibold text-brand-accent min-w-[100px]">ชื่อเล่น:</span> <span>มินทร์ (Min)</span> </li> <li class="flex items-start gap-3"> <span class="font-semibold text-brand-accent min-w-[100px]">วันเกิด:</span> <span>28 เมษายน 2550 (28 / 04 / 2550)</span> </li> <li class="flex items-start gap-3"> <span class="font-semibold text-brand-accent min-w-[100px]">อายุ:</span> <span>19 ปี</span> </li> <li class="flex items-start gap-3"> <span class="font-semibold text-brand-accent min-w-[100px]">สัญชาติ:</span> <span>ไทย</span> </li> <li class="flex items-start gap-3"> <span class="font-semibold text-brand-accent min-w-[100px]">ที่อยู่:</span> <span>499/52-53 ม.6 ต.สันทรายน้อย อ.สันทราย จ.เชียงใหม่</span> </li> </ul> </div> <!-- Fun Fact and Skills --> <div class="space-y-6 flex flex-col justify-between"> <div class="bg-brand-card border border-brand-border p-8 rounded-2xl shadow-lg hover:shadow-rose-950/10 transition-shadow"> <h3 class="text-2xl font-bold text-rose-400 flex items-center gap-2 mb-4"> <i data-lucide="alert-triangle" class="w-6 h-6 animate-bounce"></i> สิ่งที่ไม่ชอบ/แพ้ </h3> <p class="text-slate-300 leading-relaxed"> ไม่ค่อยชอบทาน <strong class="text-rose-300 font-bold">ปู</strong> และ <strong class="text-rose-300 font-bold">สับปะรด</strong> เพราะเวลาทานแล้วจะรู้สึกคันยิบๆ นิดหน่อยครับ </p> </div> <div class="bg-brand-card border border-brand-border p-8 rounded-2xl flex-grow flex flex-col justify-between"> <div> <h3 class="text-xl font-bold text-brand-primary flex items-center gap-2 mb-4"> <i data-lucide="languages" class="w-5 h-5"></i> ทักษะทางภาษา </h3> <div class="flex flex-wrap gap-2 mb-6"> <span class="px-4 py-2 rounded-xl bg-brand-primary/10 border border-brand-primary/30 text-brand-accent text-sm font-medium"> ภาษาไทย (Native) </span> </div> </div> <div> <h3 class="text-xl font-bold text-brand-primary flex items-center gap-2 mb-4"> <i data-lucide="activity" class="w-5 h-5"></i> ทักษะ / งานอดิเรกหลัก </h3> <div class="flex flex-wrap gap-2" id="skills-container"> <!-- Injected dynamically from app.js --> </div> </div> </div> </div> </div> </div> </section> <!-- 4. Education Section --> <section id="education" class="py-32 px-6 max-w-6xl mx-auto"> <div class="text-center space-y-4 mb-20"> <h2 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-brand-accent to-brand-primary bg-clip-text text-transparent"> ประวัติการศึกษา (Education)</h2> <div class="w-20 h-1 bg-gradient-to-r from-brand-primary to-brand-secondary mx-auto rounded-full"></div> </div> <!-- Timeline of Education --> <div class="relative border-l border-brand-border max-w-3xl mx-auto pl-8 space-y-12"> <!-- Step 1: Current --> <div class="relative"> <div class="absolute -left-[41px] top-1 bg-brand-primary text-slate-900 rounded-full p-2 border-4 border-brand-deep shadow-lg"> <i data-lucide="graduation-cap" class="w-5 h-5"></i> </div> <div> <span class="text-xs font-bold text-brand-accent uppercase tracking-wider bg-brand-primary/10 px-3 py-1 rounded-full border border-brand-primary/20">ปัจจุบัน</span> <h3 class="text-2xl font-bold mt-2 text-slate-100">ประกาศนียบัตรวิชาชีพชั้นสูง (ปวส. ชั้นปีที่ 1)</h3> <p class="text-brand-accent font-medium">วิทยาลัยเทคนิคเชียงใหม่</p> <p class="text-slate-400 mt-2 font-light">กำลังศึกษาต่อระดับวิชาชีพชั้นสูง มุ่งเน้นทางด้านเทคโนโลยีคอมพิวเตอร์และการเขียนโปรแกรม</p> </div> </div> <!-- Step 2: Vocational --> <div class="relative"> <div class="absolute -left-[41px] top-1 bg-brand-border text-brand-accent rounded-full p-2 border-4 border-brand-deep shadow-md"> <i data-lucide="book-open" class="w-5 h-5"></i> </div> <div> <span class="text-xs font-bold text-slate-400 uppercase tracking-wider bg-slate-800/40 px-3 py-1 rounded-full border border-brand-border/40">จบปีการศึกษา</span> <h3 class="text-2xl font-bold mt-2 text-slate-100">ประกาศนียบัตรวิชาชีพ (ปวช.)</h3> <p class="text-brand-accent font-medium">วิทยาลัยเทคนิคเชียงใหม่</p> <p class="text-slate-400 mt-2 font-light">สำเร็จการศึกษาระดับสายอาชีพขั้นต้น ได้รับความรู้พื้นฐานด้านวิศวกรรมและเทคโนโลยี</p> </div> </div> <!-- Step 3: High School --> <div class="relative"> <div class="absolute -left-[41px] top-1 bg-brand-border text-brand-accent rounded-full p-2 border-4 border-brand-deep shadow-md"> <i data-lucide="book" class="w-5 h-5"></i> </div> <div> <span class="text-xs font-bold text-slate-400 uppercase tracking-wider bg-slate-800/40 px-3 py-1 rounded-full border border-brand-border/40">จบปีการศึกษา</span> <h3 class="text-2xl font-bold mt-2 text-slate-100">มัธยมศึกษาตอนต้น</h3> <p class="text-brand-accent font-medium">โรงเรียนเทพบดินทร์วิทยาเชียงใหม่</p> <p class="text-slate-400 mt-2 font-light">สำเร็จการศึกษาระดับมัธยมศึกษาตอนต้นด้วยผลการเรียนและความประพฤติที่ดี</p> </div> </div> </div> </section> <!-- 5. Hobbies & Interests Section --> <section id="hobbies" class="py-32 bg-brand-card/30 border-t border-brand-border/40"> <div class="max-w-6xl mx-auto px-6"> <div class="text-center space-y-4 mb-20"> <h2 class="text-4xl font-bold tracking-tight bg-gradient-to-r from-brand-accent to-brand-primary bg-clip-text text-transparent"> งานอดิเรก & สิ่งที่ชอบ (Hobbies & Interests)</h2> <div class="w-20 h-1 bg-gradient-to-r from-brand-primary to-brand-secondary mx-auto rounded-full"></div> <p class="text-slate-400 font-light mt-4">กิจกรรมสุดโปรดที่ทำในเวลาว่างเพื่อความผ่อนคลายและพัฒนาตัวเอง</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-grid"> <!-- Injected dynamically from app.js as Hobby cards --> </div> </div> </section> <!-- 6. Contact Section --> <section id="contact" class="py-32 bg-brand-deep text-white px-6 border-t border-brand-border/40 relative"> <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-primary/5 rounded-full blur-[150px] pointer-events-none"> </div> <div class="max-w-4xl mx-auto text-center relative z-10"> <h2 class="text-4xl font-bold mb-4 tracking-tight bg-gradient-to-r from-brand-accent to-brand-primary bg-clip-text text-transparent"> ช่องทางการติดต่อ</h2> <p class="text-slate-400 font-light mb-12 max-w-md mx-auto">สามารถติดต่อสอบถามข้อมูล หรือแลกเปลี่ยนเรื่องราวต่างๆ ได้ผ่านทางข้อมูลด้านล่างนี้เลยครับ</p> <!-- Contact Info Boxes --> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto mb-16"> <div class="p-6 bg-brand-card border border-brand-border rounded-2xl flex items-center gap-4 text-left shadow-lg"> <div class="p-4 bg-brand-primary/10 text-brand-primary rounded-xl"> <i data-lucide="phone" class="w-6 h-6"></i> </div> <div> <p class="text-xs text-slate-400 font-semibold uppercase tracking-wider">เบอร์โทรศัพท์</p> <a href="tel:0806202522" class="text-lg font-bold text-slate-100 hover:text-brand-primary transition-colors">080-620-2522</a> </div> </div> <div class="p-6 bg-brand-card border border-brand-border rounded-2xl flex items-center gap-4 text-left shadow-lg"> <div class="p-4 bg-brand-primary/10 text-brand-primary rounded-xl"> <i data-lucide="mail" class="w-6 h-6"></i> </div> <div> <p class="text-xs text-slate-400 font-semibold uppercase tracking-wider">อีเมล</p> <a href="mailto:rori00723@gmail.com" class="text-lg font-bold text-slate-100 hover:text-brand-primary transition-colors">rori00723@gmail.com</a> </div> </div> </div> <!-- Contact Form --> <form id="contact-form" class="max-w-xl mx-auto space-y-6 text-left bg-brand-card/40 backdrop-blur-md p-8 rounded-2xl border border-brand-border/80 shadow-2xl"> <div class="space-y-2"> <label for="name" class="text-sm font-semibold text-slate-300">ชื่อของคุณ</label> <input type="text" id="name" required placeholder="พิมพ์ชื่อของคุณที่นี่..." class="w-full p-4 rounded-xl bg-brand-deep border border-brand-border/80 focus:border-brand-primary focus:outline-none focus:ring-1 focus:ring-brand-primary text-slate-100 transition-all" /> </div> <div class="space-y-2"> <label for="email" class="text-sm font-semibold text-slate-300">อีเมลของคุณ</label> <input type="email" id="email" required placeholder="yourname@example.com" class="w-full p-4 rounded-xl bg-brand-deep border border-brand-border/80 focus:border-brand-primary focus:outline-none focus:ring-1 focus:ring-brand-primary text-slate-100 transition-all" /> </div> <div class="space-y-2"> <label for="message" class="text-sm font-semibold text-slate-300">ข้อความที่ต้องการส่ง</label> <textarea id="message" required placeholder="รายละเอียดที่ต้องการติดต่อส่งข้อความหาผม..." rows="5" class="w-full p-4 rounded-xl bg-brand-deep border border-brand-border/80 focus:border-brand-primary focus:outline-none focus:ring-1 focus:ring-brand-primary text-slate-100 transition-all"></textarea> </div> <button type="submit" class="w-full py-4 bg-gradient-to-r from-brand-primary to-brand-secondary hover:from-brand-accent hover:to-brand-primary text-slate-900 font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-brand-primary/20 active:scale-[0.98]"> ส่งข้อความ </button> </form> </div> </section> <!-- Footer --> <footer class="py-8 bg-brand-deep border-t border-brand-border/40 text-center text-slate-500 text-sm"> <p>© 2026 MIN.PORTFOLIO (ภูมินทร์ กนกหทัยพงศ์). All rights reserved.</p> </footer> <!-- Toast Notification --> <div id="toast" class="fixed bottom-8 right-8 z-50 transform translate-y-24 opacity-0 transition-all duration-300 ease-out bg-brand-card border border-brand-border rounded-xl p-4 shadow-2xl flex items-center gap-3"> <div class="p-2 rounded-lg bg-brand-primary/10 text-brand-primary"> <i data-lucide="check-circle" class="w-5 h-5"></i> </div> <div> <p class="font-bold text-sm text-slate-200">ส่งข้อความสำเร็จ!</p> <p class="text-xs text-slate-400">ขอบคุณครับ จะรีบติดต่อกลับไปนะครับ</p> </div> </div> <!-- Floating Theme Switcher widget --> <div class="fixed bottom-24 left-4 sm:bottom-8 sm:left-8 z-50 bg-brand-card/90 backdrop-blur-md border border-brand-border p-3 rounded-2xl sm:rounded-full shadow-2xl flex flex-col sm:flex-row items-center gap-3"> <!-- Glow/Accent Color Picker --> <div class="flex items-center gap-2"> <div class="text-xs font-semibold text-slate-400 pl-2">สีเงาเรืองแสง:</div> <div class="relative group flex items-center"> <input type="color" id="custom-color-picker" oninput="window.customizeColor(this.value)" class="w-6 h-6 rounded-full border border-white/20 hover:scale-110 active:scale-95 transition-all duration-300 cursor-pointer bg-transparent" title="เลือกสีเงาเรืองแสงเอง" value="#ffffff"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-brand-deep border border-brand-border text-[10px] text-slate-200 px-2 py-0.5 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">ปรับสีเงา</span> </div> </div> <div class="hidden sm:block w-px h-4 bg-brand-border"></div> <!-- Background Color Picker --> <div class="flex items-center gap-2"> <div class="text-xs font-semibold text-slate-400 pl-2">สีพื้นหลัง:</div> <div class="relative group flex items-center"> <input type="color" id="custom-bg-picker" oninput="window.customizeBgColor(this.value)" class="w-6 h-6 rounded-full border border-white/20 hover:scale-110 active:scale-95 transition-all duration-300 cursor-pointer bg-transparent" title="เลือกสีพื้นหลังเอง" value="#000000"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-brand-deep border border-brand-border text-[10px] text-slate-200 px-2 py-0.5 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">ปรับสีพื้น</span> </div> </div> <div class="w-px h-4 bg-brand-border"></div> <!-- Text Color Picker --> <div class="flex items-center gap-2"> <div class="text-xs font-semibold text-slate-400 pl-2">สีตัวหนังสือ:</div> <div class="relative group flex items-center"> <input type="color" id="custom-text-picker" oninput="window.customizeTextColor(this.value)" class="w-6 h-6 rounded-full border border-white/20 hover:scale-110 active:scale-95 transition-all duration-300 cursor-pointer bg-transparent" title="เลือกสีตัวหนังสือเอง" value="#ffffff"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-brand-deep border border-brand-border text-[10px] text-slate-200 px-2 py-0.5 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">ปรับสีตัวหนังสือ</span> </div> </div> <div class="w-px h-4 bg-brand-border"></div> <!-- Quick Default Colors --> <div class="flex items-center gap-1.5"> <button onclick="switchTheme('mint', event)" class="w-5 h-5 rounded-full bg-[#10b981] border border-white/10 hover:scale-110 active:scale-95 transition-all duration-300 relative group" title="ธีมเขียวมินต์"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-brand-deep border border-brand-border text-[10px] text-slate-200 px-2 py-0.5 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">มินต์</span> </button> <button onclick="switchTheme('blue', event)" class="w-5 h-5 rounded-full bg-[#06b6d4] border border-white/10 hover:scale-110 active:scale-95 transition-all duration-300 relative group" title="ธีมฟ้าน้ำทะเล"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-brand-deep border border-brand-border text-[10px] text-slate-200 px-2 py-0.5 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">ฟ้า</span> </button> <button onclick="switchTheme('teal', event)" class="w-5 h-5 rounded-full bg-[#0d9488] border border-white/10 hover:scale-110 active:scale-95 transition-all duration-300 relative group" title="ธีมเขียวหัวเป็ด"> <span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-brand-deep border border-brand-border text-[10px] text-slate-200 px-2 py-0.5 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap">หัวเป็ด</span> </button> </div> </div> <!-- Sticky Bottom Navigation Bar for Mobile --> <div id="mobile-bottom-nav" class="fixed bottom-5 left-1/2 -translate-x-1/2 z-50 w-[90%] max-w-md bg-brand-card/90 backdrop-blur-xl border border-brand-border/80 rounded-2xl py-2 px-4 shadow-[0_10px_35px_-5px_rgba(0,0,0,0.8)] flex justify-between items-center transition-all duration-300 md:hidden"> <a href="#home" class="mobile-bottom-nav-link flex flex-col items-center gap-1 text-slate-400 hover:text-brand-primary active:scale-95 transition-all duration-200 flex-1 py-1"> <i data-lucide="home" class="w-5 h-5"></i> <span class="text-[10px] font-medium font-sans">หน้าแรก</span> </a> <a href="#about" class="mobile-bottom-nav-link flex flex-col items-center gap-1 text-slate-400 hover:text-brand-primary active:scale-95 transition-all duration-200 flex-1 py-1"> <i data-lucide="user" class="w-5 h-5"></i> <span class="text-[10px] font-medium font-sans">เกี่ยวกับฉัน</span> </a> <a href="#education" class="mobile-bottom-nav-link flex flex-col items-center gap-1 text-slate-400 hover:text-brand-primary active:scale-95 transition-all duration-200 flex-1 py-1"> <i data-lucide="graduation-cap" class="w-5 h-5"></i> <span class="text-[10px] font-medium font-sans">การศึกษา</span> </a> <a href="#hobbies" class="mobile-bottom-nav-link flex flex-col items-center gap-1 text-slate-400 hover:text-brand-primary active:scale-95 transition-all duration-200 flex-1 py-1"> <i data-lucide="heart" class="w-5 h-5"></i> <span class="text-[10px] font-medium font-sans">งานอดิเรก</span> </a> <button id="mobile-burger-btn" class="flex flex-col items-center gap-1 text-slate-400 hover:text-brand-primary active:scale-95 transition-all duration-200 flex-1 py-1 focus:outline-none"> <i data-lucide="menu" class="w-5 h-5 transition-transform duration-300" id="burger-icon-icon"></i> <span class="text-[10px] font-medium font-sans">เมนู</span> </button> </div> <!-- Bottom Sheet Overlay & Drawer for Burger Menu --> <div id="mobile-bottom-sheet" class="fixed inset-0 z-40 bg-black/75 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 md:hidden"> <div id="mobile-bottom-sheet-content" class="fixed bottom-0 left-0 right-0 bg-brand-card border-t border-brand-border/80 rounded-t-[2rem] p-6 pb-10 shadow-2xl transform translate-y-full transition-transform duration-300 ease-out max-h-[85vh] overflow-y-auto"> <!-- Drag handle / top bar indicator --> <div class="w-12 h-1 bg-brand-border rounded-full mx-auto mb-6"></div> <div class="flex justify-between items-center mb-6"> <h3 class="text-xl font-bold bg-gradient-to-r from-brand-accent to-brand-primary bg-clip-text text-transparent">เมนูนำทาง</h3> <button id="mobile-bottom-sheet-close" class="p-2 text-slate-400 hover:text-brand-primary transition-colors focus:outline-none"> <i data-lucide="x" class="w-6 h-6"></i> </button> </div> <!-- Links Grid --> <div class="grid grid-cols-2 gap-4 mb-6"> <a href="#home" class="mobile-sheet-link flex items-center gap-3 p-4 bg-brand-deep/50 border border-brand-border/40 rounded-xl hover:border-brand-primary/40 transition-all"> <div class="p-2.5 bg-brand-primary/10 text-brand-primary rounded-lg"> <i data-lucide="home" class="w-5 h-5"></i> </div> <span class="font-medium text-slate-200 text-sm">หน้าแรก</span> </a> <a href="#about" class="mobile-sheet-link flex items-center gap-3 p-4 bg-brand-deep/50 border border-brand-border/40 rounded-xl hover:border-brand-primary/40 transition-all"> <div class="p-2.5 bg-brand-primary/10 text-brand-primary rounded-lg"> <i data-lucide="user" class="w-5 h-5"></i> </div> <span class="font-medium text-slate-200 text-sm">เกี่ยวกับฉัน</span> </a> <a href="#education" class="mobile-sheet-link flex items-center gap-3 p-4 bg-brand-deep/50 border border-brand-border/40 rounded-xl hover:border-brand-primary/40 transition-all"> <div class="p-2.5 bg-brand-primary/10 text-brand-primary rounded-lg"> <i data-lucide="graduation-cap" class="w-5 h-5"></i> </div> <span class="font-medium text-slate-200 text-sm">การศึกษา</span> </a> <a href="#hobbies" class="mobile-sheet-link flex items-center gap-3 p-4 bg-brand-deep/50 border border-brand-border/40 rounded-xl hover:border-brand-primary/40 transition-all"> <div class="p-2.5 bg-brand-primary/10 text-brand-primary rounded-lg"> <i data-lucide="heart" class="w-5 h-5"></i> </div> <span class="font-medium text-slate-200 text-sm">งานอดิเรก</span> </a> <a href="#contact" class="mobile-sheet-link col-span-2 flex items-center gap-4 p-4 bg-gradient-to-r from-brand-primary/10 to-brand-secondary/10 border border-brand-primary/20 rounded-xl hover:border-brand-primary/50 transition-all"> <div class="p-2.5 bg-brand-primary/20 text-brand-primary rounded-lg"> <i data-lucide="phone" class="w-5 h-5"></i> </div> <div class="text-left"> <div class="font-bold text-brand-primary text-sm">ติดต่อฉัน</div> <div class="text-xs text-slate-400">ส่งข้อความหาฉันโดยตรง</div> </div> </a> </div> <!-- Quick Action Buttons --> <div class="border-t border-brand-border/60 pt-6"> <p class="text-xs text-slate-500 mb-4 text-center">ช่องทางการติดต่อด่วน</p> <div class="flex justify-around items-center"> <a href="tel:0806202522" class="flex flex-col items-center gap-1.5 text-slate-300 hover:text-brand-primary transition-colors"> <div class="p-3 bg-brand-card border border-brand-border rounded-full hover:border-brand-primary/40"> <i data-lucide="phone" class="w-5 h-5 text-brand-accent"></i> </div> <span class="text-xs">โทรหาฉัน</span> </a> <a href="mailto:rori00723@gmail.com" class="flex flex-col items-center gap-1.5 text-slate-300 hover:text-brand-primary transition-colors"> <div class="p-3 bg-brand-card border border-brand-border rounded-full hover:border-brand-primary/40"> <i data-lucide="mail" class="w-5 h-5 text-brand-accent"></i> </div> <span class="text-xs">ส่งอีเมล</span> </a> </div> </div> </div> </div> <!-- Initialize Lucide Icons & Custom Script --> <script src="https://unpkg.com/lucide@latest"></script> <script src="app.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.33 |
proxy
|
phpinfo
|
Settings