File manager - Edit - /home/webapp69.cm.in.th/u69319090013/portfolio/013 Thitinun portfolio/script.js
Back
document.addEventListener('DOMContentLoaded', () => { // Intro Video Splash Screen Logic const introOverlay = document.getElementById('intro-overlay'); const introVideo = document.getElementById('intro-video'); const skipBtn = document.getElementById('skip-intro-btn'); const body = document.body; if (sessionStorage.getItem('introPlayed') === 'true') { if (introOverlay) { introOverlay.style.display = 'none'; } } else { if (body) { body.classList.add('intro-active'); } const closeIntro = () => { if (introOverlay) { introOverlay.classList.add('fade-out'); setTimeout(() => { introOverlay.style.display = 'none'; if (introVideo) { introVideo.pause(); } }, 1000); // Wait for transition duration } if (body) { body.classList.remove('intro-active'); } sessionStorage.setItem('introPlayed', 'true'); }; if (skipBtn) { skipBtn.addEventListener('click', closeIntro); } if (introVideo) { introVideo.addEventListener('ended', closeIntro); // Safety timeout: auto-skip if video fails to play or loads too long (8 seconds) setTimeout(() => { if (introOverlay && !introOverlay.classList.contains('fade-out')) { closeIntro(); } }, 8000); } } // Theme Toggle Logic const themeToggle = document.getElementById('theme-toggle'); const themeIcon = themeToggle.querySelector('i'); const htmlElement = document.documentElement; // Check saved theme or system preference const savedTheme = localStorage.getItem('theme'); if (savedTheme) { htmlElement.setAttribute('data-theme', savedTheme); updateThemeIcon(savedTheme); } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) { htmlElement.setAttribute('data-theme', 'light'); updateThemeIcon('light'); } themeToggle.addEventListener('click', () => { let currentTheme = htmlElement.getAttribute('data-theme'); let newTheme = currentTheme === 'light' ? 'dark' : 'light'; htmlElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); updateThemeIcon(newTheme); }); function updateThemeIcon(theme) { if (theme === 'light') { themeIcon.classList.remove('fa-moon'); themeIcon.classList.add('fa-sun'); } else { themeIcon.classList.remove('fa-sun'); themeIcon.classList.add('fa-moon'); } } // Language Toggle Logic const translations = { th: { nav_home: "หน้าแรก", nav_about: "ประวัติส่วนตัว", nav_edu: "การศึกษา", nav_skills: "ทักษะ", nav_projects: "ผลงาน", nav_contact: "ติดต่อ", hero_name: "สวัสดีผมชื่อธิตินันท์ ชุ่มปิว", hero_btn_projects: "ดูผลงานของฉัน", hero_btn_contact: "ติดต่อฉัน", about_title: "ประวัติส่วนตัว", about_info_title: "ข้อมูลส่วนตัว", about_info_desc: "สวัสดีครับผมนายธิตินันท์ ชุ่มปิวอายุ 19 ปี เรียนจบมาจากวิทยาลัยเทคนิคแพร่สาขาเทคนิคคอมพิวเตอร์ ปัจจุบันย้ายมาศึกษาต่อที่วิทยาลัยเทคนิคเชียงใหม่", about_skills_title: "ความสามารถ", about_skills_desc: "สามารถซ่อมคอมเครื่องปริ้น ลงWindows", about_goals_title: "เป้าหมายในอนาคต", about_goals_desc: "เป้าหมายในอนาคตของผมก็คือผมอยากเปิดร้านซ่อมคอมเป็นของตัวเองครับ แล้วถ้าพอมีงบขึ้นก็จะเปิดร้านเกมเป็นของตัวเองอีกทีนึงครับ", edu_title: "ประวัติการศึกษา", edu_present: "ปัจจุบัน", edu_school1: "วิทยาลัยเทคนิคเชียงใหม่", edu_major1: "กำลังศึกษาต่อ", edu_desc1: "ศึกษาต่อเพื่อพัฒนาทักษะและความรู้ในสายอาชีพ", edu_past: "อดีต", edu_school2: "วิทยาลัยเทคนิคแพร่", edu_major2: "สาขาวิชา: เทคนิคคอมพิวเตอร์", edu_desc2: "เรียนจบสาขาเทคนิคคอมพิวเตอร์", skills_title: "ทักษะ", skill_coding: "ทักษะการเขียนโค้ด", skill_cooking: "ทักษะทำอาหาร", skill_design: "ทักษะการออกแบบ", skill_repair: "ทักษะการซ่อมประกอบ", projects_title: "ผลงาน", proj1_title: "ซ่อมโน๊ตบุ๊คลูกค้า", proj1_desc: "บริการซ่อมแซมและแก้ไขปัญหาโน๊ตบุ๊คให้ลูกค้า", proj2_title: "ซ่อมเครื่องปริ้น", proj2_desc: "บริการซ่อมแซมและบำรุงรักษาเครื่องปริ้นเตอร์", proj3_title: "ปลูกผักปลอดสารพิษ", proj3_desc: "การปลูกผักปลอดสารพิษไว้สำหรับรับประทานและจำหน่าย", contact_title: "ช่องทางติดต่อ", contact_phone: "เบอร์โทร" }, en: { nav_home: "Home", nav_about: "About", nav_edu: "Education", nav_skills: "Skills", nav_projects: "Projects", nav_contact: "Contact", hero_name: "Hello, I'm Thitinun Chumpio", hero_btn_projects: "View My Work", hero_btn_contact: "Contact Me", about_title: "About Me", about_info_title: "Personal Info", about_info_desc: "Hello, I am Thitinun Chumpio, 19 years old. I graduated from Phrae Technical College majoring in Computer Technology. Currently, I am continuing my studies at Chiang Mai Technical College.", about_skills_title: "Abilities", about_skills_desc: "Can repair computers, printers, and install Windows.", about_goals_title: "Future Goals", about_goals_desc: "My future goal is to open my own computer repair shop. If I have enough budget later on, I would also like to open my own gaming cafe.", edu_title: "Education History", edu_present: "Present", edu_school1: "Chiang Mai Technical College", edu_major1: "Currently Studying", edu_desc1: "Continuing education to develop vocational skills and knowledge.", edu_past: "Past", edu_school2: "Phrae Technical College", edu_major2: "Major: Computer Technology", edu_desc2: "Graduated with a degree in Computer Technology.", skills_title: "Skills", skill_coding: "Coding Skill", skill_cooking: "Cooking Skill", skill_design: "Design Skill", skill_repair: "Repairing & Assembly Skill", projects_title: "Projects", proj1_title: "Customer Notebook Repair", proj1_desc: "Repairing and troubleshooting notebooks for customers.", proj2_title: "Printer Repair", proj2_desc: "Printer repair and maintenance services.", proj3_title: "Organic Vegetables", proj3_desc: "Growing organic vegetables for consumption and sale.", contact_title: "Contact Channels", contact_phone: "Phone" } }; const langToggle = document.getElementById('lang-toggle'); const elementsToTranslate = document.querySelectorAll('[data-i18n]'); // Check saved language let currentLang = localStorage.getItem('lang') || 'th'; updateLanguage(currentLang); langToggle.addEventListener('click', () => { currentLang = currentLang === 'th' ? 'en' : 'th'; localStorage.setItem('lang', currentLang); updateLanguage(currentLang); }); function updateLanguage(lang) { // Update toggle visual state if (lang === 'en') { langToggle.classList.add('is-en'); } else { langToggle.classList.remove('is-en'); } htmlElement.setAttribute('lang', lang); // Update all translation strings elementsToTranslate.forEach(el => { const key = el.getAttribute('data-i18n'); if (translations[lang] && translations[lang][key]) { el.textContent = translations[lang][key]; } }); } // Navbar Scroll Effect const navbar = document.getElementById('navbar'); window.addEventListener('scroll', () => { if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Mobile Menu Toggle const menuToggle = document.querySelector('.menu-toggle'); const navLinks = document.querySelector('.nav-links'); menuToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); menuToggle.classList.toggle('active'); }); // Close mobile menu when clicking a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); menuToggle.classList.remove('active'); }); }); // Active Link Highlighting on Scroll const sections = document.querySelectorAll('section, header'); const navItems = document.querySelectorAll('.nav-links a'); window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (pageYOffset >= (sectionTop - sectionHeight / 3)) { current = section.getAttribute('id'); } }); navItems.forEach(item => { item.classList.remove('active'); if (item.getAttribute('href').substring(1) === current) { item.classList.add('active'); } }); }); // Intersection Observer for Scroll Animations const revealElements = document.querySelectorAll('.section-reveal'); const revealOptions = { threshold: 0.15, rootMargin: "0px 0px -50px 0px" }; const revealObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (!entry.isIntersecting) { return; } else { entry.target.classList.add('active'); observer.unobserve(entry.target); } }); }, revealOptions); revealElements.forEach(element => { revealObserver.observe(element); }); // Smooth Scrolling for anchor links (fallback/enhancement) document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if(targetElement) { window.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' }); } }); }); // Plexus Canvas Moving Lines Animation const canvas = document.getElementById('plexus-canvas'); if (canvas) { const ctx = canvas.getContext('2d'); let particles = []; const particleCount = 60; const connectionDistance = 120; function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.vx = (Math.random() - 0.5) * 0.6; this.vy = (Math.random() - 0.5) * 0.6; this.radius = Math.random() * 2 + 1; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = 'rgba(123, 44, 191, 0.8)'; ctx.shadowBlur = 8; ctx.shadowColor = 'rgba(123, 44, 191, 1)'; ctx.fill(); } } function initParticles() { particles = []; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } function drawLines() { ctx.shadowBlur = 0; // Disable shadow for line drawing performance for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const dx = particles[i].x - particles[j].x; const dy = particles[i].y - particles[j].y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < connectionDistance) { const alpha = (1 - dist / connectionDistance) * 0.25; ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.strokeStyle = `rgba(186, 104, 200, ${alpha})`; ctx.lineWidth = 1; ctx.stroke(); } } } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach(p => { p.update(); p.draw(); }); drawLines(); requestAnimationFrame(animate); } initParticles(); animate(); } });
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.32 |
proxy
|
phpinfo
|
Settings