config.state.autosave: false config.style.page.color: 'black on gray-4' config.style.page.link.active.color: 'indigo-8 on gray-4' config.style.page.link.lineColor: 'gray-4' config.style.page.link.active.lineColor: 'indigo-8 on gray-4' config.style.page.verticalAlign: 'top' config.body.transition.name: 'none' config.footer.center: "# [[projects->Narrative]] | [[writing->Blog]] | [[contact->Contact]]" config.header.center: "# katherine morayati" -- [CSS] #backdrop { background-image: linear-gradient(to bottom right, rgb(24, 100, 171, 0.9), rgb(54, 79, 199, 0.66)); } #page { padding: 10px 50px 0 50px; width: 66%; border-radius: 1%; filter: drop-shadow(1px 1px 3px #333); } img { border-radius: 40%; height: 30%; width: 30%; filter: drop-shadow(1px 1px 2px #777); } @media (max-width: 800px) { #page { margin-top: 15px; width: 90%; } img { height: 50%; width: 50%; } } [continued] [align center] a website that is also a twine renovations in progress occasional radio streams <a href='http://radio.katherinemorayati.com' target="_blank">here</a>, if it's nightconfig.style.page.color: 'black on gray-4' config.style.page.link.active.color: 'indigo-8 on gray-4' config.style.page.link.lineColor: 'gray-4' config.style.page.link.active.lineColor: 'gray-4' config.style.page.verticalAlign: 'top' config.header.center: "# Get in touch!" config.footer.center: "# [[home->Home]] | [[narrative->Narrative]] | [[writing->Blog]]" config.body.transition.name: 'fadeInOut' config.body.transition.duration: '350ms' -- [CSS] #backdrop { background-image: linear-gradient(to bottom right, rgb(24, 100, 171, 0.9), rgb(54, 79, 199, 0.66)); } #page { width: 66%; padding: 10px 50px 0 50px; border-radius: 1%; filter: drop-shadow(1px 1px 3px #333); } @media (max-width: 800px) { #page { margin-top: 15px; width: 90%; } } [continued] [align center] ## You can find me via: ### <a href='https://www.github.com/katstasaph' target="_blank">GitHub</a> ### <a href='https://www.linkedin.com/in/katherine-morayati-a1a220288/' target="_blank">LinkedIn</a> ### <a href="mailto:katherinemorayati@gmail.com">Email</a> config.style.page.color: 'black on gray-4' config.style.page.link.color: 'black on gray-4' config.style.page.link.active.color: 'indigo-8 on gray-4' config.style.page.link.lineColor: 'gray-4' config.style.page.link.active.lineColor: 'gray-4' config.style.page.verticalAlign: 'top' config.header.center: "# Some projects I've worked on:" config.footer.center: "# [[home->Home]] | [[writing->Blog]] | [[contact->Contact]]" config.body.transition.duration: '350ms' -- [CSS] #backdrop { background-image: linear-gradient(to bottom right, rgb(24, 100, 171, 0.9), rgb(54, 79, 199, 0.66)); } #page { padding: 10px 50px 0 50px; width: 66%; border-radius: 1%; filter: drop-shadow(1px 1px 3px #333); } img { border-radius: 2%; filter: drop-shadow(2px 2px 3px #777); } @media (max-width: 800px) { #page { margin-top: 15px; width: 90%; } } [continued] [align center] ## Narrative games: I've developed, written and designed several award-winning experimental narrative games including: ### Lies and Cigars <a href='https://katherinestasaph.itch.io/liesandcigars' target="_blank">{embed Flickr image: '<a data-flickr-embed="true" href="https://www.flickr.com/photos/198948873@N05/53125449690/in/dateposted-public/" title="lies"><img src="https://live.staticflickr.com/65535/53125449690_5954b4cc5b_z.jpg" width="640" height="298" alt="lies"/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>', alt:'Lies and Cigars screen'}</a> A mystery story, told in the format of a branching interview with multiple characters, set and photographed in Astoria, Queens. Designed in JavaScript and Undum. Debuted at the 2019 Now Play This festival in London. ### Human Errors <a href='http://sub-q.com/human-errors/' target="_blank">{embed Flickr image: '<a data-flickr-embed="true" href="https://www.flickr.com/photos/198948873@N05/53125049016/in/dateposted-public/" title="humanerrors"><img src="https://live.staticflickr.com/65535/53125049016_0883269650_z.jpg" width="640" height="298" alt="humanerrors"/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>', alt:'Human Errors'}</a> *A contractor assigned to handle bug reports for a wearable mood-regulation device becomes unwitting witness to trauma and crime.* Designed in JavaScript and Twine. Published by Sub-Q magazine and showcased at the 2019 Electronic Literature Organization conference in Cork, Ireland, and AdventureX in London. **[[{prev}->Curios]]** **[[{next}->Projects]]**config.style.page.link.lineColor: 'gray-4' config.style.page.link.active.lineColor: 'gray-4' config.style.page.verticalAlign: 'top' config.header.center: "# Some projects I've worked on:" config.footer.center: "# [[home->Home]] | [[writing->Blog]] | [[contact->Contact]]" config.body.transition.duration: '350ms' -- [CSS] #backdrop { background-image: linear-gradient(to bottom right, rgb(24, 100, 171, 0.9), rgb(54, 79, 199, 0.66)); } #page { padding: 10px 50px 0 50px; width: 66%; border-radius: 1%; filter: drop-shadow(1px 1px 3px #333); } img { border-radius: 2%; filter: drop-shadow(2px 2px 3px #777); } @media (max-width: 800px) { #page { margin-top: 15px; width: 90%; } } [continued] [align center] ## Non-narrative: ### Art Coordinates {embed Flickr image: '<a data-flickr-embed="true" href="https://www.flickr.com/photos/198948873@N05/53131324443/in/dateposted-public/" title="artcoords"><img src="https://live.staticflickr.com/65535/53131324443_a1f8a4ebbf_z.jpg" width="640" height="372" alt="artcoords"/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>', alt:'Art Coordinates screen'} A tool, built with JavaScript/React, MongoDB, and Google Maps' API, that generates and stores a number of constraints to plan a plein air painting, such as coordinates on land within the five NYC boroughs, a multicolor SVG grid to serve as the painting's base, time of day between sunrise and sunset, and palette of paints to use. ### Jukebox Blurber {embed Flickr image: '<a data-flickr-embed="true" href="https://www.flickr.com/photos/198948873@N05/53157992398/in/dateposted-public/" title="jukebox"><img src="https://live.staticflickr.com/65535/53157992398_e0fabbfddb_z.jpg" width="640" height="400" alt="jukebox"/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>', alt:'Jukebox Blurber'} A content management system for creating and editing music reviews and managing user permissons, implemented in Ruby/Rails and PostgreSQL. **[[{prev}->Narrative]]** **[[{next}->Curios]]**config.style.page.link.lineColor: 'gray-4' config.style.page.link.active.lineColor: 'gray-4' config.style.page.verticalAlign: 'top' config.header.center: "# Some projects I've worked on:" config.footer.center: "# [[home->Home]] | [[blog->Blog]] | [[contact->Contact]]" config.body.transition.duration: '350ms' -- [CSS] #backdrop { background-image: linear-gradient(to bottom right, rgb(24, 100, 171, 0.9), rgb(54, 79, 199, 0.66)); } #page { padding: 10px 50px 0 50px; width: 66%; border-radius: 1%; filter: drop-shadow(1px 1px 3px #333); } img { border-radius: 2%; filter: drop-shadow(2px 2px 3px #777); } @media (max-width: 800px) { #page { margin-top: 15px; width: 90%; } } [continued] [align center] ## curios and miscellany watch this space **[[{prev}->Projects]]** **[[{next}->Narrative]]**config.style.page.color: 'black on gray-4' config.style.page.link.active.color: 'indigo-8 on gray-4' config.style.page.link.lineColor: 'gray-4' config.style.page.link.active.lineColor: 'gray-4' config.style.page.verticalAlign: 'top' config.header.center: "# writing" config.footer.center: "# [[home->Home]] | [[projects->Narrative]] | [[contact->Contact]]" config.body.transition.name: 'fadeInOut' config.body.transition.duration: '350ms' -- [CSS] #backdrop { background-image: linear-gradient(to bottom right, rgb(24, 100, 171, 0.9), rgb(54, 79, 199, 0.66)); } #page { width: 66%; padding: 10px 50px 0 50px; border-radius: 1%; filter: drop-shadow(1px 1px 3px #333); } @media (max-width: 800px) { #page { margin-top: 15px; width: 90%; } } [continued] [align center] <a href='./blog' target="_self">blog index</a> latest posts: {rss}