3D Portfolio
By
@kingjamesh
- 6 Devlogs
- 11 Total hours
Personal website
Ship #1
Pending review
I built an interactive 3D portfolio with Next.js, React Three Fiber, and Three.js.
I’m most proud of the 3d models in my engineering page. I took my 3d models from fusion and took them to blender, where I decimated them. I then exported them as glbs and was able to add them to the website as components that the user can interact with from their browser.
There were also lots of other fun aspects that I added, including a custom cursor, lots of gsap scroll triggers and animations, and background particles. I also have a live github contribution calendar in my programming portfolio.
You can see it at: www.jameshou28.com
16m 48s logged
6h 25m 45s logged
1h 6m 51s logged
Devlog #4: Mobile optimization + contact page
I worked on mainly my mobile navigation and repsonsive layout. I added a hamburger menu for mobile, and made some layout changes to prevent the page from overflowing and looking weird on mobile
Mouse parallax is now disabled on touch devices, and 3d project models now have static fallbacks in case webgl isn’t available. This basically makes sure the engineering portfolio is still usable, even on mobile phones
1h 11m 38s logged
Devlog #3: Loading screen
I built a first-visit loading screen so the site can preload the big assets like 3d models and videos before letting visitors into the homepage.
The progress bar is staggered, and I added status changes such as “Warming up 3D scenes” and “Loading assets”. Once everything is preloaded, it reveals an “Enter Portfolio” button.
Entering uses a circular GSAP reveal animation so it looks like the page is opening up kinda and then it saves a local storage flag so if someone opens the site again the loader doesn’t popup
41m 25s logged
Devlog #2: Homepage particles + project details
I added an interactive particle background to make the homepage feel less static. It’s basically a canvas animation with particles that drift in the background. They also react to the mouse, and spring back toward their original positions.
I also filled in the homepage a bit more with information about me
1h 4m 33s logged
Devlog #1: implemented interactive 3d models into engineering portfolio of personal website
exported pre-existing 3d models from fusion360 as an fbx
took the fbx files to blender and decimated them, then exported as glb
used react-three with useGLTF to load models into website
Note: This is a continuation of my personal website that I started before stardance, that’s why my devlogs look like they’re kinda starting in the middle of the project