File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090011/portfolio/ธนเทพ 011/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>ธนเทพ \| Web Application Portfolio</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=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- FontAwesome for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Custom CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Header / Navigation Bar --> <header class="navbar-header"> <div class="nav-container"> <a href="#" class="logo"> <span class="logo-dot"></span> Thanatep.dev </a> <!-- Desktop Navigation --> <nav class="nav-menu"> <a href="#home" class="nav-link active">Home</a> <a href="#about" class="nav-link">About</a> <a href="#projects" class="nav-link">Projects</a> <a href="#contact" class="nav-link">Contact</a> </nav> <!-- Call to Action Nav Button (Desktop) --> <div class="nav-cta"> <button class="theme-toggle-btn" id="theme-toggle-desktop" aria-label="Toggle Dark/Light Mode" style="margin-right: 1rem;"> <i class="fa-solid fa-moon"></i> </button> <a href="#contact" class="btn btn-outline">Hire Me</a> </div> <!-- Hamburger Button for Mobile --> <button class="hamburger" id="hamburger-btn" aria-label="Toggle Navigation Menu"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> </div> </header> <!-- Mobile Navigation Drawer --> <div class="mobile-nav" id="mobile-nav-menu"> <nav class="mobile-nav-links"> <a href="#home" class="mobile-link">Home</a> <a href="#about" class="mobile-link">About</a> <a href="#projects" class="mobile-link">Projects</a> <a href="#contact" class="mobile-link">Contact</a> <a href="#contact" class="btn btn-primary mobile-cta">Hire Me</a> </nav> </div> <!-- Main Content --> <main> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container hero-container"> <div class="hero-content"> <div class="badge-welcome"> <span class="pulse-dot"></span> Available for Work </div> <h1 class="hero-title"> สวัสดีครับ ผม <span class="highlight-text">ธนเทพ อยู่คง</span> <br> <span class="typing-text">Hi My Name Is</span> <br> <span class="highlight-text">Thanatep Yooukong</span> </h1> <p class="hero-subtitle"> ผู้พัฒนาเว็บแอปพลิเคชันที่เน้นใช้งาน ไม่เน้นสวยงาม </p> <div class="hero-actions"> <a href="#projects" class="btn btn-primary">ดูผลงานของฉัน <i class="fa-solid fa-arrow-right"></i></a> <a href="#contact" class="btn btn-secondary">ติดต่อฉัน</a> </div> </div> <div class="hero-image-container"> <div class="hero-image-wrapper"> <img src="รูป/712543164_885349467149208_5746699206422685913_n.jpg" alt="ธนเทพ - Profile Image" class="hero-image"> </div> <div class="blob-bg"></div> </div> </div> </section> <!-- About Me Section --> <section id="about" class="about-section"> <div class="container"> <div class="section-header"> <span class="section-tag">About Me</span> <h2 class="section-title">เกี่ยวกับฉัน</h2> </div> <div class="about-grid"> <!-- Left Column: Personal Info & Hobbies & Motto --> <div class="about-info-column"> <div class="info-card"> <h3><i class="fa-solid fa-user"></i> ข้อมูลส่วนตัว</h3> <ul class="info-list"> <li>ชื่อ: นายธนเทพ อยู่คง</li> <li>ชื่อเล่น: หมู</li> <li>อายุ: 18 ปี</li> <li>สัญชาติ: ไทย</li> <li>ศาสนา: พุทธ</li> </ul> </div> <div class="info-card"> <h3><i class="fa-solid fa-graduation-cap"></i> ปัจจุบันเรียน</h3> <p class="current-study">ปวส. เทคโนโลยีคอมพิวเตอร์</p> </div> <div class="info-card"> <h3><i class="fa-solid fa-quote-left"></i> คติประจำใจ</h3> <p class="motto-text">ใช้งานได้พอ</p> </div> <div class="info-card"> <h3><i class="fa-solid fa-gamepad"></i> งานอดิเรก</h3> <div class="hobbies-list"> <span class="hobby-badge"><i class="fa-solid fa-gamepad"></i> เล่นเกม</span> <span class="hobby-badge"><i class="fa-solid fa-palette"></i> วาดรูป</span> </div> </div> </div> <!-- Right Column: Education Timeline --> <div class="about-education-column"> <div class="education-card"> <h3><i class="fa-solid fa-timeline"></i> ประวัติการศึกษา</h3> <div class="timeline-container"> <div class="timeline-region"> <span class="region-title"><i class="fa-solid fa-map-pin"></i> กรุงเทพฯ</span> <div class="timeline-item"> <div class="timeline-year">ปี 2012</div> <div class="timeline-content"> <h4>โรงเรียนวัดพิชัย</h4> <p>อนุบาล 1 (อ.1)</p> </div> </div> <div class="timeline-item"> <div class="timeline-year">ปี 2013 - 2016</div> <div class="timeline-content"> <h4>โรงเรียนคลองกุ่ม</h4> <p>อนุบาล 2 - ประถมศึกษาปีที่ 2 (อ.2 - ป.2)</p> </div> </div> <div class="timeline-item"> <div class="timeline-year">ปี 2016 - 2020</div> <div class="timeline-content"> <h4>โรงเรียนวัดสุขใจ</h4> <p>ประถมศึกษาปีที่ 3 - 6 (ป.3 - ป.6)</p> </div> </div> </div> <div class="timeline-region"> <span class="region-title"><i class="fa-solid fa-map-pin"></i> เชียงใหม่</span> <div class="timeline-item"> <div class="timeline-year">ปี 2020 - 2023</div> <div class="timeline-content"> <h4>โรงเรียนธรรมราช</h4> <p>มัธยมศึกษาปีที่ 1 - 3 (ม.1 - ม.3)</p> </div> </div> <div class="timeline-item"> <div class="timeline-year">ปี 2023 - 2025</div> <div class="timeline-content"> <h4>วิทยาลัยเทคนิคเชียงใหม่</h4> <p>ประกาศนียบัตรวิชาชีพ (ปวช.1 - ปวช.3)</p> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="projects-section"> <div class="container"> <div class="section-header"> <span class="section-tag">My Projects</span> <h2 class="section-title">ผลงานล่าสุดของผม</h2> </div> <div class="projects-grid"> <!-- Project Card 1 --> <div class="project-card"> <div class="project-img-wrapper"> <!-- We can use modern SVG/CSS placeholders or premium graphics styled via CSS --> <div class="project-placeholder-img p-cyan"> <i class="fa-solid fa-cart-shopping"></i> </div> </div> <div class="project-info"> <h3 class="project-title">E-Commerce Web Application</h3> <p class="project-desc"> ระบบร้านค้าออนไลน์แบบครบวงจร มีระบบจัดการตะกร้าสินค้า ค้นหา และชำระเงินที่รวดเร็ว </p> <div class="project-tech"> <span class="tech-badge">HTML5</span> <span class="tech-badge">CSS Grid</span> <span class="tech-badge">Vanilla JS</span> </div> <div class="project-links"> <a href="#" class="btn-project-link"><i class="fa-brands fa-github"></i> GitHub</a> <a href="#" class="btn-project-link primary-link"><i class="fa-solid fa-arrow-up-right-from-square"></i> Live Demo</a> </div> </div> </div> <!-- Project Card 2 --> <div class="project-card"> <div class="project-img-wrapper"> <div class="project-placeholder-img p-purple"> <i class="fa-solid fa-list-check"></i> </div> </div> <div class="project-info"> <h3 class="project-title">Task Management Board</h3> <p class="project-desc"> แอปพลิเคชันช่วยจัดการงานประจำวันแบบ Kanban Board ลากวางการ์ดและบันทึกข้อมูลแบบเรียลไทม์ </p> <div class="project-tech"> <span class="tech-badge">React</span> <span class="tech-badge">CSS Modules</span> <span class="tech-badge">Local Storage</span> </div> <div class="project-links"> <a href="#" class="btn-project-link"><i class="fa-brands fa-github"></i> GitHub</a> <a href="#" class="btn-project-link primary-link"><i class="fa-solid fa-arrow-up-right-from-square"></i> Live Demo</a> </div> </div> </div> <!-- Project Card 3 --> <div class="project-card"> <div class="project-img-wrapper"> <div class="project-placeholder-img p-orange"> <i class="fa-solid fa-cloud-sun"></i> </div> </div> <div class="project-info"> <h3 class="project-title">Weather Forecast Portal</h3> <p class="project-desc"> เว็บไซต์แสดงสภาพอากาศแบบเรียลไทม์ตามสถานที่ที่ผู้ใช้ค้นหา โดยดึงข้อมูลจาก OpenWeather API </p> <div class="project-tech"> <span class="tech-badge">Vanilla JS</span> <span class="tech-badge">Fetch API</span> <span class="tech-badge">CSS Flexbox</span> </div> <div class="project-links"> <a href="#" class="btn-project-link"><i class="fa-brands fa-github"></i> GitHub</a> <a href="#" class="btn-project-link primary-link"><i class="fa-solid fa-arrow-up-right-from-square"></i> Live Demo</a> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section"> <div class="container"> <div class="section-header"> <span class="section-tag">Get In Touch</span> <h2 class="section-title">ติดต่อฉัน</h2> </div> <div class="contact-grid"> <div class="contact-info"> <h3>มาร่วมงานกันเถอะ!</h3> <p> หากสนใจในผลงานหรือต้องการร่วมพูดคุยปรึกษาเกี่ยวกับโปรเจกต์งานพัฒนาเว็บแอปพลิเคชัน สามารถส่งข้อความหาผมได้ทันทีครับ </p> <div class="contact-details"> <div class="contact-item"> <div class="icon-box"><i class="fa-solid fa-phone"></i></div> <div> <span>เบอร์โทรศัพท์</span> <p>096-236-0930</p> </div> </div> <div class="contact-item"> <div class="icon-box"><i class="fa-solid fa-envelope"></i></div> <div> <span>อีเมล</span> <p>nemokwang@gmail.com</p> </div> </div> <div class="contact-item"> <div class="icon-box"><i class="fa-solid fa-location-dot"></i></div> <div> <span>ที่อยู่</span> <p>บ้านเลขที่ 30 ถ.มูลเมือง ซอย 9 ต.ศรีภูมิ อ.เมือง จ.เชียงใหม่ 50200</p> </div> </div> </div> <div class="social-links"> <a href="#" aria-label="GitHub"><i class="fa-brands fa-github"></i></a> <a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a> <a href="#" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a> </div> </div> <div class="contact-form-wrapper"> <form id="contact-form" class="contact-form"> <div class="form-group"> <label for="name">ชื่อผู้ติดต่อ</label> <input type="text" id="name" name="name" required placeholder="เช่น สมชาย ใจดี"> </div> <div class="form-group"> <label for="email">อีเมลของคุณ</label> <input type="email" id="email" name="email" required placeholder="เช่น somchai@email.com"> </div> <div class="form-group"> <label for="message">ข้อความ</label> <textarea id="message" name="message" rows="5" required placeholder="เขียนข้อความที่ต้องการแจ้งรายละเอียด..."></textarea> </div> <button type="submit" class="btn btn-primary btn-submit"> ส่งข้อความ <i class="fa-solid fa-paper-plane"></i> </button> </form> <!-- Submission Feedback Dialog --> <div id="form-feedback" class="form-feedback-message"> <i class="fa-solid fa-circle-check"></i> <h4>ส่งข้อความสำเร็จ!</h4> <p>ขอบคุณที่ติดต่อเข้ามา ผมจะตอบกลับผ่านอีเมลโดยเร็วที่สุดครับ</p> </div> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="footer"> <div class="container footer-container"> <p>© 2026 Tanthap.dev. All rights reserved. Designed with ❤️ by ธนเทพ</p> <div class="footer-bottom-links"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </div> </div> </footer> <!-- Mobile Sticky Bottom Navigation --> <nav class="sticky-bottom-nav"> <a href="#home" class="bottom-nav-link active"> <i class="fa-solid fa-house"></i> <span>Home</span> </a> <a href="#about" class="bottom-nav-link"> <i class="fa-solid fa-user"></i> <span>About</span> </a> <a href="#projects" class="bottom-nav-link"> <i class="fa-solid fa-code"></i> <span>Projects</span> </a> <a href="#contact" class="bottom-nav-link"> <i class="fa-solid fa-envelope"></i> <span>Contact</span> </a> <button class="theme-toggle-btn" id="theme-toggle-mobile" aria-label="Toggle Dark/Light Mode"> <i class="fa-solid fa-moon"></i> </button> </nav> <!-- Custom JS --> <script src="script.js"></script> </body> </html>

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