[{"data":1,"prerenderedAt":331},["ShallowReactive",2],{"hero":3,"projects":49,"playground":136,"strengths":189,"about":230,"footer":301},{"id":4,"title":5,"body":6,"description":10,"extension":13,"meta":14,"navigation":44,"path":45,"seo":46,"stem":47,"__hash__":48},"content\u002Fhero.md","Hero",{"type":7,"value":8,"toc":9},"minimark",[],{"title":10,"searchDepth":11,"depth":11,"links":12},"",2,[],"md",{"badge":15,"heading":17,"intro":23,"buttons":31,"terminal":39},{"text":16},"window.onload",{"line1":18,"highlight1":19,"line2":20,"highlight2":21,"suffix":22},"Bringing ","designs","to life ","through code",".",{"greeting":24,"name":25,"text1":26,"highlight1":27,"text2":28,"highlight2":29,"text3":30},"Hi, I'm ","Arnon",", I'm a web developer focused on ","building beautiful",", ","high-performing websites",". and smooth browser experiences.",{"primary":32,"secondary":36},{"prefix":33,"text":34,"target":35},"await","view_projects()","#projects",{"text":37,"target":38},"read_bio()","#about",{"stack":40,"status":43},{"frontend":41,"visuals":42},"['Nuxt', 'GSAP']","['Three.js', 'Canvas']","System active",true,"\u002Fhero",{"description":10},"hero","f6tdlvLRY1oAGKE23jdo6oUlGVZE9yPctP4W42tnR54",{"id":50,"title":51,"body":52,"description":10,"extension":13,"meta":56,"navigation":44,"path":132,"seo":133,"stem":134,"__hash__":135},"content\u002Fprojects.md","Projects",{"type":7,"value":53,"toc":54},[],{"title":10,"searchDepth":11,"depth":11,"links":55},[],{"header":57,"footer":78,"projects":80},{"title":58,"subtitle":77},[59,62,64,67,69,72,75],{"text":60,"color":61},"featuredProjects","blue",{"text":22,"color":63},"fg",{"text":65,"color":66},"map","yellow",{"text":68,"color":63},"(",{"text":70,"color":71},"project ","orange",{"text":73,"color":74},"=> ","pink",{"text":76,"color":63},"{","\u002F\u002F Rendering selected builds",{"title":79},"});",[81,95,109,120],{"title":82,"description":83,"highlights":84,"image":87,"tags":88},"EMSPHERE","Developed the front-end interface for EMSPHERE, focusing on delivering a highly fluid and premium user experience.",[85,86],"Custom light\u002Fdark mode theming.","Highly interactive, complex GSAP animations.","\u002Fimages\u002Fproject1.jpg",[89,92],{"name":90,"class":91},"Front-End Development","bg-[var(--monokai-pink)]\u002F20 text-[var(--monokai-pink)]",{"name":93,"class":94},"GSAP","bg-[var(--monokai-cyan)]\u002F20 text-[var(--monokai-cyan)]",{"title":96,"description":97,"highlights":98,"image":101,"tags":102},"GLOWFISH WORKPLACE","Developed the front-end experience for GLOWFISH WORKPLACE, balancing utility with engaging interactivity.",[99,100],"Bespoke, custom-designed event calendar.","Highly interactive, physics-based 'gravity' section.","\u002Fimages\u002Fproject2.jpg",[103,106],{"name":104,"class":105},"Interactive UI","bg-[var(--monokai-green)]\u002F20 text-[var(--monokai-green)]",{"name":107,"class":108},"Custom Components","bg-[var(--monokai-orange)]\u002F20 text-[var(--monokai-orange)]",{"title":110,"description":111,"highlights":112,"image":116,"tags":117},"HAFELE","Developed the front-end experience for a premium furniture fittings and hardware supplier.",[113,114,115],"Engineered a seamless light\u002Fdark mode.","Interactive product hotspot UI.","Custom scroll-pinned slider synchronizing GSAP and Swiper.js.","\u002Fimages\u002Fproject3.jpg",[118,119],{"name":90,"class":91},{"name":104,"class":94},{"title":121,"description":122,"highlights":123,"image":127,"tags":128},"SALA HOSPITALITY","Developed the front-end for SALA HOSPITALITY, focusing on a unified brand presence across multiple properties.",[124,125,126],"Scalable multi-site architecture.","Shared core design system across parent and child sites.","Clean visuals with dynamically updated theme colors.","\u002Fimages\u002Fproject4.jpg",[129,130],{"name":90,"class":105},{"name":131,"class":108},"Multi-Site Architecture","\u002Fprojects",{"description":10},"projects","zXIipIQZIcNajkPMwbc_sWq8RZXi7Eu4nxmGRBxD5dU",{"id":137,"title":138,"body":139,"description":10,"extension":13,"meta":143,"navigation":44,"path":185,"seo":186,"stem":187,"__hash__":188},"content\u002Fplayground.md","Playground",{"type":7,"value":140,"toc":141},[],{"title":10,"searchDepth":11,"depth":11,"links":142},[],{"header":144,"footer":161,"experiments":163},{"terminal":145,"title":149,"try_block":158,"subtitle":159,"catch_block":160},{"prompt":146,"path":147,"git_branch":148},"➜","~\u002Fcreative-experiments","main",[150,151,153,156],{"text":68,"color":63},{"text":152,"color":74},"function ",{"text":154,"color":155},"laboratory","green",{"text":157,"color":63},"() {","try {","\u002F\u002F Where raw logic meets visual chaos. Handle with care.","} catch (chaos) { ... }",{"title":162},"})();",[164,174],{"title":165,"description":166,"image":167,"tags":168,"link":173},"Three.js Video Textures","A WebGL prototype built using Three.js to render live video textures. The experiment maps complex video materials onto 3D ring objects within an interactive canvas.","\u002Fimages\u002Flab-thumb1.png",[169,171],{"name":170,"class":91},"Three.js",{"name":172,"class":105},"WebGL Materials","https:\u002F\u002Flab.khun-arnon.com\u002Fthreejs\u002F",{"title":175,"description":176,"image":177,"tags":178,"link":184},"Ferris Wheel Carousel","A physics-inspired circular slider built in JavaScript. Items maintain an upright orientation as they rotate around a center axis. Includes controls for speed, focus angles, and standard carousel navigation.","\u002Fimages\u002Flab-thumb2.png",[179,181],{"name":180,"class":91},"JavaScript",{"name":182,"class":183},"Custom UI","bg-[var(--monokai-blue)]\u002F20 text-[var(--monokai-blue)]","https:\u002F\u002Flab.khun-arnon.com\u002Fferris-wheel\u002F","\u002Fplayground",{"description":10},"playground","UlKltsY6q4XYvN1tfOI3IkWlfeWzuXauoUcOMQ1-aKY",{"id":190,"title":191,"body":192,"description":10,"extension":13,"meta":196,"navigation":44,"path":226,"seo":227,"stem":228,"__hash__":229},"content\u002Fstrengths.md","Strengths",{"type":7,"value":193,"toc":194},[],{"title":10,"searchDepth":11,"depth":11,"links":195},[],{"header":197,"footer":209,"strengths":210},{"title":198,"subtitle":208},[199,201,202,204,205,206],{"text":200,"color":155},"Object",{"text":22,"color":63},{"text":203,"color":66},"defineProperties",{"text":68,"color":63},{"text":191,"color":71},{"text":207,"color":63},", {","\u002F\u002F Core strengths and approach",{"title":79},[211,216,221],{"title":212,"description":213,"iconPath":214,"titleClass":215},"Interactive UI Engineering","I focus on turning static designs into engaging web experiences. By carefully integrating fluid animations and interactions, I build interfaces that are highly functional and visually appealing.","M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z","text-[var(--monokai-green)]",{"title":217,"description":218,"iconPath":219,"titleClass":220},"Systematic Debugging","I approach complex technical issues logically. With strong analytical skills, I focus on finding and fixing the root causes of a problem efficiently, ensuring the project remains stable.","M128,24C74.17,24,32,48.6,32,80v96c0,31.4,42.17,56,96,56s96-24.6,96-56V80C224,48.6,181.83,24,128,24Zm80,104c0,9.62-7.88,19.43-21.61,26.92C170.93,163.35,150.19,168,128,168s-42.93-4.65-58.39-13.08C55.88,147.43,48,137.62,48,128V111.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64ZM69.61,53.08C85.07,44.65,105.81,40,128,40s42.93,4.65,58.39,13.08C200.12,60.57,208,70.38,208,80s-7.88,19.43-21.61,26.92C170.93,115.35,150.19,120,128,120s-42.93-4.65-58.39-13.08C55.88,99.43,48,89.62,48,80S55.88,60.57,69.61,53.08ZM186.39,202.92C170.93,211.35,150.19,216,128,216s-42.93-4.65-58.39-13.08C55.88,195.43,48,185.62,48,176V159.36c17.06,15,46.23,24.64,80,24.64s62.94-9.68,80-24.64V176C208,185.62,200.12,195.43,186.39,202.92Z","text-[var(--monokai-orange)]",{"title":222,"description":223,"iconPath":224,"titleClass":225},"Technical Communication","I bridge the gap between design, business, and development. I clearly communicate technical details to ensure all stakeholders are aligned and the final product meets the project goals.","M48,48V208H80a8,8,0,0,1,0,16H40a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16ZM216,32H176a8,8,0,0,0,0,16h32V208H176a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32Z","text-[var(--monokai-blue)]","\u002Fstrengths",{"description":10},"strengths","LFPWj3-ecGxylAPTj3vQSQ-xWgo9CP1lv1bnMRCGMvY",{"id":231,"title":232,"body":233,"description":10,"extension":13,"meta":237,"navigation":44,"path":297,"seo":298,"stem":299,"__hash__":300},"content\u002Fabout.md","About",{"type":7,"value":234,"toc":235},[],{"title":10,"searchDepth":11,"depth":11,"links":236},[],{"header":238,"profile":245,"intro":252,"paragraphs":254,"skill_groups":263,"button":292,"footer":295},{"title":239},[240,242,244],{"text":241,"color":74},"export ",{"text":243,"color":74},"default ",{"text":76,"color":63},{"image":246,"badge":247,"status":251},"\u002Fimages\u002Fprofile.jpeg",{"filename":248,"location":249,"experience":250},"bio.json","'Bangkok'","10+ years","ready_to_hire",{"subtitle":253,"greeting":24,"name":25,"dot":22},"\u002F\u002F Introduction",{"one":255,"two":262},{"text1":256,"highlight1":257,"text2":258,"highlight2":259,"text3":260,"highlight3":261,"text4":22},"A ","Web Developer"," focused on building robust websites from the to ","user interface"," to ","the backend","My expertise lies in connecting clean, interactive front-end development with flexible Content Management Systems. I specialize in translating complex designs into responsive interfaces while ensuring the backend is well-structured and easy for teams to manage.",[264,270,276,280,286],{"label":265,"items":266},"Front-End Engineering",[267,268,269],"JavaScript \u002F TypeScript","HTML5 \u002F Semantics","CSS \u002F Tailwind",{"label":271,"items":272},"Frameworks & Architecture",[273,274,275],"Vue \u002F Nuxt","React \u002F Next.js","Headless CMS & APIs",{"label":277,"items":278},"Interactive & Motion UI",[93,279],"Three.js \u002F WebGL",{"label":281,"items":282},"CMS & E-Commerce",[283,284,285],"WordPress (Custom Theme Development)","Shopify (Liquid & Storefront API)","WooCommerce",{"label":287,"items":288},"Workflow & Strategy",[289,290,291],"Project Management","Tech SEO & Performance","Git & CI\u002FCD",{"prefix":33,"text":293,"link":294},"load_full_resume()","#",{"title":296},"};","\u002Fabout",{"description":10},"about","Aae4WtNdyYFkk90mFcD2pXkc0PFNDXtncMXxekpYRQQ",{"id":302,"title":303,"body":304,"description":10,"extension":13,"meta":308,"navigation":44,"path":327,"seo":328,"stem":329,"__hash__":330},"content\u002Ffooter.md","Footer",{"type":7,"value":305,"toc":306},[],{"title":10,"searchDepth":11,"depth":11,"links":307},[],{"contact":309,"socials":318,"system":321,"copyright":323},{"subtitle":310,"heading":311,"button":315},"\u002F\u002F Initialize contact",{"text1":312,"text2":313,"highlight":314,"dot":22},"Thank you for visiting.","If you have any questions,"," let's connect",{"prefix":33,"text":316,"email":317},"connect()","arnon.lad@gmail.com",{"subtitle":319,"linkedin":320},"\u002F\u002F social_array","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Farnon-ladloea\u002F",{"status":322},"sys_status: 'operational'",{"brand":324,"year":325,"tagline":326},"\u003CArnon\u002F>","© 2026","\u002F\u002F Engineered with Precision","\u002Ffooter",{"description":10},"footer","9meozARs5-OaW9oXAGJoJLUuQyz1HP4hQ6t0t3Eckmg",1782490652823]