ผลงานทั้งหมด

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

สร้างเว็บนำเสนอแบบสไลด์ ที่ไม่ต้องมีหลังบ้านเลยสักตัวเว็บนำเสนอส่วนใหญ่ตายตอนเอาไปโชว์จริง — เน็ตห้องประชุมไม่มี, 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 เพราะมันเป็นความชอบของ "คนดู" ไม่ใช่เนื้อหาของเด็ค การย้ายปุ่มจึงไม่ควรไปแตะข้อมูล