[{"data":1,"prerenderedAt":757},["ShallowReactive",2],{"portfolio-baan-design-studio":3,"all-portfolio":737},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":7,"category":9,"client":10,"timeline":11,"role":12,"date":13,"url":14,"tags":15,"body":22,"_type":731,"_id":732,"_source":733,"_file":734,"_stem":735,"_extension":736},"\u002Fportfolio\u002Fbaan-design-studio","portfolio",false,"","Baan Design Studio — Portfolio Website สำหรับสตูดิโอออกแบบ","Web","Baan Design Studio","4 สัปดาห์","Frontend Development, Animation, Performance Optimization","2024-02-28","https:\u002F\u002Fbaan-design.example.com",[16,17,18,19,20,21],"Nuxt 3","GSAP","Lenis","Tailwind CSS","Cloudflare Pages","TypeScript",{"type":23,"children":24,"toc":721},"root",[25,34,40,45,52,57,63,82,350,356,361,511,517,522,573,578,701,715],{"type":26,"tag":27,"props":28,"children":30},"element","h2",{"id":29},"โจทย์-เว็บที่ต้องขายงานได้ด้วยตัวเอง",[31],{"type":32,"value":33},"text","โจทย์: เว็บที่ต้องขายงานได้ด้วยตัวเอง",{"type":26,"tag":35,"props":36,"children":37},"p",{},[38],{"type":32,"value":39},"Baan Design Studio เป็นสตูดิโอออกแบบภายในที่มีผลงานโดดเด่น แต่เว็บไซต์เดิมทำให้ผลงานดูด้อยค่า พวกเขาต้องการเว็บที่ \"สวยพอๆ กับงานที่เราทำ\" และต้องโหลดเร็วพอที่จะไม่ทำให้ลูกค้าหนีก่อนเห็นงาน",{"type":26,"tag":27,"props":41,"children":43},{"id":42},"สิ่งที่เราทำ",[44],{"type":32,"value":42},{"type":26,"tag":46,"props":47,"children":49},"h3",{"id":48},"animation-first-design-process",[50],{"type":32,"value":51},"Animation-first Design Process",{"type":26,"tag":35,"props":53,"children":54},{},[55],{"type":32,"value":56},"เราเริ่มจากการ prototype animation ใน CodePen ก่อน แล้วค่อย implement จริง เพราะ animation ที่ดีต้องออกแบบมาพร้อมกับ layout ไม่ใช่ add-on ทีหลัง",{"type":26,"tag":46,"props":58,"children":60},{"id":59},"horizontal-scroll-gallery",[61],{"type":32,"value":62},"Horizontal Scroll Gallery",{"type":26,"tag":35,"props":64,"children":65},{},[66,68,74,76,80],{"type":32,"value":67},"ใช้ ",{"type":26,"tag":69,"props":70,"children":71},"strong",{},[72],{"type":32,"value":73},"GSAP ScrollTrigger",{"type":32,"value":75}," + ",{"type":26,"tag":69,"props":77,"children":78},{},[79],{"type":32,"value":18},{"type":32,"value":81}," ทำ horizontal pinned section ที่ scroll ตาม vertical ได้ลื่นไหล:",{"type":26,"tag":83,"props":84,"children":88},"pre",{"className":85,"code":86,"language":87,"meta":7,"style":7},"language-javascript shiki shiki-themes github-light github-dark","gsap.to('.gallery-track', {\n  x: () => -(gallery.scrollWidth - window.innerWidth),\n  ease: 'none',\n  scrollTrigger: {\n    trigger: '.gallery-section',\n    start: 'top top',\n    end: () => `+=${gallery.scrollWidth - window.innerWidth}`,\n    pin: true,\n    scrub: 1,\n  },\n})\n","javascript",[89],{"type":26,"tag":90,"props":91,"children":92},"code",{"__ignoreMap":7},[93,127,167,186,195,213,231,295,314,332,341],{"type":26,"tag":94,"props":95,"children":98},"span",{"class":96,"line":97},"line",1,[99,105,111,116,122],{"type":26,"tag":94,"props":100,"children":102},{"style":101},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[103],{"type":32,"value":104},"gsap.",{"type":26,"tag":94,"props":106,"children":108},{"style":107},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[109],{"type":32,"value":110},"to",{"type":26,"tag":94,"props":112,"children":113},{"style":101},[114],{"type":32,"value":115},"(",{"type":26,"tag":94,"props":117,"children":119},{"style":118},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[120],{"type":32,"value":121},"'.gallery-track'",{"type":26,"tag":94,"props":123,"children":124},{"style":101},[125],{"type":32,"value":126},", {\n",{"type":26,"tag":94,"props":128,"children":130},{"class":96,"line":129},2,[131,136,141,147,152,157,162],{"type":26,"tag":94,"props":132,"children":133},{"style":107},[134],{"type":32,"value":135},"  x",{"type":26,"tag":94,"props":137,"children":138},{"style":101},[139],{"type":32,"value":140},": () ",{"type":26,"tag":94,"props":142,"children":144},{"style":143},"--shiki-default:#D73A49;--shiki-dark:#F97583",[145],{"type":32,"value":146},"=>",{"type":26,"tag":94,"props":148,"children":149},{"style":143},[150],{"type":32,"value":151}," -",{"type":26,"tag":94,"props":153,"children":154},{"style":101},[155],{"type":32,"value":156},"(gallery.scrollWidth ",{"type":26,"tag":94,"props":158,"children":159},{"style":143},[160],{"type":32,"value":161},"-",{"type":26,"tag":94,"props":163,"children":164},{"style":101},[165],{"type":32,"value":166}," window.innerWidth),\n",{"type":26,"tag":94,"props":168,"children":170},{"class":96,"line":169},3,[171,176,181],{"type":26,"tag":94,"props":172,"children":173},{"style":101},[174],{"type":32,"value":175},"  ease: ",{"type":26,"tag":94,"props":177,"children":178},{"style":118},[179],{"type":32,"value":180},"'none'",{"type":26,"tag":94,"props":182,"children":183},{"style":101},[184],{"type":32,"value":185},",\n",{"type":26,"tag":94,"props":187,"children":189},{"class":96,"line":188},4,[190],{"type":26,"tag":94,"props":191,"children":192},{"style":101},[193],{"type":32,"value":194},"  scrollTrigger: {\n",{"type":26,"tag":94,"props":196,"children":198},{"class":96,"line":197},5,[199,204,209],{"type":26,"tag":94,"props":200,"children":201},{"style":101},[202],{"type":32,"value":203},"    trigger: ",{"type":26,"tag":94,"props":205,"children":206},{"style":118},[207],{"type":32,"value":208},"'.gallery-section'",{"type":26,"tag":94,"props":210,"children":211},{"style":101},[212],{"type":32,"value":185},{"type":26,"tag":94,"props":214,"children":216},{"class":96,"line":215},6,[217,222,227],{"type":26,"tag":94,"props":218,"children":219},{"style":101},[220],{"type":32,"value":221},"    start: ",{"type":26,"tag":94,"props":223,"children":224},{"style":118},[225],{"type":32,"value":226},"'top top'",{"type":26,"tag":94,"props":228,"children":229},{"style":101},[230],{"type":32,"value":185},{"type":26,"tag":94,"props":232,"children":234},{"class":96,"line":233},7,[235,240,244,248,253,258,263,268,272,277,281,286,291],{"type":26,"tag":94,"props":236,"children":237},{"style":107},[238],{"type":32,"value":239},"    end",{"type":26,"tag":94,"props":241,"children":242},{"style":101},[243],{"type":32,"value":140},{"type":26,"tag":94,"props":245,"children":246},{"style":143},[247],{"type":32,"value":146},{"type":26,"tag":94,"props":249,"children":250},{"style":118},[251],{"type":32,"value":252}," `+=${",{"type":26,"tag":94,"props":254,"children":255},{"style":101},[256],{"type":32,"value":257},"gallery",{"type":26,"tag":94,"props":259,"children":260},{"style":118},[261],{"type":32,"value":262},".",{"type":26,"tag":94,"props":264,"children":265},{"style":101},[266],{"type":32,"value":267},"scrollWidth",{"type":26,"tag":94,"props":269,"children":270},{"style":143},[271],{"type":32,"value":151},{"type":26,"tag":94,"props":273,"children":274},{"style":101},[275],{"type":32,"value":276}," window",{"type":26,"tag":94,"props":278,"children":279},{"style":118},[280],{"type":32,"value":262},{"type":26,"tag":94,"props":282,"children":283},{"style":101},[284],{"type":32,"value":285},"innerWidth",{"type":26,"tag":94,"props":287,"children":288},{"style":118},[289],{"type":32,"value":290},"}`",{"type":26,"tag":94,"props":292,"children":293},{"style":101},[294],{"type":32,"value":185},{"type":26,"tag":94,"props":296,"children":298},{"class":96,"line":297},8,[299,304,310],{"type":26,"tag":94,"props":300,"children":301},{"style":101},[302],{"type":32,"value":303},"    pin: ",{"type":26,"tag":94,"props":305,"children":307},{"style":306},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[308],{"type":32,"value":309},"true",{"type":26,"tag":94,"props":311,"children":312},{"style":101},[313],{"type":32,"value":185},{"type":26,"tag":94,"props":315,"children":317},{"class":96,"line":316},9,[318,323,328],{"type":26,"tag":94,"props":319,"children":320},{"style":101},[321],{"type":32,"value":322},"    scrub: ",{"type":26,"tag":94,"props":324,"children":325},{"style":306},[326],{"type":32,"value":327},"1",{"type":26,"tag":94,"props":329,"children":330},{"style":101},[331],{"type":32,"value":185},{"type":26,"tag":94,"props":333,"children":335},{"class":96,"line":334},10,[336],{"type":26,"tag":94,"props":337,"children":338},{"style":101},[339],{"type":32,"value":340},"  },\n",{"type":26,"tag":94,"props":342,"children":344},{"class":96,"line":343},11,[345],{"type":26,"tag":94,"props":346,"children":347},{"style":101},[348],{"type":32,"value":349},"})\n",{"type":26,"tag":46,"props":351,"children":353},{"id":352},"image-reveal-animation",[354],{"type":32,"value":355},"Image Reveal Animation",{"type":26,"tag":35,"props":357,"children":358},{},[359],{"type":32,"value":360},"ทุกรูปเข้าด้วย clip-path animation ที่ทำให้รู้สึกเหมือน \"เปิดม่าน\":",{"type":26,"tag":83,"props":362,"children":366},{"className":363,"code":364,"language":365,"meta":7,"style":7},"language-css shiki shiki-themes github-light github-dark","@keyframes reveal {\n  from { clip-path: inset(0 100% 0 0); }\n  to   { clip-path: inset(0 0% 0 0); }\n}\n","css",[367],{"type":26,"tag":90,"props":368,"children":369},{"__ignoreMap":7},[370,389,450,503],{"type":26,"tag":94,"props":371,"children":372},{"class":96,"line":97},[373,378,384],{"type":26,"tag":94,"props":374,"children":375},{"style":143},[376],{"type":32,"value":377},"@keyframes",{"type":26,"tag":94,"props":379,"children":381},{"style":380},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[382],{"type":32,"value":383}," reveal",{"type":26,"tag":94,"props":385,"children":386},{"style":101},[387],{"type":32,"value":388}," {\n",{"type":26,"tag":94,"props":390,"children":391},{"class":96,"line":129},[392,397,402,407,412,417,421,426,431,436,441,445],{"type":26,"tag":94,"props":393,"children":394},{"style":107},[395],{"type":32,"value":396},"  from",{"type":26,"tag":94,"props":398,"children":399},{"style":101},[400],{"type":32,"value":401}," { ",{"type":26,"tag":94,"props":403,"children":404},{"style":306},[405],{"type":32,"value":406},"clip-path",{"type":26,"tag":94,"props":408,"children":409},{"style":101},[410],{"type":32,"value":411},": ",{"type":26,"tag":94,"props":413,"children":414},{"style":306},[415],{"type":32,"value":416},"inset",{"type":26,"tag":94,"props":418,"children":419},{"style":101},[420],{"type":32,"value":115},{"type":26,"tag":94,"props":422,"children":423},{"style":306},[424],{"type":32,"value":425},"0",{"type":26,"tag":94,"props":427,"children":428},{"style":306},[429],{"type":32,"value":430}," 100",{"type":26,"tag":94,"props":432,"children":433},{"style":143},[434],{"type":32,"value":435},"%",{"type":26,"tag":94,"props":437,"children":438},{"style":306},[439],{"type":32,"value":440}," 0",{"type":26,"tag":94,"props":442,"children":443},{"style":306},[444],{"type":32,"value":440},{"type":26,"tag":94,"props":446,"children":447},{"style":101},[448],{"type":32,"value":449},"); }\n",{"type":26,"tag":94,"props":451,"children":452},{"class":96,"line":169},[453,458,463,467,471,475,479,483,487,491,495,499],{"type":26,"tag":94,"props":454,"children":455},{"style":107},[456],{"type":32,"value":457},"  to",{"type":26,"tag":94,"props":459,"children":460},{"style":101},[461],{"type":32,"value":462},"   { ",{"type":26,"tag":94,"props":464,"children":465},{"style":306},[466],{"type":32,"value":406},{"type":26,"tag":94,"props":468,"children":469},{"style":101},[470],{"type":32,"value":411},{"type":26,"tag":94,"props":472,"children":473},{"style":306},[474],{"type":32,"value":416},{"type":26,"tag":94,"props":476,"children":477},{"style":101},[478],{"type":32,"value":115},{"type":26,"tag":94,"props":480,"children":481},{"style":306},[482],{"type":32,"value":425},{"type":26,"tag":94,"props":484,"children":485},{"style":306},[486],{"type":32,"value":440},{"type":26,"tag":94,"props":488,"children":489},{"style":143},[490],{"type":32,"value":435},{"type":26,"tag":94,"props":492,"children":493},{"style":306},[494],{"type":32,"value":440},{"type":26,"tag":94,"props":496,"children":497},{"style":306},[498],{"type":32,"value":440},{"type":26,"tag":94,"props":500,"children":501},{"style":101},[502],{"type":32,"value":449},{"type":26,"tag":94,"props":504,"children":505},{"class":96,"line":188},[506],{"type":26,"tag":94,"props":507,"children":508},{"style":101},[509],{"type":32,"value":510},"}\n",{"type":26,"tag":27,"props":512,"children":514},{"id":513},"performance-optimization",[515],{"type":32,"value":516},"Performance Optimization",{"type":26,"tag":35,"props":518,"children":519},{},[520],{"type":32,"value":521},"ความท้าทายใหญ่คือรูปภาพคุณภาพสูงจาก photographer มืออาชีพที่ไฟล์ใหญ่มาก เราแก้ด้วย:",{"type":26,"tag":523,"props":524,"children":525},"ul",{},[526,537,553,563],{"type":26,"tag":527,"props":528,"children":529},"li",{},[530,535],{"type":26,"tag":69,"props":531,"children":532},{},[533],{"type":32,"value":534},"@nuxt\u002Fimage",{"type":32,"value":536}," + AVIF format ลดขนาดไฟล์ได้ 60-80%",{"type":26,"tag":527,"props":538,"children":539},{},[540,545,547],{"type":26,"tag":69,"props":541,"children":542},{},[543],{"type":32,"value":544},"Intersection Observer",{"type":32,"value":546}," สำหรับ lazy load ที่แม่นยำกว่า native ",{"type":26,"tag":90,"props":548,"children":550},{"className":549},[],[551],{"type":32,"value":552},"loading=\"lazy\"",{"type":26,"tag":527,"props":554,"children":555},{},[556,561],{"type":26,"tag":69,"props":557,"children":558},{},[559],{"type":32,"value":560},"Blur placeholder",{"type":32,"value":562}," เพื่อให้หน้าดู complete ระหว่างรูปโหลด",{"type":26,"tag":527,"props":564,"children":565},{},[566,571],{"type":26,"tag":69,"props":567,"children":568},{},[569],{"type":32,"value":570},"Priority load",{"type":32,"value":572}," เฉพาะรูป above-the-fold",{"type":26,"tag":27,"props":574,"children":576},{"id":575},"ผลลัพธ์",[577],{"type":32,"value":575},{"type":26,"tag":579,"props":580,"children":581},"table",{},[582,606],{"type":26,"tag":583,"props":584,"children":585},"thead",{},[586],{"type":26,"tag":587,"props":588,"children":589},"tr",{},[590,596,601],{"type":26,"tag":591,"props":592,"children":593},"th",{},[594],{"type":32,"value":595},"Metric",{"type":26,"tag":591,"props":597,"children":598},{},[599],{"type":32,"value":600},"ก่อน",{"type":26,"tag":591,"props":602,"children":603},{},[604],{"type":32,"value":605},"หลัง",{"type":26,"tag":607,"props":608,"children":609},"tbody",{},[610,629,647,665,683],{"type":26,"tag":587,"props":611,"children":612},{},[613,619,624],{"type":26,"tag":614,"props":615,"children":616},"td",{},[617],{"type":32,"value":618},"Lighthouse Performance",{"type":26,"tag":614,"props":620,"children":621},{},[622],{"type":32,"value":623},"52",{"type":26,"tag":614,"props":625,"children":626},{},[627],{"type":32,"value":628},"98",{"type":26,"tag":587,"props":630,"children":631},{},[632,637,642],{"type":26,"tag":614,"props":633,"children":634},{},[635],{"type":32,"value":636},"LCP",{"type":26,"tag":614,"props":638,"children":639},{},[640],{"type":32,"value":641},"4.8s",{"type":26,"tag":614,"props":643,"children":644},{},[645],{"type":32,"value":646},"0.9s",{"type":26,"tag":587,"props":648,"children":649},{},[650,655,660],{"type":26,"tag":614,"props":651,"children":652},{},[653],{"type":32,"value":654},"Bounce rate",{"type":26,"tag":614,"props":656,"children":657},{},[658],{"type":32,"value":659},"71%",{"type":26,"tag":614,"props":661,"children":662},{},[663],{"type":32,"value":664},"38%",{"type":26,"tag":587,"props":666,"children":667},{},[668,673,678],{"type":26,"tag":614,"props":669,"children":670},{},[671],{"type":32,"value":672},"Average time on site",{"type":26,"tag":614,"props":674,"children":675},{},[676],{"type":32,"value":677},"1:20",{"type":26,"tag":614,"props":679,"children":680},{},[681],{"type":32,"value":682},"4:45",{"type":26,"tag":587,"props":684,"children":685},{},[686,691,696],{"type":26,"tag":614,"props":687,"children":688},{},[689],{"type":32,"value":690},"Lead form submissions",{"type":26,"tag":614,"props":692,"children":693},{},[694],{"type":32,"value":695},"3\u002Fเดือน",{"type":26,"tag":614,"props":697,"children":698},{},[699],{"type":32,"value":700},"12\u002Fเดือน",{"type":26,"tag":702,"props":703,"children":704},"blockquote",{},[705,710],{"type":26,"tag":35,"props":706,"children":707},{},[708],{"type":32,"value":709},"\"ลูกค้าคนแรกที่ติดต่อมาหลังเว็บใหม่ออนไลน์ บอกว่าตัดสินใจจากเว็บเลย ไม่ได้ดู portfolio เพิ่มเติม\"",{"type":26,"tag":35,"props":711,"children":712},{},[713],{"type":32,"value":714},"— คุณวรรณา สุนทร, Creative Director",{"type":26,"tag":716,"props":717,"children":718},"style",{},[719],{"type":32,"value":720},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":129,"depth":129,"links":722},[723,724,729,730],{"id":29,"depth":129,"text":33},{"id":42,"depth":129,"text":42,"children":725},[726,727,728],{"id":48,"depth":169,"text":51},{"id":59,"depth":169,"text":62},{"id":352,"depth":169,"text":355},{"id":513,"depth":129,"text":516},{"id":575,"depth":129,"text":575},"markdown","content:portfolio:baan-design-studio.md","content","portfolio\u002Fbaan-design-studio.md","portfolio\u002Fbaan-design-studio","md",[738,742,746,750,751,754],{"_path":739,"title":740,"category":741},"\u002Fportfolio\u002Ffreshmarket-platform","FreshMarket — แพลตฟอร์มตลาดสดออนไลน์","E-commerce",{"_path":743,"title":744,"category":745},"\u002Fportfolio\u002Fmedsync-dashboard","MedSync — ระบบจัดการคลินิกและนัดหมายผู้ป่วย","SaaS",{"_path":747,"title":748,"category":749},"\u002Fportfolio\u002Frunclub-app","RunClub — แอปสำหรับชมรมวิ่งและ community นักวิ่งไทย","Mobile",{"_path":4,"title":8,"category":9},{"_path":752,"title":753,"category":745},"\u002Fportfolio\u002Forchard-saas","Orchard — HR & Payroll SaaS สำหรับ SME ไทย",{"_path":755,"title":756,"category":749},"\u002Fportfolio\u002Fbitebuddy-food-app","BiteBuddy — แอปค้นหาร้านอาหารและรีวิวเพื่อชุมชน",1779878303620]