File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090013/portfolio/013 Thitinun 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>Portfolio \| Web Developer & Network Engineer</title> <meta name="description" content="Personal Portfolio - Web Developer & Network Engineer"> <!-- 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=Inter:wght@300;400;600;700&family=Prompt:wght@300;400;600;700&display=swap" rel="stylesheet"> <!-- Font Awesome for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="style.css?v=4"> </head> <body> <canvas id="plexus-canvas"></canvas> <!-- Intro Splash Screen --> <div id="intro-overlay"> <video id="intro-video" autoplay muted playsinline> <source src="intro.mp4.mp4" type="video/mp4"> <source src="https://assets.mixkit.co/videos/preview/mixkit-abstract-laser-lights-background-32-large.mp4" type="video/mp4"> </video> <div class="intro-content"> <h1 class="intro-title">Portfolio.</h1> <button id="skip-intro-btn">Skip <i class="fas fa-forward"></i></button> </div> </div> <!-- Navigation --> <nav id="navbar"> <div class="nav-content"> <div class="logo">Portfolio.</div> <ul class="nav-links"> <li><a href="#home" data-i18n="nav_home">หน้าแรก</a></li> <li><a href="#about" data-i18n="nav_about">ประวัติส่วนตัว</a></li> <li><a href="#education" data-i18n="nav_edu">การศึกษา</a></li> <li><a href="#skills" data-i18n="nav_skills">ทักษะ</a></li> <li><a href="#projects" data-i18n="nav_projects">ผลงาน</a></li> <li><a href="#contact" data-i18n="nav_contact">ติดต่อ</a></li> </ul> <div class="nav-controls"> <div class="lang-toggle-switch" id="lang-toggle"> <span class="lang-label">TH</span> <span class="lang-label">EN</span> <div class="lang-slider"></div> </div> <div class="theme-toggle" id="theme-toggle"> <i class="fas fa-moon"></i> </div> <div class="menu-toggle" id="menu-toggle"> <span></span> <span></span> <span></span> </div> </div> </div> </nav> <!-- Cover Section --> <header id="home" class="hero section-reveal"> <div class="hero-content"> <div class="profile-image-container"> <img src="profile.jpg.jpg.jpg" alt="Profile Photo" class="profile-img"> <div class="glow-ring"></div> </div> <h1 class="name" data-i18n="hero_name">สวัสดีผมชื่อธิตินันท์ ชุ่มปิว</h1> <h2 class="roles"> <span class="role-text">Web Developer</span> <span class="divider">\|</span> <span class="role-text">Network Engineer</span> </h2> <div class="hero-buttons"> <a href="#projects" class="btn primary-btn" data-i18n="hero_btn_projects">ดูผลงานของฉัน</a> <a href="#contact" class="btn secondary-btn" data-i18n="hero_btn_contact">ติดต่อฉัน</a> </div> </div> <div class="scroll-down"> <a href="#about"><i class="fas fa-chevron-down"></i></a> </div> <div class="background-elements"> <div class="blob blob-1"></div> <div class="blob blob-2"></div> </div> </header> <!-- About Section --> <section id="about" class="section section-reveal"> <div class="container"> <h2 class="section-title"><span data-i18n="about_title">ประวัติส่วนตัว</span> <span class="highlight">(About Me)</span></h2> <div class="about-grid"> <div class="about-card glass-panel"> <img src="457a7526-b522-40fb-a1cc-54a4d965db1f.jpg" alt="รูปโปรไฟล์" class="about-img"> <h3 data-i18n="about_info_title">ข้อมูลส่วนตัว</h3> <p data-i18n="about_info_desc">สวัสดีครับผมนายธิตินันท์ ชุ่มปิวอายุ 19 ปี เรียนจบมาจากวิทยาลัยเทคนิคแพร่สาขาเทคนิคคอมพิวเตอร์ ปัจจุบันย้ายมาศึกษาต่อที่วิทยาลัยเทคนิคเชียงใหม่</p> </div> <div class="about-card glass-panel"> <img src="skill.jpg.jpg" alt="ความสามารถ" class="about-img"> <h3 data-i18n="about_skills_title">ความสามารถ</h3> <p data-i18n="about_skills_desc">สามารถซ่อมคอมเครื่องปริ้น ลงWindows</p> </div> <div class="about-card glass-panel"> <img src="goal.jpg.jpg.jpg" alt="เป้าหมายในอนาคต" class="about-img"> <h3 data-i18n="about_goals_title">เป้าหมายในอนาคต</h3> <p data-i18n="about_goals_desc">เป้าหมายในอนาคตของผมก็คือผมอยากเปิดร้านซ่อมคอมเป็นของตัวเองครับ แล้วถ้าพอมีงบขึ้นก็จะเปิดร้านเกมเป็นของตัวเองอีกทีนึงครับ</p> </div> </div> </div> </section> <!-- Education Section --> <section id="education" class="section section-reveal"> <div class="container"> <h2 class="section-title" data-i18n="edu_title">ประวัติการศึกษา</h2> <div class="timeline"> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content glass-panel"> <div class="timeline-date" data-i18n="edu_present">ปัจจุบัน</div> <h3 class="school-name" data-i18n="edu_school1">วิทยาลัยเทคนิคเชียงใหม่</h3> <h4 class="major" data-i18n="edu_major1">กำลังศึกษาต่อ</h4> <p class="gpa"></p> <p class="edu-desc" data-i18n="edu_desc1">ศึกษาต่อเพื่อพัฒนาทักษะและความรู้ในสายอาชีพ</p> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content glass-panel"> <div class="timeline-date" data-i18n="edu_past">อดีต</div> <h3 class="school-name" data-i18n="edu_school2">วิทยาลัยเทคนิคแพร่</h3> <h4 class="major" data-i18n="edu_major2">สาขาวิชา: เทคนิคคอมพิวเตอร์</h4> <p class="gpa"></p> <p class="edu-desc" data-i18n="edu_desc2">เรียนจบสาขาเทคนิคคอมพิวเตอร์</p> </div> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills" class="section section-reveal"> <div class="container"> <h2 class="section-title"><span data-i18n="skills_title">ทักษะ</span> <span class="highlight">(Skills)</span></h2> <div class="simple-skills-grid"> <div class="simple-skill-item glass-panel"> <div class="skill-icon"><i class="fas fa-code"></i></div> <span class="skill-text" data-i18n="skill_coding">ทักษะการเขียนโค้ด</span> </div> <div class="simple-skill-item glass-panel"> <div class="skill-icon"><i class="fas fa-utensils"></i></div> <span class="skill-text" data-i18n="skill_cooking">ทักษะทำอาหาร</span> </div> <div class="simple-skill-item glass-panel"> <div class="skill-icon"><i class="fas fa-paint-brush"></i></div> <span class="skill-text" data-i18n="skill_design">ทักษะการออกแบบ</span> </div> <div class="simple-skill-item glass-panel"> <div class="skill-icon"><i class="fas fa-tools"></i></div> <span class="skill-text" data-i18n="skill_repair">ทักษะการซ่อมประกอบ</span> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="section section-reveal"> <div class="container"> <h2 class="section-title"><span data-i18n="projects_title">ผลงาน</span> <span class="highlight">(Projects)</span></h2> <div class="projects-grid"> <!-- Project 1 --> <div class="project-card glass-panel"> <div class="project-img-wrapper"> <img src="project_repair.jpg.jpg" alt="Repair Notebook"> <div class="project-overlay"> <a href="#" class="view-btn"><i class="fas fa-external-link-alt"></i> View</a> </div> </div> <div class="project-info"> <span class="project-tag tag-net">Hardware Repair</span> <h3 data-i18n="proj1_title">ซ่อมโน๊ตบุ๊คลูกค้า</h3> <p data-i18n="proj1_desc">บริการซ่อมแซมและแก้ไขปัญหาโน๊ตบุ๊คให้ลูกค้า</p> </div> </div> <!-- Project 2 --> <div class="project-card glass-panel"> <div class="project-img-wrapper"> <img src="project_printer.jpg.jpg" alt="Printer Repair"> <div class="project-overlay"> <a href="#" class="view-btn"><i class="fas fa-external-link-alt"></i> View</a> </div> </div> <div class="project-info"> <span class="project-tag tag-net">Hardware Repair</span> <h3 data-i18n="proj2_title">ซ่อมเครื่องปริ้น</h3> <p data-i18n="proj2_desc">บริการซ่อมแซมและบำรุงรักษาเครื่องปริ้นเตอร์</p> </div> </div> <!-- Project 3 --> <div class="project-card glass-panel"> <div class="project-img-wrapper"> <img src="project_veg.jpg.jpg.jpg" alt="Organic Vegetables"> <div class="project-overlay"> <a href="#" class="view-btn"><i class="fas fa-external-link-alt"></i> View</a> </div> </div> <div class="project-info"> <span class="project-tag tag-3d">Agriculture</span> <h3 data-i18n="proj3_title">ปลูกผักปลอดสารพิษ</h3> <p data-i18n="proj3_desc">การปลูกผักปลอดสารพิษไว้สำหรับรับประทานและจำหน่าย</p> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="section section-reveal"> <div class="container"> <h2 class="section-title" data-i18n="contact_title">ช่องทางติดต่อ</h2> <div class="contact-wrapper"> <div class="contact-info glass-panel"> <div class="contact-item"> <div class="contact-icon"><i class="fas fa-phone-alt"></i></div> <div class="contact-details"> <h4 data-i18n="contact_phone">เบอร์โทร</h4> <a href="tel:0806862553">080-686-2553</a> </div> </div> <div class="contact-item"> <div class="contact-icon"><i class="fas fa-envelope"></i></div> <div class="contact-details"> <h4>Email</h4> <a href="mailto:kay379797@gmail.com">kay379797@gmail.com</a> </div> </div> <div class="contact-item"> <div class="contact-icon"><i class="fab fa-facebook-f"></i></div> <div class="contact-details"> <h4>Facebook</h4> <a href="#" target="_blank">กุง น้อย</a> </div> </div> <div class="contact-item"> <div class="contact-icon"><i class="fab fa-github"></i></div> <div class="contact-details"> <h4>GitHub</h4> <a href="#" target="_blank">github.com/yourusername</a> </div> </div> </div> </div> </div> </section> <footer> <div class="container"> <p>© 2026 Portfolio. All Rights Reserved.</p> </div> </footer> <script src="script.js?v=4"></script> </body> </html>

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