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"]
5: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"],"Column"]
6: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"],""]
7: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"],"ProjectCard"]
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"}]
8:Tb41,
## Overview

KATAVEN is an Augmented Reality (AR)–based heritage exploration application developed to enhance visitor engagement at Kampoeng Heritage Kajoetangan, Malang.
The application combines AR navigation, marker-based gamification, interactive storytelling, and digital memory collection to create an immersive cultural learning experience.
KATAVEN transforms traditional heritage tourism into a spatial, interactive, and gamified digital journey.

## Key Features

- **AR Navigation System**
Real-time AR-based directional guidance using visual path indicators and spatial markers, helping users easily locate heritage spots within the area.
- **Marker-Based Treasure Hunt (Gamification)**
Users scan hidden markers placed across heritage locations to unlock digital treasures, historical stories, and collectible memories.
- **Interactive Memory Collection**
Digital artifacts and historical images are unlocked and stored inside a virtual “memory chest,” encouraging exploration and repeat engagement.
- **Educational Storytelling Layer**
Cultural and architectural explanations are presented contextually within AR scenes, making learning intuitive and location-based.
- **User-Friendly Mobile Interface**
Designed with a clean, immersive, and accessible UI to ensure ease of use for tourists, students, and local communities.

## Technologies Used

  - **Unity** – Core application development and AR integration
  - **AR Foundation / Vuforia** – Marker-based and spatial AR tracking
  - **C#** – Application logic and interaction system
  - **UI/UX Design System** – Custom mobile UI optimized for immersive experience
  - **Android Deployment** – Mobile distribution and field testing

## Challenges and Learnings

One major challenge was ensuring stable AR tracking in outdoor heritage environments with varying lighting conditions and spatial constraints.
The team addressed this by optimizing marker placement, improving detection thresholds, and refining UI clarity to guide users intuitively.
Another 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.
Collaboration between researcher, supervisors, and developer strengthened the alignment between research objectives and technical implementation.

## Outcome
KATAVEN successfully demonstrates how AR technology can:
  - Enhance heritage tourism experiences
  - Increase visitor engagement through gamification
  - Support cultural preservation through digital storytelling
  - Provide an interactive educational tool for students and tourists

