File manager

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

Back
<!DOCTYPE html> <html lang="en" data-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ชินภัทร บุญทรง \| Wuthering Waves 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=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <!-- CSS Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Custom Cursor Effect --> <div class="custom-cursor" id="custom-cursor"></div> <div class="custom-cursor-glow" id="custom-cursor-glow"></div> <!-- Navigation Header --> <header class="navbar" id="navbar"> <div class="nav-container"> <a href="#hero" class="nav-logo"> <span>P</span>ortfolio<span>.</span> </a> <!-- Desktop Menu --> <nav class="nav-menu" id="nav-menu"> <ul> <li><a href="#hero" class="nav-link active">Home</a></li> <li><a href="#about" class="nav-link">About</a></li> <li><a href="#skills" class="nav-link">Skills</a></li> <li><a href="#projects" class="nav-link">Projects</a></li> <li><a href="#contact" class="nav-link">Contact</a></li> </ul> </nav> <!-- Action buttons --> <div class="nav-actions"> <!-- Theme Toggle Button --> <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark/light theme"> <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="4" /> <path d="M12 2v2" /> <path d="M12 20v2" /> <path d="m4.93 4.93 1.41 1.41" /> <path d="m17.66 17.66 1.41 1.41" /> <path d="M2 12h2" /> <path d="M20 12h2" /> <path d="m6.34 17.66-1.41 1.41" /> <path d="m19.07 4.93-1.41 1.41" /> </svg> <svg class="moon-icon" xmlns="http://www.w3.org/2000/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="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" /> </svg> </button> <!-- Hamburger Icon --> <button class="hamburger" id="hamburger-toggle" aria-label="Toggle menu"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> </div> </div> <!-- Mobile Dropdown Menu --> <div class="mobile-menu" id="mobile-menu"> <ul> <li><a href="#hero" class="mobile-link">Home</a></li> <li><a href="#about" class="mobile-link">About</a></li> <li><a href="#skills" class="mobile-link">Skills</a></li> <li><a href="#projects" class="mobile-link">Projects</a></li> <li><a href="#contact" class="mobile-link">Contact</a></li> </ul> </div> </header> <!-- Main Content --> <main> <!-- Hero Section --> <section id="hero" class="hero-section"> <div class="hero-bg-glow"></div> <div class="container hero-container"> <div class="hero-content reveal-fade-left"> <div class="hero-badge"> <span class="badge-dot"></span> Available for Hire </div> <h1 class="hero-title"> สวัสดีครับ ผมชื่อ <span class="text-gradient">ชินภัทร</span> </h1> <h2 class="hero-subtitle"> ผมเป็น <span id="typewriter" class="typewriter-text"></span><span class="cursor-blink">\|</span> </h2> <p class="hero-description"> </p> <div class="hero-actions"> <a href="#projects" class="btn btn-primary"> <span>ดูผลงาน (View Projects)</span> <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="m12 19 7-7-7-7" /> <path d="M19 12H5" /> </svg> </a> <a href="#contact" class="btn btn-secondary">ติดต่อฉัน (Contact Me)</a> </div> </div> <div class="hero-visual reveal-fade-right"> <div class="profile-card-wrapper"> <div class="profile-card"> <div class="profile-image-container"> <img src="assets/profile.jpg" alt="ชินภัทร บุญทรง Profile" class="profile-img"> </div> <div class="profile-card-details"> <h3>ชินภัทร บุญทรง</h3> <p>Software Engineer</p> <div class="profile-tags"> <span>💻 C Language</span> <span>🎮 Game Dev</span> <span>☕ Cafe & Toys</span> </div> </div> </div> </div> </div> </div> <div class="scroll-indicator"> <a href="#about" aria-label="Scroll to About Section"> <span class="mouse"> <span class="wheel"></span> </span> </a> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="section-header reveal-fade-up"> <span class="section-tag">About Me</span> <h2 class="section-title">ประวัติส่วนตัวและเป้าหมาย</h2> <p class="section-subtitle">ข้อมูลส่วนตัว ประวัติการศึกษา และความฝันในอนาคต</p> </div> <div class="about-grid"> <div class="about-visual reveal-fade-left"> <div class="about-image-wrapper"> <img src="assets/aemeath_library.jpg" alt="Aemeath Library" class="about-img-deco"> </div> </div> <div class="about-text-content reveal-fade-right"> <h3 class="about-title">สวัสดีครับ ผม ลีชิน (Lee Chin)</h3> <p class="about-para"> ผมชื่อ <strong>ชินภัทร บุญทรง</strong> อายุ 18 ปี ปัจจุบันทำงานในตำแหน่ง <strong>Software Engineer ที่ Inter Box</strong> และกำลังศึกษาอยู่ในระดับชั้น ปวส. ปีที่ 1 </p> <p class="about-para"> ผมเกิดที่อำเภออรัญประเทศ จังหวัดสระแก้ว สำเร็จการศึกษาระดับมัธยมศึกษาตอนต้นจาก <strong>โรงเรียนพวงคราม</strong> และย้ายมาศึกษาต่อสายอาชีพในระดับ ปวช. ที่ <strong>วิทยาลัยเทคนิคเชียงใหม่</strong> ปัจจุบันอาศัยอยู่ที่จังหวัดเชียงใหม่ </p> <p class="about-para"> <strong>เป้าหมายในชีวิต:</strong> มีความฝันในอนาคตที่อยากจะเปิดคาเฟ่บรรยากาศนั่งชิล และมีมุมขายของเล่น/ของสะสมควบคู่ไปในร้านด้วย </p> <div class="about-stats"> <div class="stat-item"> <span class="stat-num">18</span> <span class="stat-label">Years Old</span> </div> <div class="stat-item"> <span class="stat-num">1</span> <span class="stat-label">Steam Game Released</span> </div> <div class="stat-item"> <span class="stat-num">100%</span> <span class="stat-label">Passion & Dedication</span> </div> </div> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills" class="skills-section section-padding"> <div class="container"> <div class="section-header reveal-fade-up"> <span class="section-tag">Expertise</span> <h2 class="section-title">ทักษะความชำนาญ (My Skills)</h2> <p class="section-subtitle">My core stack and tools that I use to bring outstanding websites to life.</p> </div> <div class="skills-grid"> <!-- Programming Languages --> <div class="skills-category-card reveal-fade-up"> <div class="category-header"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="16 18 22 12 16 6" /> <polyline points="8 6 2 12 8 18" /> </svg> <h3>Programming Languages</h3> </div> <div class="skills-list"> <div class="skill-item"> <div class="skill-info"> <span>C Language (ชำนาญเป็นพิเศษ)</span> <span>95%</span> </div> <div class="progress-bar"> <div class="progress" style="width: 95%"></div> </div> </div> <div class="skill-item"> <div class="skill-info"> <span>Python (พอใช้/เข้าใจโครงสร้าง)</span> <span>75%</span> </div> <div class="progress-bar"> <div class="progress" style="width: 75%"></div> </div> </div> <div class="skill-item"> <div class="skill-info"> <span>Java (พอใช้/เข้าใจโครงสร้าง)</span> <span>70%</span> </div> <div class="progress-bar"> <div class="progress" style="width: 70%"></div> </div> </div> </div> </div> </div> <!-- Skill Tags Cloud --> <div class="skill-tags-cloud reveal-fade-up"> <span class="skill-tag">C / C++</span> <span class="skill-tag">Python</span> <span class="skill-tag">Java</span> <span class="skill-tag">Steam SDK</span> <span class="skill-tag">Game Engine</span> <span class="skill-tag">Game Design</span> <span class="skill-tag">Teamwork</span> <span class="skill-tag">Pointers & Memory</span> <span class="skill-tag">Object-Oriented Programming (OOP)</span> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="projects-section section-padding"> <div class="container"> <div class="section-header reveal-fade-up"> <span class="section-tag">My Work</span> <h2 class="section-title">ผลงานที่ผ่านมา (Featured Projects)</h2> <p class="section-subtitle">A collection of web systems and digital products built with precise coding and creative details.</p> </div> <div class="projects-grid"> <!-- Project 1 --> <article class="project-card reveal-fade-up"> <div class="project-image-wrapper"> <img src="assets/phase_zero.png" alt="Phase Zero Game" class="project-img"> <div class="project-overlay"> <a href="https://store.steampowered.com/app/3472400/PHASE_ZERO_Demo/" target="_blank" rel="noopener noreferrer" class="project-btn" aria-label="View on Steam"> <svg xmlns="http://www.w3.org/2000/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="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /> </svg> </a> </div> </div> <div class="project-details"> <span class="project-tag-mini">Steam Game (โปรเจกต์จบ ปวช.3)</span> <h3 class="project-card-title">Phase Zero</h3> <p class="project-card-desc">เกมที่ร่วมกันพัฒนาขึ้นกับเพื่อนอีก 3 คนเพื่อเป็นโปรเจกต์จบการศึกษาระดับชั้น ปวช.3 ปัจจุบันตัวเกมผ่านการอนุมัติและเปิดให้ผู้เล่นดาวน์โหลดมาเล่นกันได้จริงๆ บนแพลตฟอร์ม Steam</p> <div class="project-tech-tags"> <span>C Language</span> <span>Game Engine</span> <span>Steam SDK</span> <span>Teamwork (4 Members)</span> </div> <div class="project-links"> <a href="https://store.steampowered.com/app/3472400/PHASE_ZERO_Demo/" class="project-link-btn" target="_blank" rel="noopener noreferrer"> ดูบนร้านค้า Steam (Steam Store) <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12h14" /> <path d="m12 5 7 7-7 7" /> </svg> </a> </div> </div> </article> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="section-header reveal-fade-up"> <span class="section-tag">Let's Connect</span> <h2 class="section-title">ติดต่อฉัน (Contact Me)</h2> <p class="section-subtitle">Have a project in mind, want to collaborate, or just say hello? Reach out anytime.</p> </div> <div class="contact-grid"> <!-- Contact Info Cards --> <div class="contact-info-wrapper reveal-fade-left"> <div class="contact-card"> <div class="contact-card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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" /> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /> </svg> </div> <div class="contact-card-info"> <span>Email Me</span> <a href="mailto:bchinapat@gmail.com" class="contact-card-link">bchinapat@gmail.com</a> </div> </div> <div class="contact-card"> <div class="contact-card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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" /> </svg> </div> <div class="contact-card-info"> <span>Facebook</span> <a href="https://www.facebook.com/chinapat.bunsong" target="_blank" rel="noopener noreferrer" class="contact-card-link">chinapat bunsong</a> </div> </div> <div class="contact-card"> <div class="contact-card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /> </svg> </div> <div class="contact-card-info"> <span>LINE ID</span> <a href="https://line.me/R/ti/p/@chinapat4" target="_blank" rel="noopener noreferrer" class="contact-card-link">@chinapat4</a> </div> </div> </div> <!-- Contact Form --> <div class="contact-form-wrapper reveal-fade-right"> <form id="contact-form" class="contact-form"> <div class="form-group"> <label for="name">ชื่อของคุณ (Your Name)</label> <input type="text" id="name" name="name" required placeholder="ชื่อ นามสกุล"> </div> <div class="form-group"> <label for="email">อีเมลติดต่อ (Email Address)</label> <input type="email" id="email" name="email" required placeholder="name@domain.com"> </div> <div class="form-group"> <label for="message">ข้อความฝากถึงผม (Your Message)</label> <textarea id="message" name="message" rows="5" required placeholder="รายละเอียดงาน หรือข้อความที่ต้องการติดต่อ..."></textarea> </div> <button type="submit" class="btn btn-primary btn-block"> <span>ส่งข้อความ (Send Message)</span> <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"> <line x1="22" y1="2" x2="11" y2="13" /> <polygon points="22 2 15 22 11 13 2 9 22 2" /> </svg> </button> <p id="form-status" class="form-status"></p> </form> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="footer"> <div class="container footer-container"> <p class="copyright">© 2026 ชินภัทร บุญทรง. All Rights Reserved. Crafted with passion.</p> <div class="footer-socials"> <a href="https://github.com" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><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="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /> <path d="M9 18c-4.51 2-5-2-7-2" /> </svg></a> <a href="https://www.facebook.com/chinapat.bunsong" target="_blank" rel="noopener noreferrer" 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" /> </svg></a> <a href="mailto:bchinapat@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" /> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /> </svg></a> </div> <a href="#hero" class="back-to-top" id="back-to-top" aria-label="Back to top"> <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 15-6-6-6 6" /> </svg> </a> </div> </footer> <!-- JS Script --> <script src="script.js"></script> </body> </html>

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