How I built a portfolio you can ride through.

The brief I wrote for myself had three rules. A recruiter must reach the facts in under 20 seconds. Anyone curious should find something worth exploring. And the whole thing has to run in a normal browser, on a normal phone, with no install.

• The road is the career. Scroll moves you forward in time and distance, from Bangalore to a campfire at the end.
• Each stop is a case study. A landmark in the world makes the result physical: lanterns for markets launched, a gate for a new country.
• A shortcut for busy people. The “Portfolio” button skips the ride entirely.

⤢

The road is two sine waves added together, one for gentle curves and one for tighter bends. The terrain is noise, pressed flat near the road so the bike never floats. Trees, grass and flowers are scattered with a seeded random generator, so the world looks the same for everyone.

// the whole road in two linesexport const roadX = z => 38 * Math.sin(z * 0.011) + 16 * Math.sin(z * 0.027 + 1.3);export const roadY = z => 5 * Math.sin(z * 0.005 + 0.5) + 2.5 * Math.sin(z * 0.013);

• Low-poly on purpose. Flat shading hides the low triangle count and gives the world its paper-craft look.
• Instancing everywhere. Thousands of trees, grass blades and flowers are drawn in a handful of calls.
• Biomes by distance. Highway and canyon, then forest, lake and coast, so the scenery changes as the story does.

⤢

Each stop has a landmark tied to its result, a floating headline in the world, and a panel with the facts. Landmarks react to your progress: they switch on as you arrive, not before.

// Liquid I.V.: each lantern lights once you pass its thresholdprogFx.push(tt => {  const on = tt > th;  lan.material = on ? warmBasic : darkM;});

⤢

⤢

⤢

⤢

On desktop it uses the keyboard; on phones, a thumb joystick and a jump button. After a few seconds (straight away on phones) the HUD folds into a slim bar with your speed, level, today’s challenge, a hot-or-cold treasure readout and one-tap Journal, Photo, Call, Bell and Exit, so the view stays clear. The map lives inside the watch.

• Orb trails. Gold orbs line the side roads and run out to landmarks, so there is always somewhere to head. Five in a row triggers a short speed boost.
• A treasure hunt. Six chests are buried around the map, with one riddle at a time and a hot-or-cold meter. Each chest holds a line about a real project.
• Postcards. Ten scenic views glow pink. A photo taken inside one goes into the journal as a postcard.
• Progress that shows. 16 lanterns, 5 secrets, 12 stamps, 30 animals to spot, 13 challenges and a daily challenge with a streak. Everything earns XP toward seven levels, each with a level-up screen, and the journal can export a shareable card.

⤢

MujaSauros, the small dinosaur riding pillion, got a brain to match the bigger map. He remembers returning visitors and how often he has been petted, comments on each new region, points you toward places you have not seen yet, and smells buried treasure from about 100 m away. When you slow down near a chest, he jumps off and digs it up. He also sneezes in the blossom valley, yawns at night, tilts his head when you stop and shakes off after water.

⤢

• One surface style for every panel: solid dark, a thin border, a soft shadow and the same button heights everywhere.
• The watch is navigation, a music player and an easter egg. Tap its face five times to crack it open.
• Messages, not speech bubbles. MujaSauros talks through notifications that slide in above the watch and buzz it, so his lines stay readable at any camera angle. Unlocks pop up with the XP they earned and a short synthesised chime.
• Settings hold the adaptive score; toggles for nature ambience, campfire crackle, braking sound and reward chimes; Auto or Low graphics; Full or Reduced motion; world controls for the day cycle, season and weather; and one button that silences everything.

⤢

⤢

The music follows the ride: it thins out on the highway, blooms in the forest and settles into a warm drone at the campfire. Arriving at a stop plays a short chime, and braking hard gives a tyre scrub. Every layer can be switched off in settings.

// quality tiers, measured every 60 framesif (ms > PERF_DOWN && tier > 0) setTier(tier - 1);   // drop resolution, shadows, draw distanceelse if (ms < PERF_UP) setTier(tier + 1);            // recover when there is headroom

• Deferred building. The road and landmarks appear first; grass, flowers and critters stream in over the next few frames.
• Low-power detection. Devices with 4 cores or 4 GB of memory start on a lighter tier. Budget GPUs are recognised by name, start at 75% resolution and are capped at 30 fps to save heat and battery.
• Resolution as a last resort. On the lowest tier, if frames are still slow, render resolution steps down to as low as half, then climbs back when there is headroom.
• Only move what moves. Matrix updates skip static and hidden objects, instanced sets are split into spatial chunks for culling, and terrain streams in tiles as you ride.
• Survives a lost GPU. If the phone drops the WebGL context under memory pressure, the page lets the browser restore it instead of going blank.
• Crisp UI on every screen. Text and panels render at full device resolution even when the 3D scene steps down.

The portfolio page carries the case studies, client sites, career, toolkit and two clear routes to get in touch: full-time or freelance. It is also what search engines read, so the ride never hides the substance.

⤢