สร้างเว็บนำเสนอแบบสไลด์ ที่ไม่ต้องมีหลังบ้านเลยสักตัว

เว็บนำเสนอส่วนใหญ่ตายตอนเอาไปโชว์จริง — เน็ตห้องประชุมไม่มี, API หมดอายุ, ฐานข้อมูลถูกลบไปแล้ว โปรเจกต์นี้เลยตั้งโจทย์กลับด้าน: ทำเด็คนำเสนอที่ทำงานได้เต็มร้อยโดยไม่มี backend เลย แต่ยังแก้เนื้อหาได้ผ่านระบบหลังบ้านเหมือนเว็บจริง

Stack: Next.js 16 (App Router, Turbopack) · React 19 · TypeScript · Tailwind CSS 4 · Framer Motion

หน้าตาที่ได้

เด็คหลัก — 26 สไลด์ เลื่อนแนวนอน

ทั้งเว็บคือสไลด์เดียวกันหมด ไม่ใช่หน้าเว็บที่เลื่อนลง — กดลูกศรซ้าย/ขวา, กด F เข้าโหมดเต็มจอ, มีแถบ progress กับปุ่ม autoplay ด้านล่าง เอาไปฉายบนโปรเจกเตอร์ได้เลยโดยไม่ต้องเปิด Keynote

สไลด์เนื้อหา

ทุกข้อความในภาพเป็น placeholder ตั้งใจ (นี่คือหัวข้อ, รายละเอียด 01) เพราะตัวนี้คือ เทมเพลต ไม่ใช่พอร์ตของใครคนหนึ่ง เปิดมาแล้วเห็นโครงว่าช่องไหนใส่อะไร แล้วค่อยแทนที่ด้วยของจริง

การ์ดผลงาน พร้อมสไลด์โชว์รูปในตัว

แต่ละรายการมีได้หลายรูป เลื่อนเองอัตโนมัติ (ตั้งค่าความเร็ว/เปิด-ปิดได้ในหลังบ้าน)

แกลเลอรีภาพ

หน้าข้อมูล — สถิติและรายการย้อนหลัง

ระบบมีสถานะ 5 แบบ (สถานะ 1–5) ใช้คำนวณสถิติ กราฟ และตัวกรอง — ตั้งชื่อใหม่ได้ตามงานที่คุณติดตามจริง

ธีมที่สอง — สลับได้ทั้งเว็บ

ข้อมูลชุดเดียวกัน แต่เรนเดอร์คนละภาษาการออกแบบ: ฟอนต์ serif คอนทราสต์สูง, สีกระดาษเก่า, จัดเป็น "บท" ใช้ตอนอยากได้บรรยากาศเป็นทางการกว่าเด็คสีเขียว

4. ปุ่มลอยที่แอบอยู่ข้างจอ

คนที่เปิดเด็คมาครั้งแรกมีคำถามอยู่ 3 ข้อ: แก้ยังไง, ล็อกอินยังไง, ธีมอีกอันหน้าตาไง ปุ่มเฟืองมุมจอตอบครบทั้งสามโดยไม่ต้องอธิบายด้วยปาก

ตอนไม่ได้ใช้มันจะ เลื่อนออกนอกจอครึ่งนึงและจางเหลือ opacity 0.28 เห็นเป็นเงาลาง ๆ พอเมาส์เข้าใกล้ค่อยเลื่อนกลับมาเต็ม ย้ายไปมุมไหนก็ได้ ซ่อนได้ (กด Shift+D เรียกกลับ) — ค่านี้เก็บใน localStorage ผ่าน useSyncExternalStore เพราะมันเป็นความชอบของ "คนดู" ไม่ใช่เนื้อหาของเด็ค การย้ายปุ่มจึงไม่ควรไปแตะข้อมูล