กำลังเปิดครัว กรุณารอสักครู่

กลับหน้าแรก
อ้างอิงผลงาน

ของจริงทุกชิ้น ดูคลิปหน้าจริงได้เลย

ผลงานทั้งหมดข้างล่างนี้ ตามสั่งลงมือทำเองตั้งแต่ออกแบบ เขียนโค้ด จนถึงดีพลอยขึ้นออนไลน์ ไม่มีชิ้นไหนซื้อเทมเพลตมาแปะ — แตะการ์ดไหนก็ได้ (หรือเอาเมาส์ชี้บนคอม) จะเห็นคลิปหน้านั้นถูกเลื่อนจริง ภาพที่เห็นคือหน้าจอจริงของงานนั้น ณ วันที่ทำหน้านี้

งานเว็บไซต์ (งานสาธิต)

เว็บที่เราออกแบบและเขียนเองทั้งหมดเพื่อแสดงระดับงาน — แบรนด์ในทุกชิ้นเป็นของสมมติ

งานสาธิต · เว็บร้านอาหาร · 1 หน้า หน้าแรกเว็บร้านอาหารครัวบ้านสวน มีภาพสำรับกับข้าวไทย หัวเรื่องภาษาไทย และปุ่มจองโต๊ะ

ครัวบ้านสวน — เว็บร้านอาหารไทย

หน้าเดียวจบสำหรับร้านอาหาร: ภาพบรรยากาศ → เมนูแนะนำพร้อมราคา → ที่ตั้งและเวลาเปิด ปุ่มโทรจองโต๊ะกับแอดไลน์อยู่ในระยะนิ้วโป้งตลอดหน้า

แบรนด์สมมติ สร้างขึ้นเพื่อโชว์ระดับงาน ไม่ใช่งานลูกค้า
ทำเอง: วางเนื้อหา · ดีไซน์ · โค้ด · เทค: HTML/CSS/JS ล้วน, token 3 ชั้น, ปรับตามจอ, ผ่านสคริปต์ตรวจ "ตก 0"
เปิดงานสาธิต
ช่วงบนของหน้า — krua-baansuan ช่วงกลางของหน้า — krua-baansuan ช่วงล่างของหน้า — krua-baansuan
งานสาธิต · เว็บรับเหมาก่อสร้าง · 1 หน้า หน้าแรกเว็บ Homecraft Design & Build แสดงหัวเรื่องรับเหมาก่อสร้าง ปุ่มโทร และภาพบ้านหลังใหญ่

Homecraft Design & Build — เว็บรับเหมาก่อสร้าง/รีโนเวท

เว็บหน้าเดียว 9 บล็อก ไล่จากปัญหาที่เจ้าของบ้านเจอจริง → ขอบเขตงาน 8 บริการ → ประเภทงาน → ราคา → คำถามที่พบบ่อย → ปุ่มโทร/แอดไลน์ ไฟล์เดียวจบ รูปฝังในไฟล์ ไม่มี build step

แบรนด์สมมติ สร้างขึ้นเพื่อโชว์ระดับงาน ไม่ใช่งานลูกค้า
ทำเอง: เก็บข้อมูลธุรกิจ · เขียนเนื้อหา · ดีไซน์ · โค้ด · ไอคอน 9 ตัววาดเอง · เทค: HTML/CSS/JS ล้วน, ไฟล์เดียว, ปรับตามจอ, มาตรฐานการเข้าถึง a11y
เปิดงานสาธิต
ช่วงบนของหน้า — homecraft ช่วงกลางของหน้า — homecraft ช่วงล่างของหน้า — homecraft
งานสาธิต · เว็บเวนิวจัดงาน · 5 หน้า หน้าแรกเว็บเดอะ เทอเรส ฉบับหลายหน้า มีเมนูชี้ไปห้าหน้าแยกกัน

เดอะ เทอเรส — เวนิวจัดงานแต่งและงานเลี้ยง

