Header

Mike Grail

Creative Direction, Full-stack Dev (GSAP, p5.js, Svelte, TypeScript, Vite)
↗ Live Site · ↗ GitHub

Mike Grail is dedicated to showcasing Michael Yang's designer clothing collection. Michael's writing is honest, appreciative, and never flashy, defying the "in-group vs. out-group" dynamic that is typically seen in the online fashion space.

Mike Captcha, an extension of the site, is a fashion themed, behavior-based CAPTCHA. It collects interaction metrics through the browser, then validates behavior server-side through API calls, and returns a pass token that gates access to the site's landing page.

In this project, I led the visual identity, photographed and edited all accompanying assets, and implemented the site's frontend and backend functionality.

Server-side Validation

The browser tracks duration, number of movements, and jitter, then sends the data to the server to be verified.

Backend

"Select all squares" Captcha

One challenge I faced was that I wasn't sure how to make the UI for the grid captcha. I knew that I wanted to use a 4x4 square grid, but I wasn't sure to what extent I should mimic Google's reCaptcha. Luckily, I was able to get feedback from multiple people who were more knowledgeable about UI/UX design. Eventually, I arrived at a design that was more minimal and cohesive with the rest of the website.

Closing Thoughts

It was really interesting to think of a way to combine my interest in fashion with creative web in a way that felt authentic to me. Also, integrating the Captcha was a good way to practice concepts I learned in my computer science classes. Thank you to Michael Yang for sending me pictures of himself and his grails, even at the most inconvenient times. Special thanks to Leslie Liu, Ian Giles, and Christy Yu for giving me a lot of great feedback on how to improve the UI as well!

Footer