Tony Tony Chopper: Character Portfolio

Inspiration

I wanted to bring Tony Tony Chopper to life in a way that’s interactive, cute, and chaotic, so I chose the flavor: Char‑icature. I was inspired by Chopper’s adorable personality, his many transformations, and the playful absurdity of a reindeer doctor eating cotton candy while saving lives.

What it does

You can feed Chopper cotton candy and watch him react with random cute expressions. You can toggle Doctor Mode to change the theme and see Chopper in “medical interface” mode. You can explore all of Chopper’s transformations, from Brain Point to Monster Point. It has a snow animation and a cute loading screen that says: “Chopper is diagnosing your page…”.

How we built it

HTML for structure and sections. CSS for gradients, card designs, animations (floating Chopper, hover effects, snow). JavaScript for interactive features like cotton candy reactions, Doctor Mode toggle, and snow animation. Hosted on GitHub + Vercel for a live, shareable link.

Challenges we ran into

Designing cute interactions without breaking layout responsiveness. Coordinating Chopper’s many forms and assets into a clean, readable grid.

Accomplishments that we're proud of

Fully interactive, whimsical Chopper experience that works on desktop and mobile. Successfully combined cute, chaotic, and snowy aesthetics in one cohesive design. The loading screen and animations really give the site a playful, alive feeling.

What we learned

How to make interactive character portfolios that feel alive. Using CSS animations + JS interactivity to add personality to a webpage. How to host HTML/CSS/JS projects live.