File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090029/Portfolio/index.html

Back
<!DOCTYPE html> <html lang="th" data-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Thanakrit \| Full-Stack Developer & UI/UX Designer Portfolio</title> <!-- Meta Tags for SEO --> <meta name="description" content="Portfolio ส่วนตัวของ ธนกฤต พิสิฐเศรษฐพงศ์ - นักพัฒนา Full-Stack Developer และ UI/UX Designer ที่มีความเชี่ยวชาญด้าน React, Next.js, Node.js และ Tailwind CSS"> <meta name="keywords" content="Full-Stack Developer, UI/UX Designer, React, Node.js, Tailwind CSS, Portfolio, ธนกฤต พิสิฐเศรษฐพงศ์,Thanakrit Pisitsetthapong, thanakrit pisitsetthapong, thanakrit, Thanakrit, pisitsetthapong, Pisitsetthapong"> <meta name="author" content="Thanakrit Pisitsetthapong"> <!-- 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;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <!-- Lucide Icons CDN --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Custom CSS --> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- Header / Sticky Navigation Bar --> <header class="header" id="header"> <div class="nav-container container"> <a href="#hero" class="logo"> <span class="logo-accent"><</span>Thanakrit Pisitsetthapong<span class="logo-accent">/></span> </a> <!-- Desktop Menu --> <nav class="nav-menu-desktop"> <ul> <li><a href="#hero" class="nav-link active">หน้าแรก</a></li> <li><a href="#about" class="nav-link">เกี่ยวกับฉัน</a></li> <li><a href="#skills" class="nav-link">ทักษะ</a></li> <li><a href="#portfolio" class="nav-link">ผลงาน</a></li> <li><a href="#contact" class="nav-link">ติดต่อฉัน</a></li> </ul> </nav> <!-- Actions (Theme Toggle & Hamburger) --> <div class="nav-actions"> <!-- Theme Toggle Switcher --> <button id="theme-toggle" class="theme-btn" aria-label="สลับโหมดมืด/สว่าง"> <i data-lucide="moon" class="icon-moon"></i> <i data-lucide="sun" class="icon-sun"></i> </button> <!-- Hamburger Menu for Mobile --> <button id="menu-toggle" class="hamburger-btn" aria-label="เปิดเมนู"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> </div> </div> <!-- Mobile Dropdown Menu --> <nav class="nav-menu-mobile" id="nav-menu-mobile"> <ul> <li><a href="#hero" class="mobile-nav-link active">หน้าแรก</a></li> <li><a href="#about" class="mobile-nav-link">เกี่ยวกับฉัน</a></li> <li><a href="#skills" class="mobile-nav-link">ทักษะ</a></li> <li><a href="#portfolio" class="mobile-nav-link">ผลงาน</a></li> <li><a href="#contact" class="mobile-nav-link">ติดต่อฉัน</a></li> </ul> </nav> </header> <main> <!-- Hero Section --> <section id="hero" class="hero-section"> <div class="hero-bg-gradients"> <div class="gradient-sphere sphere-1"></div> <div class="gradient-sphere sphere-2"></div> </div> <div class="container hero-container"> <div class="hero-content"> <div class="badge"> <span class="badge-dot"></span> พร้อมรับงานและร่วมงานใหม่ </div> <h1 class="hero-title"> ธนกฤต<br> <span class="text-gradient">พิสิฐเศรษฐพงศ์</span> </h1> <p class="hero-subtitle"> สวัสดีครับ ผมชื่อ <strong>ธนกฤต พิสิฐเศรษฐพงศ์</strong> เป็น นักศึกษาวิทยาลัยเทคนิคเชียงใหม่ในระดับชั้นปวส.1 สาขาเทคโนโลยีคอมพิวเตอร์ ผมรักในการเปลี่ยนไอเดียที่ซับซ้อนให้กลายเป็นเว็บแอปพลิเคชันที่ใช้งานง่าย สวยงาม และเปี่ยมด้วยประสิทธิภาพ </p> <div class="hero-actions"> <a href="#portfolio" class="btn btn-primary"> <span>ผลงาน</span> <i data-lucide="arrow-right"></i> </a> <a href="#contact" class="btn btn-secondary"> <span>ติดต่อฉัน</span> </a> </div> </div> <div class="hero-avatar-area"> <div class="avatar-frame-glow"></div> <div class="avatar-wrapper"> <img src="images/Maxwell.png" alt="Thanakrit Pisitsetthapong Avatar" class="profile-img default-img"> <img src="images/maxwell-cat.gif" alt="Thanakrit Pisitsetthapong Cat Hover" class="profile-img hover-img"> </div> </div> </div> <div class="scroll-down-indicator"> <a href="#about" aria-label="เลื่อนลง"> <div class="mouse-icon"> <div class="wheel"></div> </div> </a> </div> </section> <!-- About Me Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="section-header"> <span class="sub-title">ABOUT ME</span> <h2 class="section-title">ประวัติและความมุ่งมั่นของผม</h2> <div class="header-line"></div> </div> <div class="about-grid"> <div class="about-info-card"> <h3>การหลอมรวมของ Hardware, Software และท่วงทำนอง</h3> <p> สวัสดีครับ ผมชื่อ <strong>ธนกฤต พิสิฐเศรษฐพงศ์</strong> ปัจจุบันกำลังศึกษาในระดับ ปวส. ปีที่ 1 สาขาเทคโนโลยีคอมพิวเตอร์ วิทยาลัยเทคนิคเชียงใหม่ </p> <p> จุดเริ่มต้นของผมมาจากความสนใจในระบบวงจรและสัญญาณจากสาขาช่างอิเล็กทรอนิกส์ (ระดับ ปวช. วิทยาลัยเทคนิคสารภี) ซึ่งปูพื้นฐานให้ผมคิดอย่างเป็นระบบ เข้าใจโครงสร้าง และการเชื่อมต่อที่ถูกต้อง จากนั้นผมได้นำตรรกะทางวิศวกรรมนี้มาประยุกต์ใช้ในโลกของซอฟต์แวร์ โดยมุ่งเน้นเป็นพิเศษทางด้าน <strong>Back-end Development ด้วยภาษา Python</strong> </p> <p> นอกจากเรื่องเทคโนโลยีแล้ว ผมยังมีทักษะทางดนตรีคือการเล่น <strong>กีต้าร์เบส</strong> ซึ่งมีบทบาทสำคัญเป็นโครงสร้างและผู้คุมจังหวะ (Groove) ของวงดนตรี ทักษะนี้ช่วยฝึกฝนให้ผมเป็นคนที่มีความละเอียดรอบคอบ ทำงานประสานจังหวะการรับส่งข้อมูล (Data Flow) ในระบบหลังบ้านได้อย่างแม่นยำและเสถียร </p> <div class="personal-details-grid"> <div class="detail-item"> <span class="detail-label">ตำแหน่ง</span> <span class="detail-val">Back-end Developer (Python)</span> </div> <div class="detail-item"> <span class="detail-label">อีเมล</span> <span class="detail-val">69319090029@cmtc.ac.th</span> </div> <div class="detail-item"> <span class="detail-label">ที่อยู่</span> <span class="detail-val">เชียงใหม่, ประเทศไทย</span> </div> <div class="detail-item"> <span class="detail-label">เป้าหมายสูงสุด</span> <span class="detail-val">System Architect / Senior Backend</span> </div> </div> </div> <div class="experience-stats-grid"> <div class="stat-card"> <span class="stat-number">ปวส. 1</span> <span class="stat-label">วิทยาลัยเทคนิคเชียงใหม่<br>(คอมพิวเตอร์)</span> </div> <div class="stat-card"> <span class="stat-number">ปวช.</span> <span class="stat-label">วิทยาลัยเทคนิคสารภี<br>(อิเล็กทรอนิกส์)</span> </div> <div class="stat-card"> <span class="stat-number">Python</span> <span class="stat-label">ภาษาโปรแกรมฝั่งหลังบ้านหลัก</span> </div> <div class="stat-card"> <span class="stat-number">Bass</span> <span class="stat-label">ความละเอียดรอบคอบและคุมจังหวะ</span> </div> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills" class="skills-section section-padding"> <div class="container"> <div class="section-header"> <span class="sub-title">MY SKILLS</span> <h2 class="section-title">ทักษะความสามารถทางเทคนิค</h2> <div class="header-line"></div> </div> <div class="skills-layout"> <!-- Tech Stack Grid Cards --> <div class="skills-grid"> <div class="skill-card"> <div class="skill-icon-box skill-node"> <i data-lucide="code"></i> </div> <div class="skill-info"> <h4>Python (Back-end)</h4> <p>พัฒนา APIs และระบบหลังบ้านด้วย FastAPI, Flask หรือ Django ได้อย่างมีประสิทธิภาพ</p> </div> </div> <div class="skill-card"> <div class="skill-icon-box skill-react"> <i data-lucide="cpu"></i> </div> <div class="skill-info"> <h4>Electronics Foundation</h4> <p>ออกแบบวงจร ตรวจสอบสัญญาณ บัดกรี แผงวงจร และเขียนโปรแกรม Microcontrollers</p> </div> </div> <div class="skill-card"> <div class="skill-icon-box skill-db"> <i data-lucide="database"></i> </div> <div class="skill-info"> <h4>Database Management</h4> <p>ออกแบบและจัดการฐานข้อมูลเชิงสัมพันธ์ SQL (MySQL/PostgreSQL) และ NoSQL</p> </div> </div> <div class="skill-card"> <div class="skill-icon-box skill-cloud"> <i data-lucide="git-branch"></i> </div> <div class="skill-info"> <h4>Git & Team Work</h4> <p>ควบคุมเวอร์ชันของโค้ดด้วย Git/GitHub ทำงานร่วมกับผู้อื่นได้อย่างมีระบบ</p> </div> </div> <div class="skill-card"> <div class="skill-icon-box skill-tailwind"> <i data-lucide="music"></i> </div> <div class="skill-info"> <h4>Bass Guitar Precision</h4> <p>ฝึกฝนความละเอียดรอบคอบ การรักษาจังหวะ (Tempo) และการประคองระบบร่วมกับวง</p> </div> </div> <div class="skill-card"> <div class="skill-icon-box skill-figma"> <i data-lucide="terminal"></i> </div> <div class="skill-info"> <h4>Computer Systems</h4> <p>เข้าใจการทำางานของระบบปฏิบัติการ โครงสร้างคอมพิวเตอร์ และเน็ตเวิร์กพื้นฐาน</p> </div> </div> </div> <!-- Progress Bars Details --> <div class="skills-progress-area"> <h3 class="progress-title">ระดับความสนใจและความเชี่ยวชาญ</h3> <div class="progress-wrapper"> <div class="progress-info"> <span>Python Back-end Development</span> <span>85%</span> </div> <div class="progress-track"> <div class="progress-fill" style="width: 85%"></div> </div> </div> <div class="progress-wrapper"> <div class="progress-info"> <span>Electronics & Microcontroller Programming</span> <span>80%</span> </div> <div class="progress-track"> <div class="progress-fill" style="width: 80%"></div> </div> </div> <div class="progress-wrapper"> <div class="progress-info"> <span>Database & API Design</span> <span>75%</span> </div> <div class="progress-track"> <div class="progress-fill" style="width: 75%"></div> </div> </div> <div class="progress-wrapper"> <div class="progress-info"> <span>System Precision & Rhythm (Bass Mindset)</span> <span>90%</span> </div> <div class="progress-track"> <div class="progress-fill" style="width: 90%"></div> </div> </div> </div> </div> </div> </section> <!-- Portfolio Section --> <section id="portfolio" class="portfolio-section section-padding"> <div class="container"> <div class="section-header"> <span class="sub-title">PORTFOLIO</span> <h2 class="section-title">ผลงานล่าสุดของผม</h2> <div class="header-line"></div> </div> <div class="projects-grid"> <!-- Project Card 1 --> <div class="project-card" data-category="web-design"> <div class="project-img-wrapper"> <img src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?auto=format&fit=crop&w=800&q=80" alt="Web Design Project" class="project-img"> <div class="project-overlay"> <div class="overlay-links"> <a href="#" class="overlay-link-btn" aria-label="ดูรายละเอียด"><i data-lucide="arrow-right"></i></a> </div> </div> </div> <div class="project-details"> <span class="project-category">Web Design</span> <h3 class="project-title">E-Commerce Web Application</h3> <p class="project-desc">ระบบร้านค้าออนไลน์ที่ออกแบบเน้นความเรียบง่าย ค้นหาสินค้าได้รวดเร็ว และมีขั้นตอนการชำระเงินที่สะดวกสบาย</p> <div class="project-actions"> <a href="#" class="btn-text"> <span>ดูรายละเอียด</span> <i data-lucide="arrow-right"></i> </a> </div> </div> </div> <!-- Project Card 2 --> <div class="project-card" data-category="app-development"> <div class="project-img-wrapper"> <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=800&q=80" alt="App Development Project" class="project-img"> <div class="project-overlay"> <div class="overlay-links"> <a href="#" class="overlay-link-btn" aria-label="ดูรายละเอียด"><i data-lucide="arrow-right"></i></a> </div> </div> </div> <div class="project-details"> <span class="project-category">App Development</span> <h3 class="project-title">Fitness Tracking Mobile App</h3> <p class="project-desc">แอปพลิเคชันสำหรับบันทึกการออกกำลังกาย คำนวณแคลอรี่ และติดตามเป้าหมายสุขภาพรายวันแบบส่วนตัว</p> <div class="project-actions"> <a href="#" class="btn-text"> <span>ดูรายละเอียด</span> <i data-lucide="arrow-right"></i> </a> </div> </div> </div> <!-- Project Card 3 --> <div class="project-card" data-category="backend-api"> <div class="project-img-wrapper"> <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=800&q=80" alt="Backend API Project" class="project-img"> <div class="project-overlay"> <div class="overlay-links"> <a href="#" class="overlay-link-btn" aria-label="ดูรายละเอียด"><i data-lucide="arrow-right"></i></a> </div> </div> </div> <div class="project-details"> <span class="project-category">Backend API</span> <h3 class="project-title">FastAPI Authentication Service</h3> <p class="project-desc">บริการจัดการผู้ใช้และสิทธิ์การเข้าถึงความปลอดภัยสูง รองรับ OAuth2, JWT และเชื่อมต่อฐานข้อมูล PostgreSQL</p> <div class="project-actions"> <a href="#" class="btn-text"> <span>ดูรายละเอียด</span> <i data-lucide="arrow-right"></i> </a> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="section-header"> <span class="sub-title">CONTACT ME</span> <h2 class="section-title">มาร่วมงานและพูดคุยกัน</h2> <div class="header-line"></div> </div> <div class="contact-grid"> <!-- Contact Cards info --> <div class="contact-info-area"> <h3>มีโปรเจกต์ในใจหรืออยากปรึกษาพูดคุย?</h3> <p class="contact-intro-text"> สามารถติดต่อสอบถามรายละเอียด แจ้งความต้องการของโปรเจกต์ หรือเพียงแค่ต้องการทำความรู้จัก ทักทายมาได้เลยครับ! ผมจะพยายามตอบกลับโดยเร็วที่สุดภายใน 24 ชั่วโมง </p> <div class="contact-methods"> <div class="contact-item-card"> <div class="contact-item-icon"> <i data-lucide="mail"></i> </div> <div class="contact-item-details"> <span>ส่งอีเมลหาฉัน</span> <a href="mailto:69319090029@cmtc.ac.th">69319090029@cmtc.ac.th</a> </div> </div> <div class="contact-item-card"> <div class="contact-item-icon"> <i data-lucide="map-pin"></i> </div> <div class="contact-item-details"> <span>สถานที่ติดต่อ</span> <p>เชียงใหม่, ประเทศไทย</p> </div> </div> <div class="contact-item-card"> <div class="contact-item-icon"> <i data-lucide="phone"></i> </div> <div class="contact-item-details"> <span>เบอร์โทรศัพท์</span> <a href="tel:+66812345678">082-4836063</a> </div> </div> </div> <!-- Social Links --> <div class="social-links-area"> <h4>ช่องทางโซเชียลมีเดีย</h4> <div class="social-row"> <a href="https://www.facebook.com/thn.k.vt.phisith.sers.th.phngs" target="_blank" rel="noopener noreferrer" class="social-icon-btn social-facebook" aria-label="Facebook"> <i data-lucide="facebook"></i> </a> <a href="https://github.com/RuiRenolveRus" target="_blank" rel="noopener noreferrer" class="social-icon-btn social-github" aria-label="GitHub"> <i data-lucide="github"></i> </a> <a href="mailto:69319090029@cmtc.ac.th" class="social-icon-btn social-gmail" aria-label="Gmail"> <svg class="gmail-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20"> <path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" /> </svg> </a> </div> </div> </div> <!-- Contact Form Area --> <div class="contact-form-card"> <form id="portfolio-contact-form" novalidate> <div class="form-group"> <label for="form-name" class="form-label">ชื่อของคุณ</label> <div class="input-wrapper"> <i data-lucide="user" class="input-icon"></i> <input type="text" id="form-name" class="form-input" placeholder="สมชาย รักเรียน" required> </div> <span class="error-msg" id="name-error">กรุณากรอกชื่อของคุณ</span> </div> <div class="form-group"> <label for="form-email" class="form-label">อีเมลติดต่อ</label> <div class="input-wrapper"> <i data-lucide="mail" class="input-icon"></i> <input type="email" id="form-email" class="form-input" placeholder="somchai@example.com" required> </div> <span class="error-msg" id="email-error">กรุณากรอกอีเมลที่ถูกต้อง</span> </div> <div class="form-group"> <label for="form-subject" class="form-label">หัวข้อข้อความ</label> <div class="input-wrapper"> <i data-lucide="help-circle" class="input-icon"></i> <input type="text" id="form-subject" class="form-input" placeholder="ปรึกษาทำเว็บแอปพลิเคชัน" required> </div> <span class="error-msg" id="subject-error">กรุณากรอกหัวข้อ</span> </div> <div class="form-group"> <label for="form-message" class="form-label">รายละเอียดข้อความ</label> <div class="input-wrapper text-area-wrapper"> <textarea id="form-message" class="form-input form-textarea" placeholder="เขียนรายละเอียดเกี่ยวกับโปรเจกต์หรือเรื่องที่คุณต้องการพูดคุย..." rows="5" required></textarea> </div> <span class="error-msg" id="message-error">กรุณากรอกข้อความรายละเอียด</span> </div> <button type="submit" class="btn btn-primary btn-block" id="form-submit-btn"> <span>ส่งข้อความหาฉัน</span> <i data-lucide="send" id="send-icon"></i> <span class="spinner hidden" id="send-spinner"></span> </button> </form> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="footer"> <div class="container footer-container"> <div class="footer-brand"> <a href="#hero" class="logo"> <span class="logo-accent"><</span>Thanakrit Pisitsetthapong<span class="logo-accent">.K /></span> </a> <p>สร้างสรรค์ผลงานด้วยความใส่ใจในทุกรายละเอียดจากนักออกแบบและพัฒนาไทย</p> </div> <div class="footer-links-row"> <div class="footer-links-col"> <h4>เมนูนำทาง</h4> <ul> <li><a href="#hero">หน้าแรก</a></li> <li><a href="#about">เกี่ยวกับฉัน</a></li> <li><a href="#skills">ทักษะ</a></li> <li><a href="#portfolio">ผลงาน</a></li> </ul> </div> <div class="footer-links-col"> <h4>บริการ</h4> <ul> <li><a href="#">Frontend Development</a></li> <li><a href="#">Backend APIs</a></li> <li><a href="#">UI/UX Interface Design</a></li> <li><a href="#">Full-Stack Custom Apps</a></li> </ul> </div> </div> </div> <div class="footer-bottom"> <div class="container footer-bottom-container"> <p>© 2026 Thanakrit Pisitsetthapong K. สงวนลิขสิทธิ์ทั้งหมด. พัฒนาด้วย ❤️ และ CSS ที่ดีที่สุด</p> <div class="footer-bottom-links"> <a href="#">นโยบายความเป็นส่วนตัว</a> <a href="#">เงื่อนไขการใช้งาน</a> </div> </div> </div> </footer> <!-- Back to Top Floating Button --> <button id="back-to-top" class="back-to-top-btn" aria-label="กลับสู่ด้านบน"> <i data-lucide="chevron-up"></i> </button> <!-- Toast Notification Container --> <div id="toast-container" class="toast-container"></div> <!-- Bottom Navigation Bar (Mobile Only) --> <nav class="bottom-nav" id="bottom-nav" role="navigation" aria-label="เมนูล่าง"> <a href="#hero" class="bottom-nav-item active" id="bnav-home" aria-label="หน้าแรก"> <i data-lucide="home"></i> <span>หน้าแรก</span> </a> <a href="#about" class="bottom-nav-item" id="bnav-about" aria-label="เกี่ยวกับฉัน"> <i data-lucide="user"></i> <span>เกี่ยวกับ</span> </a> <a href="#skills" class="bottom-nav-item" id="bnav-skills" aria-label="ทักษะ"> <i data-lucide="code-2"></i> <span>ทักษะ</span> </a> <a href="#portfolio" class="bottom-nav-item" id="bnav-portfolio" aria-label="ผลงาน"> <i data-lucide="layout-grid"></i> <span>ผลงาน</span> </a> <a href="#contact" class="bottom-nav-item" id="bnav-contact" aria-label="ติดต่อฉัน"> <i data-lucide="mail"></i> <span>ติดต่อ</span> </a> </nav> <!-- Custom JS --> <script src="js/app.js"></script> <!-- Bottom Nav Active State via Scroll --> <script> (function () { const bnavItems = document.querySelectorAll('.bottom-nav-item'); const sections = ['hero', 'about', 'skills', 'portfolio', 'contact']; function setActive(id) { bnavItems.forEach(el => { el.classList.remove('active'); if (el.getAttribute('href') === '#' + id) { el.classList.add('active'); } }); } // Click handler bnavItems.forEach(item => { item.addEventListener('click', function () { bnavItems.forEach(el => el.classList.remove('active')); this.classList.add('active'); }); }); // Scroll-based active tracking const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { setActive(entry.target.id); } }); }, { rootMargin: '-40% 0px -55% 0px', threshold: 0 }); sections.forEach(id => { const el = document.getElementById(id); if (el) observer.observe(el); }); // Re-init Lucide icons for bottom nav if (typeof lucide !== 'undefined') lucide.createIcons(); })(); </script> </body> </html>

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