Innovative Interactive Portfolio: Real-Time 3D Physics Hero

Innovative Interactive Portfolio: Real-Time 3D Physics HeroInnovative Interactive Portfolio: Real-Time 3D Physics Hero

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Sudeepto Bose

• 4h

Personal Portfolio Website — With a Real-Time 3D Physics Hero

Role: Creative Developer · Stack: React, Three.js (R3F), Rapier, GSAP, Blender

I designed and built my portfolio site end-to-end — and made the landing experience something visitors can actually play with. Instead of a static hero, the site opens on a zero-gravity physics playground: 30 floating 3D mines you can shove around with your cursor, orbiting a robot head that tracks your movement, all running at 60fps over bold typography.

Under the hood of the hero:

Physics: Physics world with a custom centripetal impulse system that pulls mines back to center, so the scene survives any amount of flinging. A kinematic pointer collider lets visitors physically knock objects around.

Rendering: Custom Blender GLB assets, with the whole mine field drawn in just 2 GPU draw calls via instanced meshes. Post-processing with ambient occlusion, bloom, and SMAA.

Every device: Mouse tracking on desktop; touch + gyroscope control on mobile — the head turns as you tilt your phone, with the iOS permission flow handled properly.

Performance: The site benchmarks the visitor's device on load and scales quality across three tiers. Physics and rendering fully pause when the hero scrolls offscreen, so the rest of the page stays fast.

The result: a portfolio that demonstrates what I do before you read a single word — creative development where design, 3D, and engineering meet.

three.js 3D Modeling Frontend Development Web Development Blender React

Sudeepto Bose

• 3h

Live Link - https://sbose-folio.vercel.app/

Krittiya Clark

pro

• Jun 26

Hero video website animation built with Next.js + Tailwind CSS + GSAP

Claude Next.js klingai

Zhan Y.

• Jun 29

Looks great, Krittiya!

Shakeel Ur Rehman

• Jun 27

App Name: GigPulse

Category: 📊 Dashboard + 🤝 Social/Community

What it does: GigPulse is a personal freelance project tracker built for independent professionals who juggle multiple platforms. Freelancers can log their projects, track earnings per platform, monitor project status, and attach video demos of their work all in one private dashboard. The community benchmarking layer lets users see anonymized stats from other freelancers in their niche, so you always know how you stack up.

How I built on top of the AI-generated base: Bubble AI generated the core dashboard structure and data architecture. From there, I manually engineered the video upload and playback system per project, built privacy-filtered data workflows so each user only sees their own data, added platform-specific earnings tracking with status badges, and designed a clean dark UI with collapsible video players. The AI gave me the skeleton, I built the muscles. This is the Bubble AI-generated base after my initial prompt 'Build a freelance analytics dashboard app called "GigPulse" where freelancers can track their gigs, proposals sent, earnings per platform, client response rates, and monthly revenue goals. Include a community benchmarking section where users can see anonymized stats from other freelancers in their niche. Add user authentication, a personal stats dashboard with charts, a goal-setting tracker, and a community feed where freelancers share weekly wins.' Everything you see in the final build beyond this point was manually engineered.