About

PROFESSIONAL EXPERIENCE

2020-PRESENT Third and Grove - Senior Frontend Engineer

At Third and Grove we do our best to adhere to the Agile development methodology using Jira and developing a kanban board that suits that project's needs. Our Jira boards usually follow a pattern of to do, in progress, blocked, code review, quality assurance, ready for staging, on staging, user acceptance testing, ready for release and done. When code is ready for deployment, we then update a deployment checklist designed specifically for that project. Agile creates an environment where most mistakes or issues can be identified before they make it into production.

To build development environments we use Docker, Vagrant and Lando. We use Travis CI and Github Actions to connect to various deployments (AWS, Acquia, Pantheon, Netlify, Gatsby Cloud, Vercel).

2017-2020 J. Paul Getty Museum and Trust - Software Engineer

QUIRE: Open-source multiformat publishing tool

I was the maintainer of Getty Publications open-source digital publishing tool Quire. Quire is a tool that can create dynamic publications in a variety of formats, including web, print, and e-book. Quire is an ideal tool for publishing beautiful, scholarly digital books optimized for visual imagery and designed to ensure publication content is widely accessible and stable. Quire leverages Nodejs for the CLI, Hugo/11ty (Static Site Generator), Bulma, Pandoc (File Converter), Prince XML (web to PDF). Quire adheres to strict accessibility standards of WCAG. Quire also has flexible deployment built in, deploy to your favorite serverless network. Theme is tested with Cypress/Jest, CLI is tested with Jest. CLI bundled with RollupJS. CircleCI for integration and fail safe releases. I built a multi environment Webpack configuration to bundle JavaScript and CSS for the site Hugo generates. Quire also includes an executable binary I wrote in GO that could be called from the CLI to transform images into IIIF format, a museum standard.

Getty Search - Backend: Apache Nutch, Elastic Stack Frontend: Vue, Vuex Testing: Cypress/Jest Integration: CircleCI Deployment: AWS, Netlify

Another developer and I rewrote the getty.edu search functionality with Elasticsearch. We built several frontends 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 was positive and some did not even notice it had changed backends. We also implemented an index for Elastic’s Application Performance Monitoring and applied it to some, if not all, of our code bases. Adding real time monitoring of the code allows our developers to drill down on resource costs to make our code fast and cost effective.

New Docent Website - Frontend: Vue, Vuex Backend: WordPress, WPGraphQL Testing: Cypress/Jest Integration: CircleCI Deployment: AWS.

The docent site was a major refactor since the last site was built 7 years ago. The WordPress site connects to a scheduling system and uses this data to create a custom experience for each user based on their role and schedule. AAM award winner

Bauhaus Beginnings: Building the New Artist - Frontend: Quire Backend: Markdown files Integration: CircleCI Deployment: Netlify.

The Bauhaus 100th anniversary site for the Getty Research Institute site was built using the CLI tool I maintained. I worked with our designer to build the site from Figma. 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, as well as custom themes that I created for this site.https://www.getty.edu/research/exhibitions_events/exhibitions/bauhaus/new_artist/

Redesign: getty.edu - Frontend: Nuxt.Js, GraphQL, Bulma, Styleguide: Storybook.js, Backend: Contentful, Deploy: Netlify

I worked on the redesign of Getty's main website with design partner Area17 building components in Nuxt/Vue/Storybook and deployment architecture. https://www.getty.edu/

Art & Architecture Thesaurus - Backend: Python Flask Frontend: Vue Deployment: AWS

I worked on was the Art & Architecture Thesaurus API which was built with Flask. Using Vue I built a frontend solution that would make interfacing with the data more useful for the wide array of international institutions that needed to access the data.

Getty Digital Project Dashboard - Frontend: Vue, Vuex, Vue-Router, Vue-CLI Backend: WordPress, WPGraphQL Deploy: AWS

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.

2013-2017 Natural History Family of Museums (NHMLA) - Lead Digital Developer

