File manager - Edit - /home/webapp69.cm.in.th/u69319090049/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"> <title>Natpathan Bunmee | Portfolio & System Optimizer</title> <!-- Meta tags for SEO --> <meta name="description" content="Portfolio ของ นัฐปธาน บุญมี นักพัฒนาโปรแกรมภาษา Lua, JavaScript, HTML และผู้เชี่ยวชาญการปรับแต่งเพิ่มประสิทธิภาพคอมพิวเตอร์ (Overclocking)"> <meta name="keywords" content="นัฐปธาน บุญมี, Natpathan Bunmee, Lua Script, JavaScript, HTML, Overclock, System Optimization, พร้าววิทยาคม"> <!-- Stylesheets & Fonts --> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <!-- Header Navigation --> <header> <div class="nav-container"> <a href="#" class="logo">2x<span>.Bwhip</span></a> <ul class="nav-menu"> <li><a href="#hero" class="nav-link">หน้าแรก</a></li> <li><a href="#about" class="nav-link">เกี่ยวกับฉัน</a></li> <li><a href="#skills" class="nav-link">ความสามารถ</a></li> <li><a href="#projects" class="nav-link">ผลงาน</a></li> <li><a href="#contact" class="nav-link">ติดต่อ</a></li> </ul> <!-- Mobile Toggle Button --> <div class="nav-toggle" id="nav-toggle"> <i class="fa-solid fa-bars"></i> </div> <!-- Interactive Overclock Mode Widget --> <div class="oc-widget" id="oc-trigger" title="คลิกเพื่อโอเวอร์คล็อกเว็บบอร์ด!"> <div class="oc-indicator" id="oc-indicator"></div> <span class="oc-text" id="oc-status-text">Normal Mode</span> </div> </div> </header> <!-- Hero Section --> <section id="hero" class="hero"> <div class="glow-ring"></div> <div class="glow-ring-2"></div> <div class="container"> <div class="hero-wrapper"> <!-- Left Side: Introduce Text --> <div class="hero-info"> <div class="hero-badge"> <i class="fa-solid var(--badge-icon, fa-shield-halved)"></i> <span id="badge-text">System Status: Stable</span> </div> <h1 class="hero-title">นัฐปธาน บุญมี</h1> <h2 class="hero-title text-gradient" style="font-size: 2.8rem; margin-top: -1rem; margin-bottom: 1.5rem;"> Developer & Overclocker </h2> <p class="hero-desc"> นักพัฒนาซอฟต์แวร์ผู้หลงใหลการเขียนโค้ดและเพิ่มประสิทธิภาพระบบคอมพิวเตอร์ เชี่ยวชาญการเขียนสคริปต์ภาษา <strong>Python</strong>, <strong>Lua</strong>, <strong>JavaScript</strong>, <strong>HTML</strong> ควบคู่ไปกับทักษะการทำ <strong>Computer Optimization & Overclocking</strong> เพื่อเค้นประสิทธิภาพฮาร์ดแวร์ให้ก้าวข้ามขีดจำกัด </p> <div class="hero-actions"> <a href="#projects" class="btn btn-primary">ดูผลงานของฉัน</a> <a href="#contact" class="btn btn-secondary">ติดต่อฉัน</a> </div> <!-- Social Icons --> <div class="social-links"> <a href="https://www.facebook.com/natpathan.bunmee" class="social-icon" target="_blank" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a> <a href="https://www.instagram.com/fixzx_ntp?igsh=MWQ0Mjg4bTFhb283NA%3D%3D&utm_source=qr" class="social-icon" target="_blank" title="Instagram"><i class="fa-brands fa-instagram"></i></a> </div> </div> <!-- Right Side: Interactive System Dashboard --> <div class="hero-visual"> <div class="system-dashboard glass-card"> <div class="sys-header"> <div class="sys-dots"> <span></span><span></span><span></span> </div> <div class="sys-title">SYSTEM MONITOR</div> </div> <div class="stat-group"> <!-- CPU Speed --> <div class="stat-item"> <div class="stat-info"> <span class="stat-label">CPU Clock Speed</span> <span class="stat-value" id="cpu-speed">3.40 GHz</span> </div> <div class="stat-bar-outer"> <div class="stat-bar-inner" id="cpu-bar" style="width: 45%;"></div> </div> </div> <!-- CPU Temperature --> <div class="stat-item"> <div class="stat-info"> <span class="stat-label">CPU Temp</span> <span class="stat-value" id="cpu-temp">42°C</span> </div> <div class="stat-bar-outer"> <div class="stat-bar-inner" id="temp-bar" style="width: 38%; background: var(--color-accent);"></div> </div> </div> <!-- System Fan Speed --> <div class="stat-item"> <div class="stat-info"> <span class="stat-label">System Fan RPM</span> <span class="stat-value" id="fan-speed">1,200 RPM</span> </div> <div class="stat-bar-outer"> <div class="stat-bar-inner" id="fan-bar" style="width: 40%;"></div> </div> </div> <!-- Latency --> <div class="stat-item"> <div class="stat-info"> <span class="stat-label">System Latency</span> <span class="stat-value" id="sys-latency">12.4 ms</span> </div> <div class="stat-bar-outer"> <div class="stat-bar-inner" id="latency-bar" style="width: 75%; background: var(--color-secondary);"></div> </div> </div> </div> <div class="system-status-indicator" id="system-status"> CORE SYSTEM STATUS: <span>OPTIMIZED</span> </div> </div> </div> </div> </div> </section> <!-- About Me Section --> <section id="about"> <div class="container"> <div class="section-title-wrapper"> <span class="section-tagline">ข้อมูลเบื้องต้น</span> <h2 class="section-title">เกี่ยวกับฉัน</h2> </div> <div class="about-grid"> <!-- Text / Biography --> <div class="about-text"> <h3 style="font-size: 1.8rem; margin-bottom: 0.5rem;"> นับตั้งแต่วัยเด็กกับความหลงใหลในความแรงและระบบโค้ด</h3> <p> สวัสดีครับ! ผมชื่อ <strong>นัฐปธาน บุญมี</strong> เกิดเมื่อวันที่ <strong>25 กุมภาพันธ์ พ.ศ. 2548</strong> ผมสำเร็จการศึกษาระดับมัธยมศึกษาตอนปลายจาก <strong>โรงเรียนพร้าววิทยาคม (แผนการเรียน ศิลป์-ภาษาอังกฤษ)</strong> ด้วยพื้นฐานด้านภาษาช่วยเปิดโลกการเรียนรู้เทคโนโลยีให้กว้างขวางขึ้น </p> <p> ความสนใจหลักของผมอยู่ที่สองด้านหลักๆ: <strong>การเขียนโปรแกรม</strong> (Software) เพื่อแก้ไขปัญหาและเพิ่มลูกเล่นให้กับแพลตฟอร์มต่างๆ และ <strong>การปรับแต่งฮาร์ดแวร์</strong> (Hardware Optimization) เพื่อเพิ่มขีดความสามารถการประมวลผลสูงสุด ลดความหน่วงของระบบ (Latency) และการตั้งค่า Overclock ที่เน้นเสถียรภาพใช้งานได้จริง </p> <!-- Profile Info Quick Details --> <div class="personal-details"> <div class="detail-item"> <span class="detail-label">วันเกิด</span> <span class="detail-value">25 กุมภาพันธ์ 2005</span> </div> <div class="detail-item"> <span class="detail-label">ภาษาที่ถนัด</span> <span class="detail-value">Python, Lua, JavaScript, HTML</span> </div> <div class="detail-item"> <span class="detail-label">เบอร์โทรศัพท์</span> <span class="detail-value">094-149-5135</span> </div> <div class="detail-item"> <span class="detail-label">อีเมลติดต่อ</span> <span class="detail-value">flmlazio@gmail.com</span> </div> </div> </div> <!-- Education & Milestones Timeline --> <div> <h3 style="font-size: 1.5rem; margin-bottom: 2rem;">ประวัติการศึกษาและการเติบโต</h3> <div class="about-timeline"> <!-- Education --> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-date">2021 - 2024</div> <h4 class="timeline-title">โรงเรียนพร้าววิทยาคม (ศิลป์-อังกฤษ)</h4> <p class="timeline-desc">สำเร็จการศึกษาระดับชั้นมัธยมศึกษาตอนปลาย พัฒนาทักษะภาษาอังกฤษเพื่อใช้ค้นคว้าเทคโนโลยีและทำความเข้าใจ Docs ต่างชาติอย่างคล่องแคล่ว </p> </div> <!-- Skill development --> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-date">2026 - ปัจจุบัน</div> <h4 class="timeline-title">ศึกษาอยู่ที่วิทยาลัยเทคนิคเชียงใหม่</h4> <p class="timeline-desc">ศึกษาลึกเกี่ยวกับการเขียนสคริปต์ด้วย Python เพื่อจัดการระบบอัตโนมัติ, เขียน Lua Script ในแพลตฟอร์มเกม, ใช้ JavaScript ในการสร้าง API และระบบโต้ตอบในเว็บไซต์ พร้อมกับการวิเคราะห์สถาปัตยกรรมฮาร์ดแวร์เพื่อการ Overclocking</p> </div> </div> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills" style="background: rgba(255, 255, 255, 0.01); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);"> <div class="container"> <div class="section-title-wrapper"> <span class="section-tagline">ทักษะความเชี่ยวชาญ</span> <h2 class="section-title">Skills & Capabilities</h2> </div> <div class="skills-grid"> <!-- Programming Skills --> <div class="glass-card"> <h3 class="skills-column-title"><i class="fa-solid fa-code"></i> Software Development</h3> <div class="skills-list"> <!-- Python --> <div class="skill-card"> <div class="skill-icon"><i class="fa-brands fa-python"></i></div> <div class="skill-details"> <div class="skill-name-row"> <span>Python</span> <span class="skill-level">90%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" style="width: 90%;"></div> </div> </div> </div> <!-- Lua Script --> <div class="skill-card"> <div class="skill-icon"><i class="fa-solid fa-cube"></i></div> <div class="skill-details"> <div class="skill-name-row"> <span>Lua Scripting</span> <span class="skill-level">70%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" style="width: 70%;"></div> </div> </div> </div> <!-- JavaScript --> <div class="skill-card"> <div class="skill-icon"><i class="fa-brands fa-js"></i></div> <div class="skill-details"> <div class="skill-name-row"> <span>JavaScript</span> <span class="skill-level">75%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" style="width: 75%;"></div> </div> </div> </div> <!-- HTML & CSS --> <div class="skill-card"> <div class="skill-icon"><i class="fa-brands fa-html5"></i></div> <div class="skill-details"> <div class="skill-name-row"> <span>HTML5 & CSS3</span> <span class="skill-level">80%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" style="width: 80%;"></div> </div> </div> </div> </div> </div> <!-- Hardware Tuning Skills --> <div class="glass-card"> <h3 class="skills-column-title"><i class="fa-solid fa-microchip"></i> Hardware & System Tuning</h3> <div class="skills-list"> <!-- Computer Optimization --> <div class="skill-card"> <div class="skill-icon"><i class="fa-solid fa-sliders"></i></div> <div class="skill-details"> <div class="skill-name-row"> <span>System Optimization</span> <span class="skill-level">95%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" style="width: 95%;"></div> </div> </div> </div> <!-- Overclocking --> <div class="skill-card"> <div class="skill-icon"><i class="fa-solid fa-gauge-high"></i></div> <div class="skill-details"> <div class="skill-name-row"> <span>Hardware Overclocking</span> <span class="skill-level">90%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" style="width: 90%;"></div> </div> </div> </div> <!-- Hardware Testing & Monitoring --> <div class="skill-card"> <div class="skill-icon"><i class="fa-solid fa-chart-line"></i></div> <div class="skill-details"> <div class="skill-name-row"> <span>Diagnostics & Stability Testing</span> <span class="skill-level">85%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" style="width: 85%;"></div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects"> <div class="container"> <div class="section-title-wrapper"> <span class="section-tagline">ผลงานที่เคยพัฒนา</span> <h2 class="section-title">My Projects</h2> </div> <div class="projects-grid"> <!-- Project 1 --> <div class="project-card glass-card"> <div class="project-meta"> <span class="project-category">Gaming Scripting</span> <div class="project-links"> <a href="#" class="project-link" title="View Source"><i class="fa-brands fa-github"></i></a> <a href="#" class="project-link" title="Live Demo"><i class="fa-solid fa-arrow-up-right-from-square"></i></a> </div> </div> <h3 class="project-title">Lua Script & java Script Custom Framework</h3> <p class="project-desc"> พัฒนาเฟรมเวิร์กสคริปต์ขนาดเล็กเพื่อประมวลผลระบบภารกิจและจัดการอินเตอร์เฟสผู้ใช้บนตัวเกม โดยทำการรีแฟคเตอร์โค้ดลดการใช้งานหน่วยความจำ (Memory Leak) เพื่อให้ทำงานได้ลื่นไหลขึ้น 30% </p> <div class="project-tags"> <span class="project-tag">Lua</span> <span class="project-tag">Game Logic</span> <span class="project-tag">JSON</span> </div> </div> <!-- Project 2 --> <div class="project-card glass-card"> <div class="project-meta"> <span class="project-category">System Utility</span> <div class="project-links"> <a href="#" class="project-link" title="View Source"><i class="fa-brands fa-github"></i></a> <a href="#" class="project-link" title="Live Demo"><i class="fa-solid fa-arrow-up-right-from-square"></i></a> </div> </div> <h3 class="project-title">Custom Windows Tweaker Script</h3> <p class="project-desc"> สคริปต์กึ่งอัตโนมัติสำหรับการปรับปรุงระบบปฏิบัติการ Windows ช่วยปิดระบบบริการที่ไม่ได้ใช้งาน ปรับตั้งค่า Registry เครือข่ายเพื่อลด Ping และเพิ่มสมรรถนะการจัดตารางงานของ CPU </p> <div class="project-tags"> <span class="project-tag">PowerShell</span> <span class="project-tag">Batch Script</span> <span class="project-tag">Registry Tuning</span> </div> </div> <!-- Project 3 --> <div class="project-card glass-card"> <div class="project-meta"> <span class="project-category">Web Application</span> <div class="project-links"> <a href="#" class="project-link" title="View Source"><i class="fa-brands fa-github"></i></a> <a href="#" class="project-link" title="Live Demo"><i class="fa-solid fa-arrow-up-right-from-square"></i></a> </div> </div> <h3 class="project-title">Developer Interactive Portfolio</h3> <p class="project-desc"> เว็บไซต์พอร์ตโฟลิโอแบบอินเตอร์แอคทีฟ (ตัวนี้ที่คุณกำลังใช้งานอยู่) มาพร้อมแอนิเมชัน การเปลี่ยนธีมเมื่อเปิดโหมด Overclock จำลอง และฟอร์มสำหรับเก็บข้อมูลผู้ติดต่อแบบ PHP/MySQL </p> <div class="project-tags"> <span class="project-tag">HTML5</span> <span class="project-tag">Vanilla CSS3</span> <span class="project-tag">JavaScript</span> <span class="project-tag">PHP & MySQL</span> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" style="background: rgba(255, 255, 255, 0.01); border-top: 1px solid var(--border-color);"> <div class="container"> <div class="section-title-wrapper"> <span class="section-tagline">พูดคุยรายละเอียด</span> <h2 class="section-title">Contact Me</h2> </div> <div class="contact-grid"> <!-- Contact Details --> <div class="contact-info"> <div> <h3 class="contact-info-title">ติดต่อพูดคุยงาน</h3> <p class="contact-info-desc">หากคุณสนใจระบบสคริปต์ การปรับแต่งความแรงคอมพิวเตอร์ให้ตอบโจทย์การทำงานหรือการเล่นเกม หรือข้อเสนองานอื่นๆ สามารถติดต่อส่งข้อความมาหาผมได้ทันทีครับ</p> </div> <div class="contact-methods"> <!-- Email --> <div class="contact-method-card" id="email-card" style="cursor: pointer; position: relative;" title="คลิกเพื่อคัดลอกอีเมล"> <div class="contact-method-icon"><i class="fa-solid fa-envelope"></i></div> <div style="position: relative; flex-grow: 1;"> <span class="contact-method-label">อีเมล</span> <span class="copy-tooltip" id="copy-tooltip">คัดลอกแล้ว!</span><br> <span class="contact-method-value" id="email-text">flmlazio@gmail.com</span> </div> </div> <!-- Phone --> <div class="contact-method-card" id="phone-card" style="cursor: pointer; position: relative;" title="คลิกเพื่อคัดลอกเบอร์โทรศัพท์"> <div class="contact-method-icon"><i class="fa-solid fa-phone"></i></div> <div style="position: relative; flex-grow: 1;"> <span class="contact-method-label">เบอร์โทรศัพท์</span> <span class="copy-tooltip" id="phone-copy-tooltip">คัดลอกแล้ว!</span><br> <span class="contact-method-value" id="phone-text">094-149-5135</span> </div> </div> <!-- Facebook --> <a href="https://www.facebook.com/natpathan.bunmee" class="contact-method-card-link" target="_blank"> <div class="contact-method-card"> <div class="contact-method-icon"><i class="fa-brands fa-facebook"></i></div> <div> <span class="contact-method-label">Facebook</span><br> <span class="contact-method-value">Natpathan Bunmee</span> </div> </div> </a> </div> </div> <!-- Contact Form --> <div class="contact-form-wrapper glass-card"> <form action="submit_contact.php" method="POST" class="contact-form"> <div class="form-row-2"> <div class="form-group"> <label for="name" class="form-label">ชื่อของคุณ</label> <input type="text" id="name" name="name" class="form-input" placeholder="เช่น สมชาย ใจดี" required> </div> <div class="form-group"> <label for="email" class="form-label">อีเมลติดต่อกลับ</label> <input type="email" id="email" name="email" class="form-input" placeholder="example@email.com" required> </div> </div> <div class="form-group"> <label for="phone" class="form-label">เบอร์โทรศัพท์ (ถ้ามี)</label> <input type="tel" id="phone" name="phone" class="form-input" placeholder="เช่น 09xxxxxxxx"> </div> <div class="form-group"> <label for="message" class="form-label">ข้อความรายละเอียด</label> <textarea id="message" name="message" class="form-input" placeholder="กรอกข้อความที่ท่านต้องการติดต่อ..." required></textarea> </div> <button type="submit" class="btn btn-primary" style="width: 100%;"> <i class="fa-solid fa-paper-plane"></i> ส่งข้อความติดต่อกลับ </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <a href="#" class="footer-logo">2x<span>.Bwhip</span></a> <p class="footer-text">© 2026 Natpathan Bunmee. All Rights Reserved. Designed for High Performance.</p> </div> </footer> <!-- Shadow Monarch Canvas Background --> <canvas id="shadow-canvas"></canvas> <!-- Floating Background Music Player --> <div class="music-player" id="music-player"> <div class="music-info"> <!-- High-tech Sound Wave Visualizer --> <div class="music-visualizer" id="music-visualizer"> <span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> <div class="music-text"> <span class="music-title">Resetment (partynextdoor remix)</span> <span class="music-artist">YUNGTARR</span> </div> </div> <div class="music-controls"> <!-- Play / Pause Button --> <button class="music-btn" id="music-play" title="เล่น/หยุดเพลง"> <i class="fa-solid fa-play" id="play-icon"></i> </button> <!-- Volume Control --> <div class="volume-container"> <button class="music-btn" id="volume-btn" title="ปิด/เปิดเสียง"> <i class="fa-solid fa-volume-high" id="volume-icon"></i> </button> <input type="range" id="volume-slider" min="0" max="1" step="0.05" value="0.15" class="volume-slider" title="ปรับระดับเสียง"> </div> </div> <!-- Local Audio Element --> <audio id="local-audio" autoplay loop preload="auto" src="resetment-partynextdoor-remix.wav"></audio> </div> <!-- Interactive JavaScript Engine --> <script> // Overclock Interactive Engine const trigger = document.getElementById('oc-trigger'); const indicator = document.getElementById('oc-indicator'); const statusText = document.getElementById('oc-status-text'); // Dashboard DOM elements const cpuSpeed = document.getElementById('cpu-speed'); const cpuTemp = document.getElementById('cpu-temp'); const fanSpeed = document.getElementById('fan-speed'); const sysLatency = document.getElementById('sys-latency'); // Progress Bars const cpuBar = document.getElementById('cpu-bar'); const tempBar = document.getElementById('temp-bar'); const fanBar = document.getElementById('fan-bar'); const latencyBar = document.getElementById('latency-bar'); const systemStatus = document.getElementById('system-status'); const badgeText = document.getElementById('badge-text'); let isOverclocked = false; trigger.addEventListener('click', () => { isOverclocked = !isOverclocked; if (isOverclocked) { // Activate Overclock mode document.body.classList.add('overclocked'); updateThemeColors(); // Show warming-up sequence statusText.innerText = "AWAKENING..."; indicator.style.background = "#d946ef"; indicator.style.boxShadow = "0 0 12px #d946ef"; setTimeout(() => { if (!isOverclocked) return; statusText.innerText = "Awakened"; badgeText.innerText = "System: MONARCH DOMAIN ACTIVE"; document.documentElement.style.setProperty('--badge-icon', '"\\f0e7"'); // bolt icon // Boost stats cpuSpeed.innerText = "5.80 GHz (Domain)"; cpuTemp.innerText = "75°C (Extreme)"; fanSpeed.innerText = "3,600 RPM (Overdrive)"; sysLatency.innerText = "0.8 ms"; // Boost bars cpuBar.style.width = "98%"; tempBar.style.width = "85%"; fanBar.style.width = "95%"; latencyBar.style.width = "8%"; // lower is better systemStatus.innerHTML = `MONARCH DOMAIN STATUS: <span style="color: #d946ef;">ERASE ACTIVE (99.9% OUTPUT)</span>`; }, 800); } else { // Revert to Normal Mode document.body.classList.remove('overclocked'); updateThemeColors(); statusText.innerText = "Normal Mode"; indicator.style.background = "var(--color-accent)"; indicator.style.boxShadow = "0 0 8px var(--color-accent)"; badgeText.innerText = "System Status: Stable"; // Reset stats cpuSpeed.innerText = "3.40 GHz"; cpuTemp.innerText = "42°C"; fanSpeed.innerText = "1,200 RPM"; sysLatency.innerText = "12.4 ms"; // Reset bars cpuBar.style.width = "45%"; tempBar.style.width = "38%"; fanBar.style.width = "40%"; latencyBar.style.width = "75%"; systemStatus.innerHTML = `CORE SYSTEM STATUS: <span style="color: var(--color-accent);">OPTIMIZED</span>`; } }); // Mobile Navigation Toggle Logic const navToggle = document.getElementById('nav-toggle'); const navMenu = document.querySelector('.nav-menu'); const navLinks = document.querySelectorAll('.nav-link'); navToggle.addEventListener('click', () => { navMenu.classList.toggle('active'); const icon = navToggle.querySelector('i'); if (navMenu.classList.contains('active')) { icon.classList.remove('fa-bars'); icon.classList.add('fa-xmark'); } else { icon.classList.remove('fa-xmark'); icon.classList.add('fa-bars'); } }); navLinks.forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); const icon = navToggle.querySelector('i'); icon.classList.remove('fa-xmark'); icon.classList.add('fa-bars'); }); }); // SHADOW PARTICLE CANVAS SYSTEM const canvas = document.getElementById('shadow-canvas'); const ctx = canvas.getContext('2d'); let particles = []; const maxParticles = 90; // budget to ensure high framerate function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); // Global cached theme colors for canvas optimization (prevents layout thrashing in loop) let colorAccentRgb = "139, 92, 246"; let colorSecondaryRgb = "0, 210, 255"; function parseHexToRgbStr(hex) { hex = hex.trim(); if (hex.startsWith('#')) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `${r}, ${g}, ${b}`; } const match = hex.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/); if (match) { return `${match[1]}, ${match[2]}, ${match[3]}`; } return hex; } function updateThemeColors() { const bodyStyle = getComputedStyle(document.body); const accent = bodyStyle.getPropertyValue('--color-accent') || '#8b5cf6'; const secondary = bodyStyle.getPropertyValue('--color-secondary') || '#00d2ff'; colorAccentRgb = parseHexToRgbStr(accent); colorSecondaryRgb = parseHexToRgbStr(secondary); } updateThemeColors(); class ShadowParticle { constructor(x, y) { this.x = x; this.y = y; // Set size and life this.size = Math.random() * 15 + 8; // size range this.alpha = Math.random() * 0.35 + 0.25; // max initial opacity this.decay = Math.random() * 0.005 + 0.003; // decay speed // Particle physics const speedMult = isOverclocked ? 1.8 : 1.0; this.vy = -(Math.random() * 1.0 + 0.5) * speedMult; this.vx = (Math.random() - 0.5) * 0.8 * speedMult; this.angle = Math.random() * Math.PI * 2; this.wobble = Math.random() * 0.3 + 0.15; // Color assignments (purple vs cyan, or magenta vs crimson) const isPrimary = Math.random() < 0.75; this.colorRgb = isPrimary ? colorAccentRgb : colorSecondaryRgb; } update() { this.y += this.vy; this.angle += 0.025; this.x += this.vx + Math.sin(this.angle) * this.wobble; // Expand size like rising smoke this.size += 0.12; this.alpha -= this.decay; } draw() { const gradient = ctx.createRadialGradient( this.x, this.y, this.size * 0.1, this.x, this.y, this.size ); gradient.addColorStop(0, `rgba(${this.colorRgb}, ${this.alpha})`); gradient.addColorStop(0.3, `rgba(${this.colorRgb}, ${this.alpha * 0.45})`); gradient.addColorStop(1, `rgba(${this.colorRgb}, 0)`); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } // Spawn helper function spawnParticles(x, y, count) { if (particles.length >= maxParticles) { particles.splice(0, count); // remove older ones } for (let i = 0; i < count; i++) { const offX = x + (Math.random() - 0.5) * 14; const offY = y + (Math.random() - 0.5) * 14; particles.push(new ShadowParticle(offX, offY)); } } // Cache DOM queries for the rendering loop to avoid query selectors inside 60fps loops const auraTargets = document.querySelectorAll('.hero-title, .system-dashboard'); // Loop animation function loop() { // Draw particles ctx.clearRect(0, 0, canvas.width, canvas.height); // Ambient background particles spawning at bottom if (Math.random() < 0.08) { spawnParticles(Math.random() * canvas.width, canvas.height + 25, 1); } // Hero aura boiling effect (spawn around header or text) if (Math.random() < 0.05 && auraTargets.length > 0) { const randomEl = auraTargets[Math.floor(Math.random() * auraTargets.length)]; const rect = randomEl.getBoundingClientRect(); // Spawn inside the bounds const x = rect.left + Math.random() * rect.width; const y = rect.top + Math.random() * rect.height; spawnParticles(x, y, 1); } // Update and draw particles with composite operation set once per frame for optimal GPU execution ctx.globalCompositeOperation = 'screen'; for (let i = particles.length - 1; i >= 0; i--) { particles[i].update(); if (particles[i].alpha <= 0) { particles.splice(i, 1); } else { particles[i].draw(); } } ctx.globalCompositeOperation = 'source-over'; // restore back to default requestAnimationFrame(loop); } // Initialize loops requestAnimationFrame(loop); // LOCAL BACKGROUND MUSIC PLAYER CONTROLLER const localAudio = document.getElementById('local-audio'); const playBtn = document.getElementById('music-play'); const playIcon = document.getElementById('play-icon'); const visualizer = document.getElementById('music-visualizer'); const volumeBtn = document.getElementById('volume-btn'); const volumeIcon = document.getElementById('volume-icon'); const volumeSlider = document.getElementById('volume-slider'); let isPlaying = false; let lastVolume = 0.15; let volumeFadeInterval = null; let isDraggingSlider = false; let isMuted = false; // Intended mute state // Set initial volume localAudio.volume = 0.15; isMuted = localAudio.muted; // Update CSS custom variable for slider trail color fill function updateSliderProgress(val) { volumeSlider.style.setProperty('--volume-percent', `${val * 100}%`); } // Sync volume UI slider and icon with volume and muted states function syncVolumeUI(vol, isMutedVal) { updateSliderProgress(isMutedVal ? 0 : vol); if (!isDraggingSlider) { volumeSlider.value = isMutedVal ? 0 : vol; } volumeIcon.className = 'fa-solid'; if (isMutedVal || vol === 0) { volumeIcon.classList.add('fa-volume-xmark'); } else if (vol < 0.4) { volumeIcon.classList.add('fa-volume-low'); } else { volumeIcon.classList.add('fa-volume-high'); } } // Initially sync to reflect HTML's muted autoplay attribute syncVolumeUI(localAudio.volume, localAudio.muted); // Smooth volume fading (lerp) over duration (ms) function fadeVolumeTo(targetVolume, duration = 350, onComplete = null) { if (volumeFadeInterval) clearInterval(volumeFadeInterval); // If fading to audible sound, ensure we are unmuted first if (localAudio.muted && targetVolume > 0) { localAudio.muted = false; } const startVolume = localAudio.volume; if (startVolume === targetVolume) { syncVolumeUI(targetVolume, localAudio.muted); if (onComplete) onComplete(); return; } const stepCount = duration / 16; // 16ms intervals (~60fps) const step = (targetVolume - startVolume) / stepCount; let currentVolume = startVolume; volumeFadeInterval = setInterval(() => { currentVolume += step; // Stop condition check if ((step > 0 && currentVolume >= targetVolume) || (step < 0 && currentVolume <= targetVolume)) { currentVolume = targetVolume; clearInterval(volumeFadeInterval); volumeFadeInterval = null; if (onComplete) onComplete(); } localAudio.volume = currentVolume; if (currentVolume === 0) { localAudio.muted = true; } syncVolumeUI(currentVolume, localAudio.muted); }, 16); } function playMusic() { isPlaying = true; visualizer.classList.add('playing'); playIcon.className = 'fa-solid fa-pause'; isMuted = false; if (localAudio.muted) { localAudio.muted = false; } localAudio.play().then(() => { const targetVol = lastVolume > 0 ? lastVolume : 0.15; fadeVolumeTo(targetVol, 400); }).catch(err => { console.log("Play failed: ", err); isPlaying = false; visualizer.classList.remove('playing'); playIcon.className = 'fa-solid fa-play'; }); } function pauseMusic() { isPlaying = false; visualizer.classList.remove('playing'); playIcon.className = 'fa-solid fa-play'; // Fade out first, then pause playback fadeVolumeTo(0, 400, () => { if (!isPlaying) { localAudio.pause(); } }); } // Helper to remove gesture listeners once playback starts unmuted function removeGestureListeners() { userGestures.forEach(gesture => { document.removeEventListener(gesture, handleGesture); }); } // Bypassing browser autoplay policies via early user gesture detection const userGestures = ['click', 'mousedown', 'keydown', 'touchstart', 'pointerdown']; function handleGesture() { console.log("User gesture detected, unmuting and fading in audio..."); if (localAudio.muted || localAudio.volume === 0) { isMuted = false; playMusic(); } removeGestureListeners(); } // Try unmuted autoplay first on load localAudio.muted = false; localAudio.volume = 0.15; localAudio.play().then(() => { // Unmuted autoplay succeeded! isPlaying = true; visualizer.classList.add('playing'); playIcon.className = 'fa-solid fa-pause'; syncVolumeUI(localAudio.volume, false); }).catch(err => { console.log("Unmuted autoplay blocked, attempting muted autoplay fallback...", err); // Fallback to muted autoplay localAudio.muted = true; localAudio.play().then(() => { // Muted autoplay succeeded! isPlaying = true; visualizer.classList.add('playing'); playIcon.className = 'fa-solid fa-pause'; syncVolumeUI(localAudio.volume, true); // Sync UI showing muted state (0 slider progress) // Listen for first interaction to unmute and fade in userGestures.forEach(gesture => { document.addEventListener(gesture, handleGesture, { once: true }); }); }).catch(err2 => { console.log("Muted autoplay also blocked. Registering gesture listeners for play.", err2); // Both blocked. Register gesture listeners to play unmuted on click. userGestures.forEach(gesture => { document.addEventListener(gesture, handleGesture, { once: true }); }); }); }); // Play/Pause button event playBtn.addEventListener('click', (e) => { e.stopPropagation(); // Prevent body click/mousedown triggers if (isPlaying) { pauseMusic(); } else { playMusic(); } }); // Volume drag tracking volumeSlider.addEventListener('mousedown', () => { isDraggingSlider = true; }); volumeSlider.addEventListener('mouseup', () => { isDraggingSlider = false; }); volumeSlider.addEventListener('touchstart', () => { isDraggingSlider = true; }); volumeSlider.addEventListener('touchend', () => { isDraggingSlider = false; }); // Volume slider input event (manual drag) volumeSlider.addEventListener('input', (e) => { if (volumeFadeInterval) { clearInterval(volumeFadeInterval); volumeFadeInterval = null; } const vol = parseFloat(e.target.value); if (vol > 0) { localAudio.muted = false; isMuted = false; } else { localAudio.muted = true; isMuted = true; } localAudio.volume = vol; lastVolume = vol > 0 ? vol : lastVolume; syncVolumeUI(vol, localAudio.muted); }); // Volume mute/unmute button event with fading transitions volumeBtn.addEventListener('click', (e) => { e.stopPropagation(); // Toggle intended mute state isMuted = !isMuted; if (isMuted) { // Mute // Save lastVolume only if we are currently not muted and not already fading/muting if (!volumeFadeInterval && localAudio.volume > 0 && !localAudio.muted) { lastVolume = localAudio.volume; } fadeVolumeTo(0, 300, () => { localAudio.muted = true; syncVolumeUI(0, true); }); } else { // Unmute localAudio.muted = false; const target = lastVolume > 0 ? lastVolume : 0.15; fadeVolumeTo(target, 300); } }); // Copy to clipboard function for Email card const emailCard = document.getElementById('email-card'); const emailText = document.getElementById('email-text'); const copyTooltip = document.getElementById('copy-tooltip'); emailCard.addEventListener('click', () => { navigator.clipboard.writeText(emailText.innerText.trim()).then(() => { copyTooltip.classList.add('show'); setTimeout(() => { copyTooltip.classList.remove('show'); }, 1800); }).catch(err => { console.error('Failed to copy: ', err); }); }); // Copy to clipboard function for Phone card const phoneCard = document.getElementById('phone-card'); const phoneText = document.getElementById('phone-text'); const phoneCopyTooltip = document.getElementById('phone-copy-tooltip'); phoneCard.addEventListener('click', () => { navigator.clipboard.writeText(phoneText.innerText.trim()).then(() => { phoneCopyTooltip.classList.add('show'); setTimeout(() => { phoneCopyTooltip.classList.remove('show'); }, 1800); }).catch(err => { console.error('Failed to copy phone: ', err); }); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.34 |
proxy
|
phpinfo
|
Settings