1:"$Sreact.fragment" 3:I[39756,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"default"] 4:I[37457,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"default"] 6:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"OutletBoundary"] 7:"$Sreact.suspense" 9:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"ViewportBoundary"] b:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"MetadataBoundary"] d:I[68027,[],"default"] :HL["/_next/static/chunks/93ac2d54f71ec8d4.css","style"] :HL["/_next/static/chunks/2dc24fba9bcf8042.css","style"] :HL["/_next/static/chunks/f4c69c182e1333cf.css","style"] :HL["/_next/static/chunks/763bc42995bc40f6.css","style"] :HL["/_next/static/chunks/02979444c1ab2d62.css","style"] :HL["/_next/static/chunks/ea4898baeb701027.css","style"] :HL["/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2","font",{"crossOrigin":"","type":"font/woff2"}] 0:{"P":null,"b":"dGIaEKVv4DE4pH8d0YJHt","c":["","work","building-once-ui-a-customizable-design-system"],"q":"","i":false,"f":[[["",{"children":["work",{"children":[["slug","building-once-ui-a-customizable-design-system","d"],{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/93ac2d54f71ec8d4.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/2dc24fba9bcf8042.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/f4c69c182e1333cf.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/_next/static/chunks/763bc42995bc40f6.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","4",{"rel":"stylesheet","href":"/_next/static/chunks/02979444c1ab2d62.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","5",{"rel":"stylesheet","href":"/_next/static/chunks/ea4898baeb701027.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/59b1f5cd5db1b504.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/chunks/9e0912baf10ee320.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/chunks/712c63e97ae3f233.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/chunks/dbf4e08002dd050f.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/chunks/3744dd151335484a.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/chunks/1b1ffa1cccbd1b5c.js","async":true,"nonce":"$undefined"}]],"$L2"]}],{"children":[["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":["$L5",[["$","script","script-0",{"src":"/_next/static/chunks/2f40deff58da8be3.js","async":true,"nonce":"$undefined"}]],["$","$L6",null,{"children":["$","$7",null,{"name":"Next.MetadataOutlet","children":"$@8"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false],["$","$1","h",{"children":[null,["$","$L9",null,{"children":"$La"}],["$","div",null,{"hidden":true,"children":["$","$Lb",null,{"children":["$","$7",null,{"name":"Next.Metadata","children":"$Lc"}]}]}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}],false]],"m":"$undefined","G":["$d",[]],"S":true} f:I[30824,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Providers"] 10:I[73323,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Column"] 11:I[21971,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"RevealFx"] 12:I[94412,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Background"] 13:I[21247,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"ClientFlex"] 14:I[2971,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Header"] 15:I[1166,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"RouteGuard"] e:T76e, (function() { try { const root = document.documentElement; const defaultTheme = 'system'; // Set defaults from config const config = {"brand":"magenta","accent":"red","neutral":"gray","solid":"contrast","solid-style":"flat","border":"playful","surface":"translucent","transition":"all","scaling":"100","viz-style":"gradient"}; // Apply default values Object.entries(config).forEach(([key, value]) => { root.setAttribute('data-' + key, value); }); // Resolve theme const resolveTheme = (themeValue) => { if (!themeValue || themeValue === 'system') { return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } return themeValue; }; // Apply saved theme const savedTheme = localStorage.getItem('data-theme'); const resolvedTheme = resolveTheme(savedTheme); root.setAttribute('data-theme', resolvedTheme); // Apply any saved style overrides const styleKeys = Object.keys(config); styleKeys.forEach(key => { const value = localStorage.getItem('data-' + key); if (value) { root.setAttribute('data-' + key, value); } }); } catch (e) { console.error('Failed to initialize theme:', e); document.documentElement.setAttribute('data-theme', 'dark'); } })(); 2:["$","html",null,{"ref":"$undefined","className":"display-flex position-relative min-width-0 fill-width geist_d82bf9db-module__Ifi_Dq__variable geist_250f8b91-module__B2UTAq__variable geist_4edd9b70-module__GC7HaW__variable geist_mono_90672d7c-module__qcY_rq__variable ","style":{"maxWidth":"$undefined","minWidth":"$undefined","minHeight":"$undefined","maxHeight":"$undefined","width":"$undefined","height":"$undefined","aspectRatio":"$undefined","textAlign":"$undefined","cursor":"$undefined"},"suppressHydrationWarning":true,"lang":"en","children":[["$","head",null,{"children":["$","script",null,{"id":"theme-init","dangerouslySetInnerHTML":{"__html":"$e"}}]}],["$","$Lf",null,{"children":["$","$L10",null,{"as":"body","background":"page","fillWidth":true,"style":{"minHeight":"100vh"},"margin":"0","padding":"0","horizontal":"center","children":[["$","$L11",null,{"fill":true,"position":"absolute","children":["$","$L12",null,{"mask":{"x":50,"y":0,"radius":100,"cursor":false},"gradient":{"display":false,"opacity":100,"x":50,"y":60,"width":100,"height":50,"tilt":0,"colorStart":"accent-background-strong","colorEnd":"page-background"},"dots":{"display":true,"opacity":40,"size":"2","color":"brand-background-strong"},"grid":{"display":false,"opacity":100,"color":"neutral-alpha-medium","width":"0.25rem","height":"0.25rem"},"lines":{"display":false,"opacity":100,"size":"16","thickness":1,"angle":45,"color":"neutral-alpha-weak"}}]}],["$","$L13",null,{"ref":"$undefined","cursor":"$undefined","xl":"$undefined","l":"$undefined","m":"$undefined","s":{"hide":true},"xs":"$undefined","style":"$undefined","hide":"$undefined","fillWidth":true,"minHeight":"16"}],["$","$L14",null,{}],["$","div",null,{"ref":"$undefined","className":"display-flex position-relative p-l flex-1 justify-center min-width-0 fill-width ","style":{"maxWidth":"$undefined","minWidth":"$undefined","minHeight":"$undefined","maxHeight":"$undefined","width":"$undefined","height":"$undefined","aspectRatio":"$undefined","textAlign":"$undefined","cursor":"$undefined"},"children":["$","div",null,{"ref":"$undefined","className":"display-flex position-relative justify-center min-width-0 fill-width ","style":{"maxWidth":"$undefined","minWidth":"$undefined","minHeight":"var(--static-space-0)","maxHeight":"$undefined","width":"$undefined","height":"$undefined","aspectRatio":"$undefined","textAlign":"$undefined","cursor":"$undefined"},"children":["$","$L15",null,{"children":"$L16"}]}]}],"$L17"]}]}]]}] 18:I[78454,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Row"] 19:I[24379,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"SmartLink"] 1a:I[98229,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"IconButton"] 1b:I[79520,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],""] 1c:I[71045,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"AvatarGroup"] 1e:I[11451,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"Line"] 1f:I[74855,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"ProjectCard"] 20:I[88654,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"ScrollToHash"] 16:["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$L10",null,{"as":"section","fill":true,"center":true,"paddingBottom":"160","children":[["$","span",null,{"className":"font-display font-strong font-xl mb-s","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":"404"}],["$","h1",null,{"className":"font-display font-default font-xs neutral-on-background-strong mb-l","style":{"textAlign":"$undefined","textWrap":"balance"},"children":"Page Not Found"}],["$","span",null,{"className":"neutral-on-background-weak","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":"The page you are looking for does not exist."}]]}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}] 17:["$","$L18",null,{"as":"footer","fillWidth":true,"padding":"8","horizontal":"center","s":{"direction":"column"},"children":[["$","$L18",null,{"className":"Footer-module-scss-module__DkSkqG__mobile","maxWidth":"m","paddingY":"8","paddingX":"16","gap":"16","horizontal":"between","vertical":"center","s":{"direction":"column","horizontal":"center","align":"center"},"children":[["$","span",null,{"className":"font-body font-default font-s neutral-on-background-strong","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":[["$","span",null,{"className":"neutral-on-background-weak","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":["© ",2026," /"]}],["$","span",null,{"className":"px-4","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":"Boril"}],["$","span",null,{"className":"neutral-on-background-weak","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":["/ Build your portfolio with"," ",["$","$L19",null,{"href":"https://once-ui.com/products/magic-portfolio","children":"Once UI"}]]}]]}],["$","$L18",null,{"gap":"16","children":[["$","$L1a","Instagram",{"href":"https://www.instagram.com/sahrilhasan10/","icon":"instagram","tooltip":"Instagram","size":"s","variant":"ghost"}],["$","$L1a","TikTok",{"href":"https://www.tiktok.com/@sh.sangkala","icon":"tiktok","tooltip":"TikTok","size":"s","variant":"ghost"}],["$","$L1a","YouTube",{"href":"https://www.youtube.com/@SahrilHasanSangkala","icon":"youtube","tooltip":"YouTube","size":"s","variant":"ghost"}],["$","$L1a","GitHub",{"href":"https://github.com/sahrilhasan","icon":"github","tooltip":"GitHub","size":"s","variant":"ghost"}],["$","$L1a","LinkedIn",{"href":"https://www.linkedin.com/in/sahril/","icon":"linkedin","tooltip":"LinkedIn","size":"s","variant":"ghost"}],["$","$L1a","Threads",{"href":"https://www.threads.com/@sahrilhasan10","icon":"threads","tooltip":"Threads","size":"s","variant":"ghost"}],["$","$L1a","Email",{"href":"mailto:creativeboril@gmail.com","icon":"email","tooltip":"Email","size":"s","variant":"ghost"}]]}]]}],["$","$L18",null,{"height":"80","hide":true,"s":{"hide":false}}]]}] 5:["$","$L10",null,{"as":"section","maxWidth":"m","horizontal":"center","gap":"l","children":[["$","$L1b",null,{"id":"schema-blogPosting-/work/building-once-ui-a-customizable-design-system","type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"url\":\"https://portoboril.com/work/building-once-ui-a-customizable-design-system\",\"sameAs\":[],\"headline\":\"KATAVEN — Immersive AR Heritage Experience\",\"description\":\"Development of an Augmented Reality–based heritage exploration and navigation application.\",\"image\":\"https://portoboril.com/api/og/generate?title=KATAVEN%20%E2%80%94%20Immersive%20AR%20Heritage%20Experience\",\"datePublished\":\"2024-04-08\",\"dateModified\":\"2024-04-08\",\"author\":{\"@type\":\"Person\",\"name\":\"Boril\",\"url\":\"https://portoboril.com/about\",\"image\":{\"@type\":\"ImageObject\",\"url\":\"https://portoboril.com/images/avatar.webp\"}}}"}}],["$","$L10",null,{"maxWidth":"s","gap":"16","horizontal":"center","align":"center","children":[["$","$L19",null,{"href":"/work","children":["$","span",null,{"className":"font-label font-strong font-m","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":"Projects"}]}],["$","span",null,{"className":"font-body font-default font-xs neutral-on-background-weak mb-12","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":"April 8, 2024"}],["$","h1",null,{"className":"font-display font-strong font-m neutral-on-background-strong","style":{"textAlign":"$undefined","textWrap":"balance"},"children":"KATAVEN — Immersive AR Heritage Experience"}]]}],["$","$L18",null,{"marginBottom":"32","horizontal":"center","children":["$","$L18",null,{"gap":"16","vertical":"center","children":[["$","$L1c",null,{"reverse":true,"avatars":[{"src":""},{"src":""},{"src":""},{"src":"/images/avatar.webp"}],"size":"s"}],["$","span",null,{"className":"font-label font-default font-m brand-on-background-weak","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":[["$","span","0",{"children":[false,["$","$L19",null,{"href":"","children":"Nadia Camilla Darmawan"}]]}],["$","span","1",{"children":[["$","span",null,{"className":"neutral-on-background-weak","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":[","," "]}],["$","$L19",null,{"href":"https://www.linkedin.com/in/bimoajinugroho/","children":"Bimo Aji"}]]}],["$","span","2",{"children":[["$","span",null,{"className":"neutral-on-background-weak","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":[","," "]}],["$","$L19",null,{"href":"","children":"Nefa Wahyuning"}]]}],["$","span","3",{"children":[["$","span",null,{"className":"neutral-on-background-weak","style":{"textAlign":"$undefined","textWrap":"$undefined"},"children":[","," "]}],["$","$L19",null,{"href":"https://www.linkedin.com/in/sahril/","children":"Boril(Me)"}]]}]]}]]}]}],["$","$L10",null,{"style":{"margin":"auto"},"as":"article","maxWidth":"xs","children":"$L1d"}],["$","$L10",null,{"fillWidth":true,"gap":"40","horizontal":"center","marginTop":"40","children":[["$","$L1e",null,{"maxWidth":"40"}],["$","h2",null,{"className":"font-heading font-strong font-xl neutral-on-background-strong mb-24","style":{"textAlign":"$undefined","textWrap":"balance"},"children":"Related projects"}],["$","$L10",null,{"fillWidth":true,"gap":"xl","marginBottom":"40","paddingX":"l","children":[["$","$L1f","hand-tracking",{"priority":true,"href":"/work/hand-tracking","images":["/images/projects/project-01/cv-hand.jpg"],"videoFilters":[],"title":"Real-time Hand Tracking Interaction","description":"Interactive real-time hand tracking system.","content":"\r\nimport HandTrackingScene from \"@/components/HandTrackingScene\"\r\n\r\n## Overview\r\nInteractive real-time hand tracking demo.\r\n\r\n\r\n\r\n---\r\n","avatars":[],"link":""}]]}]]}],["$","$L20",null,{}]]}] 21:I[11052,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"HeadingLink"] 22:I[36122,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"List"] 23:I[26935,["/_next/static/chunks/59b1f5cd5db1b504.js","/_next/static/chunks/9e0912baf10ee320.js","/_next/static/chunks/712c63e97ae3f233.js","/_next/static/chunks/dbf4e08002dd050f.js","/_next/static/chunks/3744dd151335484a.js","/_next/static/chunks/1b1ffa1cccbd1b5c.js","/_next/static/chunks/2f40deff58da8be3.js"],"ListItem"] 1d:[["$","$L21",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"overview","children":"Overview"}],"\n",["$","span",null,{"className":"font-body font-default font-m neutral-on-background-medium mt-8 mb-12","style":{"textAlign":"$undefined","textWrap":"$undefined","lineHeight":"175%"},"children":"KATAVEN is an Augmented Reality (AR)–based heritage exploration application developed to enhance visitor engagement at Kampoeng Heritage Kajoetangan, Malang.\r\nThe application combines AR navigation, marker-based gamification, interactive storytelling, and digital memory collection to create an immersive cultural learning experience.\r\nKATAVEN transforms traditional heritage tourism into a spatial, interactive, and gamified digital journey."}],"\n",["$","$L21",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"key-features","children":"Key Features"}],"\n",["$","$L22",null,{"as":"ul","children":["\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"AR Navigation System"}],"\r\nReal-time AR-based directional guidance using visual path indicators and spatial markers, helping users easily locate heritage spots within the area."]}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Marker-Based Treasure Hunt (Gamification)"}],"\r\nUsers scan hidden markers placed across heritage locations to unlock digital treasures, historical stories, and collectible memories."]}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Interactive Memory Collection"}],"\r\nDigital artifacts and historical images are unlocked and stored inside a virtual “memory chest,” encouraging exploration and repeat engagement."]}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Educational Storytelling Layer"}],"\r\nCultural and architectural explanations are presented contextually within AR scenes, making learning intuitive and location-based."]}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"User-Friendly Mobile Interface"}],"\r\nDesigned with a clean, immersive, and accessible UI to ensure ease of use for tourists, students, and local communities."]}],"\n"]}],"\n",["$","$L21",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"technologies-used","children":"Technologies Used"}],"\n",["$","$L22",null,{"as":"ul","children":["\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Unity"}]," – Core application development and AR integration"]}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"AR Foundation / Vuforia"}]," – Marker-based and spatial AR tracking"]}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"C#"}]," – Application logic and interaction system"]}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"UI/UX Design System"}]," – Custom mobile UI optimized for immersive experience"]}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":[["$","strong",null,{"children":"Android Deployment"}]," – Mobile distribution and field testing"]}],"\n"]}],"\n",["$","$L21",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"challenges-and-learnings","children":"Challenges and Learnings"}],"\n",["$","span",null,{"className":"font-body font-default font-m neutral-on-background-medium mt-8 mb-12","style":{"textAlign":"$undefined","textWrap":"$undefined","lineHeight":"175%"},"children":"One major challenge was ensuring stable AR tracking in outdoor heritage environments with varying lighting conditions and spatial constraints.\r\nThe team addressed this by optimizing marker placement, improving detection thresholds, and refining UI clarity to guide users intuitively.\r\nAnother challenge involved balancing gamification elements with educational depth. The solution was integrating concise, contextual storytelling directly within AR interactions to avoid cognitive overload while maintaining engagement.\r\nCollaboration between researcher, supervisors, and developer strengthened the alignment between research objectives and technical implementation."}],"\n","$L24","\n","$L25","\n","$L26","\n","$L27"] 24:["$","$L21",null,{"marginTop":"24","marginBottom":"12","as":"h2","id":"outcome","children":"Outcome"}] 25:["$","span",null,{"className":"font-body font-default font-m neutral-on-background-medium mt-8 mb-12","style":{"textAlign":"$undefined","textWrap":"$undefined","lineHeight":"175%"},"children":"KATAVEN successfully demonstrates how AR technology can:"}] 26:["$","$L22",null,{"as":"ul","children":["\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":"Enhance heritage tourism experiences"}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":"Increase visitor engagement through gamification"}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":"Support cultural preservation through digital storytelling"}],"\n",["$","$L23",null,{"marginTop":"4","marginBottom":"8","style":{"lineHeight":"175%"},"children":"Provide an interactive educational tool for students and tourists"}],"\n"]}] 27:["$","span",null,{"className":"font-body font-default font-m neutral-on-background-medium mt-8 mb-12","style":{"textAlign":"$undefined","textWrap":"$undefined","lineHeight":"175%"},"children":"The project establishes a scalable foundation for future AR-based cultural exploration systems and immersive learning applications."}] a:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 28:I[27201,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"IconMark"] 8:null c:[["$","title","0",{"children":"KATAVEN — Immersive AR Heritage Experience"}],["$","meta","1",{"name":"description","content":"Development of an Augmented Reality–based heritage exploration and navigation application."}],["$","meta","2",{"property":"og:title","content":"KATAVEN — Immersive AR Heritage Experience"}],["$","meta","3",{"property":"og:description","content":"Development of an Augmented Reality–based heritage exploration and navigation application."}],["$","meta","4",{"property":"og:url","content":"https://portoboril.com/work/building-once-ui-a-customizable-design-system"}],["$","meta","5",{"property":"og:image","content":"https://portoboril.com/api/og/generate?title=KATAVEN%20%E2%80%94%20Immersive%20AR%20Heritage%20Experience"}],["$","meta","6",{"property":"og:image:alt","content":"KATAVEN — Immersive AR Heritage Experience"}],["$","meta","7",{"property":"og:type","content":"website"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"KATAVEN — Immersive AR Heritage Experience"}],["$","meta","10",{"name":"twitter:description","content":"Development of an Augmented Reality–based heritage exploration and navigation application."}],["$","meta","11",{"name":"twitter:image","content":"https://portoboril.com/api/og/generate?title=KATAVEN%20%E2%80%94%20Immersive%20AR%20Heritage%20Experience"}],["$","link","12",{"rel":"icon","href":"/favicon.ico?favicon.a70bdcfc.ico","sizes":"120x120","type":"image/x-icon"}],["$","$L28","13",{}]]