Today, I officially switched my domain over to the website you're seeing now. I'm posting this in memory of the previous version of my portfolio. It wasn't much, but I do really enjoy the op-art eyeball animation I managed to pull off with a simple SVG and GSAP. RIP, little buddy. You were here for a good time and, to be honest, a longer time than I intended.

Last week, we relaunched the website for our friends over at Teague, one of the coolest design consultancies in the biz. This was an interesting project because it was more evolution then revolution. We launched a previous version of their site 4+ years ago. Rather than throwing that work out and starting over, We spent much of our time rethinking and reimaging our original designs to make them more streamlined, resilient, and flexible.

This personal project began as conversation with a coworker about a tool we wish we had for a branding project. We wanted a way to generatively create SVG squiggles that we could manipulate across different axes like sharpness, flow, size, etc. Developing it required a lot of mind-bending research into the technical details of how SVG paths are drawn and the math behind sin waves, but the result is a simple and easy-to-use single-purpose app.

I have always found it frustrating that if you want to look for a stock image without leaving Figma, you have to choose a plugin specific to a single stock image resource. AllStock is a one-stop shop for finding and using high-quality images inside of your Figma projects, allowing you to browse popular free libraries like Unsplash, Pexels, and Pixabay all at the same time. Built with Svelte, Tailwind, and Typescript.

For the team modal on Carbon Direct's sites, we wanted to leverage the best parts of single- and multi-page app experiences. When a team member's card is clicked, we intercept the navigation, update the URL bar, and open a modal displaying their profile without reloading the page. When the modal is closed, the previous URL is restored and, because we never left the page, we're able to seamlessly return the user to the exact spot they left off.

I've personally trended towards simpler, quicker page transitions recently, but the ones on GLY's site are one of the features that people comment on most. I think it's the quick pop of color you get as the page animates off combined with the fact that the entrance animations happen relatively quickly.

This is my first Figma plugin—a simple, flexible lorem ipsum generator. It smoothes out some of the issues I have with other, similar plugins. Specifically, it runs through a bunch of custom logic before outputting the result to make sure that you end up with ipsum that look more like proper sentences (insofar as a dead language can look like English).

There's always a handful of modules where the responsive design approach isn't immediately obvious. Take the 'Constructive Optimism' component for example—you have a circle centered inside a div that in turn has text centered inside of it. Part of what makes it visually interesting is having two sides of the circle cropped off the screen at all times. It took a bit of wrangling to make sure that we were always cropping either the top and bottom or left and right, depending on the screen size.