Markdown CV

ปัญหาของ CV ทั่วไป

CV ส่วนใหญ่อยู่ใน:

• Word/Google Docs — format พัง เมื่อเปิดบน machine อื่น
• Canva — ต้อง login, ไม่มี version control
• PDF เก่า — แก้ยาก ไม่รู้ว่า source ต้นฉบับอยู่ที่ไหน
• Overleaf/LaTeX — เขียนยาก syntax ซับซ้อน

ใช้ Markdown + Astro แก้ปัญหาทั้งหมด:

• เปลี่ยนข้อมูลใน Markdown ไฟล์เดียว
• Version control ด้วย git
• Print เป็น PDF จาก browser ได้ทันที

Structure

src/
├── pages/
│   └── cv.astro          — render CV เป็น HTML
├── content/
│   └── cv/
│       └── index.md      — ข้อมูล CV ทั้งหมด
└── styles/
    └── cv.css            — style สำหรับ screen และ print

เนื้อหา CV ใน Markdown

---
name: Panupong Wongsorn
title: Frontend Developer
location: Thailand
github: panupongws98
website: panupongws.com
---

## Experience

### Frontend Developer — XYZ Company
**Jan 2024 – Present**

- สร้าง component library ด้วย Astro + TypeScript
- ปรับปรุง Lighthouse score จาก 62 เป็น 97

## Skills

**Frontend:** Astro, TypeScript, HTML/CSS, React
**Tools:** Git, VS Code, tmux, Figma
**Languages:** Thai (native), English (intermediate)

Print Styles

/* cv.css */
@media print {
  /* ซ่อน nav, footer */
  header, footer, .no-print { display: none !important; }

  /* ป้องกัน page break กลางหัวข้อ */
  h2, h3 { break-after: avoid; }
  .experience-item { break-inside: avoid; }

  /* ปรับขนาด font สำหรับ print */
  body { font-size: 11pt; line-height: 1.4; }
  a { color: inherit; text-decoration: none; }

  /* พิมพ์ URL ท้าย link */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

ข้อดีของ approach นี้

Single source of truth — Markdown ไฟล์เดียวสำหรับทุก version ไม่มีไฟล์ซ้ำ

Diff ง่าย — git diff cv/index.md เห็นได้ทันทีว่าแก้อะไร

Print บน browser — Ctrl+P → Save as PDF — เลือก paper size A4 margin ปรับได้

Dark mode — เนื่องจากเป็น HTML ธรรมดา dark mode ทำงานได้เลย

สิ่งที่เรียนรู้

break-inside: avoid ช่วยได้มากสำหรับ print — ป้องกันหัวข้อขาดตอนกลาง page

CSS Grid สำหรับ 2-column layout ทำงานดีบน screen แต่ต้องทดสอบ print ด้วย เพราะบาง browser จัดการ Grid กับ print แตกต่างกัน

@page rule ตั้ง margin ของ page ได้:

@page {
  size: A4;
  margin: 1.5cm;
}