Minimal Hero

HeroEasy

รูป ชื่อ ตำแหน่ง และปุ่ม 2 ปุ่ม เรียบและอ่านง่าย

วิธีใช้

สร้างไฟล์แล้ววางโค้ด
ใน Portfolio Starter สร้างไฟล์ components/HeroMinimal.tsx กด Copy code ด้านบน แล้ววางทั้งหมด
Import มาใช้
เปิด app/page.tsx เพิ่มบรรทัด import ไว้บนสุด แล้ววาง component ใน return
```
import HeroMinimal from "@/components/HeroMinimal";

export default function Home() {
  return (
    <main>
      <HeroMinimal />
    </main>
  );
}
```
ใส่ข้อมูลของคุณผ่าน props
ไม่ใส่ props ก็แสดงข้อมูลตัวอย่างได้ พอพร้อมแล้วส่งข้อมูลของคุณเข้าไปแบบนี้
```
<HeroMinimal
  name="Mint"
  role="Grade 11 student who loves design"
  bio="I make posters and websites for my school clubs."
  image="/me.jpg"
/>
```

Prop	Type	ใช้ทำอะไร
`name`	`string`	ชื่อของคุณ
`role`	`string`	ประโยคสั้น ๆ ว่าคุณเป็นใคร
`bio`	`string`	แนะนำตัว 1–2 ประโยค
`image`	`string`	path รูปใน `public/` เช่น `"/me.jpg"` ไม่ใส่ก็ได้ จะแสดงสีหรือตัวอักษรแทน
`primaryLabel / primaryHref`	`string`	ปุ่มสีดำ
`secondaryLabel / secondaryHref`	`string`	ปุ่มขอบ

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

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