{"html":"<h1 id=\"pageTitle\" data-x=\"50\" data-y=\"70\" data-fontSize=\"45\" data-gap=\"2\" data-size=\"2\">Stories</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/\" 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/v1674488059/portfolio/projects/0/Screen_Shot_2023-01-23_at_9.34.00_AM_g2taoa.png\" alt=\"NRJohnson - Stories\"/></figure></div><p>I created this site to feature some of my creative writing. I have since put writing on hold, but this site serves as a more recent example of my skills. It's a single page site of my own design. Simpler than React.js or Next.js, my site loads whole pages rather than individual components. The purpose behind this is provide the visitor with a fast, smooth experience without the choppy page loading of standard page navigation.</p><h4>Obstacles:</h4><p>I wrote the stories on a platform called Vocal. I wanted to share my writing in my own space but link back to the Vocal site. They don't have an API so doing this efficiently took some creative thinking.</p><p>Notifying interested readers of new stories was on my mind as I created this. I wanted to way for people to opt into email notifications that didn't require me to build an extensive system of my own.</p><h4>Solutions:</h4><p>I created a web scraper designed to scan specific stories on Vocal and store important information in my database. This information is the source my webpage looks to when displaying my stories.</p><p>Mailchimp saved the day with its API. I was able to add contacts to a mailing list through my site in an efficient manner.</p></div></div></section>"}