File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090028/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="Portfolio ของ ชินโชติ ณ วิไลทอง นักศึกษาปวส. สาขาเทคโนโลยีคอมพิวเตอร์ วิทยาลัยเทคนิคเชียงใหม่ ผู้มีประสบการณ์ด้านระบบ LED และเทคโนโลยีคอมพิวเตอร์"> <title>Chinnachot Na wilaithong \| Portfolio</title> <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;600;700;800&family=Prompt:wght@300;400;500;700&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- ==================== HEADER / NAVBAR ==================== --> <header id="main-header"> <div class="nav-container"> <a href="#hero" class="logo">CN<span class="logo-dot">.</span><span class="logo-accent">PORTFOLIO</span></a> <button class="hamburger" id="hamburger" aria-label="Toggle menu"> <span></span><span></span><span></span> </button> <nav id="main-nav"> <a href="#hero" class="nav-link"><i class="fas fa-house"></i> <span>หน้าแรก</span></a> <a href="#skills" class="nav-link"><i class="fas fa-chart-pie"></i> <span>ทักษะ</span></a> <a href="#education" class="nav-link"><i class="fas fa-graduation-cap"></i> <span>การศึกษา</span></a> <a href="#certificates" class="nav-link"><i class="fas fa-award"></i> <span>เกียรติบัตร</span></a> <a href="#experience" class="nav-link"><i class="fas fa-briefcase"></i> <span>ประสบการณ์</span></a> <a href="#contact" class="nav-link nav-cta"><i class="fas fa-paper-plane"></i> ติดต่อ</a> </nav> </div> </header> <!-- ==================== HERO SECTION ==================== --> <section id="hero" class="hero-section"> <div class="hero-particles" id="hero-particles"></div> <div class="hero-inner"> <div class="hero-content"> <div class="hero-badge"><span class="badge-dot"></span> กำลังศึกษา ปวส. สาขาเทคโนโลยีคอมพิวเตอร์</div> <h2 class="hero-subtitle">สวัสดีครับ ผมคือ</h2> <h1 class="hero-title"> <span class="name-th">ชินโชติ</span> <span class="name-en">Na Wilaithong</span> </h1> <p class="hero-tagline">ขับเคลื่อนเทคโนโลยี · สร้างระบบด้วยความแม่นยำ</p> <p class="hero-desc"> นักศึกษา <strong>ปวส. สาขาเทคโนโลยีคอมพิวเตอร์</strong> วิทยาลัยเทคนิคเชียงใหม่ ผู้หลงใหลในโลกของระบบคอมพิวเตอร์ การเขียนโปรแกรม และเทคโนโลยีดิจิทัล มุ่งมั่นพัฒนาตนเองอย่างต่อเนื่อง และเชื่อว่า <em>"การลงมือทำจริง คือบทเรียนที่ดีที่สุด"</em> </p> <div class="hero-info-grid"> <div class="info-item"> <i class="fas fa-envelope"></i> <div> <span class="info-label">อีเมล</span> <span class="info-value">ctnng.29@gmail.com</span> </div> </div> <div class="info-item"> <i class="fas fa-phone"></i> <div> <span class="info-label">โทรศัพท์</span> <span class="info-value">095-502-1100</span> </div> </div> <div class="info-item"> <i class="fab fa-instagram"></i> <div> <span class="info-label">Instagram</span> <span class="info-value">@ctn_ng</span> </div> </div> <div class="info-item"> <i class="fas fa-cake-candles"></i> <div> <span class="info-label">วันเกิด</span> <span class="info-value">29 กุมภาพันธ์ 2551</span> </div> </div> </div> <div class="hero-hobbies"> <span class="hobby-tag"><i class="fas fa-lightbulb"></i> เรียนรู้สิ่งใหม่ๆ</span> <span class="hobby-tag"><i class="fas fa-person-running"></i> เล่นกีฬา</span> <span class="hobby-tag"><i class="fas fa-headphones-simple"></i> ฟังพอดแคสต์</span> </div> <div class="hero-actions"> <a href="#experience" class="btn btn-primary" id="btn-view-work"> <i class="fas fa-eye"></i> ดูผลงานของฉัน </a> <a href="#contact" class="btn btn-outline" id="btn-contact"> <i class="fas fa-paper-plane"></i> ติดต่อข้าพเจ้า </a> </div> </div> <div class="hero-image-wrap"> <div class="profile-ring"> <div class="profile-img-container"> <img src="รูป/1.jpg" alt="ชินโชติ ณ วิไลทอง - Profile Photo" class="profile-img"> </div> <div class="ring-orbit ring-1"></div> <div class="ring-orbit ring-2"></div> <div class="float-badge badge-top"><i class="fas fa-microchip"></i></div> <div class="float-badge badge-right"><i class="fas fa-code"></i></div> <div class="float-badge badge-bottom"><i class="fas fa-bolt"></i></div> </div> </div> </div> <div class="scroll-indicator"> <span>เลื่อนลงเพื่อดู</span> <div class="scroll-arrow"><i class="fas fa-chevron-down"></i></div> </div> </section> <!-- ==================== SKILLS SECTION ==================== --> <section id="skills" class="skills-section section-pad"> <div class="container"> <div class="section-header"> <span class="section-tag">EXPERTISE</span> <h2 class="section-title">ทักษะ<span class="hl"> ความสามารถ</span></h2> <p class="section-desc">ทักษะที่ผ่านการฝึกฝนและพัฒนาอย่างต่อเนื่องทั้งจากห้องเรียนและประสบการณ์จริง</p> </div> <div class="skills-grid"> <div class="skill-card" data-percent="90"> <div class="radial-wrap"> <svg viewBox="0 0 100 100" class="radial-svg"> <circle class="radial-bg" cx="50" cy="50" r="42"/> <circle class="radial-progress" cx="50" cy="50" r="42"/> </svg> <div class="radial-center"><span class="radial-pct">0%</span></div> </div> <div class="skill-icon-wrap"><i class="fas fa-clipboard-list"></i></div> <h3>การวางแผน</h3> <p>Strategic Planning</p> </div> <div class="skill-card" data-percent="90"> <div class="radial-wrap"> <svg viewBox="0 0 100 100" class="radial-svg"> <circle class="radial-bg" cx="50" cy="50" r="42"/> <circle class="radial-progress" cx="50" cy="50" r="42"/> </svg> <div class="radial-center"><span class="radial-pct">0%</span></div> </div> <div class="skill-icon-wrap"><i class="fas fa-shield-halved"></i></div> <h3>ความรับผิดชอบ</h3> <p>Accountability</p> </div> <div class="skill-card" data-percent="85"> <div class="radial-wrap"> <svg viewBox="0 0 100 100" class="radial-svg"> <circle class="radial-bg" cx="50" cy="50" r="42"/> <circle class="radial-progress" cx="50" cy="50" r="42"/> </svg> <div class="radial-center"><span class="radial-pct">0%</span></div> </div> <div class="skill-icon-wrap"><i class="fas fa-plug-circle-bolt"></i></div> <h3>งานอิเล็กทรอนิกส์</h3> <p>Electronics</p> </div> <div class="skill-card" data-percent="85"> <div class="radial-wrap"> <svg viewBox="0 0 100 100" class="radial-svg"> <circle class="radial-bg" cx="50" cy="50" r="42"/> <circle class="radial-progress" cx="50" cy="50" r="42"/> </svg> <div class="radial-center"><span class="radial-pct">0%</span></div> </div> <div class="skill-icon-wrap"><i class="fas fa-users"></i></div> <h3>ทำงานเป็นทีม</h3> <p>Teamwork</p> </div> <div class="skill-card" data-percent="80"> <div class="radial-wrap"> <svg viewBox="0 0 100 100" class="radial-svg"> <circle class="radial-bg" cx="50" cy="50" r="42"/> <circle class="radial-progress" cx="50" cy="50" r="42"/> </svg> <div class="radial-center"><span class="radial-pct">0%</span></div> </div> <div class="skill-icon-wrap"><i class="fas fa-magnifying-glass-chart"></i></div> <h3>การแก้ปัญหา</h3> <p>Problem Solving</p> </div> <div class="skill-card" data-percent="80"> <div class="radial-wrap"> <svg viewBox="0 0 100 100" class="radial-svg"> <circle class="radial-bg" cx="50" cy="50" r="42"/> <circle class="radial-progress" cx="50" cy="50" r="42"/> </svg> <div class="radial-center"><span class="radial-pct">0%</span></div> </div> <div class="skill-icon-wrap"><i class="fas fa-star"></i></div> <h3>ความเป็นผู้นำ</h3> <p>Leadership</p> </div> <div class="skill-card" data-percent="75"> <div class="radial-wrap"> <svg viewBox="0 0 100 100" class="radial-svg"> <circle class="radial-bg" cx="50" cy="50" r="42"/> <circle class="radial-progress" cx="50" cy="50" r="42"/> </svg> <div class="radial-center"><span class="radial-pct">0%</span></div> </div> <div class="skill-icon-wrap"><i class="fas fa-laptop-code"></i></div> <h3>ทักษะคอมพิวเตอร์</h3> <p>Computer Skills</p> </div> <div class="skill-card" data-percent="75"> <div class="radial-wrap"> <svg viewBox="0 0 100 100" class="radial-svg"> <circle class="radial-bg" cx="50" cy="50" r="42"/> <circle class="radial-progress" cx="50" cy="50" r="42"/> </svg> <div class="radial-center"><span class="radial-pct">0%</span></div> </div> <div class="skill-icon-wrap"><i class="fas fa-sitemap"></i></div> <h3>การออกแบบระบบ</h3> <p>System Design</p> </div> </div> </div> </section> <!-- ==================== EDUCATION SECTION ==================== --> <section id="education" class="education-section section-pad"> <div class="container"> <div class="section-header"> <span class="section-tag">BACKGROUND</span> <h2 class="section-title">เส้นทาง<span class="hl"> การศึกษา</span></h2> <p class="section-desc">ก้าวแต่ละก้าวที่สร้างรากฐานความรู้ และหล่อหลอมตัวตนของฉัน</p> </div> <div class="timeline-wrap"> <div class="timeline-line"></div> <div class="tl-item tl-left"> <div class="tl-dot-wrap"><div class="tl-dot"><i class="fas fa-school"></i></div></div> <div class="tl-card"> <div class="tl-img-wrap"> <img src="รูป/2.png" alt="โรงเรียนชุมชนวัดศรีคำชมภู ระดับประถมศึกษา"> </div> <div class="tl-body"> <span class="tl-level lv-primary">ระดับประถมศึกษา</span> <h3>โรงเรียนชุมชนวัดศรีคำชมภู</h3> <p>จุดเริ่มต้นของการเรียนรู้ — ปูพื้นฐานวิชาการและปลูกฝังความรับผิดชอบตั้งแต่วัยเยาว์</p> <div class="tl-gpax"><i class="fas fa-medal"></i> GPAX: <strong>3.93</strong></div> </div> </div> </div> <div class="tl-item tl-right"> <div class="tl-dot-wrap"><div class="tl-dot"><i class="fas fa-book"></i></div></div> <div class="tl-card"> <div class="tl-img-wrap"> <img src="รูป/3.png" alt="โรงเรียนชุมชนวัดศรีคำชมภู ระดับมัธยมต้น"> </div> <div class="tl-body"> <span class="tl-level lv-secondary">ระดับมัธยมศึกษาตอนต้น</span> <h3>โรงเรียนชุมชนวัดศรีคำชมภู</h3> <p>ช่วงเวลาแห่งการค้นพบตัวเอง — เริ่มสนใจวิชาวิทยาศาสตร์และเทคโนโลยีอย่างจริงจัง</p> <div class="tl-gpax"><i class="fas fa-medal"></i> GPAX: <strong>3.68</strong></div> </div> </div> </div> <div class="tl-item tl-left"> <div class="tl-dot-wrap"><div class="tl-dot"><i class="fas fa-microchip"></i></div></div> <div class="tl-card"> <div class="tl-img-wrap"> <img src="รูป/4.png" alt="วิทยาลัยเทคโนโลยีพาณิชยการลานนา ปวช."> </div> <div class="tl-body"> <span class="tl-level lv-vocational">ระดับปวช.</span> <h3>วิทยาลัยเทคโนโลยีพาณิชยการลานนา</h3> <p>สาขาวิชา <strong>ช่างอิเล็กทรอนิกส์</strong> — ลงมือปฏิบัติงานจริงด้านวงจรอิเล็กทรอนิกส์ การซ่อมบำรุง และระบบสัญญาณ</p> <div class="tl-gpax"><i class="fas fa-medal"></i> GPAX: <strong>3.80</strong></div> </div> </div> </div> <div class="tl-item tl-right tl-current"> <div class="tl-dot-wrap"><div class="tl-dot tl-dot-current"><i class="fas fa-desktop"></i></div></div> <div class="tl-card tl-card-current"> <div class="tl-img-wrap"> <img src="รูป/5.png" alt="วิทยาลัยเทคนิคเชียงใหม่ ปวส."> </div> <div class="tl-body"> <span class="tl-level lv-current"><i class="fas fa-circle fa-beat" style="font-size:0.6em;color:#00f0ff;"></i> กำลังศึกษาอยู่</span> <h3>วิทยาลัยเทคนิคเชียงใหม่</h3> <p>สาขาวิชา <strong>เทคโนโลยีคอมพิวเตอร์</strong> — ศึกษาด้านสถาปัตยกรรมคอมพิวเตอร์ การเขียนโปรแกรม ระบบเครือข่าย และการพัฒนาซอฟต์แวร์</p> <div class="tl-gpax" style="color:#00f0ff;"><i class="fas fa-spinner fa-spin"></i> กำลังสะสม GPA...</div> </div> </div> </div> </div> </div> </section> <!-- ==================== CERTIFICATES SECTION ==================== --> <section id="certificates" class="cert-section section-pad"> <div class="container"> <div class="section-header"> <span class="section-tag">HONORS</span> <h2 class="section-title">เกียรติบัตร<span class="hl"> & รางวัล</span></h2> <p class="section-desc">ผลลัพธ์ที่สะท้อนถึงความมุ่งมั่นและการอุทิศตนอย่างต่อเนื่อง</p> </div> <div class="cert-showcase"> <div class="cert-card"> <div class="cert-glow-ring"></div> <div class="cert-img-wrap"> <img src="รูป/6.jpg" alt="เกียรติบัตรนักศึกษาดีเด่น ปีการศึกษา 2568" id="cert-img"> <div class="cert-img-overlay"> <button class="cert-zoom-btn" id="cert-zoom-btn" aria-label="ดูรูปเต็ม"> <i class="fas fa-expand"></i> ดูเต็มจอ </button> </div> </div> <div class="cert-info"> <div class="cert-badge-icon"><i class="fas fa-trophy"></i></div> <span class="cert-year">ปีการศึกษา 2568</span> <h3>รางวัลนักศึกษาดีเด่น</h3> <p> รางวัลอันทรงเกียรติที่มอบให้แก่นักศึกษาผู้อุทิศตน ทั้งในด้านวิชาการ และการเป็นแกนนำในการขับเคลื่อนกิจกรรมทั้งภายในและภายนอกวิทยาลัยอย่างต่อเนื่อง สะท้อนให้เห็นถึงจิตอาสา ภาวะผู้นำ และความรับผิดชอบต่อส่วนรวม </p> <div class="cert-tags"> <span><i class="fas fa-check-circle"></i> ภาวะผู้นำ</span> <span><i class="fas fa-check-circle"></i> จิตอาสา</span> <span><i class="fas fa-check-circle"></i> วิชาการดีเด่น</span> </div> </div> </div> </div> </div> </section> <!-- ==================== EXPERIENCE SECTION ==================== --> <section id="experience" class="exp-section section-pad"> <div class="container"> <div class="section-header"> <span class="section-tag">WORK EXPERIENCE</span> <h2 class="section-title">ประสบการณ์<span class="hl"> การทำงาน</span></h2> <p class="section-desc">ประสบการณ์จริงกับ <strong>AP LED</strong> — จากโครงสร้างฮาร์ดแวร์สู่การควบคุมระบบ Production เต็มรูปแบบ</p> </div> <!-- Desktop: Tab + Grid --> <div class="exp-desktop-layout" id="exp-desktop"> <div class="exp-tabs" id="exp-tabs"> <button class="exp-tab active" data-tab="structure"> <i class="fas fa-screwdriver-wrench"></i> โครงสร้าง & ติดตั้ง </button> <button class="exp-tab" data-tab="maintenance"> <i class="fas fa-stethoscope"></i> ซ่อมบำรุง & สัญญาณ </button> <button class="exp-tab" data-tab="production"> <i class="fas fa-film"></i> Production & ควบคุม </button> </div> <div class="exp-panel active" id="panel-structure"> <div class="exp-grid"> <div class="exp-item" data-lb-src="รูป/7.jpg" data-lb-title="Structural Engineering & Site Preparation" data-lb-desc="ดำเนินการสำรวจพื้นที่ติดตั้ง (Site Survey) วิเคราะห์โครงสร้างรับน้ำหนัก จัดเตรียมและประกอบโครงเหล็ก (Steel Truss & Rigging System) พร้อมยึดจุดรับแรง (Load Point) อย่างปลอดภัยตามมาตรฐานวิศวกรรม เพื่อรองรับน้ำหนักจอ LED และอุปกรณ์ Stage Production ขนาดใหญ่"> <div class="exp-img-wrap"> <img src="รูป/7.jpg" alt="งานโครงสร้าง Truss & Rigging System"> <div class="exp-hover-overlay"><i class="fas fa-magnifying-glass-plus"></i><span>คลิกเพื่อขยาย</span></div> </div> <div class="exp-label"> <h4><i class="fas fa-hard-hat"></i> Structural Engineering</h4> <p>Site Survey · Truss Assembly · Load Point Analysis</p> </div> </div> <div class="exp-item" data-lb-src="รูป/8.jpg" data-lb-title="LED Display Module Installation" data-lb-desc="ติดตั้งโมดูลจอแสดงผล LED ขนาดใหญ่ (LED Panel Module Assembly) อย่างแม่นยำ โดยต้องจัดระนาบพื้นผิว (Surface Alignment) ให้เรียบสม่ำเสมอ เชื่อมต่อสาย Power Distribution และ Data Cable เข้ากับ Receiving Card อย่างถูกต้อง เพื่อให้ได้ภาพแสดงผล Seamless ไร้รอยต่อในทุกสภาวะแสง"> <div class="exp-img-wrap"> <img src="รูป/8.jpg" alt="งานติดตั้งจอ LED Module"> <div class="exp-hover-overlay"><i class="fas fa-magnifying-glass-plus"></i><span>คลิกเพื่อขยาย</span></div> </div> <div class="exp-label"> <h4><i class="fas fa-display"></i> LED Display Installation</h4> <p>Panel Module · Surface Alignment · Seamless Display</p> </div> </div> </div> </div> <div class="exp-panel" id="panel-maintenance"> <div class="exp-grid"> <div class="exp-item" data-lb-src="รูป/9.jpg" data-lb-title="Hardware Troubleshooting & Preventive Maintenance" data-lb-desc="ตรวจสอบและวิเคราะห์ปัญหาระบบ LED Display เชิงลึก (In-depth Diagnostics) ครอบคลุมการทดสอบ Receiving Card, Power Supply Unit (PSU), โมดูล LED และสาย Flat Ribbon Cable เพื่อระบุจุดบกพร่อง และดำเนินการซ่อมบำรุงเชิงป้องกัน (Preventive Maintenance) ตามรอบเวลา เพื่อยืดอายุการใช้งานและลดการเกิด Downtime ในงาน Event"> <div class="exp-img-wrap"> <img src="รูป/9.jpg" alt="งานตรวจเช็คและซ่อมบำรุง LED"> <div class="exp-hover-overlay"><i class="fas fa-magnifying-glass-plus"></i><span>คลิกเพื่อขยาย</span></div> </div> <div class="exp-label"> <h4><i class="fas fa-stethoscope"></i> Hardware Diagnostics</h4> <p>Receiving Card · PSU Test · Preventive Maintenance</p> </div> </div> <div class="exp-item" data-lb-src="รูป/10.jpg" data-lb-title="Signal Routing & Cable Management" data-lb-desc="วางระบบเดินสายสัญญาณ (Signal Cable Routing) ทั้ง Data Line (CAT6/Fiber Optic) และ Power Line อย่างเป็นระเบียบตามหลัก Cable Management โดยคำนึงถึง Signal Integrity การป้องกัน Electromagnetic Interference (EMI) และความสะดวกในการ Troubleshoot ภาคสนาม เพื่อให้ Signal Flow มีเสถียรภาพสูงสุดตลอดระยะทาง"> <div class="exp-img-wrap"> <img src="รูป/10.jpg" alt="งานไล่ระบบสายสัญญาณ"> <div class="exp-hover-overlay"><i class="fas fa-magnifying-glass-plus"></i><span>คลิกเพื่อขยาย</span></div> </div> <div class="exp-label"> <h4><i class="fas fa-network-wired"></i> Signal & Cable Management</h4> <p>CAT6/Fiber Routing · EMI Prevention · Signal Integrity</p> </div> </div> </div> </div> <div class="exp-panel" id="panel-production"> <div class="exp-grid exp-grid-3"> <div class="exp-item" data-lb-src="รูป/11.jpg" data-lb-title="LED System Software Control" data-lb-desc="ควบคุมการทำงานของระบบจอ LED ผ่านซอฟต์แวร์ Video Processor และ Sending Card Controller ปรับแต่ง Mapping Configuration, Resolution Settings, Gamma Correction และ Color Calibration เพื่อให้ได้คุณภาพภาพที่แม่นยำและสม่ำเสมอทั่วทุก Panel บน LED Wall ขนาดใหญ่"> <div class="exp-img-wrap"> <img src="รูป/11.jpg" alt="งานควบคุมจอ LED ด้วยซอฟต์แวร์"> <div class="exp-hover-overlay"><i class="fas fa-magnifying-glass-plus"></i><span>คลิกเพื่อขยาย</span></div> </div> <div class="exp-label"> <h4><i class="fas fa-sliders"></i> LED System Control</h4> <p>Video Processor · Mapping · Color Calibration</p> </div> </div> <div class="exp-item" data-lb-src="รูป/12.jpg" data-lb-title="OB Live Production & Multi-Camera Control" data-lb-desc="ปฏิบัติงาน OB Live (Outside Broadcast) ควบคุมกล้องวิดีโอ (Camera Operation) ร่วมกับทีม Production สลับสัญญาณภาพ (Video Switching) ผ่าน Vision Mixer/Switcher ตัดต่อ Live บน Monitor Wall และประสานงาน Tally System เพื่อให้การ Broadcast ดำเนินไปอย่างราบรื่นไร้ข้อผิดพลาด"> <div class="exp-img-wrap"> <img src="รูป/12.jpg" alt="งาน OB Live ควบคุมกล้อง"> <div class="exp-hover-overlay"><i class="fas fa-magnifying-glass-plus"></i><span>คลิกเพื่อขยาย</span></div> </div> <div class="exp-label"> <h4><i class="fas fa-video"></i> OB Live & Camera Control</h4> <p>Camera Operation · Video Switching · Live Broadcast</p> </div> </div> <div class="exp-item" data-lb-src="รูป/13.jpg" data-lb-title="Backdrop Setup & Stage Production Management" data-lb-desc="จัดเตรียมและติดตั้ง Backdrop ฉากหลังสำหรับงาน Event และ Stage Production ครอบคลุมการออกแบบพื้นที่ (Space Planning) ติดตั้งผ้า Backdrop ขนาดใหญ่ ปรับมุมและระยะ Camera Angle เพื่อ Composition ที่สวยงาม รวมถึงดูแล Props และองค์ประกอบ Set Design ทั้งหมดก่อน Showtime"> <div class="exp-img-wrap"> <img src="รูป/13.jpg" alt="งานจัดเตรียม Backdrop Stage Production"> <div class="exp-hover-overlay"><i class="fas fa-magnifying-glass-plus"></i><span>คลิกเพื่อขยาย</span></div> </div> <div class="exp-label"> <h4><i class="fas fa-photo-film"></i> Backdrop & Stage Production</h4> <p>Space Planning · Backdrop Setup · Set Design</p> </div> </div> </div> </div> </div> <!-- Mobile: Swipe Carousel --> <div class="exp-mobile-carousel" id="exp-carousel"> <div class="carousel-track" id="carousel-track"> <div class="carousel-slide"><img src="รูป/7.jpg" alt="งานโครงสร้าง"><div class="carousel-caption"><h4>Structural Engineering</h4><p>Site Survey · Truss Assembly</p></div></div> <div class="carousel-slide"><img src="รูป/8.jpg" alt="ติดตั้งจอ LED"><div class="carousel-caption"><h4>LED Display Installation</h4><p>Panel Module · Surface Alignment</p></div></div> <div class="carousel-slide"><img src="รูป/9.jpg" alt="ซ่อมบำรุง LED"><div class="carousel-caption"><h4>Hardware Diagnostics</h4><p>Receiving Card · PSU Test</p></div></div> <div class="carousel-slide"><img src="รูป/10.jpg" alt="ไล่สายสัญญาณ"><div class="carousel-caption"><h4>Signal & Cable Management</h4><p>CAT6 · EMI Prevention</p></div></div> <div class="carousel-slide"><img src="รูป/11.jpg" alt="ควบคุมจอ LED"><div class="carousel-caption"><h4>LED System Control</h4><p>Video Processor · Color Calibration</p></div></div> <div class="carousel-slide"><img src="รูป/12.jpg" alt="OB Live"><div class="carousel-caption"><h4>OB Live & Camera Control</h4><p>Camera · Video Switching</p></div></div> <div class="carousel-slide"><img src="รูป/13.jpg" alt="Backdrop"><div class="carousel-caption"><h4>Backdrop & Stage Production</h4><p>Space Planning · Set Design</p></div></div> </div> <div class="carousel-controls"> <button class="carousel-btn" id="carousel-prev" aria-label="ก่อนหน้า"><i class="fas fa-chevron-left"></i></button> <div class="carousel-dots" id="carousel-dots"></div> <button class="carousel-btn" id="carousel-next" aria-label="ถัดไป"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- ==================== CONTACT SECTION ==================== --> <section id="contact" class="contact-section section-pad"> <div class="container"> <div class="section-header"> <span class="section-tag">GET IN TOUCH</span> <h2 class="section-title">ติดต่อ<span class="hl"> ข้าพเจ้า</span></h2> <p class="section-desc">พร้อมร่วมทีม เรียนรู้ และเติบโตไปด้วยกัน — อย่าลังเลที่จะติดต่อ</p> </div> <div class="contact-grid"> <div class="contact-card"> <div class="contact-icon-wrap"><i class="fas fa-envelope"></i></div> <h4>อีเมล</h4> <a href="mailto:ctnng.29@gmail.com">ctnng.29@gmail.com</a> </div> <div class="contact-card"> <div class="contact-icon-wrap"><i class="fas fa-phone"></i></div> <h4>โทรศัพท์</h4> <a href="tel:0955021100">095-502-1100</a> </div> <div class="contact-card"> <div class="contact-icon-wrap"><i class="fab fa-instagram"></i></div> <h4>Instagram</h4> <a href="https://www.instagram.com/ctn_ng" target="_blank" rel="noopener">@ctn_ng</a> </div> </div> </div> </section> <!-- ==================== FOOTER ==================== --> <footer> <div class="footer-inner"> <div class="footer-logo">CN<span>.</span>PORTFOLIO</div> <p>© 2026 ชินโชติ ณ วิไลทอง · Chinnachot Na Wilaithong. All rights reserved.</p> <p class="footer-sub">ปวส. เทคโนโลยีคอมพิวเตอร์ · วิทยาลัยเทคนิคเชียงใหม่</p> </div> </footer> <!-- ==================== LIGHTBOX MODAL ==================== --> <div class="lightbox-overlay" id="lightbox" role="dialog" aria-modal="true" aria-label="ดูรูปภาพ"> <button class="lightbox-close" id="lightbox-close" aria-label="ปิด"><i class="fas fa-xmark"></i></button> <div class="lightbox-content"> <img src="" alt="" id="lightbox-img"> <div class="lightbox-info"> <h3 id="lightbox-title"></h3> <p id="lightbox-desc"></p> </div> </div> </div> <!-- ==================== BACK TO TOP ==================== --> <button class="back-to-top" id="back-to-top" aria-label="กลับด้านบน"><i class="fas fa-chevron-up"></i></button> <script src="script.js"></script> </body> </html>

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