File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090019/protfolio/index.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sivakorn Gantawong \| พอร์ตโฟลิโอของนักพัฒนาซอฟต์แวร์ผู้สร้างสรรค์</title> <!-- 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=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- CSS Styles --> <style> /* CSS Reset & Variables / :root { --bg-primary: #0b0f19; --bg-secondary: #111827; --bg-tertiary: #1f2937; --accent-primary: #6366f1; / Indigo / --accent-secondary: #14b8a6; / Teal / --accent-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-muted: #6b7280; --card-border: rgba(255, 255, 255, 0.08); --card-bg: rgba(17, 24, 39, 0.7); --header-bg: rgba(11, 15, 25, 0.8); --font-sans: 'Sarabun', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: 'Outfit', 'Sarabun', sans-serif; --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --max-width: 1200px; } / Light theme variables / html[data-theme="light"] { --bg-primary: #f8fafc; --bg-secondary: #f1f5f9; --bg-tertiary: #e2e8f0; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --card-border: rgba(0, 0, 0, 0.08); --card-bg: rgba(255, 255, 255, 0.8); --header-bg: rgba(248, 250, 252, 0.8); } { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.8; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Typography / h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; } a { color: inherit; text-decoration: none; transition: var(--transition-smooth); } button, input, textarea { font-family: inherit; } / Utility Components / .container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; } .section { padding: 8rem 0; position: relative; } .section-header { margin-bottom: 4rem; text-align: center; } .section-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .section-subtitle { color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0 auto; } / Ambient Glow Backgrounds / .glow-orb { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(20, 184, 166, 0.05) 50%, rgba(0, 0, 0, 0) 100%); filter: blur(40px); z-index: -1; pointer-events: none; } / Navigation Bar / .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-border); transition: var(--transition-smooth); } .navbar.scrolled { padding: 0.8rem 0; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3); } .nav-container { display: flex; justify-content: space-between; align-items: center; height: 70px; } .logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 0.5rem; } .logo span { color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); } .nav-links { display: flex; gap: 2.5rem; align-items: center; list-style: none; } .nav-link { font-weight: 500; font-size: 0.95rem; color: var(--text-secondary); position: relative; padding: 0.5rem 0; } .nav-link:hover, .nav-link.active { color: var(--text-primary); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent-gradient); transition: var(--transition-smooth); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-btn { background: var(--accent-gradient); color: #fff; padding: 0.6rem 1.5rem; border-radius: 50px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); } .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); } / Burger Menu Menu / .burger { display: none; cursor: pointer; background: none; border: none; z-index: 1100; padding: 0.5rem; } .burger div { width: 25px; height: 2px; background-color: var(--text-primary); margin: 6px 0; transition: var(--transition-smooth); } / Theme Toggle Button Styles / .theme-toggle { background: none; border: none; color: var(--text-primary); cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--transition-smooth); border: 1px solid var(--card-border); } .theme-toggle:hover { background-color: var(--bg-tertiary); color: var(--accent-primary); transform: scale(1.05); } / Hobbies Section Hover / .hobby-card:hover { transform: translateY(-5px); border-color: var(--accent-primary) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; } .hobby-card:hover .hobby-icon { transform: scale(1.1); background: rgba(99, 102, 241, 0.2) !important; } / Scroll Animations / .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); } .reveal.active { opacity: 1; transform: translateY(0); } / Profile Glow effect / .hero-image-wrapper::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; pointer-events: none; } / Hero Section / .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 100px; background: radial-gradient(ellipse at bottom, var(--bg-secondary) 0%, var(--bg-primary) 80%); } .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; } .hero-content { z-index: 10; } .hero-greeting { font-size: 1.1rem; color: var(--accent-secondary); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; display: block; } .hero-title { font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.5rem; } .hero-title span { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-tagline { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 600px; } .hero-cta { display: flex; gap: 1.5rem; align-items: center; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 2rem; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: var(--transition-smooth); } .btn-primary { background: var(--accent-gradient); color: #fff; border: none; box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--card-border); backdrop-filter: blur(10px); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--text-secondary); transform: translateY(-3px); } .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; perspective: 1000px; } .hero-image-wrapper { position: relative; width: 400px; height: 400px; max-width: 100%; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; background: var(--accent-gradient); animation: morphing 15s ease-in-out infinite alternate; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 15px 50px rgba(99, 102, 241, 0.25); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .hero-image-wrapper svg { width: 60%; height: 60%; fill: #fff; opacity: 0.9; } @keyframes morphing { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; } 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } } / About Me Section / .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 5rem; align-items: start; } .about-text p { color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 1.05rem; } .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .stat-item { background: var(--card-bg); border: 1px solid var(--card-border); padding: 1.5rem; border-radius: 12px; text-align: center; } .stat-num { font-size: 2.2rem; font-weight: 800; color: var(--accent-secondary); display: block; margin-bottom: 0.25rem; font-family: var(--font-display); } .stat-label { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } / Skills block / .skills-container { display: flex; flex-direction: column; gap: 1.8rem; } .skill-group-title { font-size: 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; } .skill-card { background: var(--card-bg); border: 1px solid var(--card-border); padding: 1rem; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; transition: var(--transition-smooth); } .skill-card:hover { transform: translateY(-5px); border-color: var(--accent-primary); box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.3); } .skill-icon { width: 36px; height: 36px; color: var(--accent-secondary); display: flex; align-items: center; justify-content: center; } .skill-name { font-size: 0.9rem; font-weight: 600; text-align: center; } / Portfolio / Projects Section / .portfolio-filters { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; } .filter-btn { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary); padding: 0.6rem 1.5rem; border-radius: 30px; cursor: pointer; font-weight: 500; transition: var(--transition-smooth); } .filter-btn.active, .filter-btn:hover { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); } .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; } .project-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; transition: var(--transition-smooth); display: flex; flex-direction: column; } .project-card:hover { transform: translateY(-8px); border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5); } .project-img-wrapper { position: relative; width: 100%; height: 220px; overflow: hidden; background: linear-gradient(45deg, #111827, #1f2937); } .project-img-wrapper svg { width: 100%; height: 100%; opacity: 0.15; transition: var(--transition-smooth); } .project-card:hover .project-img-wrapper svg { transform: scale(1.05); opacity: 0.25; } .project-img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(11, 15, 25, 0.9) 100%); } .project-content { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; } .project-tags { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .project-tag { font-size: 0.75rem; background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); padding: 0.25rem 0.75rem; border-radius: 20px; font-weight: 600; } .project-title { font-size: 1.4rem; margin-bottom: 0.75rem; } .project-desc { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 1.5rem; flex-grow: 1; } .project-links { display: flex; gap: 1rem; align-items: center; } .project-link { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: 0.5rem; } .project-link:hover { color: var(--accent-secondary); } / Contact Section / .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 5rem; align-items: start; } .contact-info { display: flex; flex-direction: column; gap: 2rem; } .contact-info-title { font-size: 1.8rem; margin-bottom: 0.5rem; } .contact-desc { color: var(--text-secondary); margin-bottom: 1rem; } .contact-details { display: flex; flex-direction: column; gap: 1.5rem; } .contact-detail-item { display: flex; align-items: center; gap: 1rem; } .contact-detail-icon { width: 48px; height: 48px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-secondary); } .contact-detail-content span { display: block; font-size: 0.85rem; color: var(--text-muted); } .contact-detail-content a, .contact-detail-content p { font-weight: 600; font-size: 1rem; } .social-links { display: flex; gap: 1rem; margin-top: 1rem; } .social-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition-smooth); } .social-icon:hover { background: var(--accent-primary); color: #fff; transform: translateY(-3px); border-color: var(--accent-primary); } / Contact Form / .contact-form-wrapper { background: var(--card-bg); border: 1px solid var(--card-border); padding: 2.5rem; border-radius: 16px; backdrop-filter: blur(10px); } .form-group { margin-bottom: 1.5rem; position: relative; } .form-label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .form-control { width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-border); border-radius: 8px; padding: 0.85rem 1rem; color: var(--text-primary); font-size: 1rem; transition: var(--transition-smooth); } .form-control:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); background: rgba(255, 255, 255, 0.05); } textarea.form-control { resize: vertical; min-height: 120px; } .btn-submit { width: 100%; border: none; outline: none; } / Footer / footer { border-top: 1px solid var(--card-border); padding: 2.5rem 0; background: var(--bg-secondary); text-align: center; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .footer-text { color: var(--text-muted); font-size: 0.9rem; } / Success Toast Notification / .toast { position: fixed; bottom: 30px; right: 30px; background: #10b981; color: #fff; padding: 1rem 2rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 0.75rem; z-index: 2000; transform: translateY(150%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); font-weight: 600; } .toast.show { transform: translateY(0); } / Responsive Breakpoints / @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 3rem; } .hero-content { order: 2; } .hero-visual { order: 1; } .hero-cta { justify-content: center; } .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 4rem; } .stat-item { padding: 1.25rem; } } @media (max-width: 768px) { .section { padding: 6rem 0; } .hero-title { font-size: 2.8rem; } / Mobile Navigation Trigger / .burger { display: block; } .nav-links { position: fixed; right: 0; top: 0; height: 100vh; width: 280px; background-color: var(--bg-secondary); border-left: 1px solid var(--card-border); flex-direction: column; justify-content: center; gap: 2rem; padding: 3rem; transform: translateX(100%); transition: transform 0.4s ease-in-out; } .nav-links.nav-active { transform: translateX(0); } .burger.toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); } .burger.toggle .line2 { opacity: 0; } .burger.toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); } .footer-content { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .hero-title { font-size: 2.2rem; } .hero-cta { flex-direction: column; width: 100%; } .hero-cta .btn { width: 100%; } .about-stats { grid-template-columns: 1fr; gap: 1rem; } .contact-form-wrapper { padding: 1.5rem; } } </style> </head> <body> <!-- Ambient background light effects --> <div class="glow-orb" style="top: 10%; left: -100px;"></div> <div class="glow-orb" style="top: 50%; right: -150px; background: radial-gradient(circle, rgba(20, 184, 166, 0.15) 0%, rgba(99, 102, 241, 0.05) 50%, rgba(0,0,0,0) 100%);"> </div> <!-- Navigation Header --> <header class="navbar" id="navbar"> <div class="container nav-container"> <a href="#home" class="logo"> Sivakorn<span>Gantawong</span> </a> <ul class="nav-links" id="nav-links"> <li><a href="#home" class="nav-link active">หน้าแรก</a></li> <li><a href="#about" class="nav-link">เกี่ยวกับฉัน</a></li> <li><a href="#hobbies" class="nav-link">งานอดิเรก</a></li> <li><a href="#contact" class="nav-link">ติดต่อ</a></li> </ul> <div style="display: flex; align-items: center; gap: 1rem;"> <button id="theme-toggle" class="theme-toggle" aria-label="Toggle Theme"> <!-- Sun Icon (shown in Dark mode) --> <svg class="theme-icon-sun" viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" style="display: block;"> <circle cx="12" cy="12" r="5" /> <line x1="12" y1="1" x2="12" y2="3" /> <line x1="12" y1="21" x2="12" y2="23" /> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /> <line x1="1" y1="12" x2="3" y2="12" /> <line x1="21" y1="12" x2="23" y2="12" /> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /> </svg> <!-- Moon Icon (shown in Light mode) --> <svg class="theme-icon-moon" viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" style="display: none;"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /> </svg> </button> <button class="burger" id="burger" aria-label="Toggle Navigation"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </button> </div> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="container hero-grid"> <div class="hero-content"> <span class="hero-greeting">ยินดีต้อนรับสู่พื้นที่ของผม</span> <h1 class="hero-title">เกี่ยวกับตัวผม <span></span></h1> <p class="hero-tagline"></p> <div class="hero-cta"> <a href="#hobbies" class="btn btn-primary">ดูงานอดิเรกของผม</a> <a href="#contact" class="btn btn-secondary">ติดต่อผม</a> </div> </div> <div class="hero-visual"> <div class="hero-image-wrapper"> <img src="images/4894455822532343781.453654da56409080ffb89ac063dba3c1.23061615.jpg" alt="Sivakorn Gantawong" style="width: 100%; height: 100%; object-fit: cover;"> </div> </div> </div> </section> <!-- About Me Section --> <section id="about" class="section"> <div class="container"> <div class="section-header"> <h2 class="section-title">เกี่ยวกับฉัน</h2> <p class="section-subtitle"> </p> </div> <div class="about-content reveal" style="max-width: 800px; margin: 0 auto; text-align: center; font-size: 1.25rem; line-height: 2; padding: 3rem 2rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 24px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);"> <p style="margin-bottom: 0;">สวัสดีครับ! ผม <strong>นาย ศิวกร กันธะวงค์</strong> (ชื่อเล่น: <strong>คิม</strong>) อายุ 20 ปี เกิดวันที่ 10 มิถุนายน พ.ศ. 2549 ปัจจุบันกำลังศึกษาอยู่ที่ <strong>วิทยาลัยเทคนิคเชียงใหม่</strong> </p> </div> </div> </section> <!-- Hobbies Section --> <section id="hobbies" class="section" style="background-color: var(--bg-secondary);"> <div class="container"> <div class="section-header reveal"> <h2 class="section-title">งานอดิเรก</h2> <p class="section-subtitle">สิ่งที่ผมชอบทำในเวลาว่างเพื่อผ่อนคลายและเติมพลังชีวิต</p> </div> <div class="hobbies-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem;"> <!-- Hobby 1 --> <div class="hobby-card reveal" style="background: var(--card-bg); border: 1px solid var(--card-border); padding: 2.5rem; border-radius: 16px; text-align: center; transition: var(--transition-smooth); box-shadow: 0 4px 30px rgba(0,0,0,0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);"> <div class="hobby-icon" style="width: 70px; height: 70px; background: rgba(99, 102, 241, 0.1); color: var(--accent-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; transition: var(--transition-smooth);"> <svg viewBox="0 0 24 24" width="36" height="36" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M2 22v-3a10 10 0 0 1 20 0v3" /> <path d="M2 19a10 10 0 0 1 20 0" /> <path d="M12 2a4 4 0 0 0-4 4v3h8V6a4 4 0 0 0-4-4z" /> <path d="M10 15h4" /> <path d="M18 4a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2" stroke-width="1.5" /> <path d="M15 7a1.5 1.5 0 0 1 1.5 1.5v0a1.5 1.5 0 0 1-1.5 1.5" stroke-width="1.5" /> </svg> </div> <h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; font-family: var(--font-display);"> ชอบนอน</h3> <p style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6;"> การพักผ่อนอย่างเต็มที่เพื่อชาร์จพลังงานร่างกายและสมอง ให้มีความคิดสร้างสรรค์และมีพลังลุยต่อ</p> </div> <!-- Hobby 2 --> <div class="hobby-card reveal" style="background: var(--card-bg); border: 1px solid var(--card-border); padding: 2.5rem; border-radius: 16px; text-align: center; transition: var(--transition-smooth); box-shadow: 0 4px 30px rgba(0,0,0,0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);"> <div class="hobby-icon" style="width: 70px; height: 70px; background: rgba(20, 184, 166, 0.1); color: var(--accent-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; transition: var(--transition-smooth);"> <svg viewBox="0 0 24 24" width="36" height="36" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10" /> <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" /> </svg> </div> <h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; font-family: var(--font-display);"> ชอบเที่ยว</h3> <p style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6;"> การเดินทางเพื่อเปิดรับทัศนียภาพใหม่ๆ เก็บเกี่ยวประสบการณ์ และค้นพบแรงบันดาลใจนอกกรอบ</p> </div> <!-- Hobby 3 --> <div class="hobby-card reveal" style="background: var(--card-bg); border: 1px solid var(--card-border); padding: 2.5rem; border-radius: 16px; text-align: center; transition: var(--transition-smooth); box-shadow: 0 4px 30px rgba(0,0,0,0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);"> <div class="hobby-icon" style="width: 70px; height: 70px; background: rgba(99, 102, 241, 0.1); color: var(--accent-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; transition: var(--transition-smooth);"> <svg viewBox="0 0 24 24" width="36" height="36" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"> <line x1="6" y1="12" x2="10" y2="12" /> <line x1="8" y1="10" x2="8" y2="14" /> <line x1="15" y1="13" x2="15.01" y2="13" stroke-width="3" /> <line x1="18" y1="11" x2="18.01" y2="11" stroke-width="3" /> <rect x="2" y="6" width="20" height="12" rx="3" /> </svg> </div> <h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; font-family: var(--font-display);"> ชอบเล่นเกม</h3> <p style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6;"> ฝึกกระบวนการคิดเชิงกลยุทธ์ ทำงานร่วมกันเป็นทีม และเป็นการผ่อนคลายความเครียดชั้นยอด</p> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="section"> <div class="container"> <div class="section-header reveal"> <h2 class="section-title">ข้อมูลการติดต่อ</h2> <p class="section-subtitle">คุณสามารถส่งข้อความหาผมได้โดยตรงผ่านฟอร์มนี้ หรือติดต่อผมทางช่องทางด้านล่างได้เลยครับ</p> </div> <div class="contact-grid"> <div class="contact-info reveal"> <div> <h3 class="contact-info-title" style="font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; font-family: var(--font-display);"> ช่องทางการติดต่อ</h3> <p class="contact-desc" style="color: var(--text-secondary); margin-bottom: 2rem;"> หากคุณมีข้อสงสัย โอกาสในการร่วมงาน หรือเพียงแค่อยากทักทาย สามารถส่งรายละเอียดมาหาผมได้ทันทีครับ</p> </div> <div class="contact-details"> <div class="contact-detail-item"> <div class="contact-detail-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /> <polyline points="22,6 12,13 2,6" /> </svg> </div> <div class="contact-detail-content"> <span>อีเมล</span> <a href="mailto:arkim00112@gmail.com">arkim00112@gmail.com</a> </div> </div> <div class="contact-detail-item"> <div class="contact-detail-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /> </svg> </div> <div class="contact-detail-content"> <span>เบอร์โทรติดต่อ</span> <a href="tel:082-018-3134">082-018-3134</a> </div> </div> <div class="contact-detail-item"> <div class="contact-detail-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </div> <div class="contact-detail-content"> <span>Facebook</span> <a href="https://www.facebook.com/search/top?q=sivakorn%20Gantawong" target="_blank">Sivakorn Gantawong</a> </div> </div> <div class="contact-detail-item"> <div class="contact-detail-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line> </svg> </div> <div class="contact-detail-content"> <span>Instagram</span> <a href="https://instagram.com/arkimpx" target="_blank">arkimpx</a> </div> </div> </div> <div> <h4 style="margin-bottom: 0.75rem; font-size: 1rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em;"> ติดตามผม</h4> <div class="social-links"> <a href="https://www.facebook.com/search/top?q=sivakorn%20Gantawong" class="social-icon" aria-label="Facebook" target="_blank"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </a> <a href="https://instagram.com/arkimpx" class="social-icon" aria-label="Instagram" target="_blank"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line> </svg> </a> </div> </div> </div> <div class="contact-form-wrapper reveal"> <form id="contact-form" action="#" method="POST"> <div class="form-group"> <label for="name" class="form-label">ชื่อของคุณ</label> <input type="text" id="name" name="name" class="form-control" placeholder="สมชาย รักดี" required> </div> <div class="form-group"> <label for="email" class="form-label">ที่อยู่อีเมล</label> <input type="email" id="email" name="email" class="form-control" placeholder="somchai@example.com" required> </div> <div class="form-group"> <label for="message" class="form-label">ข้อความ</label> <textarea id="message" name="message" class="form-control" placeholder="สวัสดีศิวกร ผมต้องการสอบถามเกี่ยวกับการจ้างพัฒนา..." required></textarea> </div> <button type="submit" class="btn btn-primary btn-submit">ส่งข้อความ</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container footer-content"> <a href="#home" class="logo">Sivakorn<span>Gantawong</span></a> <p class="footer-text">© 2026 Sivakorn Gantawong. สร้างด้วย HTML, CSS และ JS แบบดั้งเดิม</p> </div> </footer> <!-- Toast Success Notification --> <div id="toast" class="toast"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12" /> </svg> ส่งข้อความเสร็จสิ้นแล้ว! </div> <!-- JavaScript Actions --> <script> // Navbar Scrolled Styles const navbar = document.getElementById('navbar'); window.addEventListener('scroll', () => { if (window.scrollY > 20) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Burger Navigation Menu const burger = document.getElementById('burger'); const navLinks = document.getElementById('nav-links'); const navLinksArr = document.querySelectorAll('.nav-link'); burger.addEventListener('click', () => { navLinks.classList.toggle('nav-active'); burger.classList.toggle('toggle'); }); // Close navbar on click of link (mobile) navLinksArr.forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('nav-active'); burger.classList.remove('toggle'); }); }); // Theme Toggle Logic const themeToggleBtn = document.getElementById('theme-toggle'); const sunIcon = document.querySelector('.theme-icon-sun'); const moonIcon = document.querySelector('.theme-icon-moon'); const savedTheme = localStorage.getItem('theme') \|\| 'dark'; document.documentElement.setAttribute('data-theme', savedTheme); updateThemeIcons(savedTheme); themeToggleBtn.addEventListener('click', () => { let currentTheme = document.documentElement.getAttribute('data-theme'); let nextTheme = currentTheme === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', nextTheme); localStorage.setItem('theme', nextTheme); updateThemeIcons(nextTheme); }); function updateThemeIcons(theme) { if (theme === 'dark') { sunIcon.style.display = 'block'; moonIcon.style.display = 'none'; } else { sunIcon.style.display = 'none'; moonIcon.style.display = 'block'; } } // Active Link Highlighting on Scroll const sections = document.querySelectorAll('section'); const options = { threshold: 0.3, rootMargin: '0px 0px -10% 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const id = entry.target.getAttribute('id'); navLinksArr.forEach(link => { if (link.getAttribute('href') === `#${id}`) { link.classList.add('active'); } else { link.classList.remove('active'); } }); } }); }, options); sections.forEach(section => { observer.observe(section); }); // Contact Form Interactivity & Toast const contactForm = document.getElementById('contact-form'); const toast = document.getElementById('toast'); contactForm.addEventListener('submit', (e) => { e.preventDefault(); // Show toast message toast.classList.add('show'); // Clear the form fields contactForm.reset(); // Hide toast after 3 seconds setTimeout(() => { toast.classList.remove('show'); }, 3000); }); // Scroll Reveal Animation Observer const revealElements = document.querySelectorAll('.reveal'); const revealObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('active'); } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); revealElements.forEach(el => { revealObserver.observe(el); }); // 3D Tilt Effect on Profile Image const heroVisual = document.querySelector('.hero-visual'); const heroImageWrapper = document.querySelector('.hero-image-wrapper'); if (heroVisual && heroImageWrapper) { heroVisual.addEventListener('mousemove', (e) => { const rect = heroVisual.getBoundingClientRect(); const x = e.clientX - rect.left - (rect.width / 2); const y = e.clientY - rect.top - (rect.height / 2); // Calculate rotation angles (max 20 degrees) const rotateX = -(y / (rect.height / 2)) 20; const rotateY = (x / (rect.width / 2)) * 20; heroImageWrapper.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`; }); heroVisual.addEventListener('mouseleave', () => { heroImageWrapper.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)'; }); } </script> </body> </html>

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