{"html":"<h1 id=\"pageTitle\" data-x=\"50\" data-y=\"70\" data-fontSize=\"45\" data-gap=\"2\" data-size=\"2\">Interactive Map</h1><section class=\"container mt-3\"><div class=\"panel details\"><div class=\"w-100 mx-auto\"><div class=\"details-links row w-100 mx-auto p-0 position-relative\"><a class=\"col-6 me-auto text-start ps-0 p-md-0 view-site effect-tilt\" href=\"https://stories.nrjohnson.net/worldmap\" target=\"_blank\"><div class=\"button\"><span>View Live Site</span></div><span class=\"shadow\"></span></a><a class=\"col-6 ms-auto pe-0 p-md-0 effect-tilt\" href=\"https://github.com/nr-johnson/writing\" target=\"_blank\"><div class=\"button ms-auto position-relative\"><span>View GitHub Repo</span></div><span class=\"shadow\"></span></a></div><hr/><div class=\"details-img\"><figure class=\"m-0\"><img src=\"https://res.cloudinary.com/nrjohnson-cloud/image/upload/v1674488293/portfolio/projects/0/Screen_Shot_2023-01-23_at_9.35.05_AM_evdazb.png\" alt=\"NRJohnson - Interactive Map\"/></figure></div><p>This is an interactive fantasy map I created when I was world building for a story I want to write. Writing the story is currently on hold, but I think the project deserves a place on my portfolio. </p><p>I created this several years ago. It's important to note that I would do many things differently if I were to recreate it (like using JavaScript's Canvas API).</p><p>The map lives on <a href=\"https://stories.nrjohnson.net/map\" target=\"_blank\">another webpage of mine</a> that I did as pet project to feature some of my writing.</p><h4>Challenges:</h4><p>This was made early in my web development journey and creating it taught me much. I had to learn about event listeners and how to track mouse movement, it was the first time I used CSS transitions/animations and figuring out how to get all the pieces to move together when panning and zooming required me to work with abstract math.</p><p>My areas of interest began with this project. It served as the bedrock for my learning in web programming.</p></div></div></section>"}