File manager - Edit - /home/webapp69.cm.in.th/u69319090026/portfolio/69319090026/README.md
Back
# 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)
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.24 |
proxy
|
phpinfo
|
Settings