File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090023/porfolio/0023/index - Copy.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>อาทิตย์ ลุงกอ \| Cyberpunk Portfolio</title> <!-- SEO Meta Tags --> <meta name="description" content="Portfolio ส่วนตัวของ อาทิตย์ ลุงกอ - นักพัฒนาเครือข่ายคอมพิวเตอร์และเว็บดีไซเนอร์สไตล์ Cyberpunk Neon"> <meta name="keywords" content="อาทิตย์ ลุงกอ, พอร์ตโฟลิโอ, เทคโนโลยีคอมพิวเตอร์เครือข่าย, อิเล็กทรอนิกส์, เชียงใหม่, XAMPP, Cyberpunk Portfolio"> <meta name="author" content="อาทิตย์ ลุงกอ"> <!-- 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=Chakra+Petch:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Font Awesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Inline script to prevent theme flash --> <script> (function () { const savedTheme = localStorage.getItem('portfolio-theme'); if (savedTheme === 'light') { document.documentElement.setAttribute('data-theme', 'light'); } })(); </script> <!-- Custom Stylesheet --> <link rel="stylesheet" href="index.css"> </head> <body> <!-- Overlay scanline grid --> <div class="grid-overlay"></div> <!-- Header / Navbar Navigation --> <header id="header"> <div class="container navbar"> <a href="#hero" class="logo"> <div class="logo-box">AL</div> <span>อาทิตย์.<span>ล</span></span> </a> <div class="nav-right"> <ul class="nav-menu" id="nav-menu"> <li><a href="#hero" class="nav-link"><i class="fa-solid fa-house"></i><span>หน้าแรก</span></a></li> <li><a href="#education" class="nav-link"><i class="fa-solid fa-graduation-cap"></i><span>ประวัติการศึกษา</span></a></li> <li><a href="#skills" class="nav-link"><i class="fa-solid fa-screwdriver-wrench"></i><span>ทักษะความสามารถ</span></a></li> <li><a href="#contact" class="nav-link"><i class="fa-solid fa-envelope"></i><span>ติดต่อฉัน</span></a></li> </ul> <button id="theme-toggle" class="theme-toggle-btn" aria-label="เปลี่ยนธีม"> <i class="fa-solid fa-moon"></i> </button> </div> <button class="nav-toggle" id="nav-toggle" aria-label="เปิดเมนูนำทาง"> <i class="fa-solid fa-bars"></i> </button> </div> </header> <!-- Hero / Main Welcome Section --> <section id="hero"> <div class="container hero-wrapper"> <div class="hero-content"> <div class="hero-welcome"> <span class="welcome-dot"></span> <span class="neon-text-pink">ยินดีต้อนรับเข้าสู่พอร์ตโฟลิโอส่วนตัว</span> </div> <h1 class="hero-title"> สวัสดีครับ, ผม <br> <span class="name-highlight">อาทิตย์ ลุงกอ</span> </h1> <div class="hero-badges"> <span class="badge"><i class="fa-solid fa-cake-candles"></i> อายุ 18 ปี</span> <span class="badge badge-cyan"><i class="fa-solid fa-location-dot"></i> สันทราย, เชียงใหม่</span> </div> <p class="hero-description"> ผมกำลังศึกษาในระดับ ปวส. ชั้นปีที่ 1 สาขาเทคโนโลยีคอมพิวเตอร์เครือข่าย วิทยาลัยเทคนิคเชียงใหม่ มีความมุ่งมั่นและความหลงใหลในการทำระบบเน็ตเวิร์ก (Computer Networking) ความปลอดภัยเครือข่าย (Network Security) งานอิเล็กทรอนิกส์และฮาร์ดแวร์ ตลอดจนพัฒนาเว็บไซต์ (Responsive Web Design) เพื่อนำเสนอโซลูชันที่ทันสมัยและตอบโจทย์การใช้งานจริง </p> <div class="hero-buttons"> <a href="#contact" class="btn-cyber">ติดต่อฉันเลย <i class="fa-solid fa-paper-plane"></i></a> <a href="#education" class="btn-cyber btn-cyber-outline">ดูประวัติการศึกษา <i class="fa-solid fa-chevron-down"></i></a> </div> </div> <!-- Cyberpunk Profile Photo Frame with Laser Sweep (Hover to decrypt photo) --> <div class="profile-container"> <div class="profile-border-glow"></div> <div class="profile-frame"> <div class="profile-img-wrapper"> <!-- Holographic scan grid background --> <div class="profile-tech-grid"></div> <!-- Profile Image (Hidden by default, reveals on hover) --> <img src="profile.png" alt="อาทิตย์ ลุงกอ" class="profile-img"> <!-- Hologram cover details (Hides on hover) --> <div class="profile-hologram-screen"> <i class="fa-solid fa-user-astronaut profile-fallback-icon"></i> <div class="profile-scan-label"><i class="fa-solid fa-expand"></i> SCAN IDENTITY</div> </div> <!-- Animated sweeping laser beam --> <div class="laser-sweep-overlay"></div> </div> </div> </div> </div> </section> <!-- Education Section (Timeline Style) --> <section id="education" style="background: linear-gradient(to bottom, var(--bg-darker), var(--bg-dark));"> <div class="container"> <h2 class="section-title" data-text="EDUCATION TIMELINE">ประวัติการศึกษา</h2> <div class="timeline-wrapper"> <!-- Timeline Item 1 --> <div class="timeline-item"> <div class="timeline-dot"><i class="fa-solid fa-graduation-cap"></i></div> <div class="timeline-card"> <span class="timeline-year">ระดับประถมศึกษา (ป.1 - ป.6)</span> <div class="timeline-title"> โรงเรียนวัดป่าตัน <span class="timeline-school-badge">ประถม</span> </div> <p class="timeline-desc">เรียนรู้ทักษะพื้นฐานทั่วไป กิจกรรมพัฒนาการและการคิดอย่างเป็นระบบเบื้องต้น</p> </div> </div> <!-- Timeline Item 2 --> <div class="timeline-item"> <div class="timeline-dot"><i class="fa-solid fa-graduation-cap"></i></div> <div class="timeline-card"> <span class="timeline-year">ระดับมัธยมศึกษา (ม.1 - ม.3)</span> <div class="timeline-title"> โรงเรียนเมตตาศึกษาในพระราชูปถัมภ์ <span class="timeline-school-badge">มัธยมต้น</span> </div> <p class="timeline-desc">ศึกษาค้นคว้าเกี่ยวกับวิชาสามัญทั่วไป และเริ่มให้ความสนใจในระบบคอมพิวเตอร์และสื่อดิจิทัล</p> </div> </div> <!-- Timeline Item 3 --> <div class="timeline-item"> <div class="timeline-dot"><i class="fa-solid fa-microchip"></i></div> <div class="timeline-card"> <span class="timeline-year">ระดับ ปวช. (ปวช.1 - ปวช.3)</span> <div class="timeline-title"> วิทยาลัยเทคนิคเชียงใหม่ <span class="timeline-school-badge" style="background: rgba(255, 0, 127, 0.1); border-color: var(--neon-pink); color: var(--neon-pink);">ปวช.</span> </div> <p class="timeline-desc"><strong>สาขาอิเล็กทรอนิกส์</strong> \| ศึกษาทักษะเฉพาะทางด้านวิศวกรรมอิเล็กทรอนิกส์ การออกแบบและวิเคราะห์วงจรไฟฟ้า การบัดกรีและแก้ไขวงจร ตลอดจนการทำงานร่วมกับระบบไมโครคอนโทรลเลอร์เบื้องต้น</p> </div> </div> <!-- Timeline Item 4 --> <div class="timeline-item"> <div class="timeline-dot"><i class="fa-solid fa-network-wired"></i></div> <div class="timeline-card" style="border-color: var(--neon-cyan); box-shadow: 0 0 15px var(--timeline-current-shadow);"> <span class="timeline-year" style="color: var(--neon-cyan);">ระดับ ปวส. (ปัจจุบัน ปวส.1)</span> <div class="timeline-title"> วิทยาลัยเทคนิคเชียงใหม่ <span class="timeline-school-badge">ปวส.</span> </div> <p class="timeline-desc"><strong>สาขาเทคโนโลยีคอมีพิวเตอร์เครือข่าย</strong> \| มุ่งเน้นการออกแบบและบริหารระบบเครือข่ายสื่อสาร (Computer Networking), ระบบความปลอดภัยเครือข่ายและข้อมูล (Network Security), การจัดการ Network Server, คลาวด์คอมพิวติ้ง และการพัฒนาเว็บแอปพลิเคชัน</p> </div> </div> </div> </div> </section> <!-- Skills Section (Interactive Glowing meters) --> <section id="skills" style="background: var(--bg-darker);"> <div class="container"> <h2 class="section-title" data-text="SKILLS & POWER">ทักษะความสามารถ</h2> <div class="skills-grid"> <!-- Category 1: Networking --> <div class="skills-category-card"> <h3 class="skills-category-title"><i class="fa-solid fa-network-wired"></i> Computer Networking</h3> <div class="skill-item"> <div class="skill-info"> <span class="skill-name">Computer Networking</span> <span class="skill-percentage" data-val="88">0%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" data-width="88%"></div> </div> </div> <div class="skill-item"> <div class="skill-info"> <span class="skill-name">Network Security</span> <span class="skill-percentage" data-val="78">0%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" data-width="78%"></div> </div> </div> </div> <!-- Category 2: Electronics --> <div class="skills-category-card"> <h3 class="skills-category-title"><i class="fa-solid fa-microchip"></i> Hardware & Electronics</h3> <div class="skill-item"> <div class="skill-info"> <span class="skill-name">Hardware & Circuits Design</span> <span class="skill-percentage" data-val="82">0%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" data-width="82%"></div> </div> </div> <div class="skill-item"> <div class="skill-info"> <span class="skill-name">Electronics & Soldering</span> <span class="skill-percentage" data-val="85">0%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" data-width="85%"></div> </div> </div> </div> <!-- Category 3: Web Development --> <div class="skills-category-card"> <h3 class="skills-category-title"><i class="fa-solid fa-code"></i> Web Development</h3> <div class="skill-item"> <div class="skill-info"> <span class="skill-name">HTML5 & CSS3 (Responsive)</span> <span class="skill-percentage" data-val="90">0%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" data-width="90%"></div> </div> </div> <div class="skill-item"> <div class="skill-info"> <span class="skill-name">PHP & MySQL Database</span> <span class="skill-percentage" data-val="80">0%</span> </div> <div class="skill-bar-outer"> <div class="skill-bar-inner" data-width="80%"></div> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" style="background: linear-gradient(to bottom, var(--bg-darker), var(--bg-dark));"> <div class="container"> <h2 class="section-title" data-text="GET IN TOUCH">ช่องทางการติดต่อ</h2> <div class="contact-grid"> <!-- Info cards panel --> <div class="contact-info-panel"> <div class="contact-cards-group" style="display: flex; flex-direction: column; gap: 20px;"> <a href="tel:095-016-5762" class="contact-card"> <div class="contact-card-icon"><i class="fa-solid fa-phone"></i></div> <div class="contact-card-details"> <h4>เบอร์โทรศัพท์ (กดเพื่อโทรออก)</h4> <p class="neon-text-pink">095-016-5762</p> </div> </a> <a href="mailto:xathityl456@gmail.com" class="contact-card"> <div class="contact-card-icon"><i class="fa-solid fa-envelope"></i></div> <div class="contact-card-details"> <h4>อีเมล (กดเพื่อส่งข้อความ)</h4> <p class="neon-text-cyan">xathityl456@gmail.com</p> </div> </a> </div> <div class="social-connect-box"> <h3>ช่องทางเชื่อมต่ออื่นๆ</h3> <div class="social-buttons-grid"> <a href="#" class="btn-social btn-facebook" target="_blank"><i class="fa-brands fa-facebook-f"></i> Facebook</a> <a href="#" class="btn-social btn-github" target="_blank"><i class="fa-brands fa-github"></i> GitHub</a> </div> </div> </div> <!-- Interactive cyber form panel --> <div class="glass-card contact-form-card"> <h3 style="margin-bottom: 25px; text-transform: uppercase; font-family: var(--font-head); color: var(--neon-cyan);"> ฝากข้อความถึงผม <i class="fa-regular fa-comment-dots"></i> </h3> <form id="contactForm"> <div class="form-group"> <label for="senderName">ชื่อผู้ติดต่อ</label> <input type="text" id="senderName" class="form-control" placeholder="กรุณาระบุชื่อของคุณ" required> </div> <div class="form-group"> <label for="senderEmail">ที่อยู่อีเมล</label> <input type="email" id="senderEmail" class="form-control" placeholder="example@email.com" required> </div> <div class="form-group"> <label for="senderMessage">ข้อความ</label> <textarea id="senderMessage" class="form-control" placeholder="พิมพ์ข้อความที่ต้องการส่งถึงผม..." required></textarea> </div> <button type="submit" class="btn-cyber" style="width: 100%; margin-top: 10px;"> ส่งข้อความเข้าระบบ <i class="fa-solid fa-paper-plane"></i> </button> </form> </div> </div> </div> </section> <!-- Footer Page --> <footer> <div class="container"> <div class="footer-logo"> อาทิตย์.<span>ล</span> </div> <p class="footer-text">© <span id="current-year"></span> อาทิตย์ ลุงกอ. All rights reserved.</p> <p class="footer-tech">Designed with Cyberpunk Neon Aesthetic</p> </div> </footer> <!-- Interactive Scripts --> <script src="index.js"></script> </body> </html>

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