[{"data":1,"prerenderedAt":88},["ShallowReactive",2],{"project-\u002Fportfolio\u002Fweb-application\u002Fduns-town-trail":3},{"id":4,"title":5,"body":6,"carousel":51,"category":63,"description":64,"displayOrder":65,"extension":66,"featured":67,"features":68,"fullImage":77,"image":78,"imageAlt":79,"meta":80,"mockup":81,"navigation":67,"path":82,"repo":77,"seo":83,"stem":84,"subhead":85,"url":86,"__hash__":87},"projects\u002Fportfolio\u002Fweb-application\u002Fduns-town-trail.md","Duns Town Trail",{"type":7,"value":8,"toc":46},"minimark",[9,14,26,29,32,40,43],[10,11,13],"h2",{"id":12},"an-interactive-guided-tour-of-the-town-of-duns","An Interactive Guided Tour of the town of Duns",[15,16,17,18,25],"p",{},"I was commissioned by ",[19,20,24],"a",{"href":21,"rel":22},"https:\u002F\u002Fwww.aheartforduns.org\u002F",[23],"nofollow","A Heart for Duns"," to create\nan App that would allow visitors to the town to follow the Duns Town Trail, highlighting\npoints of interest and providing some historical context to the buildings and landmarks in the town.",[15,27,28],{},"The trail itself has existed for some time, however it was only available in a\nprinted version and discussions had been on-going about created a digital format\nof the trail.",[15,30,31],{},"Designed specifically to be used on handheld devices as people walked around the\ntown, the site required to be clear, easy to follow and fast to load.",[15,33,34,35,39],{},"Using Gridsome, a static site generator for VueJS, I was able to produce a performant\nstatic Progressive Web App which could be installed on the users mobile phone for\nquick and easy access, was secure, and ",[36,37,38],"strong",{},"free to host",".",[15,41,42],{},"To allow the client to update the app themselves, I used the DatoCMS, a headless\ncontent management system which is perfect for this type of project. From a user\nfriendly web-based GUI, the client is able to update the content of the app and\nalso add additional points of interest in the future.",[15,44,45],{},"Map interactivity within the app is provided using the MapBox JavaScript SDK,\nand by obtaining the users location can display which points of interest are\naround them and access information about them directly from the map.",{"title":47,"searchDepth":48,"depth":48,"links":49},"",2,[50],{"id":12,"depth":48,"text":13},[52,57,60],{"src":53,"alt":54,"width":55,"height":56},"\u002Fimages\u002Fprojects\u002Fweb-application\u002Ftown-trail\u002Ftrail-view.png","Town Trail",360,720,{"src":58,"alt":59,"width":55,"height":56},"\u002Fimages\u002Fprojects\u002Fweb-application\u002Ftown-trail\u002Ftrail-map.png","Town Trail Map View",{"src":61,"alt":62,"width":55,"height":56},"\u002Fimages\u002Fprojects\u002Fweb-application\u002Ftown-trail\u002Fwojtek-trail-view.png","Wojtek Trail View","web-application","A Progressive Web Application to help guide visitors around points of interest in the historic market town of Duns.",3,"md",true,[69,70,71,72,73,74,75,76],"HTML","SCSS","Vue JS","Gridsome","DatoCMS","MapBox","Netlify","Progressive Web App",null,"\u002Fimages\u002Fprojects\u002Fweb-application\u002Fduns-town-trail.jpg","Duns Town Trail - Progressive Web App",{},"\u002Fimages\u002Fprojects\u002Fweb-application\u002Fduns-town-trail-mockup.png","\u002Fportfolio\u002Fweb-application\u002Fduns-town-trail",{"title":5,"description":64},"portfolio\u002Fweb-application\u002Fduns-town-trail","Guided Tour of the Town of Duns","https:\u002F\u002Ftown-trail.aheartforduns.org\u002F","pQRNT-V5R4jx5TNAmAI3kdFD8udU6SoZLGXipT6YE4Q",1794395792520]