File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090016/portfolio/index.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <!-- Responsive Meta Tag เพื่อให้ขนาดหน้าจอยืดหยุ่นบน Mobile/Tablet --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Resume & Portfolio \| พีรพัฒน์ ดวงมณี (บีม)</title> <meta name="description" content="แฟ้มสะสมผลงาน (Portfolio) และประวัติส่วนตัวของ พีรพัฒน์ ดวงมณี (บีม) นักศึกษาวิทยาลัยเทคนิคเชียงใหม่"> <!-- Google Fonts: Inter & Outfit เพื่อความทันสมัยระดับ Premium --> <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&family=Outfit:wght@400;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Link ไปยัง CSS หลัก --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- เอฟเฟกต์แสงเรืองแสงพื้นหลัง (Background Glow Orbs) เพื่อดีไซน์ที่หรูหรา --> <div class="glow-bg"> <div class="glow-orb orb-1"></div> <div class="glow-orb orb-2"></div> </div> <!-- Navigation Header --> <header class="header" id="header"> <nav class="navbar container"> <a href="#home" class="logo"> <span>P</span>eerapat.dev </a> <!-- Desktop Menu --> <ul class="nav-menu" id="nav-menu"> <li class="nav-item"> <a href="#home" class="nav-link active">หน้าแรก</a> </li> <li class="nav-item"> <a href="#about" class="nav-link">เกี่ยวกับฉัน</a> </li> <li class="nav-item"> <a href="#projects" class="nav-link">ผลงาน</a> </li> <li class="nav-item"> <a href="#contact" class="nav-link">ติดต่อ</a> </li> </ul> <!-- Theme Toggle Button --> <div class="theme-toggle-wrapper"> <button id="theme-toggle" class="theme-toggle" aria-label="สลับธีม"> <!-- Sun icon --> <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.364l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z" /> </svg> <!-- Moon icon --> <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /> </svg> </button> </div> <!-- Hamburger Button สำหรับหน้าจอมือถือ/แท็บเล็ต --> <button class="hamburger-toggle" id="hamburger-toggle" aria-label="เปิดเมนู"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> </nav> </header> <!-- Main Content --> <main> <!-- Hero Section --> <section class="hero" id="home"> <div class="container hero-container"> <div class="hero-content"> <span class="hero-tagline">ยินดีต้อนรับสู่พอร์ตโฟลิโอของฉัน</span> <h1 class="hero-title">สวัสดี, ผมชื่อ <span class="gradient-text">พีรพัฒน์ ดวงมณี</span></h1> <p class="hero-desc"> นักศึกษาจาก<strong>วิทยาลัยเทคนิคเชียงใหม่ ระดับการศึกษา ปวส.1</strong> ผู้มีความมุ่งมั่นและสนใจในการพัฒนาทักษะด้านต่าง ๆ </p> <div class="hero-buttons"> <a href="#about" class="btn btn-primary">ทำความรู้จักฉัน</a> <a href="#contact" class="btn btn-secondary">ติดต่อฉัน</a> </div> </div> <div class="hero-profile"> <div class="profile-img-wrapper glass"> <img src="profile.jpg" alt="พีรพัฒน์ ดวงมณี Profile" class="profile-img"> </div> </div> </div> </section> <!-- About Me Section --> <section class="about section" id="about"> <div class="container"> <div class="section-header"> <h2 class="section-title">ประวัติส่วนตัว</h2> <p class="section-subtitle">RESUME & PERSONAL PROFILE</p> </div> <div class="about-grid"> <!-- ประวัติย่อ (Glassmorphism Card) --> <div class="about-card glass"> <h3><span class="card-icon-title">👤</span> ข้อมูลส่วนตัว</h3> <div class="profile-details-list"> <div class="profile-detail-item"> <span class="detail-label">ชื่อ - สกุล:</span> <span class="detail-value">พีรพัฒน์ ดวงมณี</span> </div> <div class="profile-detail-item"> <span class="detail-label">ชื่อเล่น:</span> <span class="detail-value">บีม</span> </div> <div class="profile-detail-item"> <span class="detail-label">วัน-เดือน-ปีเกิด:</span> <span class="detail-value">13 กุมภาพันธ์ 2551</span> </div> <div class="profile-detail-item"> <span class="detail-label">อายุ:</span> <span class="detail-value">18 ปี</span> </div> <div class="profile-detail-item"> <span class="detail-label">อาชีพ:</span> <span class="detail-value">นักศึกษา (ระดับ ปวส.1)</span> </div> <div class="profile-detail-item"> <span class="detail-label">สถานศึกษา:</span> <span class="detail-value">วิทยาลัยเทคนิคเชียงใหม่</span> </div> </div> </div> <!-- Skills & Hobbies (Glassmorphism Card) --> <div class="skills-card glass"> <h3><span class="card-icon-title">🎯</span> ทักษะและความสามารถ</h3> <div class="skills-grid"> <div class="skill-category"> <h4>ทักษะด้านภาษา / อื่นๆ</h4> <div class="skill-tags"> <span class="skill-tag">อังกฤษพอใช้</span> <span class="skill-tag">การเรียนรู้สิ่งใหม่</span> <span class="skill-tag">ความมุ่งมั่นตั้งใจ</span> </div> </div> <div class="skill-category"> <h4><span class="card-icon-title">🎮</span> งานอดิเรก & กิจกรรมที่ชอบ</h4> <div class="hobbies-list"> <div class="hobby-item"> <span class="hobby-icon">🛌</span> <div class="hobby-content"> <span class="hobby-title">กิจกรรมที่ชอบ</span> <span class="hobby-desc">นอนพักผ่อนเพื่อชาร์จพลังงาน</span> </div> </div> <div class="hobby-item"> <span class="hobby-icon">🎮</span> <div class="hobby-content"> <span class="hobby-title">เล่นเกม</span> <span class="hobby-desc">ผ่อนคลายและฝึกการวางแผน</span> </div> </div> <div class="hobby-item"> <span class="hobby-icon">🐕</span> <div class="hobby-content"> <span class="hobby-title">เล่นกับหมา</span> <span class="hobby-desc">ใช้เวลากับสัตว์เลี้ยงแสนรัก</span> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Projects Section --> <section class="projects section" id="projects"> <div class="container"> <div class="section-header"> <h2 class="section-title">ผลงานที่ผ่านมา</h2> <p class="section-subtitle">ตัวอย่างผลงานที่ผมได้ทำที่ผ่านมา</p> </div> <!-- Projects Responsive Grid --> <div class="projects-grid"> <!-- Project Card 1 --> <article class="project-card glass"> <div class="project-img-wrapper"> <div class="project-img-placeholder" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"> <span>VIP COMPUTER</span> </div> </div> <div class="project-info"> <h3 class="project-title">Computer Technician Intern (VIP COMPUTER)</h3> <p class="project-desc"> ได้รับประสบการณ์ตรงจากการปฏิบัติงานจริงในการซ่อมคอมพิวเตอร์และโน้ตบุ๊ก วิเคราะห์และแก้ไขปัญหาฮาร์ดแวร์/ซอฟต์แวร์ รวมถึงให้บริการตรวจเช็คและบำรุงรักษาระบบคอมพิวเตอร์ให้กับลูกค้า </p> <div class="project-tech"> <span class="tech-tag">Hardware Maintenance</span> <span class="tech-tag">OS Installation</span> <span class="tech-tag">Troubleshooting</span> </div> <div class="project-links"> <span class="project-link-disabled">วิทยาลัยเทคนิคเชียงใหม่</span> </div> </div> </article> <!-- Project Card 2 --> <article class="project-card glass"> <div class="project-img-wrapper"> <div class="project-img-placeholder" style="background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);"> <span>The Nights</span> </div> </div> <div class="project-info"> <h3 class="project-title">Games Project: เกม The Nights</h3> <p class="project-desc"> ผลงานพัฒนาเกมแนวซอมบี้ที่มีกลิ่นอายคลาสสิก โดยนำระบบมุมกล้องแบบ Fixed Camera Angles เหมือนเกมในตำนานอย่าง Resident Evil 1 มาประยุกต์ใช้ โดยมุมกล้องจะเปลี่ยนไปตามพื้นที่ต่าง ๆ ที่ตัวละครเคลื่อนที่ผ่าน </p> <div class="project-tech"> <span class="tech-tag">Game Development</span> <span class="tech-tag">Fixed Camera System</span> <span class="tech-tag">C# / Engine</span> </div> <div class="project-links"> <span class="project-link-disabled">โปรเจกต์จบการศึกษา</span> </div> </div> </article> </div> </div> </section> <!-- Contact Section --> <section class="contact section" id="contact"> <div class="container"> <div class="section-header"> <h2 class="section-title">ติดต่อฉัน</h2> <p class="section-subtitle">ยินดีให้คำปรึกษาและร่วมงานกับทุกคน</p> </div> <div class="contact-grid"> <!-- ข้อมูลติดต่อ (Glassmorphism Card) --> <div class="contact-info-card glass"> <h3>ข้อมูลติดต่อ</h3> <p class="contact-desc">คุณสามารถส่งข้อความหาผมได้โดยตรงผ่านฟอร์มนี้ หรือติดต่อผ่านช่องทางด้านล่างนี้ครับ</p> <div class="contact-details"> <div class="contact-item"> <span class="contact-icon">📞</span> <span class="contact-text"><a href="tel:0811333739" class="contact-link">081-133-3739</a></span> </div> <div class="contact-item"> <span class="contact-icon">📍</span> <span class="contact-text">เชียงใหม่, ประเทศไทย</span> </div> </div> <div class="social-links"> <a href="#" class="social-link" aria-label="Facebook">Facebook</a> <a href="#" class="social-link" aria-label="LINE">LINE</a> </div> </div> <!-- ฟอร์มการติดต่อ (Glassmorphism Form) --> <form class="contact-form glass" id="contact-form" novalidate> <div class="form-group"> <label for="name">ชื่อผู้ติดต่อ</label> <input type="text" id="name" name="name" placeholder="ระบุชื่อของคุณ" required> <span class="error-msg" id="name-error">กรุณากรอกชื่อของคุณ</span> </div> <div class="form-group"> <label for="email">อีเมล / เบอร์โทรศัพท์</label> <input type="text" id="email" name="email" placeholder="ระบุอีเมลหรือเบอร์โทรศัพท์ของคุณ" required> <span class="error-msg" id="email-error">กรุณากรอกข้อมูลติดต่อที่ถูกต้อง</span> </div> <div class="form-group"> <label for="message">ข้อความ</label> <textarea id="message" name="message" rows="5" placeholder="เขียนข้อความติดต่อที่นี่..." required></textarea> <span class="error-msg" id="message-error">กรุณากรอกข้อความของคุณ</span> </div> <button type="submit" class="btn btn-primary btn-submit">ส่งข้อความ</button> <div class="form-success-msg" id="form-success">ส่งข้อความสำเร็จ! ผมจะติดต่อกลับโดยเร็วที่สุด </div> </form> </div> </div> </section> </main> <!-- Footer --> <footer class="footer"> <div class="container footer-content"> <p>© 2026 พีรพัฒน์ ดวงมณี (บีม). All rights reserved.</p> </div> </footer> <!-- Sticky Bottom Menu (สำหรับ Mobile & Tablet เพื่อความสะดวกในการใช้งาน) --> <nav class="sticky-bottom-menu glass" id="sticky-bottom-menu"> <a href="#home" class="sticky-menu-item active"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg> <span>หน้าแรก</span> </a> <a href="#about" class="sticky-menu-item"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> </svg> <span>เกี่ยวกับฉัน</span> </a> <a href="#projects" class="sticky-menu-item"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> </svg> <span>ผลงาน</span> </a> <a href="#contact" class="sticky-menu-item"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> </svg> <span>ติดต่อ</span> </a> </nav> <!-- Link ไปยัง JavaScript หลัก --> <script src="script.js"></script> </body> </html>

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