Portfolio Website

เจ้าของผลงานเล่าไว้แบบนี้

ตัวอย่างการสร้าง Portfolio โดยใช้ Claude https://goragodwiriya.github.io/portfolio/ # การพัฒนา Portfolio Website ด้วย AI คู่มือนี้จะแนะนำวิธีการใช้ AI (Claude) ในการสร้าง Portfolio Website แบบ SPA (Single Page Application) ที่มีคุณสมบัติครบถ้วน โดยไม่ต้องใช้ไลบรารีภายนอก ## การใช้ AI สร้างเว็บไซต์ Portfolio ### ขั้นตอนในการ Prompt AI 1. **Prompt เริ่มต้น - ภาพรวมของโปรเจ็ค** ``` ช่วยออกแบบ portfolio สวยๆ ให้หน่อย ให้ดูน่าสนใจ รองรับ darkmode ไม่ต้องใช้ไลบรารี่ภายนอก สามารถใช้ icon-font และ font ภายนอกได้ รองรับการใช้งานบนมือถือ อ่านง่าย ใช้งานง่าย เป็นเว็บแบบ spa มีตัวอย่าง product ที่เคยออกแบบ แยกโค้ดออกเป็นไฟล์แต่ละไฟล์ให้ด้วย ``` 2. **Prompt ต่อเนื่อง - เพิ่มคุณสมบัติเฉพาะทาง** ``` เพื่มส่วนแสดง vdo.mp4 บนเว็บไซต์ให้หน่อย ``` 3. **Prompt สุดท้าย - สร้างเอกสารประกอบ** ``` สร้างไฟล์ README.md สำหรับโปรเจ็คนี้ให้หน่อย โดยระบบขั้นตอนการดำเนินการทั้งหมด ``` ### เทคนิคการ Prompt ที่มีประสิทธิภาพ 1. **ระบุความต้องการที่ชัดเจน** - ระบุคุณสมบัติที่ต้องการ เช่น darkmode, responsive, SPA อย่างชัดเจน 2. **แยกคำขอเป็นส่วนๆ** - แบ่ง prompt เป็นส่วนย่อยๆ แทนที่จะขอทุกอย่างในครั้งเดียว 3. **ขอให้แยกไฟล์** - ระบุให้ AI แยกโค้ดเป็นไฟล์ต่างๆ ทำให้จัดการได้ง่ายกว่า 4. **ขอเพิ่มคุณสมบัติเฉพาะ** - เมื่อได้พื้นฐานแล้ว สามารถขอเพิ่มคุณสมบัติเฉพาะได้ เช่น ส่วนแสดงวิดีโอ ## โครงสร้างโปรเจ็คที่ได้ ``` portfolio/ ├── index.html # โครงสร้างหลักของเว็บไซต์ ├── css/ │ └── styles.css # สไตล์ของเว็บไซต์ รวมถึง darkmode ├── js/ │ ├── main.js # ฟังก์ชันหลักของเว็บไซต์ │ └── spa.js # ระบบ SPA (Single P

โดย goragodwiriya · ดูโพสต์ต้นทาง