Mission: Case Study

A portfolio you play

Most portfolios are a list you scroll. I wanted mine to also be a place you can mess around in. So I built a second front door: a 3D ocean at night where my work is hidden inside floating barrels, and looking at it is a mission.

This is the fun half of this site. Same projects, no scrolling.

The mission

Barrels drift across the water. Each one is a project. Hover a barrel and a preview card pops up on a tether line. Click it and the barrel explodes, sending a little file "soul" flying up into a Win95-style console docked on screen. Collect every public case study to trigger a Mission Success screen with fireworks.

Color tells you what a barrel is. Red are public case studies, gold is my resume, purple are the NDA projects, locked until you find the password. The console keeps score with folder counters that tick up as each file lands.

A whole world to break

The mission is the spine. The rest is there because it was fun to make.

• Smash the island. Click the green wireframe island to drop asteroids on it. Each one craters it and rolls a tsunami toward the camera. Beat it up enough and it erupts like a volcano, then settles back to green.
• Make black holes. Click the sky to spawn one. It grows an accretion disk, eats nearby stars and even the moon, then bursts outward like a quasar and flings everything away.
• Don't click me. My body floats face-up on the water. Click it and I shake, yell, helicopter off into the sky, and become a permanent blue star in the field.
• Go under. Scroll down past the water into a second scene: a sea floor, a swaying seaweed forest, and a sunken galleon you can click to open my LinkedIn.

A codec-style popup, in the spirit of Metal Gear Solid but dressed in the same terminal chrome as everything else, teaches you these one at a time.

How it's built

The whole thing is React Three Fiber and drei, running in the browser. No backend. The ocean is a rippling wireframe that reacts to clicks and drags. The barrels are a physics-lite float-and-drift system. The deform, the explosions, the black-hole gravity, and the firework text are all custom shaders and per-frame vertex work.

It shares this site's design language. The console, the notifications, and the back button all reuse the same window chrome and the same button style as the main menu, so the fun version still feels like the rest of the portfolio.

Why

A recruiter can read the case studies the normal way. But the ocean is the part people remember, and it shows the thing a static page can't: that I can design and build a real-time interactive 3D experience and make it feel good to touch. The toy is the proof.

Role and stack

Designed and built by me. Stack: Next.js, React Three Fiber, drei, and a pile of custom GLSL. Part of this portfolio, reached through the Fun Portfolio button in the main menu.