File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090006/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>My Portfolio \| นายชนกกันต์ พันธุ์สินปทีป</title> <meta name="description" content="Personal portfolio showcasing my projects and skills."> <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=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="bg-decoration shape-1"></div> <div class="bg-decoration shape-2"></div> <div class="bg-decoration shape-3"></div> <header class="header"> <nav class="navbar container"> <a href="#" class="logo">chanok<span>kun</span>.</a> <div class="nav-menu" id="nav-menu"> <ul class="nav-list"> <li><a href="#home" 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> </div> <div class="nav-right"> <button id="theme-toggle" class="theme-toggle" aria-label="เปลี่ยนโหมด"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> </button> </div> </nav> </header> <main> <section id="home" class="home section container"> <div class="hero"> <div class="hero-content"> <div class="greeting-badge">👋 ยินดีต้อนรับครับ</div> <h1>สวัสดีครับผมชื่อ <br><span class="highlight">ชนกกันต์<br>พันธุ์สินปทีป</span></h1> <p class="hero-subtitle">พอร์ตโฟลิโอนำเสนอผลงานด้านการพัฒนาซอฟต์แวร์ การจัดการข้อมูล และระบบเครือข่ายคอมพิวเตอร์</p> <div class="hero-buttons"> <a href="#contact" class="btn btn-primary">ติดต่อฉัน</a> <a href="#projects" class="btn btn-outline">ดูผลงาน</a> </div> </div> <div class="hero-img-wrapper"> <div class="hero-img-inner"> <div class="hero-stacked-badges"> <div class="badge-line">🌐 Network Admin</div> <div class="badge-line">💻 Web Developer</div> <div class="badge-line">🗄️ Database</div> </div> <img src="hero.png" alt="Hero Image" class="hero-img"> </div> </div> </div> </section> <section id="about" class="about section container"> <h2 class="section-title">เกี่ยวกับฉัน</h2> <div class="about-grid"> <div class="about-img-wrapper"> <img src="profile.jpg" alt="รูปโปรไฟล์" class="about-img"> </div> <div class="about-info"> <h3>นายชนกกันต์ พันธุ์สินปทีป</h3> <p>ปัจจุบันผมกำลังศึกษาในสาขาเทคโนโลยีคอมพิวเตอร์ มีความสนใจและมุ่งมั่นในการพัฒนาเว็บแอปพลิเคชัน การออกแบบสถาปัตยกรรมระบบฐานข้อมูล และการบริหารจัดการระบบเครือข่ายคอมพิวเตอร์ (Network Topology) ให้มีประสิทธิภาพและปลอดภัย</p> <div class="education-timeline"> <h4>🎓 ประวัติการศึกษา</h4> <div class="timeline-item"> <div class="timeline-dot"></div> <p class="timeline-date">ปัจจุบัน</p> <p class="timeline-title">ปวส. เทคโนโลยีคอมพิวเตอร์</p> <p class="timeline-place">วิทยาลัยเทคนิคเชียงใหม่</p> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <p class="timeline-date">สำเร็จการศึกษา</p> <p class="timeline-title">ปวช. ช่างเทคนิคคอมพิวเตอร์</p> <p class="timeline-place">วิทยาลัยเทคนิคเชียงใหม่</p> </div> </div> <a href="#" class="btn btn-primary resume-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> </svg> ดาวน์โหลด Resume </a> </div> </div> </section> <section id="skills" class="skills section container"> <h2 class="section-title">ทักษะความสามารถ</h2> <div class="skills-grid"> <div class="skill-card"> <div class="skill-icon-wrapper">💻</div> <h3>Web Development</h3> <p>HTML5, CSS3, JavaScript, Python, PHP, Responsive Design</p> </div> <div class="skill-card"> <div class="skill-icon-wrapper">🗄️</div> <h3>Database Systems</h3> <p>SQL, MySQL, Firebase, Database Architecture & Reporting</p> </div> <div class="skill-card"> <div class="skill-icon-wrapper">🌐</div> <h3>Networking & IT</h3> <p>VLAN, Subnetting, IP Addressing, Cisco IOS, Hardware</p> </div> </div> </section> <section id="projects" class="projects section container"> <h2 class="section-title">ผลงานของฉัน</h2> <div class="projects-grid"> <article class="project-card"> <div class="project-img-wrapper"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80" alt="Database Project" class="project-img"> </div> <div class="project-info"> <h3>ระบบฐานข้อมูลรับซื้อเสื้อผ้ามือสอง</h3> <p>ออกแบบฐานข้อมูลและระบบหลังบ้าน จัดการสต็อก ข้อมูลสมาชิก และวิเคราะห์ข้อมูลออกรายงาน</p> <div class="project-tags"> <span class="tag">SQL</span> <span class="tag">Database</span> </div> <a href="#" class="project-link-text">ดูรายละเอียด ➜</a> </div> </article> <article class="project-card"> <div class="project-img-wrapper"> <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=600&q=80" alt="Network Topology" class="project-img"> </div> <div class="project-info"> <h3>การจัดสรรระบบเครือข่าย</h3> <p>ออกแบบ Network Topology แบ่งโซนความปลอดภัยด้วย VLAN และการทำ Subnetting</p> <div class="project-tags"> <span class="tag">Networking</span> <span class="tag">VLAN</span> </div> <a href="#" class="project-link-text">ดูรายละเอียด ➜</a> </div> </article> <article class="project-card"> <div class="project-img-wrapper"> <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=600&q=80" alt="Web App" class="project-img"> </div> <div class="project-info"> <h3>Responsive Web App</h3> <p>พัฒนาส่วนต่อประสานผู้ใช้ (UI/UX) ที่รองรับการแสดงผลทุกหน้าจอ ทำงานร่วมกับข้อมูล Dynamic</p> <div class="project-tags"> <span class="tag">HTML/CSS</span> <span class="tag">JavaScript</span> </div> <a href="#" class="project-link-text">ดูรายละเอียด ➜</a> </div> </article> </div> </section> <section id="contact" class="contact section container"> <h2 class="section-title">ติดต่อฉัน</h2> <p class="section-subtitle">สนใจร่วมงานหรือสอบถามข้อมูลเพิ่มเติม ติดต่อได้เลยครับ</p> <div class="section-subtitle-underline"></div> <div class="contact-grid"> <a href="mailto:chanokkun2548@gmail.com" class="contact-card email-card"> <div class="icon-circle email-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"> </path> <polyline points="22,6 12,13 2,6"></polyline> </svg> </div> <h3>Email</h3> <p>chanokkun2548@gmail.com</p> </a> <a href="tel:+66951637882" class="contact-card phone-card"> <div class="icon-circle phone-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"> </path> </svg> </div> <h3>Phone</h3> <p>095-163-7882</p> </a> </div> </section> </main> <nav class="bottom-nav"> <a href="#home" class="nav-link"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> </svg> </a> <a href="#about" class="nav-link"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </a> <a href="#skills" class="nav-link"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </svg> </a> <a href="#projects" class="nav-link"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="3" y1="9" x2="21" y2="9"></line> <line x1="9" y1="21" x2="9" y2="9"></line> </svg> </a> </nav> <footer class="footer container"> <p>© 2026 chanokkun. All rights reserved.</p> </footer> <script src="script.js"></script> </body> </html>

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