เว็บเวนิวแบบ 5 หน้าจริงที่มี URL ของตัวเอง หน้าละ title/description/OG แยกกัน มีหน้ารายละเอียดรายห้อง breadcrumb และ sitemap ให้ Google เก็บครบทุกหน้า

แบรนด์สมมติ สร้างขึ้นเพื่อโชว์ระดับงาน ไม่ใช่งานลูกค้า
ทำเอง: วางเนื้อหา · ดีไซน์ · โค้ด · เทค: HTML/CSS/JS ล้วน, ประกอบจากเปลือกร่วมด้วยสคริปต์ (header/เมนู/footer อยู่ที่เดียว), URL แบบโฟลเดอร์ใช้ได้ทุกโฮสต์, ผ่านสคริปต์ตรวจ "ตก 0"
เปิดงานสาธิต
หน้าแรก — เดอะ เทอเรส ฉบับ 5 หน้า หน้าสถานที่ — เดอะ เทอเรส ฉบับ 5 หน้า หน้าแพ็กเกจและเมนู — เดอะ เทอเรส ฉบับ 5 หน้า หน้ารีวิวและวิธีทำงาน — เดอะ เทอเรส ฉบับ 5 หน้า หน้าติดต่อ — เดอะ เทอเรส ฉบับ 5 หน้า
งานสาธิต · เว็บอู่ซ่อมรถ · 1 หน้า หน้าแรกเว็บอู่ช่างชัด พื้นมืด ภาพช่างใช้ประแจปอนด์ขันล้อ หัวเรื่อง รู้ราคาก่อนเราแตะรถ และแผ่นตัวเลขสามบรรทัด

อู่ช่างชัด — เว็บอู่ซ่อมรถยนต์

หน้าเดียวที่แก้ความกลัวเรื่องเดียวของเจ้าของรถ คือกลัวราคาบานปลาย — กดเลือกอาการรถกับกลุ่มรถแล้วได้ช่วงราคาจริงทันทีโดยไม่ต้องโทรถาม ต่อด้วยใบเสนอราคาที่แยกค่าแรงกับค่าอะไหล่ทุกบรรทัด ใบตรวจ 30 จุดแบบเขียว-เหลือง-แดง และหน้าติดตามสถานะรถว่าซ่อมถึงขั้นไหนแล้ว

แบรนด์สมมติ สร้างขึ้นเพื่อโชว์ระดับงาน ไม่ใช่งานลูกค้า
ทำเอง: วางเนื้อหา · ดีไซน์ · โค้ด · เทค: HTML/CSS/JS ล้วน, token 3 ชั้น, เครื่องมือประเมินราคาเขียนเอง, ปรับตามจอ, ผ่านสคริปต์ตรวจ "ตก 0"
เปิดงานสาธิต
ช่วงบนของหน้า — chang-chat ช่วงกลางของหน้า — chang-chat ช่วงล่างของหน้า — chang-chat
งานสาธิต · อสังหาริมทรัพย์ · 1 หน้า หน้าแรกเว็บ The Bed ภาพอาคารเต็มจอ พร้อมเมนูที่ชี้ไปแต่ละส่วนในหน้าเดียว

The Bed — เว็บที่พักหรู

เว็บนำเสนอที่พักและอสังหาริมทรัพย์แบบหน้าเดียวจบ — ภาพอาคารเต็มจอ ไล่ดูห้องแต่ละแบบ สิ่งอำนวยความสะดวก และเสียงผู้อยู่อาศัย ปิดท้ายด้วยปุ่มนัดเข้าชม ที่พักมีเรื่องเดียวจะเล่าและปลายทางเดียวคือ "โทรมานัดดูห้อง" หน้าเดียวที่แน่นจึงทำงานได้ดีกว่าแยกเป็นหลายหน้า

