Squarifier

Originally created for my wife; a simple way to make vertical phone photos of products into squares for uploading to Poshmark.

Each batch of photos loaded into the file picker is processed on its own web worker thread with the canvas API via OffscreenCanvas, and packed into a data URL for download. Multiple photos are zipped with JSZip, slightly modified from the publicly available version for use with web workers.

Stack: Javascript

ONE/SIZE

Although I work on many brand sites and various other projects, the ONE/SIZE website is where I've invested most of my effort. I didn't do the initial build, but over the last 2 years I've brought the site from over 1.5 MB of JS bundle down to less than 200kB compressed and minified. At this point, I've rebuilt or refactored most of what you see.

Most of the gains have been rewriting UI components with vanilla JS to eliminate wasteful usage of third-party libraries; one notable example was my predecessor including the entire GSAP library into the site bundle, but only using it for a slide carousel, which is a trivial task with a few lines of CSS+JS.

I've also led internal efforts to add file size limits to our content policy, in an attempt to keep above-the-fold images and gifs/videos to reasonable sizes for our mobile users.

Most recently, I rebuilt a find-your-skin-tone matching quiz with React. Previously, each of the four separate quizzes was a large liquid file replicated four times, running on some pretty hairy vanilla JS. The new quiz is faster, cleaner, easier to maintain and has all the quizzes living in one unified place. You can check out the quiz here.

Shopify liquid is used to construct a JSON script tag with the product variants' metafield information used for traversing the quiz tree, the React app reads it in and does the rest.

Other Work

I've worked on several other properties for my company as well. Here is a brief list of the sites I've worked on to various degrees:

• IGK Colorgames

Interactive experience designed + built by me for the launch of IGK hair dye products.

Other than the card-back images, all graphics and animations were coded with vanilla SVGs and VueJS for tying it all together. The color quiz and try-on experience are not mine, though

• LBP Pro

Non-public storefront for pro customers; VueJS SPA built on Vue Storefront eCommerce framework. In addition to normal maintenance, I also built a bulk-ordering experience for our larger customers.

• R+Co

Various small-to-medium features and bugfixes

• R+Co Hairmail

Product recommendation app built with Ionic. Used by salon artists to build carts of recommended products to send to their customers, for which the artist gets affiliate credit. Invitation only so I don't have a link :/ I did roughly 90% of the design and implementation.

• R+Co Education

Jury-rigged a VueJS digital calendar with date range selection and some boolean filters into a platform that wasn't really designed for adding extra stuff

• Elaluz

Similar optimization work to ONE/SIZE, though not as extensive. Also a number of features, such as recommended product carousels and a free-gift module