File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090046/01_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"> <meta name="description" content="พอร์ตโฟลิโอของ Thitiwat Pimpaeng (ฐิติวัฒน์ ปิมแปง) นักศึกษาคอมพิวเตอร์เทคโนโลยี ผู้เชี่ยวชาญด้าน C Programming และ Hardware Tuning"> <title>Thitiwat Pimpaeng \| Portfolio & System Optimization</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=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> <!-- FontAwesome 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> <!-- Background Tech Grid / Ambient Glows --> <div class="tech-grid"></div> <div class="glow-bg-1"></div> <div class="glow-bg-2"></div> <!-- Sticky Navbar --> <header class="navbar"> <div class="nav-container"> <a href="#" class="nav-logo"> <span class="logo-bracket">[</span> <span class="logo-text">T_PIMP</span> <span class="logo-bracket">]</span> </a> <nav class="nav-menu"> <a href="#about" class="nav-link active">About</a> <a href="#education" class="nav-link">Education</a> <a href="#skills" class="nav-link">Skills & Interests</a> <a href="#tuning-lab" class="nav-link">Tuning Lab</a> <a href="#contact" class="nav-link">Contact</a> </nav> <div class="nav-actions"> <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle Theme"> <i class="fa-solid fa-sun"></i> </button> <button class="nav-toggle" aria-label="Toggle Menu"> <i class="fa-solid fa-bars"></i> </button> </div> </div> </header> <!-- Hero Section / About Me --> <section id="about" class="hero-section"> <div class="section-container hero-container"> <div class="hero-content"> <div class="hero-badge"><i class="fa-solid fa-microchip"></i> System Optimization Enthusiast</div> <h1 class="hero-name-en">Thitiwat Pimpaeng (Beam)</h1> <h2 class="hero-name-th">ฐิติวัฒน์ ปิมแปง (บีม)</h2> <div class="hero-info-grid"> <div class="info-item"> <span class="info-label">Born:</span> <span class="info-value">July 3, 2005 (03/07/2005)</span> </div> <div class="info-item"> <span class="info-label">Status:</span> <span class="info-value text-accent">Computer Technology Student</span> </div> </div> <p class="hero-bio"> นักศึกษาที่มีความสนใจและเชี่ยวชาญด้านการเขียนโปรแกรม (Programming) การเพิ่มประสิทธิภาพระบบ (System Optimization) และฮาร์ดแวร์ คอมพิวเตอร์ มุ่งเน้นการปรับแต่งระบบให้มีความเสถียรสูงสุดและค่าความหน่วง (Latency) ต่ำที่สุดเพื่อการใช้งานระดับสูงและการเล่นเกม </p> <div class="hero-cta"> <a href="#tuning-lab" class="btn btn-primary"><i class="fa-solid fa-gamepad"></i> Try Tuning Lab</a> <a href="#contact" class="btn btn-secondary"><i class="fa-solid fa-envelope"></i> Contact Me</a> </div> </div> <div class="hero-visual"> <div class="avatar-container"> <div class="neon-ring"></div> <div class="neon-ring-outer"></div> <div class="avatar-img-placeholder"> <img src="assets/profile.jpg" alt="Thitiwat Pimpaeng" class="avatar-img"> <div class="binary-stream" id="binary-stream"></div> </div> </div> </div> </div> </section> <!-- Education Section --> <section id="education" class="education-section scroll-reveal"> <div class="section-container"> <div class="section-header"> <h2 class="section-title"><span class="text-accent">//</span> Education Background</h2> <p class="section-subtitle">ประวัติและสถานะการศึกษาปัจจุบัน</p> </div> <div class="timeline"> <div class="timeline-line"></div> <!-- Current Education --> <div class="timeline-item current"> <div class="timeline-marker"> <i class="fa-solid fa-graduationcap"></i> </div> <div class="timeline-content"> <span class="timeline-badge">กำลังศึกษา</span> <h3 class="education-title">ปวส.1 Technology Computer</h3> <p class="education-meta">Computer Technology Vocational Level 1</p> <p class="education-desc"> ศึกษาต่อในระดับประกาศนียบัตรวิชาชีพชั้นสูง สาขาเทคโนโลยีคอมพิวเตอร์ เจาะลึกโครงสร้างระบบคอมพิวเตอร์ สถาปัตยกรรมฮาร์ดแวร์ การจัดการระบบปฏิบัติการ เครือข่าย และพื้นฐานการโปรแกรมระบบ </p> </div> </div> <!-- High School --> <div class="timeline-item past"> <div class="timeline-marker"> <i class="fa-solid fa-school"></i> </div> <div class="timeline-content"> <span class="timeline-badge badge-gray">จบการศึกษาแล้ว</span> <h3 class="education-title">โรงเรียนส่วนบุญโญปถัมภ์ ลำพูน</h3> <p class="education-meta">High School Graduate</p> <p class="education-desc"> สถาบันการศึกษาระดับมัธยมศึกษาตอนปลาย ปูพื้นฐานการคิดเชิงคำนวณ วิทยาศาสตร์ และคณิตศาสตร์ที่เป็นรากฐานสำคัญสำหรับการพัฒนาโปรแกรมและการคำนวณขั้นสูง </p> </div> </div> </div> </div> </section> <!-- Skills & Expertise Section --> <section id="skills" class="skills-section scroll-reveal"> <div class="section-container"> <div class="section-header"> <h2 class="section-title"><span class="text-accent">//</span> Skills & Expertise</h2> <p class="section-subtitle">ความรู้ความสามารถเฉพาะทางและทักษะด้านเทคนิค</p> </div> <div class="skills-grid"> <!-- Programming Languages --> <div class="skill-card"> <div class="card-icon"> <i class="fa-solid fa-code"></i> </div> <h3 class="card-title">Programming Languages</h3> <div class="skill-items"> <div class="skill-badge"> <span class="badge-lang">C</span> <div class="skill-progress-bar"> <div class="skill-progress" style="width: 80%"></div> </div> </div> </div> <p class="card-desc">เน้นการเขียนภาษา C สำหรับพัฒนาอัลกอริทึม การจัดการหน่วยความจำโดยตรง และความเข้าใจระบบคอมพิวเตอร์ระดับต่ำ (Low-Level Processing)</p> </div> <!-- Tools & Workflows --> <div class="skill-card"> <div class="card-icon"> <i class="fa-solid fa-screwdriver-wrench"></i> </div> <h3 class="card-title">Tools & Collaboration</h3> <div class="skill-items"> <span class="tech-tag"><i class="fa-brands fa-git-alt text-orange"></i> Git</span> <span class="tech-tag"><i class="fa-brands fa-github text-white"></i> GitHub</span> <span class="tech-tag"><i class="fa-solid fa-terminal text-accent"></i> Command Line / Bash</span> </div> <p class="card-desc">คุ้นเคยกับระบบควบคุมเวอร์ชัน (Version Control) การทำงานร่วมกันผ่าน GitHub และการใช้คำสั่ง Terminal ในการเขียนสคริปต์ควบคุมระบบ</p> </div> <!-- Technical Interests --> <div class="skill-card wide-card"> <div class="card-icon"> <i class="fa-solid fa-gauge-high"></i> </div> <h3 class="card-title">Technical Interests & Optimization</h3> <div class="interests-grid"> <div class="interest-item"> <h4><i class="fa-solid fa-bolt text-accent"></i> PC Performance Optimization</h4> <p>การเพิ่มประสิทธิภาพของระบบปฏิบัติการ ลด Background telemetry และการจัดการทรัพยากรเพื่อเพิ่มเฟรมเรตสูงสุดในการรันงานหนักและเล่นเกม</p> </div> <div class="interest-item"> <h4><i class="fa-solid fa-sliders text-accent"></i> Hardware Tuning</h4> <p>การปรับแต่งฮาร์ดแวร์ เช่น CPU Undervolting/Overclocking เพื่อควบคุมความร้อนและการปรับแต่ง RAM Sub-timings เพื่อเพิ่ม Bandwidth</p> </div> <div class="interest-item"> <h4><i class="fa-solid fa-microchip text-accent"></i> Low-Latency Configuration</h4> <p>การทำ BIOS Tuning การตั้งค่า Interrupt Affinity, Timer Resolution และการลบระบบที่สร้างความหน่วงให้เหลือ Latency ต่ำที่สุด</p> </div> </div> </div> </div> </div> </section> <!-- Interactive Tuning Lab --> <section id="tuning-lab" class="tuning-section scroll-reveal"> <div class="section-container"> <div class="section-header"> <h2 class="section-title"><span class="text-accent">//</span> Interactive Tuning Lab</h2> <p class="section-subtitle">ทดลองปรับแต่งระบบและสังเกตความเปลี่ยนแปลงจำลองในกราฟแบบ Real-time</p> </div> <div class="tuning-dashboard"> <!-- Control Panel --> <div class="dashboard-controls"> <h3><i class="fa-solid fa-gears"></i> Optimization Toggles</h3> <p class="control-note">เปิดใช้งานตัวเลือกการปรับแต่งเพื่อลด System Latency และเพิ่มประสิทธิภาพการทำงานของระบบ</p> <div class="toggle-group"> <!-- Toggle 1 --> <div class="toggle-item"> <div class="toggle-info"> <span class="toggle-title">RAM Sub-Timings Opt</span> <span class="toggle-desc">ปรับแต่งค่าทุติยภูมิของแรมเพื่อลดหน่วยความจำดีเลย์</span> </div> <label class="switch"> <input type="checkbox" id="toggle-ram"> <span class="slider"></span> </label> </div> <!-- Toggle 2 --> <div class="toggle-item"> <div class="toggle-info"> <span class="toggle-title">CPU Undervolting</span> <span class="toggle-desc">ลดแรงดันไฟฟ้าเพื่อลดอุณหภูมิและป้องกัน Throttling</span> </div> <label class="switch"> <input type="checkbox" id="toggle-cpu"> <span class="slider"></span> </label> </div> <!-- Toggle 3 --> <div class="toggle-item"> <div class="toggle-info"> <span class="toggle-title">Interrupt Affinity & Telemetry Cut</span> <span class="toggle-desc">ลดความหน่วงระดับ OS จัดลำดับความสำคัญของคอร์ประมวลผล</span> </div> <label class="switch"> <input type="checkbox" id="toggle-os"> <span class="slider"></span> </label> </div> </div> <div class="dashboard-actions"> <button id="reset-tuning" class="btn btn-secondary btn-sm"><i class="fa-solid fa-rotate-left"></i> Reset Defaults</button> </div> </div> <!-- Telemetry Stats & Live Monitor --> <div class="dashboard-telemetry"> <div class="telemetry-grid"> <div class="telemetry-card" id="card-latency"> <span class="telemetry-label"><i class="fa-solid fa-wave-square"></i> System Latency</span> <div class="telemetry-value-container"> <span class="telemetry-value" id="val-latency">18.2</span> <span class="telemetry-unit">ms</span> </div> <div class="telemetry-trend text-red" id="trend-latency">High Jitter</div> </div> <div class="telemetry-card" id="card-fps"> <span class="telemetry-label"><i class="fa-solid fa-gauge-simple-high"></i> Average FPS</span> <div class="telemetry-value-container"> <span class="telemetry-value" id="val-fps">120</span> <span class="telemetry-unit">FPS</span> </div> <div class="telemetry-trend text-yellow" id="trend-fps">Standard</div> </div> <div class="telemetry-card" id="card-temp"> <span class="telemetry-label"><i class="fa-solid fa-temperature-three-quarters"></i> CPU Temp</span> <div class="telemetry-value-container"> <span class="telemetry-value" id="val-temp">78</span> <span class="telemetry-unit">°C</span> </div> <div class="telemetry-trend text-yellow" id="trend-temp">Warm</div> </div> </div> <!-- Canvas Realtime Frame-time Line Graph --> <div class="telemetry-graph-container"> <div class="graph-header"> <span class="graph-title"><i class="fa-solid fa-chart-line"></i> Real-time Frame-Time / Latency Monitor</span> <span class="graph-status" id="graph-status"><span class="status-dot pulsating-red"></span> Unoptimized State</span> </div> <div class="graph-canvas-wrapper"> <canvas id="telemetry-graph"></canvas> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section scroll-reveal"> <div class="section-container"> <div class="section-header"> <h2 class="section-title"><span class="text-accent">//</span> Contact Me</h2> <p class="section-subtitle">ส่งข้อความหาฉัน หรือติดต่อโดยตรงตามข้อมูลด้านล่าง</p> </div> <div class="contact-wrapper"> <!-- Contact Direct Info --> <div class="contact-info"> <h3>Get In Touch</h3> <p class="contact-intro">หากคุณมีความสนใจในการร่วมงาน พัฒนาโปรเจกต์ หรือต้องการแลกเปลี่ยนความรู้ด้าน System Optimization และ Hardware Tuning สามารถติดต่อได้ทันที</p> <div class="contact-cards"> <!-- Phone --> <a href="tel:0947947036" class="contact-card-item"> <div class="contact-icon-box"> <i class="fa-solid fa-phone"></i> </div> <div class="contact-details"> <span class="contact-label">Phone</span> <span class="contact-value">094-7947036</span> </div> </a> <!-- Email --> <a href="mailto:kinghoop12345@gmail.com" class="contact-card-item"> <div class="contact-icon-box"> <i class="fa-solid fa-envelope"></i> </div> <div class="contact-details"> <span class="contact-label">Email</span> <span class="contact-value">kinghoop12345@gmail.com</span> </div> </a> </div> </div> <!-- Contact Form --> <div class="contact-form-container"> <form id="portfolio-contact-form" class="contact-form"> <div class="form-group"> <input type="text" id="form-name" required placeholder=" "> <label for="form-name">ชื่อของคุณ (Your Name)</label> <span class="focus-line"></span> </div> <div class="form-group"> <input type="email" id="form-email" required placeholder=" "> <label for="form-email">อีเมลติดต่อ (Your Email)</label> <span class="focus-line"></span> </div> <div class="form-group"> <input type="text" id="form-subject" required placeholder=" "> <label for="form-subject">หัวเรื่อง (Subject)</label> <span class="focus-line"></span> </div> <div class="form-group"> <textarea id="form-message" required placeholder=" " rows="5"></textarea> <label for="form-message">ข้อความของคุณ (Message)</label> <span class="focus-line"></span> </div> <button type="submit" class="btn btn-primary btn-submit"> <span class="btn-text">ส่งข้อความ (Send Message)</span> <span class="btn-icon"><i class="fa-solid fa-paper-plane"></i></span> </button> </form> </div> </div> </div> </section> <!-- Toast Notification System --> <div id="toast-container" class="toast-container"></div> <!-- Footer --> <footer class="footer"> <div class="footer-container"> <div class="footer-left"> <p>© 2026 Thitiwat Pimpaeng. All rights reserved.</p> <p class="footer-subtext">Designed for performance, built for latency.</p> </div> <div class="footer-right"> <a href="#about" class="back-to-top" aria-label="Back to Top"> <i class="fa-solid fa-arrow-up"></i> </a> </div> </div> </footer> <!-- Custom JS --> <script src="app.js"></script> </body> </html>

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