แบรนด์สมมติ สร้างขึ้นเพื่อโชว์ระดับงาน ไม่ใช่งานลูกค้า
ทำเอง: วางเนื้อหา · ดีไซน์ · โค้ด · เทค: Tailwind แช่แข็งเป็นไฟล์นิ่ง, ฮีโร่ parallax บนเส้นทาง compositor, วัด contrast จริงทุกคู่สี, ผ่านสคริปต์ตรวจ "ตก 0"
เปิดงานสาธิต
งานสาธิต · ร้านค้าหน้าเดียว · 1 หน้า หน้าแรกเว็บ VELVET LEAF แสดงชื่อร้าน ภาพหน้าร้าน และเวลาเปิดทำการ

VELVET LEAF — เว็บร้านบูทีคหน้าเดียว

เว็บร้านครบในหน้าเดียว: หน้าร้าน เรื่องราวแบรนด์ เมนูสินค้าพร้อมราคา เวลาทำการ และแผนที่ ต่อด้วยระบบเลือกสินค้าใส่ตะกร้าไว้ก่อนไปหน้าร้าน พร้อมด่านยืนยันอายุตามกฎหมายก่อนเข้าเว็บ

ร้านสมมติ ทำไว้สาธิต — เนื้อหาและสินค้าไม่ใช่ของร้านจริง
ทำเอง: ดีไซน์ · โค้ด · จัดหน้าข้อมูลสินค้า · เทค: React, Vite, Tailwind CSS, TypeScript
เปิดงานสาธิต
ช่วงบนของหน้า — velvet-leaf ช่วงกลางของหน้า — velvet-leaf ช่วงล่างของหน้า — velvet-leaf
งานสาธิต · SaaS · WebGL · 1 หน้า หน้าเว็บ Lumen แสดงเอฟเฟกต์แสงแบบ WebGL

Lumen — เว็บซอฟต์แวร์ สมัครใช้ออนไลน์

หน้าเว็บขายซอฟต์แวร์ที่ใช้เอฟเฟกต์แสงแบบ WebGL เป็นตัวเล่าคุณค่าสินค้า พร้อมตารางราคาและส่วนคำถามที่พบบ่อย

แบรนด์สมมติ สร้างขึ้นเพื่อโชว์ระดับงาน ไม่ใช่งานลูกค้า
เหมาะกับ: ซอฟต์แวร์ ระบบสมาชิกรายเดือน · เทค: WebGL, เว็บล้วน
เปิดงานสาธิต
ช่วงบนของหน้า — lumen ช่วงกลางของหน้า — lumen ช่วงล่างของหน้า — lumen
งานสาธิต · ร้านค้าออนไลน์ + หลังบ้าน · 5 หน้า หน้าแรกร้านเกม GAMEDOCK บนพื้นสีเข้ม มีแถบค้นหาและการ์ดสินค้าเรียงเป็นกริด

GAMEDOCK — ร้านเกมออนไลน์ พร้อมระบบหลังร้าน

ร้านขายเกมและเครื่องเกมที่กดใช้ได้จริงทั้งเส้น — ค้นหาและกรองตามเครื่องได้จริง สินค้าทุกชิ้นมีหน้าของตัวเองพร้อมตัวเลือกเวอร์ชัน เลือกสินค้า ใส่ตะกร้า กรอกที่อยู่ เลือกวิธีจ่ายเงิน แล้วออเดอร์เข้าไปโผล่ในระบบหลังร้านทันที เจ้าของร้านล็อกอินเข้าไป แก้ชื่อ ราคา และจำนวนคงเหลือได้เอง กดบันทึกแล้วหน้าร้านเปลี่ยนตามทันทีโดยไม่ต้องเรียกคนทำเว็บ มีระบบสมาชิกให้ลูกค้าดูประวัติการสั่งซื้อและสถานะพัสดุของตัวเอง (ลองระบบหลังร้านได้ที่ /admin.html บัญชีทดลอง demo / demo) ขอบเขต: ระบบหลังบ้านแก้เนื้อหารวมอยู่ในแพ็กเกจ ฿9,900 ส่วนตะกร้า ระบบชำระเงิน และระบบสมาชิก คิดเพิ่มตามฟังก์ชันที่สั่ง ตกลงราคาก่อนทำเสมอ ข้อจำกัดของงานสาธิต: ใบนี้เก็บออเดอร์และบัญชีสมาชิกไว้ในเบราว์เซอร์ของเครื่องที่เปิดดู ยังไม่ได้ต่อฐานข้อมูลบนเซิร์ฟเวอร์ เปิดคนละเครื่องจึงไม่เห็นออเดอร์เดียวกัน — งานจริงต่อฐานข้อมูลให้ ข้อมูลอยู่กลางและเห็นตรงกันทุกเครื่อง

