Interactive 3D Driving Portfolio

Low-poly 3D statues representing personal interests, gaming, fitness, and creative pursuits.
Interactive link zone—drive over floor targets to open GitHub, LinkedIn, Twitter, and Email instantly.
Interactive play zone where users can drive around, test vehicle physics, and explore mini-game elements.
3D billboards displaying featured web applications, software engineering projects, and technical work.
Custom 3D Pakistani flag landmark showcasing national identity and roots in the interactive map.
Timeline map highlighting experience as a CS student, creative developer, AI engineer, and freelancer.

💡 Inspiration

Standard web portfolios are often flat, text-heavy, and repetitive. I wanted to break away from conventional designs and turn the experience of reviewing my resume into a fully interactive, gamified journey! My goal was to create an isometric 3D world where recruiters, developers, and visitors can literally drive around to explore my background, technical skills, personal hobbies, and national identity.

🛠️ How I Built It

The project was built from the ground up using modern web 3D technologies:

Three.js & WebGL: Rendered the isometric 3D environment, dynamic lighting, custom materials, and camera dynamics.
JavaScript (ES6+) & Vite: Handled the core logic, modular architecture, fast build pipeline, and event handling.
Physics & Vehicle Mechanics: Implemented responsive mini-car controls (acceleration, steering, drifting feel) with collision detection for objects.
Interactive UI & Triggers: Designed floor target zones that detect car proximity—allowing visitors to press ENTER to seamlessly open external links like GitHub and LinkedIn.
3D Assets & Models: Integrated custom glTF 3D models representing billboards, an arcade machine, hobby statues, a dedicated play zone, and a custom Pakistani Flag landmark to represent my roots.

🚧 Challenges I Ran Into

Interactive Floor Triggers: Synchronizing keypress listeners (ENTER) specifically when the car resides within designated floor target boundaries required precise distance-checking and spatial collision logic.
Car Physics & Smooth Camera: Fine-tuning the car controls so that driving feels fun and responsive without clipping through static world models or losing smooth camera tracking.
Performance Optimization: Ensuring high FPS rendering across different screen sizes and GPU capabilities by optimizing lighting, shadow maps, and 3D asset poly counts.

🎉 Accomplishments That I'm Proud Of

Successfully combining gamification with professional portfolio showcase.
Crafting a unique cultural identity inside a web project featuring the 3D Pakistani flag landmark.
Deploying a smooth, bug-free WebGL application hosted seamlessly on Vercel.

📚 What I Learned

Advanced scene graph management and camera positioning in Three.js.
Spatial interaction logic for converting 3D car coordinates into web navigation triggers.
Best practices for bundling heavy 3D assets efficiently using Vite.

🔮 What's Next for Interactive 3D Driving Portfolio

Adding customizable car colors/skins.
Introducing subtle sound effects for car engine acceleration and interaction zones.
Expanding the map with more interactive mini-games inside the play area!

Built With

Submitted to

3D Websites Hackathon
- Winner 2nd Place

Created by

This project was designed, developed, and completed entirely by me as a solo project. I handled the concept, Three.js/WebGL development, 3D environment, car mechanics, collision detection, interactive trigger system, 3D asset integration, performance optimization, testing, GitHub setup, and Vercel deployment. No team members or external developers were involved.

Ahmad Shafique
Day Scholar | AI Automation Engineer | Full-Stack Web Developer