File manager - Edit - /home/webapp69.cm.in.th/u69319090022/porfolio/69319090022/index.html
Back
<!DOCTYPE html> <html lang="th" class="dark scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>อรุณโรจน์ กองเงิน | Senior Full-Stack Developer & UI/UX Designer Portfolio</title> <!-- SEO Meta Tags --> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ อรุณโรจน์ กองเงิน นักพัฒนาเว็บไซต์อาวุโส (Senior Full-Stack Developer) และนักออกแบบประสบการณ์ผู้ใช้ (UI/UX Designer) แสดงทักษะ ประสบการณ์ และผลงานชั้นเยี่ยม"> <meta name="keywords" content="Full-Stack Developer, Web Developer, UI/UX Designer, พอร์ตโฟลิโอ, React, Next.js, Node.js, Tailwind CSS, เขียนเว็บ"> <meta name="author" content="อรุณโรจน์ กองเงิน"> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="http://localhost/69319090022/index.html"> <meta property="og:title" content="อรุณโรจน์ กองเงิน | Senior Full-Stack Developer Portfolio"> <meta property="og:description" content="สร้างสรรค์ประสบการณ์เว็บที่สวยงามและมีประสิทธิภาพสูง จากแนวคิดสู่การใช้งานจริง"> <meta property="og:image" content="assets/images/avatar.png"> <!-- Prevents Theme Flickering before CSS/JS Loads --> <script> if (localStorage.getItem('theme') === 'light') { document.documentElement.classList.remove('dark'); } else { document.documentElement.classList.add('dark'); } </script> <!-- Tailwind CSS Play CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Tailwind Configuration --> <script> tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'], heading: ['Outfit', 'sans-serif'], }, colors: { primary: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#1e1b4b', }, slate: { 950: '#070a13', // Ultra-premium custom dark background color } }, boxShadow: { 'glow-indigo': '0 0 25px rgba(139, 92, 246, 0.25)', 'glow-pink': '0 0 25px rgba(236, 72, 153, 0.25)', } } } } </script> <!-- Custom Stylesheet --> <link rel="stylesheet" href="assets/css/style.css"> <!-- Lucide Icons CDN --> <script src="https://unpkg.com/lucide@latest"></script> </head> <body class="bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 min-h-screen relative overflow-x-hidden theme-transition"> <!-- Background Decorative Blobs --> <div class="glow-blob bg-primary-500 top-20 -left-20"></div> <div class="glow-blob bg-pink-500 top-[40%] right-[-100px] animation-delay-2000"></div> <div class="glow-blob bg-blue-500 bottom-10 left-[20%] animation-delay-4000"></div> <!-- --- NAVBAR SECTION --- --> <header class="fixed top-0 left-0 w-full z-40 glass-nav transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between"> <!-- Logo / Name --> <a href="#hero" class="flex items-center space-x-2 group"> <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-primary-500 to-pink-500 flex items-center justify-center text-white font-bold text-lg shadow-md group-hover:scale-105 transition-transform"> AK </div> <span class="text-xl font-bold font-heading bg-gradient-to-r from-primary-600 to-pink-500 dark:from-primary-400 dark:to-pink-400 bg-clip-text text-transparent group-hover:opacity-80 transition-opacity"> Arunroj.K </span> </a> <!-- Desktop Navigation Menu --> <nav class="hidden md:flex items-center space-x-8 text-sm font-medium"> <a href="#hero" class="nav-link text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">หน้าแรก</a> <a href="#about" class="nav-link text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">เกี่ยวกับฉัน</a> <a href="#experience" class="nav-link text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">ประสบการณ์</a> <a href="#contact" class="nav-link text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">ติดต่อฉัน</a> </nav> <!-- Theme Switcher & Mobile Menu Button --> <div class="flex items-center space-x-4"> <!-- Theme Toggle Button --> <button id="theme-toggle" class="theme-toggle p-2.5 rounded-xl border border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors" aria-label="Toggle dark mode"> <i data-lucide="sun" class="sun-icon w-5 h-5 hidden"></i> <i data-lucide="moon" class="moon-icon w-5 h-5"></i> </button> <!-- Mobile Menu Toggle Button (Hamburger) --> <button id="menu-btn" class="md:hidden p-2.5 rounded-xl border border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 transition-colors" aria-expanded="false" aria-label="Toggle main menu"> <i data-lucide="menu" id="menu-icon-open" class="w-5 h-5"></i> <i data-lucide="x" id="menu-icon-close" class="w-5 h-5 hidden"></i> </button> </div> </div> <!-- Mobile Dropdown Menu --> <div id="mobile-menu" class="hidden md:hidden flex-col px-4 pt-2 pb-6 space-y-2 border-t border-slate-200/50 dark:border-slate-800/50 bg-white/95 dark:bg-slate-950/95 backdrop-blur-lg"> <a href="#hero" class="mobile-link block px-4 py-3 rounded-xl text-base font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 hover:text-primary-600 transition-all">หน้าแรก</a> <a href="#about" class="mobile-link block px-4 py-3 rounded-xl text-base font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 hover:text-primary-600 transition-all">เกี่ยวกับฉัน</a> <a href="#experience" class="mobile-link block px-4 py-3 rounded-xl text-base font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 hover:text-primary-600 transition-all">ประสบการณ์</a> <a href="#contact" class="mobile-link block px-4 py-3 rounded-xl text-base font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 hover:text-primary-600 transition-all">ติดต่อฉัน</a> </div> </header> <main class="pt-20"> <!-- --- HERO SECTION --- --> <section id="hero" class="min-h-[calc(100vh-80px)] flex items-center py-16 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- Hero Text --> <div class="lg:col-span-7 space-y-6 text-center lg:text-left reveal reveal-slide-left active"> <div class="inline-flex items-center space-x-2 px-3 py-1.5 rounded-full bg-primary-100 dark:bg-primary-950/40 border border-primary-200/50 dark:border-primary-800/40 text-primary-600 dark:text-primary-400 text-xs font-semibold uppercase tracking-wider"> <span class="w-2 h-2 rounded-full bg-primary-500 animate-ping"></span> <span>พร้อมรับงานพัฒนาเว็บไซต์และออกแบบระบบ</span> </div> <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight font-heading leading-tight"> สวัสดีครับ ผมคือ <br> <span class="bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500 bg-clip-text text-transparent"> อรุณโรจน์ กองเงิน </span> </h1> <p class="text-lg sm:text-xl font-medium text-slate-700 dark:text-slate-300"> Senior Full-Stack Developer & UI/UX Designer </p> <p class="text-slate-600 dark:text-slate-400 max-w-xl mx-auto lg:mx-0 leading-relaxed"> ผมเป็นนักศึกษาวิมยาลัยเทคนิคเชียงใหม่ ตอนนี้กำลังศึกษาในระดับชั้นปวส.1 </p> <!-- Hero Action Buttons --> <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2"> <a href="#projects" class="w-full sm:w-auto px-8 py-4 rounded-xl bg-gradient-to-r from-primary-600 to-purple-600 text-white font-medium text-center shadow-lg hover:shadow-primary-500/20 hover:scale-105 transition-all duration-300"> ดูประวัติส่วนตัวของฉัน </a> <a href="#contact" class="w-full sm:w-auto px-8 py-4 rounded-xl border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-900 font-medium text-center transition-all duration-300 flex items-center justify-center gap-2"> <i data-lucide="mail" class="w-5 h-5"></i> <span>ติดต่อคุยงาน</span> </a> </div> <!-- Simple Trust Icons / Badges --> <div class="pt-8 border-t border-slate-200/60 dark:border-slate-900/60 flex flex-wrap justify-center lg:justify-start gap-6 text-sm text-slate-500"> <div class="flex items-center space-x-2"> <i data-lucide="shield-check" class="w-5 h-5 text-primary-500"></i> <span>โค้ดสะอาด ปลอดภัย</span> </div> <div class="flex items-center space-x-2"> <i data-lucide="zap" class="w-5 h-5 text-yellow-500"></i> <span>เว็บเร็ว โหลดทันใจ</span> </div> <div class="flex items-center space-x-2"> <i data-lucide="smartphone" class="w-5 h-5 text-pink-500"></i> <span>รองรับทุกอุปกรณ์</span> </div> </div> </div> <!-- Hero Graphic Code Card --> <div class="lg:col-span-5 reveal reveal-slide-right delay-200 active"> <div class="glass-panel rounded-2xl overflow-hidden shadow-2xl border border-slate-200/50 dark:border-slate-800/50 glow-primary transition-all duration-300"> <!-- Code Header --> <div class="flex items-center justify-between px-4 py-3 bg-slate-100/50 dark:bg-slate-900/50 border-b border-slate-200/40 dark:border-slate-800/40"> <div class="flex space-x-2"> <div class="w-3 h-3 rounded-full bg-red-400"></div> <div class="w-3 h-3 rounded-full bg-yellow-400"></div> <div class="w-3 h-3 rounded-full bg-green-400"></div> </div> <span class="text-xs text-slate-500 dark:text-slate-400 font-mono">developer.js</span> <i data-lucide="terminal" class="w-4 h-4 text-slate-400"></i> </div> <!-- Code Body --> <div class="p-6 font-mono text-xs sm:text-sm leading-relaxed overflow-x-auto text-slate-700 dark:text-slate-300"> <p><span class="text-pink-500 dark:text-pink-400">const</span> developer = {</p> <p class="pl-4">name: <span class="text-green-600 dark:text-green-400">"อรุณโรจน์ กองเงิน"</span>,</p> <p class="pl-4">role: <span class="text-green-600 dark:text-green-400">"Full-Stack Engineer"</span>,</p> <p class="pl-4">skills: [</p> <p class="pl-8"><span class="text-cyan-600 dark:text-cyan-400">"React/Next.js"</span>, <span class="text-cyan-600 dark:text-cyan-400">"TailwindCSS"</span>,</p> <p class="pl-8"><span class="text-cyan-600 dark:text-cyan-400">"Node.js/Express"</span>, <span class="text-cyan-600 dark:text-cyan-400">"Databases"</span></p> <p class="pl-4">],</p> <p class="pl-4">passions: [</p> <p class="pl-8"><span class="text-yellow-600 dark:text-yellow-400">"Clean Code"</span>, <span class="text-yellow-600 dark:text-yellow-400">"Modern UI/UX"</span>,</p> <p class="pl-8"><span class="text-yellow-600 dark:text-yellow-400">"High Performance"</span></p> <p class="pl-4">],</p> <p class="pl-4 text-purple-500 dark:text-purple-400">isAvailableForHire: <span class="text-amber-500">true</span>,</p> <p class="pl-4"><span class="text-blue-500">solveProblem</span>: (challenge) => {</p> <p class="pl-8 text-slate-400">// ให้ผลลัพธ์ที่ดีที่สุดสำหรับผู้ใช้เสมอ</p> <p class="pl-8"><span class="text-pink-500 dark:text-pink-400">return</span> <span class="text-purple-500 dark:text-purple-400">new</span> WebExperience(challenge);</p> <p class="pl-4">}</p> <p>};</p> </div> </div> </div> </div> </div> </section> <!-- --- ABOUT ME SECTION --- --> <section id="about" class="py-24 bg-slate-100/50 dark:bg-slate-900/30 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="text-center max-w-3xl mx-auto mb-16 reveal reveal-slide-up"> <h2 class="text-3xl sm:text-4xl font-extrabold font-heading bg-gradient-to-r from-primary-500 to-pink-500 bg-clip-text text-transparent inline-block"> เกี่ยวกับตัวผม </h2> <p class="mt-4 text-slate-600 dark:text-slate-400 text-lg"> เรียนรู้ประวัติ ส่วนตัวของผมได้ในหน้านี้ </p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- Profile Portrait / Avatar --> <div class="lg:col-span-5 flex justify-center reveal reveal-scale-up"> <div class="relative group"> <!-- Decorative Neon Border Glow --> <div class="absolute -inset-1.5 bg-gradient-to-r from-primary-500 to-pink-500 rounded-2xl blur opacity-30 group-hover:opacity-70 transition duration-1000 group-hover:duration-200"> </div> <!-- Profile Card --> <div class="relative w-72 h-80 sm:w-80 sm:h-96 rounded-2xl overflow-hidden glass-panel border border-slate-200/50 dark:border-slate-800/50 p-3 shadow-lg"> <img src="assets/images/avatar.jpg" alt="อรุณโรจน์ กองเงิน" class="w-full h-full object-cover rounded-xl grayscale hover:grayscale-0 transition-all duration-500"> </div> </div> </div> <!-- Bio & Statistics --> <div class="lg:col-span-7 space-y-6 reveal reveal-slide-up delay-200"> <h3 class="text-2xl font-bold font-heading text-slate-800 dark:text-slate-100"> ประวัติส่วนตัว </h3> <p class="text-slate-600 dark:text-slate-400 leading-relaxed"> ผมชื่อนาย อรุณโรจน์ กองเงิน อายุ 18 ปี เกิดเมื่อ 22 เดือน ธันวาคม ปี 2550 ปัจจุบันกำลังศึกษาที่ วิทยาลัยเทตนิคเชียงใหม่ ข้อมูลติดต่อผมมีดังนี้ gmail pondxdno.2@gmail.com เบอร์มือถือ 082-678-8454 กิจกรรมที่ทำเป็นประจำ เล่นกีฬา และ ถ่ายรูป </p> <p class="text-slate-600 dark:text-slate-400 leading-relaxed"> เป้าหมายของผมคือ การรับถ่ายรูปและแต่งรูป </p> <!-- Stats Grid --> <div class="grid grid-cols-3 gap-4 pt-4"> <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/80 text-center hover-scale"> <span class="block text-2xl sm:text-3xl font-extrabold text-primary-500 dark:text-primary-400 font-heading">3+</span> <span class="text-xs text-slate-500 dark:text-slate-400">ปีที่ทำงานด้านนี้</span> </div> <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/80 text-center hover-scale"> <span class="block text-2xl sm:text-3xl font-extrabold text-primary-500 dark:text-primary-400 font-heading">1</span> <span class="text-xs text-slate-500 dark:text-slate-400">ผลงานที่เคยลง</span> </div> <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800/80 text-center hover-scale"> <span class="block text-2xl sm:text-3xl font-extrabold text-primary-500 dark:text-primary-400 font-heading">1</span> <span class="text-xs text-slate-500 dark:text-slate-400">ลูกค้าที่ประทับใจ</span> </div> </div> </div> </div> <!-- Skills Subsections --> <div class="mt-20"> <div class="text-center mb-10 reveal reveal-slide-up"> <h3 class="text-2xl font-bold font-heading">ความเชี่ยวชาญด้านเทคโนโลยี</h3> <p class="text-sm text-slate-500 mt-2">เทคโนโลยีหลักบางส่วนที่ผมใช้งานในการพัฒนาโครงการต่างๆ</p> </div> <!-- Skills Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- Skill Card: Frontend --> <div class="glass-panel p-6 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 hover-scale reveal reveal-slide-up delay-100"> <div class="w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 flex items-center justify-center mb-4"> <i data-lucide="layout" class="w-6 h-6"></i> </div> <h4 class="font-bold text-lg mb-3">Frontend Development</h4> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">HTML5 / CSS3</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">JavaScript (ES6+)</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">React / Next.js</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Tailwind CSS</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Bootstrap</span> </div> </div> <!-- Skill Card: Backend --> <div class="glass-panel p-6 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 hover-scale reveal reveal-slide-up delay-200"> <div class="w-12 h-12 rounded-xl bg-green-100 dark:bg-green-950/40 text-green-600 dark:text-green-400 flex items-center justify-center mb-4"> <i data-lucide="cpu" class="w-6 h-6"></i> </div> <h4 class="font-bold text-lg mb-3">Backend Development</h4> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Node.js</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Express.js</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">RESTful APIs</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">GraphQL</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Python (FastAPI)</span> </div> </div> <!-- Skill Card: Database & DevOps --> <div class="glass-panel p-6 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 hover-scale reveal reveal-slide-up delay-300"> <div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 flex items-center justify-center mb-4"> <i data-lucide="database" class="w-6 h-6"></i> </div> <h4 class="font-bold text-lg mb-3">Database & Cloud</h4> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">MySQL / MariaDB</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">PostgreSQL</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">MongoDB</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Docker</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">AWS / Vercel</span> </div> </div> <!-- Skill Card: UI/UX & Tools --> <div class="glass-panel p-6 rounded-2xl border border-slate-200/50 dark:border-slate-800/50 hover-scale reveal reveal-slide-up delay-400"> <div class="w-12 h-12 rounded-xl bg-pink-100 dark:bg-pink-950/40 text-pink-600 dark:text-pink-400 flex items-center justify-center mb-4"> <i data-lucide="figma" class="w-6 h-6"></i> </div> <h4 class="font-bold text-lg mb-3">Design & Tools</h4> <div class="flex flex-wrap gap-2"> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Figma (UI Design)</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Git / GitHub</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">UX Research</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Postman</span> <span class="px-2.5 py-1 text-xs font-semibold rounded-lg bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300">Agile / Scrum</span> </div> </div> </div> </div> </div> </section> <!-- --- EXPERIENCE/TIMELINE SECTION --- --> <section id="experience" class="py-24 bg-slate-100/50 dark:bg-slate-900/30"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Section Header --> <div class="text-center max-w-3xl mx-auto mb-16 reveal reveal-slide-up"> <h2 class="text-3xl sm:text-4xl font-extrabold font-heading bg-gradient-to-r from-primary-500 to-pink-500 bg-clip-text text-transparent inline-block"> ประวัติการเรียนถ่ายรูปด้วยตัวเอง </h2> <p class="mt-4 text-slate-600 dark:text-slate-400 text-lg"> เส้นทางการถ่ายรูปของผม </p> </div> <!-- Vertical Timeline (Responsive Layout) --> <div class="relative max-w-3xl mx-auto px-4 sm:px-0"> <!-- Middle Vertical Line --> <div class="absolute left-4 sm:left-1/2 top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-slate-800 -translate-x-1/2"> </div> <!-- Timeline Items --> <div class="space-y-12"> <!-- Item 1: Senior Dev --> <div class="relative flex flex-col sm:flex-row items-start sm:justify-between group reveal reveal-slide-up"> <!-- Timeline Dot --> <div class="timeline-dot absolute left-4 sm:left-1/2 top-1.5 w-4 h-4 rounded-full border-2 border-primary-500 bg-primary-500 -translate-x-1/2 z-10 transition-transform duration-300 group-hover:scale-125 group-hover:bg-pink-500 group-hover:border-pink-500"> </div> <!-- Left spacer/content --> <div class="w-full sm:w-[45%] pl-10 sm:pl-0 sm:text-right order-2 sm:order-1 pt-0.5"> <span class="text-sm font-semibold text-primary-500 dark:text-primary-400">ปัจจุบัน</span> <h3 class="text-lg font-bold text-slate-800 dark:text-slate-100 mt-1">ตกแต่งรูปภาพ</h3> <span class="text-xs text-slate-500 dark:text-slate-400 font-medium">เริ่มเรียนกาตกแต่งรูปภาพ</span> <p class="text-sm text-slate-600 dark:text-slate-400 mt-3 leading-relaxed"> กำลังเรียนเกี่ยวกับแต่งรูปเพื่อให้ดูสมจริงยิ่งขึ้น </p> </div> <!-- Right spacer --> <div class="hidden sm:block w-[45%] order-2"></div> </div> <!-- Item 2: Mid Dev --> <div class="relative flex flex-col sm:flex-row items-start sm:justify-between group reveal reveal-slide-up"> <!-- Timeline Dot --> <div class="timeline-dot absolute left-4 sm:left-1/2 top-1.5 w-4 h-4 rounded-full border-2 border-primary-500 bg-primary-500 -translate-x-1/2 z-10 transition-transform duration-300 group-hover:scale-125 group-hover:bg-pink-500 group-hover:border-pink-500"> </div> <!-- Left spacer --> <div class="hidden sm:block w-[45%]"></div> <!-- Right content --> <div class="w-full sm:w-[45%] pl-10 sm:pl-10 order-2 pt-0.5"> <span class="text-sm font-semibold text-primary-500 dark:text-primary-400">ปีที่ 2</span> <h3 class="text-lg font-bold text-slate-800 dark:text-slate-100 mt-1">ถ่ายตัวแบบ</h3> <span class="text-xs text-slate-500 dark:text-slate-400 font-medium">เรียนการถ่ายแบบ</span> <p class="text-sm text-slate-600 dark:text-slate-400 mt-3 leading-relaxed"> ฝึกการถ่ายรูปแบบหรือตัวแบบให้โดดเด่น </p> </div> </div> <!-- Item 3: Frontend Dev --> <div class="relative flex flex-col sm:flex-row items-start sm:justify-between group reveal reveal-slide-up"> <!-- Timeline Dot --> <div class="timeline-dot absolute left-4 sm:left-1/2 top-1.5 w-4 h-4 rounded-full border-2 border-primary-500 bg-primary-500 -translate-x-1/2 z-10 transition-transform duration-300 group-hover:scale-125 group-hover:bg-pink-500 group-hover:border-pink-500"> </div> <!-- Left content --> <div class="w-full sm:w-[45%] pl-10 sm:pl-0 sm:text-right order-2 sm:order-1 pt-0.5"> <span class="text-sm font-semibold text-primary-500 dark:text-primary-400">ปีที่ 1</span> <h3 class="text-lg font-bold text-slate-800 dark:text-slate-100 mt-1">องค์ประกอบภาพ</h3> <span class="text-xs text-slate-500 dark:text-slate-400 font-medium">เริ่มต้นเรียนจัดองค์ประกอบ</span> <p class="text-sm text-slate-600 dark:text-slate-400 mt-3 leading-relaxed"> ฝึกการจัดองค์ประกอบรูปภาพเพื่อทำให้ภาพดูมีมิติ </p> </div> <!-- Right spacer --> <div class="hidden sm:block w-[45%] order-2"></div> </div> <!-- Item 4: Education --> <div class="relative flex flex-col sm:flex-row items-start sm:justify-between group reveal reveal-slide-up"> <!-- Timeline Dot --> <div class="timeline-dot absolute left-4 sm:left-1/2 top-1.5 w-4 h-4 rounded-full border-2 border-primary-500 bg-primary-500 -translate-x-1/2 z-10 transition-transform duration-300 group-hover:scale-125 group-hover:bg-pink-500 group-hover:border-pink-500"> </div> <!-- Left spacer --> <div class="hidden sm:block w-[45%]"></div> <!-- Right content --> <div class="w-full sm:w-[45%] pl-10 sm:pl-10 order-2 pt-0.5"> <span class="text-sm font-semibold text-primary-500 dark:text-primary-400">เริ่มเรียนครั้งแรก</span> <h3 class="text-lg font-bold text-slate-800 dark:text-slate-100 mt-1">เรียนถ่ายครั้งแรก</h3> <span class="text-xs text-slate-500 dark:text-slate-400 font-medium">เริ่มดูคลิปสอน</span> <p class="text-sm text-slate-600 dark:text-slate-400 mt-3 leading-relaxed"> เริ่มติดตามช่างภาพแต่ละคนและเริ่มศึกษาด้วยตัวเอง </p> </div> </div> </div> </div> </div> </section> <!-- --- CONTACT SECTION --- --> <section id="contact" class="py-24 relative overflow-hidden"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <!-- Section Header --> <div class="text-center max-w-3xl mx-auto mb-16 reveal reveal-slide-up"> <h2 class="text-3xl sm:text-4xl font-extrabold font-heading bg-gradient-to-r from-primary-500 to-pink-500 bg-clip-text text-transparent inline-block"> ติดต่อฉัน </h2> <p class="mt-4 text-slate-600 dark:text-slate-400 text-lg"> ส่งความต้องการของคุณเข้ามา หรือสอบถามข้อมูลเพิ่มเติมได้ทันที </p> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-stretch"> <!-- Contact Details / Info & Socials --> <div class="lg:col-span-5 flex flex-col justify-between reveal reveal-slide-left"> <div class="space-y-8"> <h3 class="text-2xl font-bold font-heading">พูดคุยรายละเอียดงานหรือทักทาย</h3> <p class="text-slate-600 dark:text-slate-400 leading-relaxed"> หากคุณมีงานโครงการที่ประสงค์ต้องการให้นักพัฒนาพัฒนาเว็บไซต์ที่ปลอดภัย รวดเร็ว และสวยงาม หรือต้องการสัมภาษณ์เข้าร่วมทีม สามารถส่งข้อความคุยได้ทันที </p> <!-- Info List --> <div class="space-y-4"> <div class="flex items-center space-x-4"> <div class="w-11 h-11 rounded-lg bg-primary-100 dark:bg-primary-950/40 text-primary-600 dark:text-primary-400 flex items-center justify-center"> <i data-lucide="mail" class="w-5 h-5"></i> </div> <div> <span class="block text-xs text-slate-400 dark:text-slate-500">อีเมลทางการ</span> <a href="mailto:arunroj.k@domain.com" class="text-sm font-semibold hover:text-primary-500 transition-colors">pondxdno.2@gmail.com</a> </div> </div> <div class="flex items-center space-x-4"> <div class="w-11 h-11 rounded-lg bg-green-100 dark:bg-green-950/40 text-green-600 dark:text-green-400 flex items-center justify-center"> <i data-lucide="phone" class="w-5 h-5"></i> </div> <div> <span class="block text-xs text-slate-400 dark:text-slate-500">เบอร์โทรศัพท์</span> <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">+66 82 678 8454</span> </div> </div> <div class="flex items-center space-x-4"> <div class="w-11 h-11 rounded-lg bg-blue-100 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 flex items-center justify-center"> <i data-lucide="map-pin" class="w-5 h-5"></i> </div> <div> <span class="block text-xs text-slate-400 dark:text-slate-500">ตำแหน่งที่อยู่</span> <span class="text-sm font-semibold text-slate-700 dark:text-slate-200">เชียงใหม่, ประเทศไทย</span> </div> </div> </div> </div> <!-- Social Links --> <div class="pt-8 border-t border-slate-200/40 dark:border-slate-900/40 mt-8 lg:mt-0"> <span class="block text-sm font-semibold text-slate-500 mb-4">ช่องทางออนไลน์อื่นๆ</span> <div class="flex space-x-4"> <a href="https://www.facebook.com/arunrotn.gongngeon?locale=th_TH" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-xl bg-slate-200 hover:bg-primary-500 hover:text-white dark:bg-slate-900 dark:hover:bg-primary-500 text-slate-600 dark:text-slate-300 flex items-center justify-center transition-colors shadow-sm" aria-label="Facebook link"> <i data-lucide="facebook" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-xl bg-slate-200 hover:bg-primary-500 hover:text-white dark:bg-slate-900 dark:hover:bg-primary-500 text-slate-600 dark:text-slate-300 flex items-center justify-center transition-colors shadow-sm" aria-label="Github link"> <i data-lucide="github" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-xl bg-slate-200 hover:bg-primary-500 hover:text-white dark:bg-slate-900 dark:hover:bg-primary-500 text-slate-600 dark:text-slate-300 flex items-center justify-center transition-colors shadow-sm" aria-label="LinkedIn link"> <i data-lucide="linkedin" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-xl bg-slate-200 hover:bg-primary-500 hover:text-white dark:bg-slate-900 dark:hover:bg-primary-500 text-slate-600 dark:text-slate-300 flex items-center justify-center transition-colors shadow-sm" aria-label="Twitter link"> <i data-lucide="twitter" class="w-5 h-5"></i> </a> </div> </div> </div> <!-- Contact Form Glass Panel --> <div class="lg:col-span-7 reveal reveal-slide-right delay-200"> <div class="glass-panel p-6 sm:p-8 rounded-3xl border border-slate-200/50 dark:border-slate-800/50 shadow-xl"> <h3 class="text-xl font-bold font-heading mb-6">ส่งข้อความหาผม</h3> <form id="contact-form" class="space-y-4" novalidate> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <!-- Name Field --> <div class="space-y-1.5"> <label for="name" class="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">ชื่อของคุณ</label> <input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white/40 dark:bg-slate-950/40 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500/25 focus:border-primary-500 transition-colors" placeholder="สมชาย ใจดี"> </div> <!-- Email Field --> <div class="space-y-1.5"> <label for="email" class="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">ที่อยู่อีเมล</label> <input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white/40 dark:bg-slate-950/40 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500/25 focus:border-primary-500 transition-colors" placeholder="somchai@email.com"> </div> </div> <!-- Subject Field --> <div class="space-y-1.5"> <label for="subject" class="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">หัวข้อเรื่อง</label> <input type="text" id="subject" name="subject" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white/40 dark:bg-slate-950/40 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500/25 focus:border-primary-500 transition-colors" placeholder="ต้องการคุยเรื่องการสร้างเว็บไซต์แอปพลิเคชัน"> </div> <!-- Message Field --> <div class="space-y-1.5"> <label for="message" class="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">รายละเอียดข้อความ</label> <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-800 bg-white/40 dark:bg-slate-950/40 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500/25 focus:border-primary-500 transition-colors resize-none" placeholder="พิมพ์ข้อความของคุณตรงนี้..."></textarea> </div> <!-- Submit Button --> <button type="submit" class="w-full py-4 px-6 rounded-xl bg-gradient-to-r from-primary-600 to-purple-600 hover:shadow-glow-indigo text-white font-semibold text-center hover:scale-[1.01] active:scale-[0.99] transition-all duration-300 flex items-center justify-center gap-2"> <span>ส่งข้อความทันที</span> <i data-lucide="send" class="w-4 h-4"></i> </button> </form> </div> </div> </div> </div> </section> </main> <!-- --- FOOTER SECTION --- --> <footer class="bg-slate-100 dark:bg-slate-950/60 border-t border-slate-200/50 dark:border-slate-900/60 py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex flex-col md:flex-row items-center justify-between gap-6"> <!-- Logo and Copyright --> <div class="text-center md:text-left"> <span class="text-lg font-bold font-heading bg-gradient-to-r from-primary-600 to-pink-500 dark:from-primary-400 dark:to-pink-400 bg-clip-text text-transparent"> Arunroj.K </span> <p class="text-xs text-slate-500 dark:text-slate-400 mt-2"> © 2026 อรุณโรจน์ กองเงิน. All rights reserved. </p> </div> <!-- Quick Links --> <div class="flex flex-wrap justify-center gap-6 text-sm font-medium text-slate-500 dark:text-slate-400"> <a href="#hero" class="hover:text-primary-500 transition-colors">หน้าแรก</a> <a href="#about" class="hover:text-primary-500 transition-colors">เกี่ยวกับฉัน</a> <a href="#experience" class="hover:text-primary-500 transition-colors">ประสบการณ์</a> <a href="#contact" class="hover:text-primary-500 transition-colors">ติดต่อฉัน</a> </div> <!-- Back to Top Icon Button --> <a href="#hero" class="w-10 h-10 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400 flex items-center justify-center hover:text-primary-500 dark:hover:text-primary-400 transition-colors hover:scale-105" aria-label="Back to top"> <i data-lucide="arrow-up" class="w-5 h-5"></i> </a> </div> </div> </footer> <!-- Main JavaScript File --> <script src="assets/js/main.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.39 |
proxy
|
phpinfo
|
Settings