Best In Travel

-Lonely Planet

Best In Travel was a solo project I built for Lonely Planet/Red Ventures. This one was extra stressful (fun) due to a complete redesign about 3 months before the launch date. It's intention was to have lots of little "pops" and pizazz user interactions. I was able to make use of many parallax images, both horizontal and vertical which was great; lots of scroll interactions. That year's campain won two webby awards!

Terminal Addiction

-personal

This project was my attempt at replicating a terminal interface. It ended up being (basically) a text area and text input component with a massive amount of logic handlers. Originally, this was going to be my website, although I thought it ended up being too confusing for the average user. I'd still like to add some hidden easter eggs.

Study Match

-Red Ventures

This app was a bit of a challenge. We had to reach out to an API "decision engine" to request data before each render on the page, which really stretched our use of NextJs to the limit. This is where I first grew to enjoy working with NextJs.

EXPERIMENTS

These are components that I've used around this site or just goofed around with and decided to place here as a bit of a portfolio. Non-exhaustive, I'll be adding to this here and there.

Spotify Status

-personal

This ended up giving me some great experience on deploying with Vercel and how easy it is. Just a simple python script to fetch the currently playing song from the Spotify API. You can find the repo in my github.

CSS Sine Waves

-personal

Visit the about page to see it in it's full glory. This was derived from Jhey. Huge fan of Jhey, please check out his work and codepens. This one is a series of square divs that have an animation delay controlled by a sin calculation.

Flicker Effect

-personal

Achieved via an SVG clip mask, before and after pseudo elements, and a little bit of animation. Too janky for my liking.

Snow Effect

-personal

Pictured in the background, this idea started as an attempt to make a "rain hitting the window" effect. Unfortunately the logic for this is incredibly difficult to figure out (not the rain drops themselves but the merging of drops and streaking down the window). I did find an incredibly well built sim but attempting to convert it to JSX wasn't worth the squeeze. The snow effect on the other hand was a great way to learn PixiJS, GSAP, and how best to blend the two. The snowflakes are a PixiJS particle container where each snowflake is a sprite. The individual snowflakes are animated with GSAP.

Masked Text

-personal

This is a concical gradient background rotating behind some clip masked text. This originally was from @Jhey but animating css variables in gradients isn't well supported on firefox. To support this effect on firefox I used JS to increment the angle variable and then update it via "requestAnimationFrame".

Glitch Effect

-personal

A cool effect, but kinda hard to look at. Maybe better suited slowed down, or for something that's not a CTA.