Ouster's website is a true JamStack Gatsby site using multiple data sources. The blog data comes from a Wordpress instance. Data for the actual website comes from contentful and deployed on Netlify. I maintain the frontend and both backends. Deployment is run through a CI/CD process through Gitlab and then a release schedule to production. The design pattern for the CMS checks each component type and and loads them in a full dynamic import to load components when they are needed. The react components are designed in Figma and then realized through a review process using Jira. Also the site has some exciting uses of react-select and great code pattern for translating mutliple CMS sources. Building this site to as perfomant as possible is a high priority using a JavaScript static site generator is great way to accomplish this.

Ouster

There are a lot of odd entities on the internet, one of which is the animated gif. After completing yourimage.io, I was interested in extending the idea of random image collage and image painting to make use of animated content.

Utilizing gif.js, native canvas api and imgur I was able to create a website that has the ability to paint and collage with animated content.

gifpaint.in

I used the JavaScript canvas API, paper.js and the Imgur API to create this website. It allows users to use their mouse or touch device to paint with images from the Imgur API. The program also allows users to save their creation. Using the combination of the unknown (Not knowing which image will be next), collage (https://en.wikipedia.org/wiki/Collage), and a version of action painting (https://en.wikipedia.org/wiki/Action_painting) the results become unique artwork to share. The generative nature of this website allows a collaboration between the user and the computer. Using pixels to show weight and density while expressing unique ideas with juxtapostion of textual and visual ideas from Imgur's site.  

yourimage.io

I created a “pterosaur tracker” that used the Google maps API and JS to show a pterosaur fly across the U.S., making stops on its way to the museum.

I utilized the JS Canvas API to create an image that would follow the rotational position of the KML points which gave a feeling of the pterosaur actually flying. I used a requestAnimationFrame (it was a new part of the JS API) which provided the feeling that the pterosaur was flying on the Google Map with 60fps.

This project's CSS was adpted from the American Museum of Natural History pterosaur's website. It was a traveling exhibit so the styling had to have continuity across sites. I think the desing that I came up with was a good blend between NHMLA's website conventions and AMNH's.

nhm pterosaurs

Drupal 7 Site with custom Blog frontend code. I worked with Hello Design to build the Nature Map using Google Maps API and Inaturalist API to showcase urban nature in Los Angeles. I also built real-time leader board for another urban nature initiative which is a global project, the city nature challenge. The leader board was used as a tool to update local participants on who was leading in observations.

nhm nature

Cat Bounce was created by Tara Sinn. I rewrote the site from actionscript to JavasScript. Cat Bounce has been written about by Buzzfeed, Teen Vogue, Refinery 29, The Huffington Post, Mashable, and Mental Floss among others.

This site is a recent winner of Webby Award in the Weird catergory -> https://www.webbyawards.com/winners/2019/websites/general-websites/weird/cat-bounce/


cat-bounce.com

This site was built using the tool CLI tool I maintain. I worked with our designer to build the site from Sketch templates. Several writers from the Getty Research team wrote the content in markdown files and made use of various custom shortcodes and templates that I created for the Quire’s starter theme, but also custom ones that I created specifically for this site. We made use of Netlify’s integration with Git where we deploy a master branch and pull request deployments which our designer verifies that what I built is correct and functions the way it should. Netlify makes deployment incredibly easy and useful especially when using Hugo and Webpack for building the final code. Running integration testing with each pull request makes it easy to tell what is going on with the site and for others to see instantly what you did.

- Frontend: Quire, Hugo, Webpack 4
- Deploy: Netlify 


Bauhaus 100th Anniversary site for the Getty Research Institute 

**Getty.edu Redesign**
Frontend: Nuxt.Js/Vue
Styleguide: Storybook.js
Backend: Contentful
Deploy: Netlify

Towards the end of my time at the Getty we worked with the Agency [Area17](https://area17.com/) to build a design system using Nuxt.js/Vue.js to build the components. The component library or styleguide was built in Storybook.js. The site was built with UI testing with Chromatic and end-to-end testing that was runs on Circle CI and deploys on Netlify. 

**Getty Elastic Stack implementation**
Frontend: Vue, Vue-Router, Vue-CLI
Backend: Elastic Stack
Deploy: EC2, Elastic.co, Netlify

I rewrote the main site search and other search applications needed for the insitution using Elasticsearch as the index. Apache Nutch does the crawling to replace the Google appliance that was about to be discontinued. I built several front ends for the indexes that were needed to support the various types of search that were implemented before the switch. Trying to recreate what Google was doing previously was tricky, but the search’s reception has been positive and some did not even notice it has changed backends. We also are now implementing an index for Elastic’s Application Performance Monitoring (APM) and applying it to some, if not all, of our codebases. Adding real time monitoring of the code allows our developers to drill down on resource costs to make our code fast and cost effective.  

**Getty Digital Project Dashboard**
Frontend: Vue, Vuex, Vue-Router, Vue-CLI
Backend: Wordpress, WP-REST
Deploy: EC2, S3, and Cloudfront 

The Getty staff is broken up into various departments; my department is Getty Digital. I built a dashboard that allows various users to add/edit their projects to this dashboard in Wordpress and then be displayed to other staff throughout the institution. Mainly this tool is for executive staff to keep track of the many digital projects underway at the institution. 



J. Paul Getty Museum and Trust

I am the frontend maintainer of [King Arthur Baking Company](https://www.kingarthurbaking.com/). King Arthur Baking Company (KAB) has strict standards of accessibilty. All the frontend work I have done for the site requires being able to move through the interface with the keyboard. Building accessible websites require quite a bit more work but doing this work makes all the difference for impaired visitors. 

Using Algolia as the backend I have built 2 differen interations of KAB search. Building Algolia components in vanilla JavaScript is more diffcult than building them in a JavaScript framework but still highly maintianable. We added multiple custom Algolia plugins for search faceting. Algolia is extensible and a developer can customize into almost anything. Here is the latest version of [search](https://www.kingarthurbaking.com/search?Product%5Bquery%5D=pizza#recipe_index).

I also created a modal print dialog that allows the user to customize their printed recipe. This required a lot of work CSS print styles. It ended up being a feature rich print experience. Click print on this page. [Crispy Cheesy Pan Pizza](https://www.kingarthurbaking.com/recipes/crispy-cheesy-pan-pizza-recipe).

King Arthur Baking Company fueled a baking craze during the pandemic, doing 2000% more business. I like to think I had a part in that.

King Arthur Baking Company

Quire is a modern, multiformat publishing tool designed to create books as authoritative and enduring as print, and as vibrant and feature-rich as the web, from a single set of plain text files. All without ever paying a fee, or setting up and maintaining a complicated server.

Quire is an ideal tool for anyone seeking to publish a beautiful, scholarly digital book optimized for visual imagery and designed to ensure its content is widely accessible and stable.

- Outputs publications in multiple formats (web, ebook, PDF, print-on-demand)
- Keeps source content in nonspecialized plain text to ensure reusability
- Supports visually rich scholarship in the tradition of print publishing
- Allows for a wide range of possible custom features and styles
- Persists without ongoing maintenance or updates once published
- Empowers users at any skill level to create dynamic feature-rich digital publications

I was lead developer for Quire CLI for 2 years and brought it to its first release. 

Quire

I coded a step-by-step field trip sign-up mechanism for the education department, which facilitated thousands of schools reservations.I rewrote the frontend of the NHM calendar to make the experience more image based to give a users a visual description of the events. To improve accessibility I designed and coded a mobile frontend. I wrote a Drupal module to provide an API that powered various views of the calendar throughout the site. I worked with our digital designer to add a modernized basic template that uses a new menu that makes us of Drupal’s menu system so it could be maintained by Drupal’s GUI. I also designed and coded a new template for Research & Collections News. 


nhm.org

**Backend**: Wordpress, WPGraphQL, Custom Express Endpoints
**Frontend**: NextJS, SWR, Typescript, payment gateway with Stripe
**Deploy**: Vercel, Digital Ocean
**Lighthouse**: 100 Performance 100 Accessibility 100 Best Practices 100 SEO

Mamalagels was built to sell custom products in a specific geolocation with a custom payment gateway. This site really shows how NextJS, SWR, Typescript work to connect content from Wordpress, payment from Stripe, and Node.JS/Express functions to generate stable HTML receipts that are accessible via a subdomain, and email correspondence via sendmail API. The Node.JS/Express functions run on the same server as the Wordpress site. Making use of these technologies together are able to create a fast accessible site, with a way to make purchases. My sister only wanted to sell in certain areas so I built a zip code checking system. Her bagel business Mamalagels needed more from the website, so during the pandemic we worked together to create purchase pathway forms that would work for her. The key with this site was increasing access by increasing performance and accessibility.


Mamalagels

**Backend**: OpenSea, web3 apis
**Frontend**: NextJS, SWR, Typescript, Three.js
**Deploy**: Vercel

I work with a group of developers and creators that make the Pills Universe NFTs. I built the interface of the most recent project as a way to re-mint a pill into a new one for a new avatar NFT system. When developing a web3 project using TypeScript becomes extremely valuable to know that the transaction or login process accepts the correct values. Numbers need to make use of the BigNumber types, which uses numbers in a more math driven way, but lets you know that you are using the right one. The data is added with useContext, which adds global state and with Typescript added the dispatch functions work every time. Using ThreeJS I also created the space scene that is used as the background of the interface.

I also maintain the story mode site, which runs on Jekyll and uses Netlify CMS also deployed on Vercel. I can’t say enough positive things about Netlify CMS, a great choice for a simple open source free CMS that just works. We're moving this site over to NextJS and Typescript currently.



Pills Universe

 I built a [ThreeJS](https://threejs.org/) model uploader and viewer and using [socket.io](https://socket.io/) users to chat about the model, share the mouse to move the model to show what they were chatting about for a node knockout 48 hour hackathon. This was an interesting project, pursuing the interaction between the users and how the handing off use of the camera in the world could work. I also added something where you could see the other users mouse as well, this something that you see in figma today.