File manager - Edit - /home/webapp69.cm.in.th/u69319090037/portfoeilo/index.html
Back
<!DOCTYPE html> <html lang="th" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ศุภวัฒน์ ใจคำ (ขวัญ) - Portfolio</title> <!-- SEO Meta Tags --> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ ศุภวัฒน์ ใจคำ (ขวัญ) - นักศึกษาผู้มีความเชี่ยวชาญด้านกีฬาและกำลังศึกษาด้านเทคโนโลยี"> <meta name="author" content="ศุภวัฒน์ ใจคำ"> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { fontFamily: { sans: ['Prompt', 'Inter', 'sans-serif'], } } } } </script> <!-- Google Fonts (Prompt & Inter) --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Prompt: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"> <!-- Custom Style for Theme Variables and Transitions --> <style> /* Define Color Palette for 3 Themes */ :root { /* 1. DARK THEME (Default) */ --bg-color: #0b0f19; --bg-alt: #080c14; --text-primary: #f8fafc; --text-secondary: #94a3b8; --card-bg: rgba(15, 23, 42, 0.6); --card-border: rgba(255, 255, 255, 0.08); --card-hover-border: rgba(56, 189, 248, 0.4); --card-glow: rgba(56, 189, 248, 0.15); --accent: #38bdf8; --accent-gradient-start: #38bdf8; --accent-gradient-end: #3b82f6; --accent-hover: #0ea5e9; --accent-text: #0f172a; --border-color: rgba(255, 255, 255, 0.06); --dashed-border: #1e293b; --badge-bg: rgba(56, 189, 248, 0.1); --badge-text: #38bdf8; --nav-bg: rgba(11, 15, 25, 0.85); } [data-theme="light"] { /* 2. LIGHT THEME */ --bg-color: #ffffff; --bg-alt: #f8fafc; --text-primary: #0f172a; --text-secondary: #475569; --card-bg: rgba(241, 245, 249, 0.8); --card-border: rgba(15, 23, 42, 0.08); --card-hover-border: rgba(2, 132, 199, 0.4); --card-glow: rgba(2, 132, 199, 0.1); --accent: #0284c7; --accent-gradient-start: #0ea5e9; --accent-gradient-end: #2563eb; --accent-hover: #0369a1; --accent-text: #ffffff; --border-color: rgba(15, 23, 42, 0.08); --dashed-border: #cbd5e1; --badge-bg: rgba(2, 132, 199, 0.1); --badge-text: #0284c7; --nav-bg: rgba(255, 255, 255, 0.85); } [data-theme="cream"] { /* 3. WARM CREAM THEME */ --bg-color: #fdfbf7; --bg-alt: #f5f0e5; --text-primary: #2d241e; --text-secondary: #605246; --card-bg: rgba(245, 240, 229, 0.85); --card-border: rgba(45, 36, 30, 0.1); --card-hover-border: rgba(217, 119, 6, 0.4); --card-glow: rgba(217, 119, 6, 0.1); --accent: #d97706; --accent-gradient-start: #f59e0b; --accent-gradient-end: #d97706; --accent-hover: #b45309; --accent-text: #ffffff; --border-color: rgba(45, 36, 30, 0.08); --dashed-border: #d7cdbc; --badge-bg: rgba(217, 119, 6, 0.1); --badge-text: #d97706; --nav-bg: rgba(253, 251, 247, 0.85); } /* Smooth CSS Transition for color switching */ * { transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Apply theme variables */ body { background-color: var(--bg-color); color: var(--text-primary); } .glass-card { background-color: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .glow-hover:hover { box-shadow: 0 0 25px var(--card-glow); border-color: var(--card-hover-border); } </style> </head> <body class="font-sans selection:bg-amber-500 selection:text-white overflow-x-hidden"> <!-- NAV BAR --> <nav class="fixed top-0 left-0 w-full z-50 backdrop-blur-md border-b" style="background-color: var(--nav-bg); border-color: var(--border-color);"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16"> <!-- Logo --> <a href="#" class="text-xl font-bold tracking-wider hover:opacity-80 transition-opacity" style="color: var(--accent);"> KHWAN.DEV </a> <!-- Desktop Navigation Menu --> <div class="hidden md:flex space-x-8 text-sm font-medium"> <a href="#" class="hover:opacity-100 transition-colors" style="color: var(--text-secondary);">หน้าแรก</a> <a href="#about" class="hover:opacity-100 transition-colors" style="color: var(--text-secondary);">เกี่ยวกับฉัน</a> <a href="#skills" class="hover:opacity-100 transition-colors" style="color: var(--text-secondary);">ความสามารถ</a> <a href="#contact" class="hover:opacity-100 transition-colors" style="color: var(--text-secondary);">ติดต่อ</a> </div> <!-- Theme Switcher & Contact CTA Container --> <div class="flex items-center gap-4"> <!-- Dynamic Theme Buttons (Desktop) --> <div class="flex items-center gap-1.5 p-1 rounded-full border text-xs" style="background-color: var(--card-bg); border-color: var(--border-color);"> <button onclick="setTheme('dark')" id="btn-theme-dark" class="px-2.5 py-1 rounded-full font-medium transition-all" title="Dark Mode"> <i class="fa-solid fa-moon mr-1"></i> มืด </button> <button onclick="setTheme('light')" id="btn-theme-light" class="px-2.5 py-1 rounded-full font-medium transition-all" title="Light Mode"> <i class="fa-solid fa-sun mr-1"></i> สว่าง </button> <button onclick="setTheme('cream')" id="btn-theme-cream" class="px-2.5 py-1 rounded-full font-medium transition-all" title="Warm Cream Mode"> <i class="fa-solid fa-cookie-bite mr-1"></i> ครีม </button> </div> <!-- Contact button --> <a href="#contact" class="hidden lg:block px-4 py-2 text-xs font-semibold rounded-full border transition-all duration-300" style="color: var(--accent); border-color: var(--card-hover-border); box-shadow: 0 0 10px var(--card-glow);"> ติดต่อฉัน </a> <!-- Mobile Menu Button --> <button id="mobile-menu-btn" aria-label="Toggle Menu" class="md:hidden focus:outline-none" style="color: var(--text-primary);"> <i class="fa-solid fa-bars text-xl"></i> </button> </div> </div> </div> <!-- Mobile Navigation Menu --> <div id="mobile-menu" class="hidden md:hidden border-b px-4 pt-2 pb-4 space-y-3" style="background-color: var(--bg-color); border-color: var(--border-color);"> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium transition-colors" style="color: var(--text-secondary);">หน้าแรก</a> <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium transition-colors" style="color: var(--text-secondary);">เกี่ยวกับฉัน</a> <a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium transition-colors" style="color: var(--text-secondary);">ความสามารถ</a> <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium transition-colors" style="color: var(--text-secondary);">ติดต่อ</a> <!-- Theme Switcher (Mobile) --> <div class="pt-3 border-t flex items-center justify-between" style="border-color: var(--border-color);"> <span class="text-xs font-semibold uppercase tracking-wider" style="color: var(--text-secondary);">เปลี่ยนธีมสีเว็บ:</span> <div class="flex items-center gap-1.5 p-1 rounded-full border text-xs" style="background-color: var(--card-bg); border-color: var(--border-color);"> <button onclick="setTheme('dark')" id="mobile-btn-theme-dark" class="px-2.5 py-1 rounded-full font-medium transition-all">มืด</button> <button onclick="setTheme('light')" id="mobile-btn-theme-light" class="px-2.5 py-1 rounded-full font-medium transition-all">สว่าง</button> <button onclick="setTheme('cream')" id="mobile-btn-theme-cream" class="px-2.5 py-1 rounded-full font-medium transition-all">ครีม</button> </div> </div> </div> </nav> <!-- HERO SECTION --> <header class="relative min-h-screen flex items-center justify-center pt-24 pb-16 overflow-hidden"> <!-- Background Gradient Glows (Slightly faded for Light/Cream themes via styling) --> <div class="absolute top-1/4 left-1/4 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-sky-500/10 rounded-full blur-[100px] pointer-events-none opacity-40"> </div> <div class="absolute bottom-1/4 right-1/4 translate-x-1/2 translate-y-1/2 w-96 h-96 bg-amber-500/5 rounded-full blur-[120px] pointer-events-none opacity-40"> </div> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 z-10 w-full"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- Left: Profile Details --> <div class="lg:col-span-7 text-center lg:text-left order-2 lg:order-1"> <!-- Badge / Greeting --> <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-semibold mb-6" style="background-color: var(--badge-bg); color: var(--badge-text); border: 1px solid var(--card-border);"> ยินดีต้อนรับสู่พอร์ตโฟลิโอส่วนตัว </span> <!-- Headline --> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-tight"> สวัสดีครับ ผม <br class="hidden sm:inline"> <span class="bg-gradient-to-r bg-clip-text text-transparent" style="background-image: linear-gradient(to right, var(--accent-gradient-start), var(--accent-gradient-end));"> ศุภวัฒน์ ใจคำ </span> </h1> <!-- Subtitle --> <p class="text-base sm:text-lg max-w-xl mx-auto lg:mx-0 mb-10 leading-relaxed" style="color: var(--text-secondary);"> ชื่อเล่น <span class="font-semibold" style="color: var(--accent);">ขวัญ</span> — นักศึกษาผู้มีความเชี่ยวชาญและหลงใหลในด้านกีฬา ควบคู่ไปกับการมุ่งมั่นศึกษาด้านเทคโนโลยีเพื่อก้าวเข้าสู่อุตสาหกรรมไอทีในอนาคต </p> <!-- Buttons --> <div class="flex flex-col sm:flex-row justify-center lg:justify-start items-center gap-4"> <a href="#contact" class="w-full sm:w-auto px-8 py-4 font-bold rounded-xl shadow-lg hover:-translate-y-0.5 transition-all duration-300 text-center" style="background-image: linear-gradient(to right, var(--accent-gradient-start), var(--accent-gradient-end)); color: var(--accent-text); box-shadow: 0 4px 15px var(--card-glow);"> ติดต่อฉัน <i class="fa-solid fa-arrow-right ml-2 text-sm"></i> </a> <a href="#about" class="w-full sm:w-auto px-8 py-4 border rounded-xl hover:-translate-y-0.5 transition-all duration-300 text-center" style="background-color: var(--card-bg); border-color: var(--card-border); color: var(--text-primary);"> ทำความรู้จักเพิ่มเติม </a> </div> </div> <!-- Right: Profile Image --> <div class="lg:col-span-5 flex justify-center order-1 lg:order-2"> <div class="relative group"> <!-- Glow Frame Effect --> <div class="absolute -inset-1 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-1000 group-hover:duration-200" style="background-image: linear-gradient(to right, var(--accent-gradient-start), var(--accent-gradient-end));"> </div> <div class="relative w-64 h-64 sm:w-72 sm:h-72 lg:w-80 lg:h-80 rounded-2xl overflow-hidden shadow-2xl border" style="background-color: var(--card-bg); border-color: var(--card-border);"> <img src="Gemini_Generated_Image_jcybz9jcybz9jcyb.png" alt="ศุภวัฒน์ ใจคำ" class="w-full h-full object-cover object-center" onerror="this.style.display='none'; document.getElementById('profile-placeholder').classList.remove('hidden');"> <!-- Placeholder icon if image missing --> <div id="profile-placeholder" class="hidden w-full h-full flex flex-col items-center justify-center p-6 text-center" style="background-color: var(--bg-alt);"> <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 border" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-regular fa-user text-3xl"></i> </div> <span class="text-sm font-medium" style="color: var(--text-primary);">ศุภวัฒน์ ใจคำ (ขวัญ)</span> <span class="text-xs mt-1" style="color: var(--text-secondary);">วางรูป "profile.png" เพื่อแสดงรูปถ่ายที่นี่</span> </div> </div> </div> </div> </div> </div> <!-- Scroll Indicator --> <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-50 hover:opacity-100 transition-opacity"> <span class="text-xs tracking-widest uppercase" style="color: var(--text-secondary);">เลื่อนลง</span> <div class="w-6 h-10 border-2 rounded-full flex justify-center p-1" style="border-color: var(--card-border);"> <div class="w-1.5 h-3 rounded-full animate-bounce" style="background-color: var(--accent);"></div> </div> </div> </header> <!-- ABOUT ME SECTION --> <section id="about" class="py-24 relative border-t" style="background-color: var(--bg-alt); border-color: var(--border-color);"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="text-center mb-16"> <h2 class="text-3xl font-bold tracking-tight mb-2">เกี่ยวกับฉัน</h2> <div class="h-1 w-20 mx-auto rounded-full" style="background-color: var(--accent);"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"> <!-- Left: Profile info --> <div class="lg:col-span-5 space-y-6"> <div class="glass-card p-8 rounded-2xl glow-hover"> <div class="flex items-center gap-4 mb-6"> <div class="w-12 h-12 rounded-xl flex items-center justify-center text-xl border" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-regular fa-user"></i> </div> <div> <h3 class="text-lg font-semibold">ข้อมูลส่วนตัว</h3> <p class="text-sm" style="color: var(--text-secondary);">Personal Information</p> </div> </div> <ul class="space-y-4"> <li class="flex items-center justify-between border-b pb-3" style="border-color: var(--border-color);"> <span style="color: var(--text-secondary);" class="text-sm">ชื่อ-นามสกุล</span> <span class="font-medium">นาย ศุภวัฒน์ ใจคำ (ขวัญ)</span> </li> <li class="flex items-center justify-between border-b pb-3" style="border-color: var(--border-color);"> <span style="color: var(--text-secondary);" class="text-sm">วันเกิด</span> <span class="font-medium">10 มีนาคม 2550</span> </li> <li class="flex items-center justify-between pb-1"> <span style="color: var(--text-secondary);" class="text-sm">อายุ</span> <span class="font-bold text-lg" style="color: var(--accent);">19 ปี</span> </li> </ul> </div> </div> <!-- Right: Education timeline --> <div class="lg:col-span-7 space-y-6"> <div class="glass-card p-8 rounded-2xl glow-hover"> <div class="flex items-center gap-4 mb-8"> <div class="w-12 h-12 rounded-xl flex items-center justify-center text-xl border" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-solid fa-graduation-cap"></i> </div> <div> <h3 class="text-lg font-semibold">ประวัติการศึกษา</h3> <p class="text-sm" style="color: var(--text-secondary);">Education Timeline</p> </div> </div> <!-- Timeline --> <div class="relative border-l-2 ml-4 pl-6 space-y-8" style="border-color: var(--border-color);"> <!-- Education Item 1 --> <div class="relative"> <div class="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full border-2" style="background-color: var(--bg-color); border-color: var(--accent);"></div> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-1"> <h4 class="font-bold text-base">วิทยาลัยเทคนิคเชียงใหม่</h4> <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium border w-fit" style="background-color: var(--badge-bg); color: var(--badge-text); border-color: var(--card-border);"> ปัจจุบัน (กำลังศึกษา) </span> </div> <p class="text-sm" style="color: var(--text-secondary);">ระดับประกาศนียบัตรวิชาชีพ (ปวช.) / ปวส. ด้านเทคโนโลยี</p> </div> <!-- Education Item 2 --> <div class="relative"> <div class="absolute -left-[31px] top-1.5 w-4 h-4 rounded-full border-2" style="background-color: var(--bg-color); border-color: var(--border-color);"></div> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-1 mb-1"> <h4 class="font-bold text-base opacity-90">โรงเรียนแม่แตงวิทยา</h4> <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium border w-fit" style="background-color: var(--card-bg); color: var(--text-secondary); border-color: var(--card-border);"> มัธยมศึกษาปีที่ 1 - 6 </span> </div> <p class="text-sm" style="color: var(--text-secondary);"> สำเร็จการศึกษาการศึกษาระดับมัธยมศึกษาอย่างเป็นทางการ</p> </div> </div> </div> </div> </div> </div> </section> <!-- SKILLS SECTION --> <section id="skills" class="py-24 relative border-t" style="border-color: var(--border-color);"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <!-- Section Header --> <div class="text-center mb-16"> <h2 class="text-3xl font-bold tracking-tight mb-2">ความสามารถและทักษะ</h2> <div class="h-1 w-20 mx-auto rounded-full" style="background-color: var(--accent);"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <!-- Left: Sports Skills --> <div class="space-y-6"> <div class="flex items-center gap-3 mb-4"> <i class="fa-solid fa-volleyball text-xl" style="color: var(--accent);"></i> <h3 class="text-xl font-semibold">ความสามารถด้านกีฬา (Sports Skills)</h3> </div> <div class="grid grid-cols-2 sm:grid-cols-3 gap-4"> <!-- Football --> <div class="glass-card p-4 rounded-xl text-center glow-hover hover:-translate-y-1 group"> <div class="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 border group-hover:scale-110 transition-transform" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-solid fa-futbol text-xl"></i> </div> <span class="text-sm font-medium block">ฟุตบอล</span> </div> <!-- Futsal --> <div class="glass-card p-4 rounded-xl text-center glow-hover hover:-translate-y-1 group"> <div class="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 border group-hover:scale-110 transition-transform" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-solid fa-shoe-prints text-xl"></i> </div> <span class="text-sm font-medium block">ฟุตซอล</span> </div> <!-- Volleyball --> <div class="glass-card p-4 rounded-xl text-center glow-hover hover:-translate-y-1 group"> <div class="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 border group-hover:scale-110 transition-transform" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-solid fa-circle-nodes text-xl"></i> </div> <span class="text-sm font-medium block">วอลเลย์บอล</span> </div> <!-- Ping Pong --> <div class="glass-card p-4 rounded-xl text-center glow-hover hover:-translate-y-1 group"> <div class="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 border group-hover:scale-110 transition-transform" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-solid fa-table-tennis-paddle-ball text-xl"></i> </div> <span class="text-sm font-medium block">ปิงปอง</span> </div> <!-- Badminton --> <div class="glass-card p-4 rounded-xl text-center glow-hover hover:-translate-y-1 group"> <div class="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 border group-hover:scale-110 transition-transform" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-solid fa-feather-pointed text-xl"></i> </div> <span class="text-sm font-medium block">แบดมินตัน</span> </div> <!-- Woodball --> <div class="glass-card p-4 rounded-xl text-center glow-hover hover:-translate-y-1 group"> <div class="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 border group-hover:scale-110 transition-transform" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-solid fa-hammer text-xl"></i> </div> <span class="text-sm font-medium block">วู้ดบอล</span> </div> </div> </div> <!-- Right: Tech Skills Placeholder --> <div class="space-y-6"> <div class="flex items-center gap-3 mb-4"> <i class="fa-solid fa-code text-xl" style="color: var(--accent);"></i> <h3 class="text-xl font-semibold">ทักษะทางคอมพิวเตอร์และเทคโนโลยี (Tech Skills)</h3> </div> <div class="border-2 border-dashed rounded-2xl p-8 flex flex-col items-center justify-center text-center h-[268px] relative overflow-hidden group transition-colors" style="border-color: var(--dashed-border);"> <div class="w-16 h-16 rounded-full border flex items-center justify-center mb-4 transition-all duration-300 group-hover:scale-105" style="background-color: var(--card-bg); border-color: var(--card-border); color: var(--text-secondary);"> <i class="fa-solid fa-laptop-code text-2xl" style="color: var(--accent);"></i> </div> <h4 class="text-base font-semibold mb-1">อยู่ระหว่างการศึกษาศึกษาและพัฒนาเพิ่มเติม</h4> <p class="text-xs max-w-sm" style="color: var(--text-secondary);"> นี่คือพื้นที่ว่างสำหรับจัดแสดงทักษะด้าน Software Development, ไอที หรือ Programming ที่ได้เรียนรู้เพิ่มเติมในอนาคต</p> </div> </div> </div> </div> </section> <!-- CONTACT SECTION --> <section id="contact" class="py-24 relative border-t" style="background-color: var(--bg-alt); border-color: var(--border-color);"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="text-center mb-16"> <h2 class="text-3xl font-bold tracking-tight mb-2">ช่องทางการติดต่อ</h2> <div class="h-1 w-20 mx-auto rounded-full" style="background-color: var(--accent);"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <!-- Left: Direct Details --> <div class="space-y-4"> <!-- Phone --> <a href="tel:0947496604" class="glass-card p-6 rounded-2xl flex items-center gap-4 glow-hover group hover:-translate-y-1 block"> <div class="w-12 h-12 rounded-xl flex items-center justify-center text-xl border group-hover:scale-110 transition-transform" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-solid fa-phone"></i> </div> <div> <span class="text-xs block uppercase tracking-wider" style="color: var(--text-secondary);">เบอร์โทรศัพท์</span> <span class="text-lg font-semibold transition-colors group-hover:opacity-80">094-749-6604</span> </div> </a> <!-- Email --> <a href="mailto:supawatjaikom123@gmail.com" class="glass-card p-6 rounded-2xl flex items-center gap-4 glow-hover group hover:-translate-y-1 block"> <div class="w-12 h-12 rounded-xl flex items-center justify-center text-xl border group-hover:scale-110 transition-transform" style="background-color: var(--badge-bg); border-color: var(--card-border); color: var(--accent);"> <i class="fa-regular fa-envelope"></i> </div> <div> <span class="text-xs block uppercase tracking-wider" style="color: var(--text-secondary);">อีเมล</span> <span class="text-lg font-semibold transition-colors group-hover:opacity-80 break-all">supawatjaikom123@gmail.com</span> </div> </a> </div> <!-- Right: Social Links --> <div class="glass-card p-8 rounded-2xl glow-hover flex flex-col justify-between"> <div> <h3 class="text-lg font-semibold mb-2">ติดตามโซเชียลมีเดีย</h3> <p class="text-sm mb-6" style="color: var(--text-secondary);"> คุณสามารถติดต่อหรือเข้าชมข้อมูลโซเชียลช่องทางเพิ่มเติมของผมได้</p> </div> <!-- Social Icons Grid --> <div class="grid grid-cols-3 gap-4"> <!-- Facebook --> <a href="#" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center justify-center p-3 rounded-xl border hover:-translate-y-0.5 transition-all duration-300 group" style="background-color: var(--bg-color); border-color: var(--card-border); color: var(--text-secondary);"> <i class="fa-brands fa-facebook text-2xl mb-2 group-hover:scale-110 transition-transform" style="color: #1877f2;"></i> <span class="text-xs">Facebook</span> </a> <!-- Line --> <a href="#" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center justify-center p-3 rounded-xl border hover:-translate-y-0.5 transition-all duration-300 group" style="background-color: var(--bg-color); border-color: var(--card-border); color: var(--text-secondary);"> <i class="fa-brands fa-line text-2xl mb-2 group-hover:scale-110 transition-transform" style="color: #06c755;"></i> <span class="text-xs">Line ID</span> </a> <!-- GitHub --> <a href="#" target="_blank" rel="noopener noreferrer" class="flex flex-col items-center justify-center p-3 rounded-xl border hover:-translate-y-0.5 transition-all duration-300 group" style="background-color: var(--bg-color); border-color: var(--card-border); color: var(--text-secondary);"> <i class="fa-brands fa-github text-2xl mb-2 group-hover:scale-110 transition-transform"></i> <span class="text-xs">GitHub</span> </a> </div> </div> </div> </div> </section> <!-- FOOTER --> <footer class="py-8 border-t text-center text-xs" style="border-color: var(--border-color); color: var(--text-secondary);"> <div class="max-w-6xl mx-auto px-4"> <p>© 2026 นาย ศุภวัฒน์ ใจคำ. สงวนลิขสิทธิ์ทั้งหมด.</p> <p class="mt-2 opacity-60">สร้างสรรค์ด้วย HTML, Tailwind CSS และ JavaScript</p> </div> </footer> <!-- Simple JS for Mobile Menu & Theme Switcher --> <script> // --- Theme Switcher Logic --- function setTheme(themeName) { // Apply data-theme attribute to html node document.documentElement.setAttribute('data-theme', themeName); // Persist theme choice localStorage.setItem('selected-theme', themeName); // Update Active Button styling updateActiveButtons(themeName); } function updateActiveButtons(themeName) { const themes = ['dark', 'light', 'cream']; themes.forEach(theme => { const btn = document.getElementById(`btn-theme-${theme}`); const mBtn = document.getElementById(`mobile-btn-theme-${theme}`); if (theme === themeName) { // Active style: filled with accent text if (btn) { btn.style.backgroundColor = 'var(--accent)'; btn.style.color = 'var(--accent-text)'; } if (mBtn) { mBtn.style.backgroundColor = 'var(--accent)'; mBtn.style.color = 'var(--accent-text)'; } } else { // Inactive style: transparent background if (btn) { btn.style.backgroundColor = 'transparent'; btn.style.color = 'var(--text-primary)'; } if (mBtn) { mBtn.style.backgroundColor = 'transparent'; mBtn.style.color = 'var(--text-primary)'; } } }); } // Initialize Theme (Check Local Storage, default to dark) const savedTheme = localStorage.getItem('selected-theme') || 'dark'; setTheme(savedTheme); // --- Mobile Menu Toggle --- const btnMenu = document.getElementById('mobile-menu-btn'); const menu = document.getElementById('mobile-menu'); btnMenu.addEventListener('click', () => { menu.classList.toggle('hidden'); }); // Close menu when clicking link const mobileLinks = menu.querySelectorAll('a'); mobileLinks.forEach(link => { link.addEventListener('click', () => { menu.classList.add('hidden'); }); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.55 |
proxy
|
phpinfo
|
Settings