Developer Hero

วิธีใช้

1. สร้างไฟล์แล้ววางโค้ด

   ใน Portfolio Starter สร้างไฟล์ components/HeroDeveloper.tsx กด Copy code ด้านบน แล้ววางทั้งหมด

2. Import มาใช้

   เปิด app/page.tsx เพิ่มบรรทัด import ไว้บนสุด แล้ววาง component ใน return

   import HeroDeveloper from "@/components/HeroDeveloper";
   
   export default function Home() {
     return (
       <main>
         <HeroDeveloper />
       </main>
     );
   }

   Copy

3. ใส่ข้อมูลของคุณผ่าน props

   ไม่ใส่ props ก็แสดงข้อมูลตัวอย่างได้ พอพร้อมแล้วส่งข้อมูลของคุณเข้าไปแบบนี้

   <HeroDeveloper
     name="Mint"
     skills={["HTML", "CSS", "Python"]}
     githubUrl="https://github.com/your-username"
   />

   Copy

Props

ทุก prop ไม่บังคับ (มี ? ในโค้ด) ถ้าไม่ใส่จะใช้ค่าตัวอย่างในวงเล็บ = … ของ function

Dependencies

ไม่ต้องติดตั้งอะไรเพิ่ม ใช้ได้กับ Portfolio Starter ทันที (Next.js + React + Tailwind CSS)