AI/ML Software Engineering Student Portfolio

Ambitious first personal portfolio using three.js to create an immersive exploration experience.

Comment

AI/ML Software Engineering Student Portfolio

Inspiration

I wanted to create a portfolio that felt alive — a 3D experience rather than a flat website. Most portfolios, even with 3D touches, stay 2D at heart. I asked myself: what if the portfolio itself existed in 3D space? What if scrolling felt like flying through an environment?

Inspired by Apple Vision Pro’s spatial interfaces, video game UI design, and the futuristic holograms from Iron Man and Minority Report, I set out to build a web portfolio that transforms navigation into exploration. The goal was to showcase not only my projects and brand as a software engineer, but my passion and ability to push the limits of modern technologies.

What It Does

The portfolio replaces traditional scrolling with spatial navigation. Users move around a central 3D octahedron as sections float naturally in space. Each section has its own camera path and motion personality, from smooth cinematic intros to playful bounce finishes.

Projects appear one at a time in dedicated viewports, each represented by unique 3D geometry surrounded by particles. Information panels reveal details gradually for a heads-up display feel. Ambient geometry and lighting shift with each section, creating atmosphere without clutter.

Mobile users navigate with swipe gestures, haptic feedback, and responsive layouts that adjust camera distance, scaling, and typography. The site maintains 60 FPS on desktop and over 30 FPS on mobile through conditional rendering and performance tuning.

How It Was Built

The portfolio uses Next.js 16, React 19, TypeScript, and Three.js with React Three Fiber. Additional tools include @react-three/drei for 3D helper components, GSAP for professional-grade animations, Framer Motion for UI transitions, Tailwind CSS for styling, and Lenis for smooth scrolling. A permanent 3D background ensures seamless transitions between sections. Camera choreography uses waypoints, custom easing, and double interpolation for smooth cinematic movement.

Scroll progress is tracked at 60 FPS using RequestAnimationFrame for fluid responsiveness. Each project section has its own geometry, particle system, and HUD-style overlay. A custom mobile gesture hook detects swipe velocity, distance, and direction for natural navigation with haptic feedback.

The build process uses Vercel for deployment, ESLint for code quality, and PostCSS for CSS processing.

Challenges

Achieving smooth camera motion required precise tuning of easing curves and interpolation factors. Maintaining 60 FPS on mobile demanded aggressive optimization, geometry reuse, and conditional rendering. Scroll synchronization relied on RAF scheduling to avoid lag.

Touch gestures conflicted with native browser behavior, requiring velocity thresholds and controlled touch actions. Responsive 3D design meant not just resizing, but repositioning objects and adjusting camera distance for mobile visibility.

Accomplishments

This project turns a portfolio into a full spatial experience. Every movement, transition, and particle is intentional, designed for immersion and narrative flow. Despite complex 3D rendering, performance remains stable across all devices.

Touch navigation feels native and fluid. Each section’s motion reinforces its tone — welcoming, dramatic, technical, or playful. The entire project is strongly typed in TypeScript, ensuring reliability and maintainability.

Attention to detail defines the experience: particle seeding for consistency, lighting matched per project, subtle scan lines, glowing edges, and responsive feedback. These small touches elevate it beyond a demo into a polished, interactive environment.

What We Learned

Three.js and React Three Fiber can handle production-grade 3D applications. Camera motion is not just technical — it tells a story. Animation, easing, and motion design shape how users feel.

Performance is a feature. We learned to measure, profile, and optimize constantly. Responsive 3D design demands new thinking for camera placement, scaling, and interaction. Math principles like sine and cosine became creative tools for spatial motion.

We also recognized accessibility challenges unique to 3D — keyboard navigation, screen reader support, and motion sensitivity are essential for inclusivity.

What’s Next

Next steps focus on accessibility, interaction, and intelligence. Short-term improvements include keyboard navigation, ARIA labels, and motion-sensitive fallbacks.

Medium-term goals involve replacing primitives with custom models, adding rotation interactivity, sound design, particle physics, and project deep-dives.

Long-term, the vision includes WebXR integration, AI-powered navigation, multiplayer exploration, shader effects, analytics dashboards, and generative art. Future updates will explore gamified elements, user-driven environments, and social features.

Built With

Share this project:

Updates