Skip to content

Repository files navigation

🎮 Interactive Web Project with React + Bun

โปรเจกต์เว็บอินเทอร์แอกทีฟ (Interactive Web) ที่พัฒนาโดยใช้ React (TypeScript) และรันผ่าน Bun ซึ่งเป็น JavaScript runtime ความเร็วสูง พร้อมจัดการเสียง ภาพเคลื่อนไหว และ UI ที่ตอบสนองต่อผู้ใช้งาน

React Bun TailwindCSS Framer Motion License: MIT


📽️ รายละเอียดโปรเจกต์

เว็บนี้จัดทำขึ้นเพื่อเป็นผลงาน นวัตกรรมสื่อสารนิพนธ์ ของนิสิตจากวิทยาลัยนวัตกรรมสื่อสารสังคม มหาวิทยาลัยศรีนครินทรวิโรฒ
มีเนื้อหาเกี่ยวกับ การเผชิญกับโรคหลอดเลือดสมองเฉียบพลัน (Stroke) โดยใช้ภาพ เสียง และเนื้อหาประกอบในรูปแบบอินเทอร์แอกทีฟ


✨ ฟีเจอร์หลัก

  • 🔊 ระบบเสียงเล่นเฉพาะหน้า (Audio Context)
  • 🎞️ ภาพเคลื่อนไหวลื่นไหลด้วย Framer Motion
  • 🍔 เมนู Hamburger เปิด-ปิดได้พร้อม Animation
  • 💡 อินเทอร์เฟซที่ออกแบบมาให้ใช้งานง่ายทั้งบน Desktop และ Mobile
  • ⚡️ ใช้ Bun เพื่อรันและจัดการ dependencies ได้รวดเร็วกว่า npm/yarn

🔧 Stack ที่ใช้

  • React + TypeScript
  • Bun – ใช้แทน npm/yarn
  • Tailwind CSS – สำหรับออกแบบ UI
  • Framer Motion – สำหรับ animation
  • React Router DOM – การจัดการหน้าเว็บ
  • React Icons – ไอคอนสวยๆ ใช้งานง่าย
  • Custom Audio Context – จัดการการเล่นเสียงแบบ global

🌍 เว็บไซต์ที่เผยแพร่ (Deploy)

✅ เว็บไซต์ถูก Deploy บน Vercel
🔗 เข้าใช้งานได้ที่: unexpected-day.vercel.app


🧑‍💻 วิธีติดตั้งและใช้งาน

1. ติดตั้ง Bun

###Bash curl -fsSL https://bun.sh/install | bash เปิด terminal ใหม่ แล้วเช็กว่า Bun ติดตั้งสำเร็จ:

bun --version
  1. Clone Repo
git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name
  1. ติดตั้ง dependencies
bun install
  1. รันโปรเจกต์
bun dev

หรือใช้คำสั่งอื่น ๆ ที่กำหนดใน package.json

👩‍🏫 ทีมผู้พัฒนา

รายชื่อ	                   หน้าที่
ชญานิน สุรขจร              โครงเรื่อง
ปัทมาพร ประทุมถิ่น	         บทบรรยาย
วรัญญา ตันติเฉลิม           เสียงประกอบ / ภาพ
ฐปนัท เดชประมวลพล	 ภาพประกอบ
จุลดิษฐ์ อุ่มวงศ์	         ผู้พัฒนาเว็บ
ดลฤทธิ์ อิทธิโชติ	         ผู้พัฒนาเว็บ

🙏 ขอขอบคุณ พญ.ศรัญญา ยุทธโกวิท จากสถาบันประสาทวิทยา สำหรับข้อมูลเกี่ยวกับโรคหลอดเลือดสมอง

🧠 คำอธิบายเสริม เว็บนี้เหมาะสำหรับการใช้นำเสนอแบบมีการโต้ตอบกับผู้ใช้ (interactive presentation)

Unexpected Day การเผชิญกับโรคหลอดเลือดสมองเฉียบพลัน


About

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages