About Split Layout

AboutMedium

รูปใหญ่ซ้าย ข้อความกับตัวเลขเด่นขวา บนมือถือเรียงบนลงล่าง

วิธีใช้

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

export default function Home() {
  return (
    <main>
      <AboutSplit />
    </main>
  );
}
```
ใส่ข้อมูลของคุณผ่าน props
ไม่ใส่ props ก็แสดงข้อมูลตัวอย่างได้ พอพร้อมแล้วส่งข้อมูลของคุณเข้าไปแบบนี้
```
<AboutSplit
  heading="Hi, I'm Mint"
  paragraphs={["I love art and code.", "I want to study Computer Engineering."]}
  image="/me.jpg"
/>
```

Prop	Type	ใช้ทำอะไร
`heading`	`string`	หัวข้อ
`paragraphs`	`string[]`	ย่อหน้า ใส่กี่ย่อหน้าก็ได้
`image`	`string`	path รูปใน `public/` เช่น `"/me.jpg"` ไม่ใส่ก็ได้ จะแสดงสีหรือตัวอักษรแทน
`stats`	`{ value: string; label: string }[]`	ตัวเลขเด่น 3 ช่อง
`accent`	`string`	สีหลัก เป็นรหัสสี เช่น `"#4f46e5"`

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

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