<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Goragod Wiriya - Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body class="light-mode">
<header>
<div class="container">
<div class="logo">
<h1>Goragod<span>.dev</span></h1>
</div>
<nav>
<ul>
<li><a href="#home" class="active">หน้าแรก</a></li>
<li><a href="#about">เกี่ยวกับ</a></li>
<li><a href="#skills">ทักษะ</a></li>
<li><a href="#showcase">วิดีโอ</a></li>
<li><a href="#projects">โปรเจกต์</a></li>
<li><a href="#contact">ติดต่อ</a></li>
</ul>
</nav>
<div class="theme-toggle">
<button id="theme-toggle-btn">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
</button>
</div>
<div class="menu-toggle">
<button id="menu-toggle-btn">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<main>
<section id="home" class="hero">
<div class="container">
<div class="hero-content">
<h2>สวัสดี, ฉันคือ <span>Goragod Wiriya</span></h2>
<h3>PHP & JavaScript Developer</h3>
<p>ผู้พัฒนา Kotchasan Framework และผู้เชี่ยวชาญด้านการพัฒนาเว็บแอปพลิเคชัน</p>
<div class="hero-btns">
<a href="#projects" class="btn btn-primary">ดูผลงาน</a>
<a href="#contact" class="btn btn-outline">ติดต่อ</a>
</div>
<div class="social-links">
<a href="https://github.com/goragodwiriya" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://kotchasan.com" target="_blank"><i class="fas fa-globe"></i></a>
</div>
</div>
<div class="hero-image">
<img src="images/profile.png" alt="Goragod Wiriya">
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2 class="section-title">เกี่ยวกับฉัน</h2>
<div class="about-content">
<div class="about-text">
<p>ผู้พัฒนา Kotchasan Framework ที่ใช้ภาษา PHP เป็นหลัก มีประสบการณ์การพัฒนาเว็บไซต์และเว็บแอปพลิเคชันมากกว่า 10 ปี</p>
<p>ฉันมีความเชี่ยวชาญในการพัฒนาเว็บแอปพลิเคชันแบบ Full Stack โดยใช้ PHP และ JavaScript รวมถึงการออกแบบ UI/UX ที่เน้นความเรียบง่ายและใช้งานได้จริง</p>
<div class="about-info">
<div class="info-item">
<h4>ประสบการณ์:</h4>
<p>10+ ปี</p>
</div>
<div class="info-item">
<h4>งานปัจจุบัน:</h4>
<p>นักพัฒนาและผู้ก่อตั้ง Kotchasan Framework</p>
</div>
<div class="info-item">
<h4>การศึกษา:</h4>
<p>วิทยาการคอมพิวเตอร์</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="skills" class="skills">
<div class="container">
<h2 class="section-title">ทักษะและความเชี่ยวชาญ</h2>
<div class="skills-container">
<div class="skill-category">
<h3>การพัฒนาเว็บแอปพลิเคชัน</h3>
<div class="skill-items">
<div class="skill-item">
<div class="skill-icon"><i class="fab fa-php"></i></div>
<h4>PHP</h4>
<div class="skill-progress">
<div class="progress" style="width: 95%;"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-icon"><i class="fab fa-js"></i></div>
<h4>JavaScript</h4>
<div class="skill-progress">
<div class="progress" style="width: 90%;"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-icon"><i class="fab fa-html5"></i></div>
<h4>HTML5</h4>
<div class="skill-progress">
<div class="progress" style="width: 90%;"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-icon"><i class="fab fa-css3-alt"></i></div>
<h4>CSS3</h4>
<div class="skill-progress">
<div class="progress" style="width: 85%;"></div>
</div>
</div>
</div>
</div>
<div class="skill-category">
<h3>เครื่องมือและเทคโนโลยี</h3>
<div class="skill-items">
<div class="skill-item">
<div class="skill-icon"><i class="fas fa-database"></i></div>
<h4>MySQL</h4>
<div class="skill-progress">
<div class="progress" style="width: 90%;"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-icon"><i class="fab fa-git-alt"></i></div>
<h4>Git</h4>
<div class="skill-progress">
<div class="progress" style="width: 85%;"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-icon"><i class="fas fa-server"></i></div>
<h4>Linux Server</h4>
<div class="skill-progress">
<div class="progress" style="width: 80%;"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-icon"><i class="fas fa-paint-brush"></i></div>
<h4>UI/UX Design</h4>
<div class="skill-progress">
<div class="progress" style="width: 75%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="showcase" class="showcase">
<div class="container">
<h2 class="section-title">การนำเสนอผลงาน</h2>
<div class="video-container">
<video id="showcase-video" controls>
<source src="videos/vdo.mp4" type="video/mp4">
เบราว์เซอร์ของคุณไม่รองรับการเล่นวิดีโอ
</video>
<div class="video-description">
<h3>การสาธิตผลงาน</h3>
<p>วิดีโอนี้แสดงตัวอย่างการใช้งาน Cluade AI ในการข่วยสร้าง Portfilio นี้ เพียงแค่ Prompt สิ่งที่ต้องการ และรอให้ AI สร้างให้เสร็จ จากนั้นถึงนำไฟล์ที่เกี่ยวข้องมาใส่ลงในโปรเจ็คให้สมบูรณ์</p>
</div>
</div>
</div>
</section>
<section id="projects" class="projects">
<div class="container">
<h2 class="section-title">โปรเจกต์ที่โดดเด่น</h2>
<div class="projects-filter">
<button class="filter-btn active" data-filter="all">ทั้งหมด</button>
<button class="filter-btn" data-filter="framework">Framework</button>
<button class="filter-btn" data-filter="webapp">Web App</button>
<button class="filter-btn" data-filter="other">อื่นๆ</button>
</div>
<div class="projects-grid">
<div class="project-card" data-category="framework">
<div class="project-img">
<img src="images/kotchasan.png" alt="Kotchasan Framework">
</div>
<div class="project-content">
<h3>Kotchasan Framework</h3>
<p>PHP Framework สำหรับการพัฒนาเว็บแอปพลิเคชันที่เน้นความเรียบง่ายและประสิทธิภาพ</p>
<div class="project-tags">
<span>PHP</span>
<span>Framework</span>
<span>MVC</span>
</div>
<div class="project-links">
<a href="https://github.com/goragodwiriya/kotchasan" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://kotchasan.com" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
<div class="project-card" data-category="webapp">
<div class="project-img">
<img src="images/inventory.png" alt="Inventory System">
</div>
<div class="project-content">
<h3>ระบบบริหารจัดการสินค้าคงคลัง</h3>
<p>ระบบบริหารจัดการสินค้าคงคลังที่ครบวงจร พัฒนาด้วย Kotchasan Framework</p>
<div class="project-tags">
<span>PHP</span>
<span>JavaScript</span>
<span>MySQL</span>
</div>
<div class="project-links">
<a href="https://github.com/goragodwiriya/inventory" target="_blank"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="project-card" data-category="webapp">
<div class="project-img">
<img src="images/booking.png" alt="Booking System">
</div>
<div class="project-content">
<h3>ระบบจองออนไลน์</h3>
<p>ระบบจองห้องประชุมและทรัพยากรต่างๆ ภายในองค์กร</p>
<div class="project-tags">
<span>PHP</span>
<span>Ajax</span>
<span>Calendar</span>
</div>
<div class="project-links">
<a href="https://github.com/goragodwiriya/booking" target="_blank"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="project-card" data-category="other">
<div class="project-img">
<img src="images/gcms.png" alt="GCMS">
</div>
<div class="project-content">
<h3>GCMS</h3>
<p>ระบบจัดการเนื้อหาเว็บไซต์ที่ยืดหยุ่นและปรับแต่งได้</p>
<div class="project-tags">
<span>PHP</span>
<span>CMS</span>
<span>Website</span>
</div>
<div class="project-links">
<a href="https://github.com/goragodwiriya/GCMS" target="_blank"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">ติดต่อฉัน</h2>
<div class="contact-container">
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-text">
<h3>อีเมล</h3>
<p>contact@goragod.dev</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fab fa-github"></i>
</div>
<div class="contact-text">
<h3>GitHub</h3>
<p><a href="https://github.com/goragodwiriya" target="_blank">github.com/goragodwiriya</a></p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-globe"></i>
</div>
<div class="contact-text">
<h3>เว็บไซต์</h3>
<p><a href="https://kotchasan.com" target="_blank">kotchasan.com</a></p>
</div>
</div>
</div>
<div class="contact-form">
<form id="contactForm">
<div class="form-group">
<label for="name">ชื่อ</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">อีเมล</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">หัวข้อ</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">ข้อความ</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">ส่งข้อความ</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<h2>Goragod<span>.dev</span></h2>
<p>นักพัฒนา PHP & JavaScript</p>
</div>
<div class="footer-social">
<a href="https://github.com/goragodwiriya" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://kotchasan.com" target="_blank"><i class="fas fa-globe"></i></a>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Goragod Wiriya. All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>