2020-PRESENT Third and Grove - Frontend Developer
Ouster - https://ouster.com/ - Technical Architect, Fullstack and Frontend Developer Frontend: Gatsby/React Backend: Contentful, Wordpress Deploy: Netlify/Gatsby Cloud, Pantheon CI: Gitlab CI/CD
- Architected and built site to be fully translated in Chinese and Japanese
- Maintained code to be fully updated and performance testing
- Architected deployment process for complex decoupled project
- Worked with QA to make site accessible and performant
- Worked with Ouster designer to build features into the website using Figma
- Styleguide/Design System built with Storybook.js
- Developed scroll animation, autoplay video, video overlay components
- Each commit is tested with Husky
- Uses preview builds on Wordpress and Contentful, I architected and implemented this strategy
- Migrated site from Netlify to Gatsby Cloud for hosting and builds
Third and Grove- https://www.thirdandgrove.com/ - Technical Architect, Fullstack and Frontend Developer and Designer Frontend: Gatsby/React Backend: Drupal 8 Deploy: Netlify/Gatsby Cloud, Pantheon
- Maintained code to be fully updated and performance testing
- Worked on getting the site’s components tested in Cypress with Github Actions. This can be complex because Gatsby builds can take some time if not cached correctly. I build a script that would check for a Gatsby Cloud build completed, and if it was a build that was not production it would instrument the code to be tested with Cypress.
- Worked with design to build features into the website using Figma
- Each commit is tested with Husky
King Arthur Baking - https://www.kingarthurbaking.com/ - Frontend Maintainer Frontend: Twig Templates, Gulp, SCSS, Algolia Instantsearch.js Backend: Drupal 9, Algolia Deploy: Acquia CI: Travis
- King Arthur is very strict when it comes to accessibility and adhering to design system so all features that I have built into the site are screen reader and keyboard accessible. Features that did not pass QA will not make it to production.
- Built a highly customisable print feature for recipes. After clicking the print button you can change the recipe to suit you.
- Built a custom Algolia search implementation. This included the main search page and the search input overlay. The design and implementation work went through multiple changes to make it accessible as possible.
Isabella Stewart Gardner Museum - https://www.gardnermuseum.org/ - Technical Architect, Frontend Developer and Backend Developer Frontend: Twig Templates, Gulp, Webpack, SCSS Backend: Drupal 9 Deploy: Acquia CI: Travis
- Isabella Stewart Gardner Museum looks at accessibility as core value in their website. When building for the museum we have multiple targets for adhering to the design system but we also look at accessibility as part of the design.
- I maintain the module that syncs data from Gallery Systems to populate the thousands of art objects in Drupal.
- Third and Grove inherited this site from another agency, so I rebuilt much of the frontend tooling.
VMware Cloud Health Redesign - Lead Frontend Frontend: Twig Templates, Gulp, SCSS Backend: Drupal 9 Deploy: Acquia CI: Travis
- Built design system for full redesign
- Built style guide in KSS
- Worked with VMware’s designer through Adobe XD
Heritage Foundation Homepage redesign - https://www.heritage.org/ - Lead Frontend Frontend: Twig Templates, Webpack, SCSS, Youtube API Backend: Drupal 9 Deploy: AWS CI: Travis
- Complete redesign of homepage
- Built a custom Youtube API video player
- All features passed accessibility and design QA
San Francisco Public Library - https://sfpl.org/ - Lead Frontend Frontend: Twig Templates, Gulp, SCSS Backend: Drupal 8 Deploy: Pantheon CI: Travis
- Built new frontend features and components into existing architecture and design system
- San Francisco Public Library follows strict WCAG specifications
Dartmouth College Covid 19 student info micro site - https://covid.dartmouth.edu/ - Lead Frontend
- This project was a squarespace site. I built a link between a google sheet that held data about students and faculty's Covid-19 status and produce responsive tables to display the data.
Backroads - https://www.backroads.com/ - Lead Frontend Frontend: Twig Templates, Gulp, SCSS Backend: Drupal 9 Deploy: Acquia CI: Travis
- For backroads.com I also built a PDF generator for their trip itineraries pages. I built a module that would output the HTML from the itinerary page and then preprocess the page to return a PDF that could be printed for you trip
- Extended the site’s design system to have new features and components.
- Worked with Backroads designer to build new components.
Chestnut Hill Realty - https://www.chr-apartments.com/ - Lead Frontend Frontend: Twig Templates, Gulp, SCSS Backend: Drupal 9 Deploy: Acquia CI: Travis
- Chestnut Hill Realty wanted to add a layer to their design system that was a fully accessible version of the site. I created a high contrast version of the site with a toggle to turn it on and off.
Ultimate Kronos Group - https://www.ukg.com/ - Lead Frontend Frontend: Twig Templates, Gulp, SCSS Backend: Drupal 9 Deploy: Acquia CI: Bitbucket Pipelines
- Frontend architect and developer for new build and new design and design system.
- Build is strictly tested for accessibility.
- Built include animations and dynamic design features coded with CSS3 and Green Sock.
Davis Polk - https://www.davispolk.com/ - Lead Frontend Frontend: Twig Templates, Gulp, SCSS Backend: Drupal 9 Deploy: Acquia CI: Travis
- I was brought onto this project to do all the animations and transitions on the site.
- I used Green Sock and CSS3 to build the dynamic parts of the site.
2017-2020 J. Paul Getty Museum and Trust - Software Engineer
- Internal Project Dashboard to monitor project development and milestones - Frontend: Vue, Vuex, D3.js Backend: Wordpress, WPGraphQL Testing: Cypress/Jest Integration: CircleCI, Deployment: AWS, Netlify. This dashboard allowed users to update various aspects of a project in Getty Digital. The design needed animated graphs to show the state of the project, D3 was a great solution for this. Wordpress as deployed on AWS and the frontend tool was deployed on 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. - Backend: Apache Nutch, Elastic Stack Frontend: Vue, Vuex Testing: Cypress/Jest Integration: CircleCI Deployment: AWS, Netlify
- New Docent Website. The docent site was a major refactor since the last site was built 7 years ago. - Frontend: Vue, Vuex Backend: Wordpress, WPGraphQL Testing: Cypress/Jest Integration: CircleCI Deployment: AWS. 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
- 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. - Quire CLI, Hugo, Webpack, Bulma, Babel, Deployed to Netlify https://www.getty.edu/research/exhibitions_events/exhibitions/bauhaus/new_artist/
- I worked on the redesign of Getty's main website with design partner Area17 building components in Nuxt/Vue/Storybook and deployment architecture. - Frontend: Nuxt.Js, GraphQL, Bulma, Styleguide: Storybook.js, Backend: Contentful, Deploy: Netlify https://www.getty.edu/
2013-2017 Natural History Family of Museums - 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. For both institutions I created a video player that worked with the YouTube API for a digital engagement campaign. All three institutions have 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 created a custom ticketing solution for the bi-annual Ice Age Hair Ball and a complex form for school visits at all 3 insitutions. Both form projects had extensive server and client side requirements.
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. For our Pterosaur exhibit, I created a rideshare style Google map that followed in real time the arrival of the exhibit from the American Museum of Natural History in New York to NHM in Los Angeles. I created a meme generator for the Extreme Mammals that was fully editable and the image and page could be recalled for sharing.
- 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
- 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
- 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.
- 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.
- 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
- Built Promotional website for new show 'Black Jesus'
- The site receives several hundreds of thousands visits a month
- 2019 Webby Award Winner
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
Otis College of Art and Design Los Angeles, California 2002-06
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.
- Ruby on Rails
CMS, Frameworks and Libraries
- Prince XML
- Apache Nutch
- Elastic Stack
- 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