เหมาะกับ: ร้านค้าออนไลน์ ร้านที่ต้องแก้ราคา/สต็อกเองบ่อย · เทค: เว็บล้วน, ระบบตะกร้า, หลังบ้านแก้สินค้า, ระบบสมาชิก
เปิดงานสาธิต
หน้าแรกร้าน GAMEDOCK — แถบค้นหาและสินค้าแนะนำ แถวลดราคาวันนี้และกริดสินค้า — GAMEDOCK หน้าสินค้ารายตัว มีตัวเลือกเวอร์ชันและรีวิว — GAMEDOCK หน้าตะกร้าและชำระเงิน — GAMEDOCK ระบบหลังร้าน แก้ราคาและสต็อกเองได้ — GAMEDOCK

แอปของเราเอง ที่ใช้งานอยู่จริง

สองตัวนี้ไม่ใช่งานสาธิต — เป็นแอปที่เราสร้างและใช้เองทุกวัน มีคนเข้าใช้ได้จริงตอนนี้ ไม่ใช่ภาพนิ่งหรือไฟล์ดีไซน์

แอปของเราเอง · PWA หน้าจอแอป Ijek แสดงแดชบอร์ดเป้าหมายและสถิติการฝึก

Ijek — เว็บแอปฝึกวินัยตัวเอง

ตั้งเป้าหมาย บันทึกผลรายวัน และดูสถิติย้อนหลัง ติดตั้งลงมือถือได้เหมือนแอปจริง เปิดใช้ได้ตอนเน็ตหลุด ข้อมูลซิงก์ข้ามเครื่อง

ทำเอง: ดีไซน์ · โค้ด · ฐานข้อมูล · ดีพลอย · เทค: เว็บแอป, PWA + Service Worker, Cloudflare Workers
เปิดแอปจริง
แอปของเราเอง · การศึกษา หน้าแดชบอร์ดแอป ScoreUp แสดงกราฟจุดอ่อนรายทักษะและคะแนนคาดการณ์

ScoreUp — แอปติว TOEIC

แดชบอร์ดวัดจุดอ่อนรายทักษะ คลังข้อสอบพร้อมเฉลย ระบบ XP และลีก บันทึกผลสอบลงชีตให้ผู้ดูแลดูย้อนหลังได้ ใช้ออฟไลน์และติดตั้งลงมือถือได้

ทำเอง: ดีไซน์ · โค้ด · คลังข้อสอบ · ระบบหลังบ้าน · เทค: เว็บแอป, PWA, Firebase Auth, Google Sheets
นัดดูสด (กำลังย้ายโฮสต์)

ทำไมไม่มีคำว่า “ผลงานส่วนใหญ่อยู่ภายใต้ NDA”
เพราะเราเปิดให้ดูได้หมดจริงๆ ทุกชิ้นบนหน้านี้มีคลิปหน้าจริงกับภาพเต็มหน้าให้ดูเดี๋ยวนี้ ไม่ต้องเชื่อคำบรรยาย และถ้าคุณจ้างเรา งานของคุณก็จะขึ้นหน้านี้ได้ก็ต่อเมื่อคุณอนุญาตเท่านั้น

อยากได้แบบไหน ทักมาคุยได้เลย — ติดต่อตามสั่ง