# Han Portfolio (PHP + XAMPP)

เว็บไซต์พอร์ตโฟลิโอส่วนตัวแบบ Responsive ทำงานด้วยภาษา PHP 8+ ดีไซน์ทันสมัยด้วยสไตล์ Glassmorphism ตกแต่งด้วย Bootstrap 5, Font Awesome 6 และ AOS Animation มีฟีเจอร์ครบครัน เช่น Dark/Light Mode, Typing Animation, Stats Counter, Custom Lightbox Gallery, และ Contact Form (บันทึกข้อมูลอัตโนมัติโดยไม่ใช้ฐานข้อมูล)

## โครงสร้างโปรเจกต์ (File Structure)

```
portfolio/
├── index.php                 # ไฟล์หลักของเว็บไซต์ (รวบรวมทุกส่วนและจัดการ Contact Form)
├── 404.php                   # หน้าแสดงข้อผิดพลาดเมื่อไม่พบข้อมูล (Custom 404 Page)
├── includes/
│   ├── header.php            # ส่วนหัว (HTML Head, Meta Tags, Navigation Bar)
│   └── footer.php            # ส่วนท้าย (Footer, Scripts, Back to Top Button)
├── assets/
│   ├── css/
│   │   └── style.css         # ไฟล์สไตล์หลัก (รองรับ Light/Dark mode, Glassmorphism, Responsive)
│   ├── js/
│   │   └── script.js         # ไฟล์สคริปต์หลัก (Theme toggler, Lightbox, Counters, AJAX)
│   └── images/
│       └── profile.jpg       # รูปประจำตัว (ดึงจากรูปเดิมในเครื่องของผู้ใช้)
└── README.md                 # ไฟล์คำแนะนำโครงการนี้
```

## ความต้องการของระบบ (Prerequisites)
- XAMPP (ติดตั้ง PHP 8.0 ขึ้นไป และ Apache Web Server)

## วิธีติดตั้งและเริ่มใช้งาน (Installation & Setup)

1. **คัดลอกโฟลเดอร์โปรเจกต์**
   นำโฟลเดอร์ `portfolio` ไปวางในไดเรกทอรี `htdocs` ของ XAMPP:
   - สำหรับ Windows: `C:\xampp\htdocs\portfolio`

2. **เปิดระบบ Apache**
   เปิดโปรแกรม **XAMPP Control Panel** และกดปุ่ม **Start** ที่หน้า Apache Web Server

3. **เข้าใช้งานเว็บไซต์**
   เปิดเว็บเบราว์เซอร์แล้วเข้าใช้งานผ่าน URL:
   - `http://localhost/portfolio/`

---

## คุณสมบัติและฟีเจอร์เด่น (Key Features)

* **Responsive Design:** แสดงผลได้อย่างสวยงามทั้งบน Desktop, Tablet และ Mobile
* **Dark / Light Mode:** สลับโทนสีสว่าง/มืดได้ผ่านปุ่มตรงเมนูด้านบน และจดจำการตั้งค่าล่าสุดด้วย `localStorage`
* **Loading Screen:** หน้าโหลดที่สวยงามพร้อมโลโก้ตัวตนเพื่อเพิ่มความพรีเมียม
* **Typing Animation:** แอนิเมชันพิมพ์ตัวอักษรของสายงานหลักในหน้าแรก (Hero)
* **Glassmorphism & Gradient Effects:** ออกแบบการจัดวางข้อมูลด้วยดีไซน์กระจกโปร่งแสงและพื้นหลังไล่โทนสีทอง-น้ำเงินเข้ม
* **Timeline & Skills Animation:** การแสดงประวัติการศึกษาแบบ Timeline และกราฟแสดงผลทักษะที่จะเลื่อนเข้าเมื่อมีปฏิสัมพันธ์การสกรอลล์
* **Lightbox Gallery:** ผลงานต่าง ๆ สามารถกดซูมภาพดูรูปขนาดใหญ่ได้ทันทีแบบ Pop-up ไม่ต้องเปลี่ยนหน้า
* **Contact Form (PHP-Based):** ฟอร์มติดต่อสามารถกรอกส่งข้อความได้จริง โดยภาษา PHP จะรับข้อมูลและบันทึกเก็บไว้ในไฟล์ `submissions.json` ภายในโฟลเดอร์ของโปรเจกต์ เพื่อไม่ให้ต้องเชื่อมต่อฐานข้อมูล SQL ให้ยุ่งยาก

---

## ข้อมูลนักพัฒนา (Developer Information)
* **ชื่อ:** นายหาญ (Han)
* **ความฝัน:** YouTuber, Streamer, Digital Artist, Content Creator
* **ติดต่อ:** [paladinxx03@gmail.com](mailto:paladinxx03@gmail.com)