The project establishes a scalable foundation for future AR-based cultural exploration systems and immersive learning applications.
0:{"P":null,"b":"dGIaEKVv4DE4pH8d0YJHt","c":["","work"],"q":"","i":false,"f":[[["",{"children":["work",{"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":[["$","$L5",null,{"maxWidth":"m","paddingTop":"24","children":[["$","$L6",null,{"id":"schema-webPage-/work","type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"WebPage\",\"url\":\"https://portoboril.com/work\",\"sameAs\":[],\"headline\":\"Projects – Boril\",\"description\":\"Design and dev projects by Boril\",\"image\":\"https://portoboril.com/api/og/generate?title=Projects%20%E2%80%93%20Boril\",\"author\":{\"@type\":\"Person\",\"name\":\"Boril\",\"url\":\"https://portoboril.com/about\",\"image\":{\"@type\":\"ImageObject\",\"url\":\"https://portoboril.com/images/avatar.webp\"}}}"}}],["$","h1",null,{"className":"font-heading font-strong font-xl neutral-on-background-strong mb-l","style":{"textAlign":"center","textWrap":"balance"},"children":"Projects – Boril"}],["$","$L5",null,{"fillWidth":true,"gap":"xl","marginBottom":"40","paddingX":"l","children":[["$","$L7","building-once-ui-a-customizable-design-system",{"priority":true,"href":"/work/building-once-ui-a-customizable-design-system","images":["/images/projects/project-01/Kataven01.avif","/images/projects/project-01/Kataven02.avif","/images/projects/project-01/Kataven03.avif","/images/projects/project-01/Kataven4.avif"],"videoFilters":[],"title":"KATAVEN — Immersive AR Heritage Experience","description":"Development of an Augmented Reality–based heritage exploration and navigation application.","content":"$8","avatars":[{"src":""},{"src":""},{"src":""},{"src":"/images/avatar.webp"}],"link":""}],"$L9","$La"]}]]}],null,"$Lb"]}],{},null,false,false]},null,false,false]},null,false,false],"$Lc",false]],"m":"$undefined","G":["$d",[]],"S":true}
e:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"OutletBoundary"]
f:"$Sreact.suspense"
11:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"ViewportBoundary"]
13:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"MetadataBoundary"]
16: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"],"Providers"]
17: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"],"RevealFx"]
18: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"],"Background"]
19: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"],"ClientFlex"]
1a: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"],"Header"]
1b: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"],"RouteGuard"]
9:["$","$L7","simple-portfolio-builder",{"priority":true,"href":"/work/simple-portfolio-builder","images":["/images/projects/project-01/Kataven01.avif","/images/projects/project-01/Kataven02.avif"],"videoFilters":[{"title":"Catch Coins Effect","category":"Games","videoType":"local","videoSrc":"/videos/ET1.webm"},{"title":"Chinese New Year Face Filter 2024","category":"Branded AR Campaign","videoType":"local","videoSrc":"/videos/ET2.webm","description":"Company: WIR Group & AR&Co\nRole: AR Developer\nPlatform: Instagram (Meta Spark)\n","Contributions":["Real-time face tracking implementation","Animated festive overlay system","Performance optimization for mobile devices"]},{"title":"Meta Spark AR Experience","category":"Personal Project","videoType":"local","videoSrc":"/videos/IG3.webm","description":"Personal AR development.\n- Image tracking\n- Interactive animation\n- Optimized for Instagram\n"},{"title":"WIR Group & AR&Co","category":"Professional","videoType":"local","videoSrc":"/videos/ET4.webm","description":"Company: WIR Group & AR&Co\nRole: AR Developer\nPlatform: Instagram\n\nContributions:\n- Face tracking logic\n- Animation system\n- Performance optimization\n"}],"title":"Once UI: Open-source design system","description":"Collection of interactive AR filters built with Effect House and Spark AR.","content":"","avatars":[],"link":""}]
a:["$","$L7","hand-tracking",{"priority":false,"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<HandTrackingScene />\r\n\r\n---\r\n","avatars":[],"link":""}]
b:["$","$Le",null,{"children":["$","$f",null,{"name":"Next.MetadataOutlet","children":"$@10"}]}]
c:["$","$1","h",{"children":[null,["$","$L11",null,{"children":"$L12"}],["$","div",null,{"hidden":true,"children":["$","$L13",null,{"children":["$","$f",null,{"name":"Next.Metadata","children":"$L14"}]}]}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}]
15: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":"$15"}}]}],["$","$L16",null,{"children":["$","$L5",null,{"as":"body","background":"page","fillWidth":true,"style":{"minHeight":"100vh"},"margin":"0","padding":"0","horizontal":"center","children":[["$","$L17",null,{"fill":true,"position":"absolute","children":["$","$L18",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"}}]}],["$","$L19",null,{"ref":"$undefined","cursor":"$undefined","xl":"$undefined","l":"$undefined","m":"$undefined","s":{"hide":true},"xs":"$undefined","style":"$undefined","hide":"$undefined","fillWidth":true,"minHeight":"16"}],["$","$L1a",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":["$","$L1b",null,{"children":"$L1c"}]}]}],"$L1d"]}]}]]}]
1e: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"],"Row"]
1f: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"],"SmartLink"]
20: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"],"IconButton"]
1c:["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$L5",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"}]
1d:["$","$L1e",null,{"as":"footer","fillWidth":true,"padding":"8","horizontal":"center","s":{"direction":"column"},"children":[["$","$L1e",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"," ",["$","$L1f",null,{"href":"https://once-ui.com/products/magic-portfolio","children":"Once UI"}]]}]]}],["$","$L1e",null,{"gap":"16","children":[["$","$L20","Instagram",{"href":"https://www.instagram.com/sahrilhasan10/","icon":"instagram","tooltip":"Instagram","size":"s","variant":"ghost"}],["$","$L20","TikTok",{"href":"https://www.tiktok.com/@sh.sangkala","icon":"tiktok","tooltip":"TikTok","size":"s","variant":"ghost"}],["$","$L20","YouTube",{"href":"https://www.youtube.com/@SahrilHasanSangkala","icon":"youtube","tooltip":"YouTube","size":"s","variant":"ghost"}],["$","$L20","GitHub",{"href":"https://github.com/sahrilhasan","icon":"github","tooltip":"GitHub","size":"s","variant":"ghost"}],["$","$L20","LinkedIn",{"href":"https://www.linkedin.com/in/sahril/","icon":"linkedin","tooltip":"LinkedIn","size":"s","variant":"ghost"}],["$","$L20","Threads",{"href":"https://www.threads.com/@sahrilhasan10","icon":"threads","tooltip":"Threads","size":"s","variant":"ghost"}],["$","$L20","Email",{"href":"mailto:creativeboril@gmail.com","icon":"email","tooltip":"Email","size":"s","variant":"ghost"}]]}]]}],["$","$L1e",null,{"height":"80","hide":true,"s":{"hide":false}}]]}]
12:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
21:I[27201,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/61cc43b3d7ad2990.js"],"IconMark"]
10:null
14:[["$","title","0",{"children":"Projects – Boril"}],["$","meta","1",{"name":"description","content":"Design and dev projects by Boril"}],["$","meta","2",{"property":"og:title","content":"Projects – Boril"}],["$","meta","3",{"property":"og:description","content":"Design and dev projects by Boril"}],["$","meta","4",{"property":"og:url","content":"https://portoboril.com/work"}],["$","meta","5",{"property":"og:image","content":"https://portoboril.com/api/og/generate?title=Projects%20%E2%80%93%20Boril"}],["$","meta","6",{"property":"og:image:alt","content":"Projects – Boril"}],["$","meta","7",{"property":"og:type","content":"website"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Projects – Boril"}],["$","meta","10",{"name":"twitter:description","content":"Design and dev projects by Boril"}],["$","meta","11",{"name":"twitter:image","content":"https://portoboril.com/api/og/generate?title=Projects%20%E2%80%93%20Boril"}],["$","link","12",{"rel":"icon","href":"/favicon.ico?favicon.a70bdcfc.ico","sizes":"120x120","type":"image/x-icon"}],["$","$L21","13",{}]]