File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090021/69319090021/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"> <script> if (localStorage.getItem('theme') === 'light') { document.documentElement.classList.remove('dark'); } else { document.documentElement.classList.add('dark'); } </script> <title>Portfolio - เหมราช ขอนเอิบ</title> <meta name="description" content="Personal Portfolio Website of Hemaraj Khonerb. Minimalist Red & Black Dark Mode."> <!-- 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=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Tailwind CSS Play CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'], }, colors: { dark: { 50: '#f8fafc', 900: 'var(--bg-dark-950)', 950: 'var(--bg-dark-950)', }, slate: { 50: '#f8fafc', 100: 'var(--text-slate-100)', 200: 'var(--text-slate-200)', 300: 'var(--text-slate-300)', 400: 'var(--text-slate-400)', 500: 'var(--text-slate-500)', 600: '#707070', 700: '#505050', 800: 'var(--border-slate-800)', 900: 'var(--border-slate-900)', 950: 'var(--bg-slate-950)', }, 'slate-955': 'var(--bg-slate-955)', 'slate-850': 'var(--border-slate-850)', accent: { purple: '#ff2d55', /* Neon Crimson Red — primary accent / blue: 'var(--accent-blue)', indigo: '#cc1a3a', / Darker Crimson / }, // Utility aliases 'neon-red': '#ff2d55', 'neon-dim': 'rgba(255,45,85,0.18)', 'surface': '#111111', 'surface-2': '#1a1a1a', }, animation: { 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', 'float': 'float 6s ease-in-out infinite', }, keyframes: { float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-15px)' }, } }, borderRadius: { 'xl': '14px', '2xl': '20px', '3xl': '28px', }, boxShadow: { 'red': '0 8px 32px rgba(255,45,85,0.18)', 'red-lg': '0 16px 60px rgba(255,45,85,0.28)', 'red-sm': '0 4px 16px rgba(255,45,85,0.12)', } } } } </script> <!-- Lucide Icons --> <script src="https://unpkg.com/lucide@latest"></script> <style> :root { / ===== CYBERPUNK DARK THEME ===== / --bg-primary: #050505; --bg-secondary: #111111; --accent: #ff2d55; --accent-dim: rgba(255, 45, 85, 0.18); --accent-glow: rgba(255, 45, 85, 0.35); --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-muted: #a0a0a0; --text-faint: #606060; --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 45, 85, 0.45); --glass-bg: rgba(17, 17, 17, 0.55); --glass-border: rgba(255, 255, 255, 0.06); --glass-bg-hover: rgba(17, 17, 17, 0.75); --shadow-red: 0 8px 32px rgba(255, 45, 85, 0.18); --shadow-red-lg: 0 16px 60px rgba(255, 45, 85, 0.28); --glow-blob-1: rgba(255, 45, 85, 0.06); --glow-blob-2: rgba(200, 20, 50, 0.05); --glow-blob-3: rgba(30, 10, 15, 0.25); --input-bg: #0d0d0d; --input-border: rgba(255, 255, 255, 0.08); --placeholder: #505050; --radius: 20px; / Tailwind variable aliases / --bg-color-1: rgba(5, 5, 5, 0.93); --bg-color-2: rgba(5, 5, 5, 0.97); --bg-dark-950: #050505; --bg-slate-955: #0a0a0a; --bg-slate-950: #0d0d0d; --text-slate-100: #ffffff; --text-slate-200: #e0e0e0; --text-slate-300: #c0c0c0; --text-slate-400: #a0a0a0; --text-slate-500: #606060; --border-slate-800: rgba(255, 255, 255, 0.08); --border-slate-850: rgba(255, 255, 255, 0.06); --border-slate-900: rgba(255, 255, 255, 0.04); --accent-blue: #0d0d0d; --glow-rose: rgba(255, 45, 85, 0.06); --glow-red: rgba(200, 20, 50, 0.05); --glow-stone: rgba(30, 10, 15, 0.25); --text-logo-start: #ffffff; --text-logo-middle: #e0e0e0; --text-logo-end: #a0a0a0; } html:not(.dark) { / Light Theme overrides / --bg-color-1: rgba(248, 250, 252, 0.9); --bg-color-2: rgba(241, 245, 249, 0.95); --bg-dark-950: #f8fafc; --bg-slate-955: #f1f5f9; --bg-slate-950: #f1f5f9; --text-slate-100: #0f172a; --text-slate-200: #1e293b; --text-slate-300: #334155; --text-slate-400: #475569; --text-slate-500: #64748b; --border-slate-800: rgba(15, 23, 42, 0.08); --border-slate-850: rgba(15, 23, 42, 0.06); --border-slate-900: rgba(15, 23, 42, 0.05); --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(15, 23, 42, 0.08); --glass-bg-hover: rgba(255, 255, 255, 0.85); --accent-blue: #cbd5e1; --glow-rose: rgba(255, 45, 85, 0.08); --glow-red: rgba(200, 20, 50, 0.08); --glow-stone: rgba(203, 213, 225, 0.3); --input-bg: #ffffff; --input-border: #cbd5e1; --placeholder: #94a3b8; --text-logo-start: #0f172a; --text-logo-middle: #334155; --text-logo-end: #475569; } / Smooth transition for theme switching / , ::before, ::after { transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, fill 0.4s ease, stroke 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease; } .glass { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius, 20px); } .glass-hover:hover { background: var(--glass-bg-hover); border-color: rgba(255, 45, 85, 0.35); box-shadow: 0 10px 40px rgba(255, 45, 85, 0.18); } /* Custom scrollbar / ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #050505; } ::-webkit-scrollbar-thumb { background: rgba(255, 45, 85, 0.35); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 45, 85, 0.6); } body { background-color: #050505; background-image: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 45, 85, 0.07) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(200, 20, 50, 0.05) 0%, transparent 60%), linear-gradient(to bottom, rgba(5, 5, 5, 0.95), rgba(5, 5, 5, 0.99)), url('background.jpg'); background-size: cover; background-attachment: fixed; background-position: center; } .logo-text { background-image: linear-gradient(to right, #ffffff, #e0e0e0, #a0a0a0); } .glow-blob-1 { background-color: var(--glow-blob-1, rgba(255, 45, 85, 0.06)); } .glow-blob-2 { background-color: var(--glow-blob-2, rgba(200, 20, 50, 0.05)); } .glow-blob-3 { background-color: var(--glow-blob-3, rgba(30, 10, 15, 0.25)); } input::placeholder, textarea::placeholder { color: var(--placeholder, #505050) !important; } / Icon visibility based on theme / html.dark .dark-icon { display: block; } html.dark .light-icon { display: none; } html:not(.dark) .dark-icon { display: none; } html:not(.dark) .light-icon { display: block; } / ===== VIDEO INTRO SCREEN ===== / body.intro-active { overflow: hidden !important; height: 100vh; } #intro-screen { position: fixed; inset: 0; z-index: 9999; background: #000; / CSS auto-hide: fades out after 5s even if JS fails / animation: cssAutoHide 0.8s ease 5s forwards; } @keyframes cssAutoHide { to { opacity: 0; pointer-events: none; visibility: hidden; } } #intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } #intro-video.video-ready { animation: videoFadeIn 1s ease forwards; } @keyframes videoFadeIn { to { opacity: 1; } } / Dark cinematic overlay / #intro-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.8) 100%); z-index: 1; } / Letterbox bars / #intro-bar-top, #intro-bar-bottom { position: absolute; left: 0; width: 100%; height: 0; / start hidden — no letterbox by default / background: #000; z-index: 2; transition: height 1.4s cubic-bezier(0.76, 0, 0.24, 1) !important; } #intro-bar-top { top: 0; } #intro-bar-bottom { bottom: 0; } / bars appear when video ready / #intro-screen.bars-open #intro-bar-top, #intro-screen.bars-open #intro-bar-bottom { height: 60px; } / bars collapse when dismissed / #intro-screen.bars-gone #intro-bar-top, #intro-screen.bars-gone #intro-bar-bottom { height: 0; } / ---- CSS-driven animations (no JS class needed) ---- / @keyframes introTextIn { 0% { opacity: 0; transform: translateX(-50%) translateY(14px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes introLineIn { 0% { width: 0; } 100% { width: 300px; } } @keyframes introSkipIn { 0% { opacity: 0; } 100% { opacity: 1; } } / Center text block — animates in automatically after 0.4s / #intro-text { position: absolute; bottom: 100px; left: 50%; text-align: center; z-index: 3; white-space: nowrap; / CSS auto-animation — no JS required / opacity: 0; animation: introTextIn 0.9s ease 0.4s forwards; } #intro-text .intro-label { font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 6px; } #intro-text .intro-name { font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1.1; text-shadow: 0 0 40px rgba(225, 29, 72, 0.7); } #intro-text .intro-name span { background: linear-gradient(90deg, #e11d48, #f43f5e, #be123c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #intro-text .intro-sub { margin-top: 8px; font-size: 0.8rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.45); } / Neon line — expands automatically after 0.8s / #intro-line { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); height: 1px; background: linear-gradient(90deg, transparent, #e11d48, transparent); z-index: 3; width: 0; animation: introLineIn 1s ease 0.8s forwards; } / Skip button — appears after 1.2s / #intro-skip { position: absolute; top: 24px; right: 28px; z-index: 10; display: flex; align-items: center; gap: 6px; padding: 8px 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 99px; color: rgba(255, 255, 255, 0.75); font-size: 0.72rem; font-family: inherit; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); opacity: 0; animation: introSkipIn 0.5s ease 1.2s forwards; } #intro-skip:hover { background: rgba(225, 29, 72, 0.25); border-color: rgba(225, 29, 72, 0.55); color: #fff; } #intro-skip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } / Progress dots / #intro-progress-dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; } .intro-dot { width: 32px; height: 2px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; overflow: hidden; } .intro-dot-fill { height: 100%; width: 0%; background: #ff2d55; border-radius: 2px; } / Float animation kept for hero badges / @keyframes float-gentle { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1deg); } } .animate-float-gentle { animation: float-gentle 5s ease-in-out infinite; } / ===== HOLOGRAPHIC LOADER SCREEN ===== / #loader-screen { position: fixed; inset: 0; z-index: 10000; background: #050505; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.2s ease 1.2s; } / Scanning overlay lines / .scanlines { position: absolute; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04)); background-size: 100% 4px, 6px 100%; z-index: 2; pointer-events: none; opacity: 0.45; } .scanline-laser { position: absolute; width: 100%; height: 4px; background: linear-gradient(to right, transparent, #ff2d55, transparent); box-shadow: 0 0 20px #ff2d55, 0 0 40px #ff2d55; opacity: 0.8; z-index: 3; animation: laserScan 4s linear infinite; } @keyframes laserScan { 0% { top: -5%; } 100% { top: 105%; } } / Holographic sci-fi grid / .hologram-grid { position: absolute; inset: -50%; background-image: linear-gradient(rgba(255, 45, 85, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 45, 85, 0.03) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg) translateY(-20px); animation: gridScroll 15s linear infinite; opacity: 0.55; z-index: 1; } @keyframes gridScroll { 0% { background-position: 0 0; } 100% { background-position: 0 500px; } } / Glitchy central logo container / .loader-logo-wrapper { position: relative; margin-bottom: 25px; z-index: 4; display: flex; flex-direction: column; align-items: center; } .loader-logo-glow { width: 110px; height: 110px; background: radial-gradient(circle, rgba(255, 45, 85, 0.25) 0%, transparent 70%); position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); filter: blur(12px); animation: pulseGlow 2.5s ease-in-out infinite; } .loader-logo-box { width: 76px; height: 76px; border-radius: 20px; border: 2px solid #ff2d55; background: rgba(17, 17, 17, 0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 2.3rem; font-weight: 800; color: #ffffff; text-shadow: 0 0 10px rgba(255, 45, 85, 0.8); box-shadow: 0 0 20px rgba(255, 45, 85, 0.25), inset 0 0 15px rgba(255, 45, 85, 0.2); position: relative; animation: logoFloat 4s ease-in-out infinite; } @keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes pulseGlow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; } } / Glitch text / .glitch-text { position: relative; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: #ffffff; margin-top: 15px; text-shadow: 0.05em 0 0 rgba(255, 45, 85, 0.75), -0.025em -0.05em 0 rgba(0, 76, 255, 0.75); animation: glitch 2s infinite; } @keyframes glitch { 0% { text-shadow: 0.05em 0 0 rgba(255, 45, 85, 0.75), -0.025em -0.05em 0 rgba(0, 76, 255, 0.75); } 14% { text-shadow: 0.05em 0 0 rgba(255, 45, 85, 0.75), -0.025em -0.05em 0 rgba(0, 76, 255, 0.75); } 15% { text-shadow: -0.05em -0.025em 0 rgba(255, 45, 85, 0.75), 0.025em 0.025em 0 rgba(0, 76, 255, 0.75); } 49% { text-shadow: -0.05em -0.025em 0 rgba(255, 45, 85, 0.75), 0.025em 0.025em 0 rgba(0, 76, 255, 0.75); } 50% { text-shadow: 0.025em 0.05em 0 rgba(255, 45, 85, 0.75), -0.05em -0.025em 0 rgba(0, 76, 255, 0.75); } 99% { text-shadow: 0.025em 0.05em 0 rgba(255, 45, 85, 0.75), -0.05em -0.025em 0 rgba(0, 76, 255, 0.75); } 100% { text-shadow: -0.025em 0 0 rgba(255, 45, 85, 0.75), -0.025em -0.025em 0 rgba(0, 76, 255, 0.75); } } / Soundwave equalizer visualizer bars / .soundwave-visualizer { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 32px; margin-top: 20px; z-index: 4; } .soundwave-bar { width: 3px; height: 4px; background: #ff2d55; box-shadow: 0 0 8px #ff2d55; border-radius: 2px; animation: waveBounce 1s ease-in-out infinite alternate; } .soundwave-bar:nth-child(2) { animation-delay: 0.12s; } .soundwave-bar:nth-child(3) { animation-delay: 0.24s; } .soundwave-bar:nth-child(4) { animation-delay: 0.36s; } .soundwave-bar:nth-child(5) { animation-delay: 0.48s; } .soundwave-bar:nth-child(6) { animation-delay: 0.6s; } .soundwave-bar:nth-child(7) { animation-delay: 0.72s; } .soundwave-bar:nth-child(8) { animation-delay: 0.84s; } @keyframes waveBounce { 0% { height: 4px; } 100% { height: 30px; } } / Loader status percentages / .loader-stats-panel { margin-top: 25px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 4; } .loader-percentage { font-size: 2.6rem; font-weight: 800; color: #ffffff; font-family: monospace; letter-spacing: -0.02em; } .loader-percentage-symbol { font-size: 1.2rem; color: #ff2d55; font-weight: 600; } .loader-track { width: 280px; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; position: relative; } .loader-bar-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #ff2d55, #ff6080); box-shadow: 0 0 10px #ff2d55; } .loader-status-msg { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3em; color: #a0a0a0; font-weight: 600; margin-top: 6px; animation: textPulse 2s infinite alternate; } @keyframes textPulse { 0% { opacity: 0.6; } 100% { opacity: 1; } } / Mouse Trail Glow styles / .mouse-cursor-glow { position: fixed; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 45, 85, 0.55); box-shadow: 0 0 15px rgba(255, 45, 85, 0.8), 0 0 35px rgba(255, 45, 85, 0.4); pointer-events: none; transform: translate(-50%, -50%); mix-blend-mode: screen; z-index: 99999; display: none; } / Click Ripple / .click-ripple { position: fixed; border: 2px solid #ff2d55; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: clickRippleEffect 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; opacity: 0.8; box-shadow: 0 0 12px #ff2d55; z-index: 99998; } @keyframes clickRippleEffect { 0% { width: 0px; height: 0px; opacity: 0.8; } 100% { width: 120px; height: 120px; opacity: 0; } } / Aurora background effects for Hero section / .aurora-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0.45; } .aurora-light { position: absolute; filter: blur(140px); opacity: 0.35; mix-blend-mode: screen; border-radius: 50%; animation: auroraMove 25s infinite alternate ease-in-out; } .aurora-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 45, 85, 0.28) 0%, transparent 80%); top: -20%; left: 10%; } .aurora-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(200, 20, 50, 0.22) 0%, transparent 80%); bottom: -10%; right: 15%; animation-duration: 30s; } @keyframes auroraMove { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(80px, 45px) scale(1.15) rotate(180deg); } 100% { transform: translate(-40px, 80px) scale(0.9) rotate(360deg); } } / Premium Zoom Reveal for Main Content / #main-content { opacity: 0; transform: scale(1.08); / Start slightly zoomed in for premium transition */ transform-origin: center center; transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); } #main-content.content-revealed { opacity: 1; transform: scale(1); } </style> <!-- GSAP / Lenis scripts --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.39/dist/lenis.min.js"></script> </head> <body class="bg-dark-950 text-slate-100 font-sans antialiased overflow-x-hidden selection:bg-rose-500/30 selection:text-rose-200 intro-active"> <!-- ===== PREMIUM SCI-FI LOADER SCREEN ===== --> <div id="loader-screen" class="select-none"> <!-- Sci-fi ambient scanning overlays --> <div class="scanlines"></div> <div class="scanline-laser"></div> <div class="hologram-grid"></div> <!-- Central Glowing Glitchy Logo --> <div class="loader-logo-wrapper"> <div class="loader-logo-glow"></div> <div class="loader-logo-box">P</div> <div class="glitch-text">HEMARAJ</div> </div> <!-- Audio Drone Simulation Equalizer --> <div class="soundwave-visualizer"> <div class="soundwave-bar"></div> <div class="soundwave-bar"></div> <div class="soundwave-bar"></div> <div class="soundwave-bar"></div> <div class="soundwave-bar"></div> <div class="soundwave-bar"></div> <div class="soundwave-bar"></div> <div class="soundwave-bar"></div> </div> <!-- Progress Track --> <div class="loader-stats-panel"> <div class="loader-percentage"><span id="loader-percent-num">0</span><span class="loader-percentage-symbol">%</span></div> <div class="loader-track"> <div class="loader-bar-fill" id="loader-progress-fill"></div> </div> <div class="loader-status-msg" id="loader-status-text">INITIALIZING SYSTEMS...</div> </div> </div> <!-- ===== VIDEO INTRO SCREEN ===== --> <div id="intro-screen" class="select-none" style="display: none; opacity: 0;"> <!-- Background video --> <video id="intro-video" src="ssstik.io_@supernirvana3000_1783058838811%20(1).mp4" muted playsinline preload="auto"></video> <!-- Dark cinematic overlay --> <div id="intro-overlay"></div> <!-- Letterbox bars --> <div id="intro-bar-top"></div> <div id="intro-bar-bottom"></div> <!-- Animated name/title text --> <div id="intro-text"> <p class="intro-label">Portfolio</p> <h1 class="intro-name">เหมราช <span>ขอนเอิบ</span></h1> <p class="intro-sub">Entrepreneur & Developer</p> </div> <!-- Accent neon line --> <div id="intro-line"></div> <!-- Progress dots --> <div id="intro-progress-dots"> <div class="intro-dot" id="dot-0"> <div class="intro-dot-fill" id="dot-fill-0"></div> </div> <div class="intro-dot" id="dot-1"> <div class="intro-dot-fill" id="dot-fill-1"></div> </div> <div class="intro-dot" id="dot-2"> <div class="intro-dot-fill" id="dot-fill-2"></div> </div> </div> <!-- Skip button --> <button id="intro-skip" aria-label="Skip intro"> <svg viewBox="0 0 24 24"> <polygon points="5 4 15 12 5 20 5 4" /> <line x1="19" y1="5" x2="19" y2="19" /> </svg> Skip </button> </div> <!-- Main Content Wrapper --> <div id="main-content"> <!-- Decorative background glow blobs (Red/Black themed) --> <div class="absolute top-0 left-1/4 w-96 h-96 glow-blob-1 rounded-full blur-[100px] pointer-events-none -z-10 animate-pulse-slow"> </div> <div class="absolute top-1/3 right-1/4 w-[500px] h-[500px] glow-blob-2 rounded-full blur-[150px] pointer-events-none -z-10 animate-float"> </div> <div class="absolute bottom-1/4 left-1/3 w-80 h-80 glow-blob-3 rounded-full blur-[100px] pointer-events-none -z-10"> </div> <!-- Navigation Header --> <header class="fixed top-0 left-0 w-full z-50 transition-all duration-300 border-b border-transparent" id="navbar"> <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between"> <!-- Logo --> <a href="#hero" class="flex items-center gap-2 group"> <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-accent-purple to-accent-blue flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-rose-500/20 group-hover:scale-105 transition-transform duration-300 border border-rose-500/30"> P </div> <span class="text-xl font-bold bg-clip-text text-transparent logo-text">DevPortfolio</span> </a> <!-- Desktop Nav Links --> <nav class="hidden md:flex items-center gap-8"> <a href="#hero" class="text-sm font-medium text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors duration-200">Home</a> <a href="#about" class="text-sm font-medium text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors duration-200">About</a> <a href="#skills" class="text-sm font-medium text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors duration-200">Skills</a> <a href="#projects" class="text-sm font-medium text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors duration-200">Projects</a> <!-- Toggle Button Theme (Desktop) --> <button id="theme-toggle" class="p-2.5 rounded-xl border border-slate-900 hover:border-accent-purple text-slate-300 hover:text-slate-900 dark:hover:text-white transition-all duration-300 flex items-center justify-center" aria-label="Toggle Theme"> <i data-lucide="sun" class="w-5 h-5 hidden light-icon"></i> <i data-lucide="moon" class="w-5 h-5 hidden dark-icon"></i> </button> <a href="#contact" class="px-5 py-2.5 rounded-full bg-slate-950 border border-slate-900 text-sm font-medium text-slate-200 hover:text-slate-900 dark:hover:text-white hover:border-accent-purple transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/10">Contact Me</a> </nav> <!-- Mobile Controls --> <div class="flex items-center gap-3 md:hidden"> <!-- Toggle Button Theme (Mobile Header) --> <button id="theme-toggle-mobile" class="p-2.5 rounded-xl border border-slate-900 text-slate-300 hover:text-slate-900 dark:hover:text-white transition-all duration-300 flex items-center justify-center" aria-label="Toggle Theme"> <i data-lucide="sun" class="w-5 h-5 hidden light-icon"></i> <i data-lucide="moon" class="w-5 h-5 hidden dark-icon"></i> </button> <button class="p-2 text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors" id="menu-btn" aria-label="Toggle Menu"> <i data-lucide="menu" class="w-6 h-6" id="menu-icon"></i> </button> </div> </div> <!-- Mobile Menu Drawer --> <div class="hidden md:hidden absolute top-20 left-0 w-full glass border-b border-slate-900/80 transition-all duration-300 flex-col py-6 px-8 gap-6" id="mobile-menu"> <a href="#hero" class="text-base font-medium text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors py-2 mobile-link">Home</a> <a href="#about" class="text-base font-medium text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors py-2 mobile-link">About</a> <a href="#skills" class="text-base font-medium text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors py-2 mobile-link">Skills</a> <a href="#projects" class="text-base font-medium text-slate-300 hover:text-slate-900 dark:hover:text-white transition-colors py-2 mobile-link">Projects</a> <a href="#contact" class="px-5 py-3 rounded-xl bg-gradient-to-r from-accent-purple to-accent-blue text-white font-medium text-center shadow-lg shadow-rose-500/20 mobile-link">Contact Me</a> </div> </header> <!-- Hero Section --> <section id="hero" class="min-h-screen flex items-center justify-center pt-24 pb-16 px-6 relative overflow-hidden"> <!-- Aurora & Holographic ambient lighting --> <div class="aurora-bg"> <div class="aurora-light aurora-1"></div> <div class="aurora-light aurora-2"></div> </div> <div class="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10"> <!-- Info Column --> <div class="lg:col-span-7 flex flex-col items-start text-left space-y-6"> <!-- Badge --> <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-semibold tracking-wide uppercase"> <span class="w-2 h-2 rounded-full bg-rose-400 animate-ping"></span> ปัจจุบันศึกษาอยู่ที่วิทยาลัยเชียงใหม่ ปวส.1 </span> <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight"> ยินดีต้อนรับสู่ <br> <span class="bg-clip-text text-transparent bg-gradient-to-r from-accent-purple via-accent-indigo to-accent-blue"> แฟ้มสะสมผลงานของฉัน </span> </h1> <p class="text-base sm:text-lg text-slate-400 max-w-xl leading-relaxed"> สวัสดีครับ ผมชื่อ <strong>เหมราช ขอนเอิบ (นีโน่)</strong> อายุ 18 ปี ปัจจุบันศึกษาอยู่ชั้น ปวส.1 วิทยาลัยเชียงใหม่ ผมมีความฝันและมุ่งมั่นที่จะเติบโตเป็นนักธุรกิจที่ประสบความสำเร็จ </p> <!-- CTA buttons --> <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto"> <a href="#about" class="px-8 py-4 rounded-full bg-gradient-to-r from-accent-purple to-accent-indigo text-white font-semibold text-center hover:opacity-90 transition-opacity duration-300 shadow-lg shadow-rose-500/20 flex items-center justify-center gap-2 group"> รู้จักฉันมากขึ้น <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i> </a> <a href="#contact" class="px-8 py-4 rounded-full bg-slate-950 border border-slate-900 text-slate-200 font-semibold text-center hover:border-slate-800 hover:text-white transition-all duration-300 flex items-center justify-center gap-2"> ติดต่อฉัน </a> </div> </div> <!-- Visual/Graphic Column --> <div class="lg:col-span-5 flex justify-center items-center"> <div class="relative w-full max-w-[420px] aspect-square flex justify-center items-center animate-float"> <!-- Glassmorphism coding window mockup --> <div class="w-full h-[340px] rounded-2xl glass p-6 shadow-2xl relative border border-slate-900"> <div class="flex items-center gap-1.5 border-b border-slate-900 pb-4 mb-4"> <span class="w-3.5 h-3.5 rounded-full bg-rose-500/80"></span> <span class="w-3.5 h-3.5 rounded-full bg-amber-500/80"></span> <span class="w-3.5 h-3.5 rounded-full bg-emerald-500/80"></span> </div> <div class="font-mono text-sm text-slate-400 space-y-2 select-none"> <p class="text-rose-400"><span class="text-rose-500">const</span> student = {</p> <p class="pl-4">name: <span class="text-rose-400">'Hemaraj Khonerb'</span>,</p> <p class="pl-4">nickname: <span class="text-rose-400">'Neno'</span>,</p> <p class="pl-4">age: <span class="text-rose-400">18</span>,</p> <p class="pl-4">dream: <span class="text-rose-400">'Successful Businessman'</span></p> <p class="text-rose-400">};</p> </div> </div> <!-- Decorative badges floating (Red/Black themed) --> <div class="absolute -top-4 -right-4 glass px-4 py-3 rounded-xl flex items-center gap-2 shadow-lg border border-slate-800"> <div class="p-1.5 bg-rose-500/10 rounded-lg text-rose-500"> <i data-lucide="graduation-cap" class="w-5 h-5"></i> </div> <span class="text-xs font-semibold">ปวส.1 วิทยาลัยเชียงใหม่</span> </div> <div class="absolute -bottom-4 -left-4 glass px-4 py-3 rounded-xl flex items-center gap-2 shadow-lg border border-slate-800"> <div class="p-1.5 bg-rose-500/10 rounded-lg text-rose-500"> <i data-lucide="gem" class="w-5 h-5"></i> </div> <span class="text-xs font-semibold">อยากเป็นคนรวย / นักธุรกิจ</span> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="py-24 px-6 relative border-t border-slate-900/50"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-3xl mx-auto mb-16 space-y-4"> <span class="text-sm font-semibold tracking-wider text-accent-purple uppercase">ประวัติส่วนตัว</span> <h2 class="text-3xl sm:text-4xl font-bold">ข้อมูลของฉัน (Resume)</h2> <div class="w-16 h-1 bg-gradient-to-r from-accent-purple to-accent-blue mx-auto rounded-full"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <!-- Image or visual box --> <div class="lg:col-span-5 flex justify-center"> <div class="relative group"> <div class="absolute inset-0 bg-gradient-to-tr from-accent-purple to-accent-blue rounded-3xl blur-2xl opacity-25 group-hover:opacity-40 transition-opacity duration-300"> </div> <div class="relative w-72 h-80 rounded-2xl overflow-hidden glass p-3 border border-slate-900"> <div class="w-full h-full rounded-xl bg-slate-950 flex flex-col justify-center items-center text-center p-6 space-y-4"> <div class="w-24 h-24 rounded-full overflow-hidden border-2 border-rose-500/30 shadow-xl shadow-rose-500/20 flex items-center justify-center bg-slate-900"> <img src="profile.png" alt="เหมราช ขอนเอิบ" class="w-full h-full object-cover"> </div> <div> <h3 class="font-bold text-lg">เหมราช ขอนเอิบ</h3> <p class="text-xs text-slate-400">ชื่อเล่น: นีโน่ \| นักศึกษา</p> </div> <div class="w-full border-t border-slate-900 pt-4 flex justify-around"> <div class="text-center"> <p class="text-lg font-bold text-rose-500">18 ปี</p> <p class="text-[10px] text-slate-400">อายุ</p> </div> <div class="text-center"> <p class="text-lg font-bold text-rose-500">ปวส.1</p> <p class="text-[10px] text-slate-400">วิทยาลัยเชียงใหม่</p> </div> </div> </div> </div> </div> </div> <!-- Info description --> <div class="lg:col-span-7 space-y-6"> <h3 class="text-2xl font-bold text-slate-200">ประวัติโดยย่อ</h3> <p class="text-slate-400 leading-relaxed"> ผมชื่อ <strong>นายเหมราช ขอนเอิบ</strong> ชื่อเล่น <strong>นีโน่</strong> ปัจจุบันอายุ 18 ปี เกิดวันที่ 23 ตุลาคม พ.ศ. 2550 ปัจจุบันกำลังศึกษาอยู่ที่วิทยาลัยเชียงใหม่ ชั้น ปวส.1 และเป็นคนจังหวัดแพร่โดยกำเนิดครับ </p> <p class="text-slate-400 leading-relaxed"> <strong>ความฝัน & อาชีพที่อยากทำ:</strong> มีเป้าหมายสูงสุดคือการเป็น <strong>นักธุรกิจ</strong> และต้องการที่จะสร้างฐานะเป็นคนรวยเพื่อบรรลุความฝันและดูแลคนรอบข้างได้เป็นอย่างดี </p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-4 border-t border-slate-900/60"> <!-- กิจกรรมที่ชอบ --> <div> <h4 class="text-sm font-semibold text-rose-500 uppercase tracking-wider mb-3 flex items-center gap-2"> <i data-lucide="activity" class="w-4 h-4"></i> กิจกรรมที่ชอบ </h4> <ul class="space-y-2 text-slate-400 text-sm"> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-rose-600"></span> เที่ยวทะเล</li> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-rose-600"></span> ถ่ายรูป</li> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-rose-600"></span> อ่านหนังสือ</li> </ul> </div> <!-- งานอดิเรก --> <div> <h4 class="text-sm font-semibold text-rose-500 uppercase tracking-wider mb-3 flex items-center gap-2"> <i data-lucide="sparkles" class="w-4 h-4"></i> งานอดิเรก </h4> <ul class="space-y-2 text-slate-400 text-sm"> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-rose-600"></span> เดินเล่น</li> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-rose-600"></span> อ่านหนังสือ</li> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-rose-600"></span> เลี้ยงแมว</li> </ul> </div> </div> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills" class="py-24 px-6 relative border-t border-slate-900/50 bg-slate-950/20"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-3xl mx-auto mb-16 space-y-4"> <span class="text-sm font-semibold tracking-wider text-accent-purple uppercase">ทักษะและการจัดการ</span> <h2 class="text-3xl sm:text-4xl font-bold">แผนผังทักษะการบริหารและเทคโนโลยี (Business & Tech Roadmap)</h2> <div class="w-16 h-1 bg-gradient-to-r from-accent-purple to-accent-blue mx-auto rounded-full"></div> </div> <!-- Grid displaying categories --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Skill category card 1: Business Management --> <div class="glass glass-hover p-6 rounded-2xl transition-all duration-300 flex flex-col space-y-6"> <div class="flex items-center gap-4"> <div class="w-12 h-12 rounded-xl bg-rose-500/10 text-rose-500 flex items-center justify-center shrink-0 shadow-lg shadow-rose-500/5"> <i data-lucide="briefcase" class="w-6 h-6"></i> </div> <h3 class="font-bold text-lg text-slate-200">Business & Strategy</h3> </div> <div class="space-y-4 flex-grow"> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">กลยุทธ์การขายและการตลาด</span> <span class="text-rose-500 font-semibold font-mono">90%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 90%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">การเงินและการลงทุนธุรกิจ</span> <span class="text-rose-500 font-semibold font-mono">85%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 85%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">การวิเคราะห์และวางแผนธุรกิจ</span> <span class="text-rose-500 font-semibold font-mono">88%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 88%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">ภาวะผู้นำและการจัดการทีม</span> <span class="text-rose-500 font-semibold font-mono">92%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 92%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">การเจรจาและการนำเสนอ</span> <span class="text-rose-500 font-semibold font-mono">90%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 90%"></div> </div> </div> </div> </div> <!-- Skill category card 2: Frontend Dev --> <div class="glass glass-hover p-6 rounded-2xl transition-all duration-300 flex flex-col space-y-6"> <div class="flex items-center gap-4"> <div class="w-12 h-12 rounded-xl bg-rose-500/10 text-rose-500 flex items-center justify-center shrink-0 shadow-lg shadow-rose-500/5"> <i data-lucide="layout" class="w-6 h-6"></i> </div> <h3 class="font-bold text-lg text-slate-200">Frontend Dev</h3> </div> <div class="space-y-4 flex-grow"> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">HTML5 / CSS3 / Tailwind CSS</span> <span class="text-rose-500 font-semibold font-mono">95%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 95%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">JS (ES6+) / React / Next.js</span> <span class="text-rose-500 font-semibold font-mono">90%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 90%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">Responsive Web Design</span> <span class="text-rose-500 font-semibold font-mono">92%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 92%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">UI/UX Design สำหรับการขาย</span> <span class="text-rose-500 font-semibold font-mono">88%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 88%"></div> </div> </div> </div> </div> <!-- Skill category card 3: Backend Dev --> <div class="glass glass-hover p-6 rounded-2xl transition-all duration-300 flex flex-col space-y-6"> <div class="flex items-center gap-4"> <div class="w-12 h-12 rounded-xl bg-rose-500/10 text-rose-500 flex items-center justify-center shrink-0 shadow-lg shadow-rose-500/5"> <i data-lucide="server" class="w-6 h-6"></i> </div> <h3 class="font-bold text-lg text-slate-200">Backend Dev</h3> </div> <div class="space-y-4 flex-grow"> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">Node.js / Express API</span> <span class="text-rose-500 font-semibold font-mono">85%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 85%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">ฐานข้อมูล SQL / NoSQL</span> <span class="text-rose-500 font-semibold font-mono">80%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 80%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">ระบบการจ่ายเงิน & E-Commerce</span> <span class="text-rose-500 font-semibold font-mono">85%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 85%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">ระบบความปลอดภัย & Auth</span> <span class="text-rose-500 font-semibold font-mono">82%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 82%"></div> </div> </div> </div> </div> <!-- Skill category card 4: Tools & Analytics --> <div class="glass glass-hover p-6 rounded-2xl transition-all duration-300 flex flex-col space-y-6"> <div class="flex items-center gap-4"> <div class="w-12 h-12 rounded-xl bg-rose-500/10 text-rose-500 flex items-center justify-center shrink-0 shadow-lg shadow-rose-500/5"> <i data-lucide="sliders" class="w-6 h-6"></i> </div> <h3 class="font-bold text-lg text-slate-200">Tools & Analytics</h3> </div> <div class="space-y-4 flex-grow"> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">Git / GitHub / Docker</span> <span class="text-rose-500 font-semibold font-mono">90%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 90%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">Linux Server / Cloud VPS</span> <span class="text-rose-500 font-semibold font-mono">80%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 80%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">SEO & ค้นหาบนกูเกิล</span> <span class="text-rose-500 font-semibold font-mono">85%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 85%"></div> </div> </div> <div class="space-y-1.5"> <div class="flex justify-between items-center text-xs"> <span class="text-slate-300 font-medium">Google Analytics & Metrics</span> <span class="text-rose-500 font-semibold font-mono">88%</span> </div> <div class="w-full bg-slate-950/60 dark:bg-slate-950/60 rounded-full h-1.5 overflow-hidden border border-slate-800"> <div class="bg-gradient-to-r from-accent-purple to-accent-blue h-full rounded-full" style="width: 88%"></div> </div> </div> </div> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="py-24 px-6 relative border-t border-slate-900/50"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-3xl mx-auto mb-16 space-y-4"> <span class="text-sm font-semibold tracking-wider text-accent-purple uppercase">ผลงานที่โดดเด่น</span> <h2 class="text-3xl sm:text-4xl font-bold">ผลงานล่าสุดของฉัน</h2> <div class="w-16 h-1 bg-gradient-to-r from-accent-purple to-accent-blue mx-auto rounded-full"></div> </div> <!-- Project Cards Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project Card 1 --> <div class="glass rounded-2xl overflow-hidden group hover:scale-[1.02] hover:border-rose-500/30 transition-all duration-300 flex flex-col h-full"> <!-- Project Preview/Thumbnail --> <div class="h-48 bg-gradient-to-tr from-rose-100 via-zinc-100 to-zinc-200 dark:from-rose-950 dark:via-slate-950 dark:to-black relative flex items-center justify-center overflow-hidden border-b border-slate-900"> <div class="absolute inset-0 bg-grid-pattern opacity-10"></div> <i data-lucide="shopping-bag" class="w-16 h-16 text-rose-500/80 group-hover:scale-110 transition-transform duration-300"></i> <span class="absolute top-4 right-4 bg-rose-500/20 text-rose-300 text-xs px-2.5 py-1 rounded-full border border-rose-500/20">E-Commerce</span> </div> <!-- Details --> <div class="p-6 flex flex-col flex-grow space-y-4"> <h3 class="font-bold text-xl group-hover:text-rose-500 transition-colors">Premium Shop Platform</h3> <p class="text-sm text-slate-400 flex-grow leading-relaxed"> ระบบร้านค้าออนไลน์ประสิทธิภาพสูงพร้อมระบบจัดการสต็อกสินค้าอัตโนมัติ การวิเคราะห์สถิติยอดขาย และเชื่อมต่อช่องทางชำระเงินเต็มระบบ </p> <!-- Tech Tags --> <div class="flex flex-wrap gap-2 pt-2"> <span class="text-xs px-2.5 py-1 rounded bg-slate-950 text-slate-300 border border-slate-800">React</span> <span class="text-xs px-2.5 py-1 rounded bg-slate-950 text-slate-300 border border-slate-800">Tailwind</span> <span class="text-xs px-2.5 py-1 rounded bg-slate-950 text-slate-300 border border-slate-800">NodeJS</span> </div> <!-- Links --> <div class="flex justify-between items-center pt-4 border-t border-slate-850"> <a href="#" class="text-sm text-slate-400 hover:text-slate-900 dark:hover:text-white flex items-center gap-1.5 transition-colors"> <i data-lucide="github" class="w-4 h-4"></i> Code </a> <a href="#" class="text-sm text-rose-500 hover:text-rose-700 dark:hover:text-rose-300 flex items-center gap-1.5 transition-colors font-medium"> Demo <i data-lucide="external-link" class="w-4 h-4"></i> </a> </div> </div> </div> <!-- Project Card 2 --> <div class="glass rounded-2xl overflow-hidden group hover:scale-[1.02] hover:border-rose-500/30 transition-all duration-300 flex flex-col h-full"> <!-- Project Preview/Thumbnail --> <div class="h-48 bg-gradient-to-tr from-rose-100 via-zinc-100 to-zinc-200 dark:from-rose-950 dark:via-slate-950 dark:to-black relative flex items-center justify-center overflow-hidden border-b border-slate-900"> <div class="absolute inset-0 bg-grid-pattern opacity-10"></div> <i data-lucide="line-chart" class="w-16 h-16 text-rose-500/80 group-hover:scale-110 transition-transform duration-300"></i> <span class="absolute top-4 right-4 bg-rose-500/20 text-rose-300 text-xs px-2.5 py-1 rounded-full border border-rose-500/20">Analytics SaaS</span> </div> <!-- Details --> <div class="p-6 flex flex-col flex-grow space-y-4"> <h3 class="font-bold text-xl group-hover:text-rose-500 transition-colors">Business Analytics Dashboard</h3> <p class="text-sm text-slate-400 flex-grow leading-relaxed"> แดชบอร์ดแสดงผลข้อมูลธุรกิจและการเงินแบบ Real-time พร้อมฟังก์ชันกรองข้อมูลขั้นสูง และรายงานสถิติเชิงลึกด้วยกราฟแบบตอบสนอง </p> <!-- Tech Tags --> <div class="flex flex-wrap gap-2 pt-2"> <span class="text-xs px-2.5 py-1 rounded bg-slate-955 text-slate-300 border border-slate-800">Next.js</span> <span class="text-xs px-2.5 py-1 rounded bg-slate-955 text-slate-300 border border-slate-800">Tailwind</span> <span class="text-xs px-2.5 py-1 rounded bg-slate-955 text-slate-300 border border-slate-800">Chart.js</span> </div> <!-- Links --> <div class="flex justify-between items-center pt-4 border-t border-slate-850"> <a href="#" class="text-sm text-slate-400 hover:text-slate-900 dark:hover:text-white flex items-center gap-1.5 transition-colors"> <i data-lucide="github" class="w-4 h-4"></i> Code </a> <a href="#" class="text-sm text-rose-500 hover:text-rose-700 dark:hover:text-rose-300 flex items-center gap-1.5 transition-colors font-medium"> Demo <i data-lucide="external-link" class="w-4 h-4"></i> </a> </div> </div> </div> <!-- Project Card 3 --> <div class="glass rounded-2xl overflow-hidden group hover:scale-[1.02] hover:border-rose-500/30 transition-all duration-300 flex flex-col h-full"> <!-- Project Preview/Thumbnail --> <div class="h-48 bg-gradient-to-tr from-rose-100 via-zinc-100 to-zinc-200 dark:from-rose-950 dark:via-slate-950 dark:to-black relative flex items-center justify-center overflow-hidden border-b border-slate-900"> <div class="absolute inset-0 bg-grid-pattern opacity-10"></div> <i data-lucide="calendar" class="w-16 h-16 text-rose-500/80 group-hover:scale-110 transition-transform duration-300"></i> <span class="absolute top-4 right-4 bg-rose-500/20 text-rose-300 text-xs px-2.5 py-1 rounded-full border border-rose-500/20">Scheduling App</span> </div> <!-- Details --> <div class="p-6 flex flex-col flex-grow space-y-4"> <h3 class="font-bold text-xl group-hover:text-rose-500 transition-colors">Task Planner Pro </h3> <p class="text-sm text-slate-400 flex-grow leading-relaxed"> แอปพลิเคชันจัดระเบียบงานและนัดหมายในทีม มีการแจ้งเตือนอีเมลและแชทกลุ่มอัตโนมัติ เพื่อเพิ่มประสิทธิภาพการสื่อสารในองค์กร </p> <!-- Tech Tags --> <div class="flex flex-wrap gap-2 pt-2"> <span class="text-xs px-2.5 py-1 rounded bg-slate-955 text-slate-300 border border-slate-800">HTML5</span> <span class="text-xs px-2.5 py-1 rounded bg-slate-955 text-slate-300 border border-slate-800">Tailwind</span> <span class="text-xs px-2.5 py-1 rounded bg-slate-955 text-slate-300 border border-slate-800">Laravel PHP</span> </div> <!-- Links --> <div class="flex justify-between items-center pt-4 border-t border-slate-850"> <a href="#" class="text-sm text-slate-400 hover:text-slate-900 dark:hover:text-white flex items-center gap-1.5 transition-colors"> <i data-lucide="github" class="w-4 h-4"></i> Code </a> <a href="#" class="text-sm text-rose-500 hover:text-rose-700 dark:hover:text-rose-300 flex items-center gap-1.5 transition-colors font-medium"> Demo <i data-lucide="external-link" class="w-4 h-4"></i> </a> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-24 px-6 relative border-t border-slate-900/50"> <div class="max-w-7xl mx-auto"> <div class="text-center max-w-3xl mx-auto mb-16 space-y-4"> <span class="text-sm font-semibold tracking-wider text-accent-purple uppercase">ช่องทางติดต่อ</span> <h2 class="text-3xl sm:text-4xl font-bold">มาร่วมสร้างสรรค์งานด้วยกัน</h2> <div class="w-16 h-1 bg-gradient-to-r from-accent-purple to-accent-blue mx-auto rounded-full"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12"> <!-- Info details column --> <div class="lg:col-span-5 space-y-6"> <h3 class="text-2xl font-bold text-slate-200">เริ่มติดต่อฉันได้เลย</h3> <p class="text-slate-400 leading-relaxed"> สามารถส่งข้อความรายละเอียดสอบถาม หรือติดต่อคุยงานผ่านช่องทางด้านล่างนี้ได้เลยครับ! </p> <div class="space-y-4 pt-4"> <div class="flex items-center gap-4"> <div class="w-11 h-11 rounded-lg bg-rose-500/10 text-rose-500 flex items-center justify-center shrink-0"> <i data-lucide="mail" class="w-5 h-5"></i> </div> <div> <p class="text-xs text-slate-500">อีเมล</p> <a href="mailto:kamonphan1966@gmail.com" class="text-sm font-medium hover:text-rose-500 transition-colors">kamonphan1966@gmail.com</a> </div> </div> <div class="flex items-center gap-4"> <div class="w-11 h-11 rounded-lg bg-rose-500/10 text-rose-500 flex items-center justify-center shrink-0"> <i data-lucide="phone" class="w-5 h-5"></i> </div> <div> <p class="text-xs text-slate-500">เบอร์โทรศัพท์</p> <a href="tel:+66988725763" class="text-sm font-medium hover:text-rose-500 transition-colors">098-87257-63</a> </div> </div> <div class="flex items-center gap-4"> <div class="w-11 h-11 rounded-lg bg-rose-500/10 text-rose-500 flex items-center justify-center shrink-0"> <i data-lucide="map-pin" class="w-5 h-5"></i> </div> <div> <p class="text-xs text-slate-500">ที่อยู่ / ภูมิลำเนา</p> <p class="text-sm font-medium text-slate-300">จ.แพร่, ประเทศไทย</p> </div> </div> </div> </div> <!-- Form Column --> <div class="lg:col-span-7"> <form class="glass p-8 rounded-3xl space-y-6" id="contact-form" onsubmit="event.preventDefault(); alert('ส่งข้อความสำเร็จแล้ว! (ตัวอย่างระบบ)');"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div class="space-y-2"> <label for="name" class="text-xs font-semibold text-slate-400 uppercase tracking-wider">ชื่อของคุณ</label> <input type="text" id="name" required class="w-full bg-slate-950 border border-slate-900 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-rose-500 transition-all text-white placeholder-slate-650" placeholder="สมชาย ใจดี"> </div> <div class="space-y-2"> <label for="email" class="text-xs font-semibold text-slate-400 uppercase tracking-wider">อีเมลของคุณ</label> <input type="email" id="email" required class="w-full bg-slate-950 border border-slate-900 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-rose-500 transition-all text-white placeholder-slate-650" placeholder="somchai@email.com"> </div> </div> <div class="space-y-2"> <label for="subject" class="text-xs font-semibold text-slate-400 uppercase tracking-wider">หัวข้อ</label> <input type="text" id="subject" required class="w-full bg-slate-950 border border-slate-900 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-rose-500 transition-all text-white placeholder-slate-650" placeholder="สอบถามบริการ/ร่วมงานกัน"> </div> <div class="space-y-2"> <label for="message" class="text-xs font-semibold text-slate-400 uppercase tracking-wider">ข้อความ</label> <textarea id="message" required rows="5" class="w-full bg-slate-950 border border-slate-900 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-rose-500 transition-all text-white placeholder-slate-650" placeholder="เขียนรายละเอียดเกี่ยวกับโปรเจกต์หรือเรื่องที่คุณต้องการพูดคุย"></textarea> </div> <button type="submit" class="w-full py-4 rounded-xl bg-gradient-to-r from-accent-purple to-accent-blue text-white font-semibold shadow-lg shadow-rose-500/20 hover:opacity-90 transition-all flex items-center justify-center gap-2 group border border-rose-500/30"> ส่งข้อความ <i data-lucide="send" class="w-4 h-4 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i> </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="py-12 border-t border-slate-900 px-6 bg-slate-950"> <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6"> <p class="text-sm text-slate-500 text-center md:text-left"> © 2026 DevPortfolio. All rights reserved. ออกแบบและพัฒนาด้วย <span class="text-rose-500">♥</span> </p> <!-- Social Link Icons --> <div class="flex items-center gap-6"> <a href="#" class="w-10 h-10 rounded-full border border-slate-800 flex items-center justify-center text-slate-400 hover:text-rose-500 hover:border-rose-500/30 transition-all duration-300"> <i data-lucide="github" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-full border border-slate-800 flex items-center justify-center text-slate-400 hover:text-rose-500 hover:border-rose-500/30 transition-all duration-300"> <i data-lucide="linkedin" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-full border border-slate-800 flex items-center justify-center text-slate-400 hover:text-rose-500 hover:border-rose-500/30 transition-all duration-300"> <i data-lucide="instagram" class="w-5 h-5"></i> </a> <a href="#" class="w-10 h-10 rounded-full border border-slate-800 flex items-center justify-center text-slate-400 hover:text-rose-500 hover:border-rose-500/30 transition-all duration-300"> <i data-lucide="twitter" class="w-5 h-5"></i> </a> </div> </div> </footer> </div> <!-- end of #main-content --> <!-- Script File connection --> <script src="script.js"></script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.34 | proxy | phpinfo | Settings