File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090014/69319090014/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>Guitar Nontawat \| Samurai Developer Portfolio</title> <meta name="description" content="แฟ้มสะสมผลงาน (Portfolio) ของ นนทวัชร์ สถิรธีรโรจน์ (กีตาร์) นักพัฒนาเว็บไซต์ Full-Stack Developer ที่เปี่ยมด้วยวินัยและความเฉียบคม"> <!-- 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&family=Outfit:wght@400;500;600;700;800&family=Cinzel:wght@500;700;900&family=Noto+Serif+JP:wght@400;700;900&display=swap" rel="stylesheet"> <!-- Main Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Floating Background Particles (Interactive Canvas) --> <div class="bg-glow-1"></div> <div class="bg-glow-2"></div> <!-- Japanese Calligraphy Background Watermark --> <div class="bg-watermark">侍</div> <!-- Header / Navigation Bar --> <header class="header"> <div class="nav-container"> <a href="#home" class="logo"> Portfolio <span>.武士</span> </a> <!-- Desktop Nav Menu --> <nav class="nav-menu" id="nav-menu"> <a href="#home" class="nav-link active">หน้าแรก</a> <a href="#about" class="nav-link">เกี่ยวกับฉัน</a> <a href="#projects" class="nav-link">ผลงาน</a> <a href="#contact" class="nav-link">ติดต่อฉัน</a> </nav> <!-- Social Links (Desktop) --> <div class="header-socials"> <a href="https://facebook.com" target="_blank" aria-label="Facebook"> <svg xmlns="http://www.w3.org/2000/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="mailto:hakowan5@gmail.com" aria-label="Email"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect width="20" height="16" x="2" y="4" rx="2"></rect> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path> </svg> </a> </div> <!-- Hamburger Button --> <button class="hamburger" id="hamburger" aria-label="เมนู"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> </div> </header> <main> <!-- Hero Section --> <section class="hero-section" id="home"> <div class="hero-container"> <div class="hero-content"> <span class="hero-subtitle">BUSHIDO CODE \| วิถีแห่งการจีบสาวญี่ปุ่น</span> <h1 class="hero-title"> สวัสดีครับ! ผมชื่อ <span class="gradient-text">กีตาร์</span> <br> เป็น <span class="typewriter-text">Full-Stack Developer</span> </h1> <p class="hero-desc"> มุ่งมั่นพัฒนาระบบเว็บแอปพลิเคชันและออกแบบซอฟต์แวร์ด้วยวินัยที่เฉียบคมดั่งดาบซามูไร สร้างสรรค์โค้ดที่สะอาด ทรงพลัง และมีประสิทธิภาพสูงสุดเพื่อตอบโจทย์ทุกความต้องการ </p> <div class="hero-cta"> <a href="#projects" class="btn btn-primary"> <span>ชมวิถีผลงาน</span> <i data-lucide="swords"></i> </a> <a href="#contact" class="btn btn-secondary"> <span>ติดต่อข้าพเจ้า</span> <i data-lucide="mail"></i> </a> </div> </div> <div class="hero-graphic"> <div class="image-wrapper"> <div class="glow-ring"></div> <img src="profile.jpg" alt="Nontawat Profile Pic" class="profile-img"> </div> </div> </div> <!-- Scroll Down Indicator --> <div class="scroll-indicator"> <a href="#about" aria-label="เลื่อนลง"> <div class="mouse-icon"> <div class="wheel"></div> </div> <span>เลื่อนลงเพื่อดูรายละเอียด</span> </a> </div> </section> <!-- About Me Section --> <section class="about-section" id="about"> <div class="section-container"> <div class="section-header"> <span class="section-tag">PROFILE \| ประวัติส่วนตัว</span> <h2 class="section-title">ข้อมูลส่วนตัวและประวัติการศึกษา</h2> <div class="section-divider"></div> </div> <div class="about-grid"> <div class="about-info"> <h3><i data-lucide="user" class="samurai-icon"></i> ข้อมูลส่วนตัว</h3> <div class="profile-details-grid"> <div class="detail-card"> <span class="detail-label">ชื่อ - สกุล</span> <span class="detail-value">นนทวัชร์ สถิรธีรโรจน์</span> </div> <div class="detail-card"> <span class="detail-label">ชื่อเล่น</span> <span class="detail-value">กีตาร์</span> </div> <div class="detail-card"> <span class="detail-label">วัน-เดือน-ปีเกิด</span> <span class="detail-value">16 ตุลาคม 2550</span> </div> <div class="detail-card"> <span class="detail-label">อายุ</span> <span class="detail-value">18 ปี</span> </div> <div class="detail-card"> <span class="detail-label">สัญชาติ</span> <span class="detail-value">ไทย</span> </div> <div class="detail-card"> <span class="detail-label">เชื้อชาติ</span> <span class="detail-value">ไทย</span> </div> </div> <div class="hobbies-section"> <h3><i data-lucide="heart" class="samurai-icon"></i> งานอดิเรก</h3> <div class="hobbies-tags"> <span class="hobby-badge"><i data-lucide="dribbble"></i> เล่นกีฬา</span> <span class="hobby-badge"><i data-lucide="book-open"></i> อ่านมังงะ</span> <span class="hobby-badge"><i data-lucide="gamepad-2"></i> เล่นเกมส์</span> </div> </div> </div> <div class="about-education"> <h3><i data-lucide="graduation-cap" class="samurai-icon"></i> ประวัติการศึกษา</h3> <div class="education-timeline"> <div class="timeline-item"> <div class="timeline-dot"></div> <span class="timeline-date">ระดับอุดมศึกษา</span> <h4 class="timeline-title">วิทยาลัยเทคนิคเชียงใหม่</h4> <p class="timeline-desc">กำลังศึกษาระดับวิชาชีพชั้นสูง</p> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <span class="timeline-date">ระดับมัธยมศึกษาตอนปลาย</span> <h4 class="timeline-title">วิทยาลัยเทคนิคเชียงใหม่</h4> <p class="timeline-desc">สายวิชาชีพด้านคอมพิวเตอร์และเทคโนโลยีสารสนเทศ</p> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <span class="timeline-date">ระดับมัธยมศึกษาตอนต้น</span> <h4 class="timeline-title">กาวิละวิทยาลัยเชียงใหม่</h4> <p class="timeline-desc">จังหวัดเชียงใหม่</p> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <span class="timeline-date">ระดับประถมศึกษา</span> <h4 class="timeline-title">เทพดินทร์วิทยาลัยเชียงใหม่</h4> <p class="timeline-desc">จังหวัดเชียงใหม่</p> </div> </div> </div> </div> <!-- Skills Subsection inside About --> <div class="skills-block"> <h3 class="skills-title"><i data-lucide="terminal" class="samurai-icon"></i> คลังศาสตร์และศาสตรา (Skills & Tools)</h3> <div class="skills-wrapper"> <div class="skills-category"> <h4><i data-lucide="code-2"></i> Front-End Development</h4> <div class="skills-grid"> <div class="skill-badge"><i data-lucide="layers"></i> HTML5 / CSS3</div> <div class="skill-badge"><i data-lucide="braces"></i> JavaScript (ES6+)</div> <div class="skill-badge"><i data-lucide="atom"></i> React.js / Next.js</div> <div class="skill-badge"><i data-lucide="wind"></i> Tailwind CSS</div> </div> </div> <div class="skills-category"> <h4><i data-lucide="database"></i> Back-End & Dev Tools</h4> <div class="skills-grid"> <div class="skill-badge"><i data-lucide="server"></i> Node.js / Express</div> <div class="skill-badge"><i data-lucide="terminal"></i> PHP / XAMPP</div> <div class="skill-badge"><i data-lucide="database-backup"></i> MySQL / MongoDB</div> <div class="skill-badge"><i data-lucide="git-branch"></i> Git & GitHub</div> </div> </div> </div> </div> </div> </section> <!-- Projects Section --> <section class="projects-section" id="projects"> <div class="section-container"> <div class="section-header"> <span class="section-tag">My Work</span> <h2 class="section-title">ผลงานล่าสุดของฉัน</h2> <div class="section-divider"></div> </div> <!-- Projects Grid --> <div class="projects-grid"> <!-- Project 1 --> <div class="project-card"> <div class="project-image"> <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=600" alt="E-Commerce Web Application"> <div class="project-overlay"> <span class="project-category">Web Application</span> </div> </div> <div class="project-content"> <h3 class="project-title">SmartShop E-Commerce</h3> <p class="project-desc">ระบบร้านค้าออนไลน์สุดหรูที่เชื่อมต่อระบบตะกร้าสินค้า ชำระเงินปลายทาง และระบบจัดการสต็อกสินค้าของร้านค้าหลังบ้านแบบเรียลไทม์</p> <div class="project-tags"> <span>React</span> <span>Node.js</span> <span>MongoDB</span> </div> <a href="#" class="project-link"> <span>ดูรายละเอียดโครงการ</span> <i data-lucide="external-link"></i> </a> </div> </div> <!-- Project 2 --> <div class="project-card"> <div class="project-image"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=600" alt="Task Management Dashboard"> <div class="project-overlay"> <span class="project-category">SaaS Solution</span> </div> </div> <div class="project-content"> <h3 class="project-title">TaskFlow Dashboard</h3> <p class="project-desc">แดชบอร์ดจัดการภารกิจและวิเคราะห์ข้อมูลการทำงานของโปรเจกต์กลุ่ม มีกราฟสรุปประสิทธิภาพและบอร์ดแบบ Kanban สำหรับลากวางการทำงาน</p> <div class="project-tags"> <span>HTML/CSS</span> <span>JavaScript</span> <span>ChartJS</span> </div> <a href="#" class="project-link"> <span>ดูรายละเอียดโครงการ</span> <i data-lucide="external-link"></i> </a> </div> </div> <!-- Project 3 --> <div class="project-card"> <div class="project-image"> <img src="https://images.unsplash.com/photo-1616469829581-73993eb86b02?auto=format&fit=crop&q=80&w=600" alt="Fitness Tracker Mobile App"> <div class="project-overlay"> <span class="project-category">UI/UX Design</span> </div> </div> <div class="project-content"> <h3 class="project-title">FlexiFit Mobile App</h3> <p class="project-desc">การออกแบบโครงสร้าง UI/UX และระบบต้นแบบ (Prototype) สำหรับแอปพลิเคชันออกกำลังกายส่วนตัว เน้นความเรียบหรูและตอบสนองอารมณ์ผู้ใช้งาน</p> <div class="project-tags"> <span>Figma</span> <span>UI/UX</span> <span>Prototyping</span> </div> <a href="#" class="project-link"> <span>ดูรายละเอียดโครงการ</span> <i data-lucide="external-link"></i> </a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact-section" id="contact"> <div class="section-container"> <div class="section-header"> <span class="section-tag">CONTACT \| ช่องทางการติดต่อ</span> <h2 class="section-title">มาร่วมสร้างสรรค์ผลงานกันเถอะ</h2> <div class="section-divider"></div> </div> <div class="contact-grid"> <!-- Contact Information --> <div class="contact-info-panel"> <h3>ข้อมูลติดต่อ</h3> <p class="contact-subtitle">หากท่านมีข้อสงสัย โครงการพัฒนา หรือข้อเสนอแนะต่างๆ สามารถส่งข้อความหรือติดต่อข้าพเจ้าผ่านช่องทางเหล่านี้ได้ตลอดเวลา</p> <div class="info-list"> <div class="info-item"> <div class="info-icon"> <i data-lucide="mail"></i> </div> <div class="info-text"> <span>ส่งอีเมลหาผม</span> <a href="mailto:hakowan5@gmail.com">hakowan5@gmail.com</a> </div> </div> <div class="info-item"> <div class="info-icon"> <i data-lucide="phone"></i> </div> <div class="info-text"> <span>โทรศัพท์</span> <a href="tel:0812791506">081-279-1506</a> </div> </div> <div class="info-item"> <div class="info-icon"> <i data-lucide="facebook"></i> </div> <div class="info-text"> <span>โซเชียลมีเดีย</span> <a href="https://www.facebook.com" target="_blank">f:Non ij</a> </div> </div> <div class="info-item"> <div class="info-icon"> <i data-lucide="map-pin"></i> </div> <div class="info-text"> <span>ที่อยู่ / ที่ทำงาน</span> <p>บริษัท โปรซอฟท์ คอมเทค จำกัด, 287 หมู่ที่ 5 บ้านโจ้ ซอย 14 ตำบล สันทรายน้อย อำเภอสันทราย, 50210, สันทราย, เชียงใหม่, ไทย</p> </div> </div> </div> <div class="social-circles"> <a href="https://facebook.com" target="_blank" class="social-circle" aria-label="Facebook"> <svg xmlns="http://www.w3.org/2000/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="mailto:hakowan5@gmail.com" class="social-circle" aria-label="Email"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect width="20" height="16" x="2" y="4" rx="2"></rect> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path> </svg> </a> </div> </div> <!-- Contact Form --> <div class="contact-form-panel"> <h3>ส่งสาส์นถึงข้าพเจ้า</h3> <form id="contact-form" novalidate> <div class="form-row"> <div class="form-group"> <label for="name">ชื่อของท่าน <span class="required"></span></label> <input type="text" id="name" name="name" placeholder="ระบุชื่อจริงหรือชื่อบริษัท" required> <span class="error-msg">กรุณาระบุชื่อของท่าน</span> </div> </div> <div class="form-row"> <div class="form-group"> <label for="email">อีเมลติดต่อกลับ <span class="required"></span></label> <input type="email" id="email" name="email" placeholder="example@email.com" required> <span class="error-msg">กรุณาระบุอีเมลที่ถูกต้อง</span> </div> </div> <div class="form-row"> <div class="form-group"> <label for="message">ข้อความสาส์นของท่าน <span class="required">*</span></label> <textarea id="message" name="message" rows="5" placeholder="อธิบายรายละเอียดหรือสาส์นที่ต้องการติดต่อ..." required></textarea> <span class="error-msg">กรุณากรอกข้อความสาส์นของท่าน</span> </div> </div> <button type="submit" class="btn btn-submit" id="submit-btn"> <span>ส่งสาส์น</span> <i data-lucide="send"></i> </button> </form> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="footer"> <div class="footer-container"> <div class="footer-left"> <a href="#home" class="logo">NONTAWAT<span>.武士</span></a> <p>สร้างสรรค์ด้วยวินัยและเขียนโค้ดที่สะอาดสมบูรณ์แบบรองรับทุกหน้าจอ</p> </div> <div class="footer-right"> <p>© 2026 NONTAWAT. All Rights Reserved. Designed by Antigravity.</p> </div> </div> </footer> <!-- Form Submission Feedback Modal --> <div class="modal" id="feedback-modal"> <div class="modal-content"> <div class="modal-icon success"> <i data-lucide="check-circle-2"></i> </div> <h2>ส่งข้อความสำเร็จ!</h2> <p>ขอบคุณสำหรับการติดต่อกลับ ผมได้รับข้อความเรียบร้อยแล้ว และจะติดต่อกลับท่านผ่านทางอีเมลโดยเร็วที่สุดครับ </p> <button class="btn btn-primary modal-close-btn" id="modal-close">ตกลง</button> </div> </div> <!-- Sticky Bottom Navigation for Mobile (Hamburger Style) --> <div class="mobile-bottom-bar" id="mobile-bottom-bar"> <!-- Left: Home shortcut --> <a href="#home" class="mbb-item" id="mbb-home"> <i data-lucide="home"></i> <span>หน้าแรก</span> </a> <!-- Center: Hamburger Button --> <button class="mbb-hamburger" id="bottom-hamburger" aria-label="เปิดเมนู" aria-expanded="false"> <span class="mbb-bar"></span> <span class="mbb-bar"></span> <span class="mbb-bar"></span> </button> <!-- Right: Contact shortcut --> <a href="#contact" class="mbb-item" id="mbb-contact"> <i data-lucide="mail"></i> <span>ติดต่อ</span> </a> </div> <!-- Bottom Sheet Menu Drawer --> <div class="bottom-sheet-overlay" id="bottom-sheet-overlay"></div> <div class="bottom-sheet" id="bottom-sheet" aria-hidden="true"> <div class="bottom-sheet-handle"></div> <p class="bottom-sheet-label">เมนูนำทาง</p> <nav class="bottom-sheet-nav"> <a href="#home" class="bsn-link active" id="bsn-home"> <span class="bsn-icon"><i data-lucide="home"></i></span> <span class="bsn-text">หน้าแรก</span> <i data-lucide="chevron-right" class="bsn-arrow"></i> </a> <a href="#about" class="bsn-link" id="bsn-about"> <span class="bsn-icon"><i data-lucide="user"></i></span> <span class="bsn-text">เกี่ยวกับฉัน</span> <i data-lucide="chevron-right" class="bsn-arrow"></i> </a> <a href="#projects" class="bsn-link" id="bsn-projects"> <span class="bsn-icon"><i data-lucide="swords"></i></span> <span class="bsn-text">ผลงาน</span> <i data-lucide="chevron-right" class="bsn-arrow"></i> </a> <a href="#contact" class="bsn-link" id="bsn-contact"> <span class="bsn-icon"><i data-lucide="mail"></i></span> <span class="bsn-text">ติดต่อฉัน</span> <i data-lucide="chevron-right" class="bsn-arrow"></i> </a> </nav> <div class="bottom-sheet-socials"> <a href="https://facebook.com" target="_blank" class="bss-link" aria-label="Facebook"> <svg xmlns="http://www.w3.org/2000/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="mailto:hakowan5@gmail.com" class="bss-link" aria-label="Email"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg> </a> </div> </div> <!-- Lucide Icons Library --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Custom Application Javascript --> <script src="app.js"></script> </body> </html>

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