For NHM’s main site (nhm.org), I modernized the code to fit the demanding needs of web enabled devices, and with every new project, sold my colleagues on the advantages of this modernization even if it wasn’t initially an institutional priority. I have led many section-specific updates to the sites. All three institutions had various departments with web related needs. I make sure that each one has the ability to get what it needs out of the web. For the La Brea Tar Pits and Museum (tarpits.org), I worked with Hello Design to create a mobile theme using the existing Drupal 7 site.

I helped create the L.A. Nature Map, an interactive map that shows the discoveries of the iNaturalist app and website in L.A. County. The L.A. Nature Map lived on a micros site which supported an institutional science project called the Urban Nature Research Center, which I built a blog to better showcase the scientists’ work and other informational features on the site to help understand the urban plants and animals in Los Angeles.

For the La Brea Tar Pits we have an institutional initiative called the Ice Age Hair Ball and I was tasked with creating an online ticketing form which accepted tickets purchases, donations and pledges. It worked through the CyberSource API and through JS and PHP I was able to create custom coupons and purchases through mobile and desktop devices through front end solutions that I designed. The purchase path also was secure and adhered to PCI compliance.

For exhibitions, I developed microsites or pages that would have a special look and feel to promote the new exhibit, while still connecting to the overall brand of the institution. I enjoyed building these since I would be deeply involved in design and I got to show off some of my creativity through coding and design.

Another major project was a micro-site for the Pterosaurs exhibit. I converted old code from a game the institution paid for several years ago into a robust, responsive game that allowed users to determine what pterosaur they were based on off question logic. The entire site was built off a responsive framework that I developed, because I needed all the code to play together. I created a “pterosaur tracker” that used the Google maps api and js to have a pterosaur fly across the U.S. to stops on its way to the museum. I made use of 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 requestAnimationFrame and the rendering engine which gave the pterosaur flying on the Google Map 60fps allowing fluid animation and preventing jitter.

I created a meme generator for the Extreme Mammals that was fully editable and the image and page could be recalled for sharing.

I created a custom calendar interface that aggregated events of different types. I built an API from Drupal and used JavaScript, CSS and HTML to build a frontend based on the user’s query. Events also had different types, that was part of the interface.I designed this entire solution.

I built and maintained an internal scheduling tool that would allow different departments to schedule rooms in various buildings that NHM owns.

I built a real time leaderboard for the City Nature Challenge using the iNaturalist API. This was a community event where users identified plants and animals and as those got processed through iNaturalist they would show up in their API. The site we created became the main informational site and contest status for a worldwide event.

• Project lead and strategist for all digital properties and projects
• Administrated LAMP stacks on 3 Redhat servers (dev, stage, production)
• Managed multiple custom forms with PHP and NodeJS backends, secure processing and notification was always my highest priority.
• Integrated development between datasets from multi backends (MYSQL and MongoDB) and APIs.
• Made use of Google Maps API and JS Canvas API to create an interactive Google map tracking application with custom directional image of a Pterosaur that followed a predetermined path set in KML file that would finish on a given date
• Used Gulp to compile SCSS and JavaScript
• Various JavaScript frontend development (interactive, utility, game)
• All deployments were via dedicated Rackspace servers via Gitlab deploy scripts

2012-2013 The Confluence Group - Creative Director/Web Director

The Confluence is a digital marketing, advertising, and publicity company. I was hired to create a system to handle their massive database of websites, mostly consisting of print, radio, and TV info data. They needed a way to enter new information into the database, a fast faceted search, and ways to output reports.

