File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090047/portfolio/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>ชูติวัต โกมลเศรษฐ์ \| Portfolio</title> <meta name="description" content="Portfolio ของ ชูติวัต โกมลเศรษฐ์ (ปั้น) นักศึกษาสาขาเทคโนโลยีคอมพิวเตอร์ วิทยาลัยเทคนิคเชียงใหม่" /> <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=Kanit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" /> <style> :root { --primary: #7c3aed; --primary-light: #a855f7; --primary-dark: #5b21b6; --accent: #06b6d4; --accent2: #f59e0b; --bg-dark: #0a0a0f; --bg-card: #12121e; --bg-card2: #1a1a2e; --text-main: #f1f0f5; --text-muted: #9ca3af; --border: rgba(124, 58, 237, 0.3); --glass: rgba(124, 58, 237, 0.08); --glow: 0 0 40px rgba(124, 58, 237, 0.4); } , ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Sarabun', sans-serif; background: var(--bg-dark); color: var(--text-main); overflow-x: hidden; line-height: 1.7; } .bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: floatOrb 8s ease-in-out infinite; } .orb-1 { width: 500px; height: 500px; background: rgba(124,58,237,0.18); top: -100px; left: -100px; animation-delay: 0s; } .orb-2 { width: 400px; height: 400px; background: rgba(6,182,212,0.12); bottom: 10%; right: -80px; animation-delay: 3s; } .orb-3 { width: 300px; height: 300px; background: rgba(245,158,11,0.1); top: 50%; left: 40%; animation-delay: 5s; } @keyframes floatOrb { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-40px) scale(1.08)} } .particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .particle { position: absolute; width: 2px; height: 2px; background: var(--primary-light); border-radius: 50%; animation: particleFloat linear infinite; opacity: 0; } @keyframes particleFloat { 0%{transform:translateY(100vh) translateX(0);opacity:0} 10%{opacity:1} 90%{opacity:.5} 100%{transform:translateY(-10px) translateX(20px);opacity:0} } .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } nav { position: fixed; top:0; left:0; right:0; z-index:100; background:rgba(10,10,15,0.7); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:14px 0; transition:all .3s; } .nav-inner { display:flex; align-items:center; justify-content:space-between; max-width:1100px; margin:0 auto; padding:0 24px; } .nav-logo { font-family:'Kanit',sans-serif; font-size:1.3rem; font-weight:700; background:linear-gradient(135deg,var(--primary-light),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:1px; } .nav-links { display:flex; gap:28px; list-style:none; } .nav-links a { color:var(--text-muted); text-decoration:none; font-size:.92rem; font-weight:500; transition:color .3s; position:relative; } .nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--primary-light),var(--accent)); transform:scaleX(0); transition:transform .3s; border-radius:2px; } .nav-links a:hover { color:var(--text-main); } .nav-links a:hover::after { transform:scaleX(1); } .hero { min-height:100vh; display:flex; align-items:center; padding:100px 0 60px; position:relative; } .hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; width:100%; } .hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--glass); border:1px solid var(--border); border-radius:999px; padding:6px 16px; font-size:.82rem; color:var(--primary-light); margin-bottom:20px; animation:fadeUp .6s ease both; } .hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} } .hero-name { font-family:'Kanit',sans-serif; font-size:clamp(2.4rem,5vw,3.8rem); font-weight:800; line-height:1.1; margin-bottom:10px; animation:fadeUp .6s .1s ease both; } .hero-name span { background:linear-gradient(135deg,var(--primary-light) 0%,var(--accent) 60%,var(--accent2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-nickname { font-family:'Kanit',sans-serif; font-size:1.1rem; color:var(--text-muted); margin-bottom:18px; animation:fadeUp .6s .15s ease both; } .hero-nickname strong { color:var(--accent2); } .hero-desc { font-size:1rem; color:var(--text-muted); max-width:480px; margin-bottom:32px; animation:fadeUp .6s .2s ease both; } .hero-btns { display:flex; gap:14px; flex-wrap:wrap; animation:fadeUp .6s .25s ease both; } .btn-primary { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; border-radius:12px; font-family:'Kanit',sans-serif; font-size:.95rem; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:transform .2s,box-shadow .2s; box-shadow:0 4px 20px rgba(124,58,237,.4); } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(124,58,237,.6); } .btn-outline { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; background:transparent; color:var(--text-main); border:1px solid var(--border); border-radius:12px; font-family:'Kanit',sans-serif; font-size:.95rem; font-weight:600; text-decoration:none; cursor:pointer; transition:transform .2s,border-color .2s,background .2s; } .btn-outline:hover { transform:translateY(-2px); border-color:var(--primary-light); background:var(--glass); } .hero-avatar-wrap { display:flex; justify-content:center; animation:fadeUp .6s .3s ease both; } .avatar-ring { position:relative; width:300px; height:300px; } .avatar-ring::before { content:''; position:absolute; inset:-6px; border-radius:50%; background:conic-gradient(from 0deg,var(--primary),var(--accent),var(--accent2),var(--primary)); animation:spinRing 4s linear infinite; z-index:0; } @keyframes spinRing { to{transform:rotate(360deg)} } .avatar-inner { position:absolute; inset:4px; border-radius:50%; background:var(--bg-card2); display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:1; } .avatar-photo { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; transition:transform .4s ease; } .avatar-photo:hover { transform:scale(1.05); } .avatar-glow { position:absolute; inset:-40px; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,.25) 0%,transparent 70%); z-index:-1; } section { padding:90px 0; position:relative; z-index:1; } .section-header { text-align:center; margin-bottom:60px; } .section-label { display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--primary-light); margin-bottom:10px; } .section-title { font-family:'Kanit',sans-serif; font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:700; background:linear-gradient(135deg,var(--text-main),var(--text-muted)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .section-line { width:60px; height:3px; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:2px; margin:14px auto 0; } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; } .info-list { display:flex; flex-direction:column; gap:16px; } .info-item { display:flex; align-items:flex-start; gap:14px; padding:16px 20px; background:var(--glass); border:1px solid var(--border); border-radius:14px; transition:background .3s,border-color .3s; } .info-item:hover { background:rgba(124,58,237,.14); border-color:var(--primary-light); } .info-icon { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; box-shadow:0 4px 12px rgba(124,58,237,.3); } .info-text { display:flex; flex-direction:column; } .info-label { font-size:.75rem; color:var(--text-muted); font-weight:500; letter-spacing:.5px; } .info-value { font-size:.98rem; color:var(--text-main); font-weight:600; } .edu-card { background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(6,182,212,.05)); border:1px solid var(--border); border-radius:20px; padding:30px; position:relative; overflow:hidden; height:100%; } .edu-card::before { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; border-radius:50%; background:rgba(124,58,237,.15); } .edu-icon { width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px; box-shadow:0 8px 24px rgba(124,58,237,.4); } .edu-school { font-family:'Kanit',sans-serif; font-size:1.2rem; font-weight:700; margin-bottom:6px; } .edu-dept { color:var(--accent); font-weight:600; margin-bottom:4px; } .edu-field { color:var(--text-muted); font-size:.9rem; } .edu-badge { display:inline-block; margin-top:14px; padding:4px 14px; background:rgba(6,182,212,.15); border:1px solid rgba(6,182,212,.4); border-radius:999px; font-size:.78rem; color:var(--accent); } .hobbies-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:600px; margin:0 auto; } .hobby-card { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:32px 24px; text-align:center; transition:transform .3s,border-color .3s,box-shadow .3s; position:relative; overflow:hidden; } .hobby-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(124,58,237,.06)); opacity:0; transition:opacity .3s; } .hobby-card:hover { transform:translateY(-6px); border-color:var(--primary-light); box-shadow:var(--glow); } .hobby-card:hover::before { opacity:1; } .hobby-emoji { font-size:3rem; margin-bottom:14px; display:block; } .hobby-name { font-family:'Kanit',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:6px; color:var(--text-main); } .hobby-desc { font-size:.85rem; color:var(--text-muted); } .contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .contact-card { border-radius:20px; padding:28px 20px; text-align:center; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:12px; border:1px solid transparent; transition:transform .3s,box-shadow .3s; position:relative; overflow:hidden; } .contact-card:hover { transform:translateY(-6px); } .cc-phone { background:linear-gradient(135deg,#0ea5e9,#06b6d4); box-shadow:0 4px 24px rgba(6,182,212,.3); } .cc-phone:hover { box-shadow:0 8px 40px rgba(6,182,212,.5); } .cc-ig { background:linear-gradient(135deg,#e1306c,#fd1d1d,#fcb045); box-shadow:0 4px 24px rgba(225,48,108,.3); } .cc-ig:hover { box-shadow:0 8px 40px rgba(225,48,108,.5); } .cc-fb { background:linear-gradient(135deg,#1877f2,#0c4a8a); box-shadow:0 4px 24px rgba(24,119,242,.3); } .cc-fb:hover { box-shadow:0 8px 40px rgba(24,119,242,.5); } .cc-icon { font-size:2rem; color:#fff; } .cc-label { font-family:'Kanit',sans-serif; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:1px; } .cc-value { font-size:.95rem; font-weight:700; color:#fff; } footer { text-align:center; padding:40px 24px; border-top:1px solid var(--border); color:var(--text-muted); font-size:.85rem; position:relative; z-index:1; } footer span { background:linear-gradient(135deg,var(--primary-light),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:600; } @keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } .reveal { opacity:0; transform:translateY(40px); transition:opacity .6s ease,transform .6s ease; } .reveal.visible { opacity:1; transform:translateY(0); } .divider { width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin:0; } @media (max-width:768px) { .hero-inner { grid-template-columns:1fr; text-align:center; } .hero-avatar-wrap { order:-1; } .avatar-ring { width:200px; height:200px; } .avatar-initials { font-size:3.5rem; } .hero-desc { margin-left:auto; margin-right:auto; } .hero-btns { justify-content:center; } .about-grid { grid-template-columns:1fr; } .contact-grid { grid-template-columns:1fr; } .hobbies-grid { grid-template-columns:1fr; max-width:300px; } .nav-links { display:none; } } </style> </head> <body> <div class="bg-orbs"> <div class="orb orb-1"></div> <div class="orb orb-2"></div> <div class="orb orb-3"></div> </div> <div class="particles" id="particles"></div> <nav id="navbar"> <div class="nav-inner"> <div class="nav-logo">CK.</div> <ul class="nav-links"> <li><a href="#about">เกี่ยวกับ</a></li> <li><a href="#education">การศึกษา</a></li> <li><a href="#hobbies">งานอดิเรก</a></li> <li><a href="#contact">ติดต่อ</a></li> </ul> </div> </nav> <section class="hero" id="home"> <div class="container"> <div class="hero-inner"> <div class="hero-text"> <div class="hero-badge"> <span class="dot"></span> นักศึกษา · เทคโนโลยีคอมพิวเตอร์ </div> <h1 class="hero-name"> <span>ชูติวัต</span><br/>โกมลเศรษฐ์ </h1> <p class="hero-nickname">ชื่อเล่น: <strong>ปั้น</strong>  \|  อายุ <strong>18 ปี</strong></p> <p class="hero-desc"> นักศึกษาแผนกอิเล็กทรอนิกส์ สาขาเทคโนโลยีคอมพิวเตอร์<br/> วิทยาลัยเทคนิคเชียงใหม่ มุ่งมั่นพัฒนาทักษะด้านเทคโนโลยี </p> <div class="hero-btns"> <a href="#contact" class="btn-primary"> <i class="fas fa-envelope"></i> ติดต่อฉัน </a> <a href="#about" class="btn-outline"> <i class="fas fa-user"></i> เกี่ยวกับฉัน </a> </div> </div> <div class="hero-avatar-wrap"> <div class="avatar-ring"> <div class="avatar-glow"></div> <div class="avatar-inner"> <img src="1234.jpg" alt="ชูติวัต โกมลเศรษฐ์" class="avatar-photo" /> </div> </div> </div> </div> </div> </section> <div class="divider"></div> <section id="about"> <div class="container"> <div class="section-header reveal"> <span class="section-label">Profile</span> <h2 class="section-title">ข้อมูลส่วนตัว</h2> <div class="section-line"></div> </div> <div class="about-grid reveal"> <div class="info-list"> <div class="info-item"> <div class="info-icon"><i class="fas fa-user"></i></div> <div class="info-text"> <span class="info-label">ชื่อ - นามสกุล</span> <span class="info-value">ชูติวัต โกมลเศรษฐ์</span> </div> </div> <div class="info-item"> <div class="info-icon"><i class="fas fa-star"></i></div> <div class="info-text"> <span class="info-label">ชื่อเล่น</span> <span class="info-value">ปั้น</span> </div> </div> <div class="info-item"> <div class="info-icon"><i class="fas fa-cake-candles"></i></div> <div class="info-text"> <span class="info-label">วันเกิด</span> <span class="info-value">6 เมษายน 2551 (อายุ 18 ปี)</span> </div> </div> <div class="info-item"> <div class="info-icon"><i class="fas fa-flag"></i></div> <div class="info-text"> <span class="info-label">สัญชาติ</span> <span class="info-value">ไทย</span> </div> </div> </div> <div class="edu-card" id="education"> <div class="edu-icon"><i class="fas fa-graduation-cap"></i></div> <div class="edu-school">วิทยาลัยเทคนิคเชียงใหม่</div> <div class="edu-dept">แผนกอิเล็กทรอนิกส์</div> <div class="edu-field">สาขาเทคโนโลยีคอมพิวเตอร์</div> <span class="edu-badge"><i class="fas fa-book-open"></i>  กำลังศึกษาอยู่</span> <span class="edu-badge" style="margin-left:8px; background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.4); color:var(--primary-light);"> <i class="fas fa-map-marker-alt"></i>  เชียงใหม่ </span> </div> </div> </div> </section> <div class="divider"></div> <section id="hobbies"> <div class="container"> <div class="section-header reveal"> <span class="section-label">Hobbies</span> <h2 class="section-title">งานอดิเรก</h2> <div class="section-line"></div> </div> <div class="hobbies-grid reveal"> <div class="hobby-card"> <span class="hobby-emoji">🎱</span> <div class="hobby-name">แทงสนุ๊กเกอร์</div> <div class="hobby-desc">ฝึกทักษะ สมาธิ และความแม่นยำ</div> </div> <div class="hobby-card"> <span class="hobby-emoji">🎮</span> <div class="hobby-name">เล่นเกม</div> <div class="hobby-desc">ผ่อนคลายและฝึกกลยุทธ์</div> </div> </div> </div> </section> <div class="divider"></div> <section id="contact"> <div class="container"> <div class="section-header reveal"> <span class="section-label">Contact</span> <h2 class="section-title">ช่องทางการติดต่อ</h2> <div class="section-line"></div> </div> <div class="contact-grid reveal"> <a href="tel:0613317307" class="contact-card cc-phone"> <i class="fas fa-phone cc-icon"></i> <span class="cc-label">โทรศัพท์</span> <span class="cc-value">061-331-7307</span> </a> <a href="https://www.instagram.com/komon_set" target="_blank" rel="noopener" class="contact-card cc-ig"> <i class="fab fa-instagram cc-icon"></i> <span class="cc-label">Instagram</span> <span class="cc-value">@komon_set</span> </a> <a href="https://www.facebook.com/Chutiwat.Komonset" target="_blank" rel="noopener" class="contact-card cc-fb"> <i class="fab fa-facebook cc-icon"></i> <span class="cc-label">Facebook</span> <span class="cc-value">Chutiwat Komonset</span> </a> </div> </div> </section> <footer> <p>© 2025 <span>ชูติวัต โกมลเศรษฐ์</span> · สงวนลิขสิทธิ์ · ออกแบบด้วย ❤️</p> </footer> <script> (function(){ var container = document.getElementById('particles'); var colors = ['#a855f7','#06b6d4','#f59e0b','#7c3aed']; for(var i=0;i<30;i++){ var p = document.createElement('div'); p.className = 'particle'; p.style.left = Math.random()100+'%'; p.style.animationDuration = (6+Math.random()14)+'s'; p.style.animationDelay = (Math.random()10)+'s'; var s = (1+Math.random()2.5)+'px'; p.style.width = s; p.style.height = s; p.style.background = colors[Math.floor(Math.random()colors.length)]; container.appendChild(p); } })(); var reveals = document.querySelectorAll('.reveal'); var observer = new IntersectionObserver(function(entries){ entries.forEach(function(e,i){ if(e.isIntersecting){ setTimeout(function(){ e.target.classList.add('visible'); }, i*80); observer.unobserve(e.target); } }); },{threshold:0.1}); reveals.forEach(function(r){ observer.observe(r); }); var nav = document.getElementById('navbar'); window.addEventListener('scroll',function(){ nav.style.background = window.scrollY>50?'rgba(10,10,15,0.95)':'rgba(10,10,15,0.7)'; }); var sections = document.querySelectorAll('section[id]'); var navLinks = document.querySelectorAll('.nav-links a'); window.addEventListener('scroll',function(){ var current=''; sections.forEach(function(s){ if(window.scrollY>=s.offsetTop-120) current=s.id; }); navLinks.forEach(function(a){ a.style.color=''; if(a.getAttribute('href')==='#'+current) a.style.color='#a855f7'; }); }); </script> </body> </html>

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