• Built 3D animations with 3Ds Max, VRAY, and composited in After Effects (https://vimeo.com/40062967)
• Created various promotional sites for our affiliates
• Retouched photos and edited promotional videos
• Maintained Drupal instances for a custom reporting dashboard for clients (Each client had their own private dashboard to view the stats from the advertising campaign)
• For data visualizations for reporting using D3.js and Highcharts.js.
• Deployed via Pantheon

2009-2012 Flaunt Magazine - Digital Design Director

As the Digital Design Director at Flaunt Magazine I worked with photographers, artists, and advertisers to create the unique and intricate covers every month. Flaunt’s cover was actually two covers: The main art cover and then a second layout that was the main interview or main fashion story for that issue. To create this work, I used Indesign, Illustrator, and Photoshop, and for the more intricate vectors I used a program called Rhino 3D.

For the website at Flaunt, I maintained a Linux Ubuntu server leveraging Rackspace Cloud for scalability. This allowed me to use Varnish Cache, Memcached, and an AWS CDN for a highly available server that was able to handle up to a million visitors a day. I designed, implemented, and maintained the site while also working on the magazine.

Building, maintaining, and designing the Digital properties at Flaunt magazine required working with content editors for the site, editors, interns, writers, photographers, artists, illustrators, musicians and various other content creators. The evolving nature of the kinds of media and stakeholders created some interesting design problems to solve. That is what is great about working in digital; it also provides a lot of amazing solutions for almost any situation.

• Controlled the flow of all visual media within Flaunt Magazine’s web and print media pipeline.
• Design and implement new features for flaunt.com
• Maintained a high performance Rackspace cloud server that ran a Drupal instance with CloudFront CDN
• Maintained and facilitated all technology at the office, including, large-format printers, web and LAN servers, cameras, computers, and software
• Organized and edited a large range of media types, from streaming video to 3D models and high-resolution graphics

FREELANCE

Pills Universe NFT project

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.

Mamalagels

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. This is my sister’s company, and she only wanted to sell in certain areas, so I built a zip code checking system. We created purchase pathway forms. The key with this site was increasing access by increasing performance.

ACLU

• Built Drupal 7 module to make new optional frontend styles for content
• These features were created for the Southern California ACLU but were pushed to the national sites

Adult Swim

• Built Promotional website for new show 'Black Jesus'
• The website made use of the Javascript Canvas API, Youtube API and CSS3 to showcase the promo video in a 'heavenly' way. The scene contained animated clouds and god sized hands.

Cat Bounce

• Rewrote high traffic Flash website to JavaScript using Matter JS and Webpack 4.
• The site receives several hundreds of thousands visits a month
• 2019 Webby Award Winner

PERSONAL PROJECTS

Websites & Art

• https://twitter-checker.vercel.app - Frontend: NextJS and SWR APIs: Twitter, Bot or Not
• https://gifs.naeluh.vercel.app - Frontend: NextJS and SWR APIs: Giphy
• https://the--law--says--vote.vercel.app - Frontend: NextJS and SWR - for this site I used Leaflet and OpenStreetMaps for the map, opencage for location, then I parsed the XML on these pages https://www.fvap.gov/xml-api to get the voting data
• gifpaint.in
• yourimage.io

EDUCATION

Otis College of Art and Design Los Angeles, California 2002-06

SKILLS

Creative, philosophical thinking based in logical and algorithmic coding experience and know-how to create unique solutions for all design and development problems. Expert knowledge of creative and development software in Linux, Windows and Mac.

Languages

CMS, Frameworks and Libraries

AWARDS

• 2021 22nd annual Media & Technology MUSE Awards Juror for category 2020 Response
• 2020 The American Alliance of Museums MUSE Award Winner for The Bauhaus 100th Anniversary site for the Getty Research Institute
• 2019 The American Alliance of Museums MUSE Award Winner for The Getty Docent Site
• 2019 Webby Award catergory Weird for cat-bounce.com
• Certificate of achievement from Mayor Antonio Villaraigosa for revitalization project
• Folio Ozzie Award
• Best Overall Design, Consumer Silver Award - Flaunt Magazine April, 2010
• Best Cover, Consumer Under 250,000 Circulation Bronze Award - Flaunt Magazine: The Census Issue April, 2010