A React based 3D portfolio to showcase my past and future projects. The first public build you're able to see on yann.works was made in a week as a challenge.
It's still has some rough edges and unpolished features, but the overall experience is already pretty good.
- Performance scaling for optimal experience across devices (mobile, tablet, desktop)
- Camera tuned for device orientation
- Dynamic Camera positioning and targeting using object bounds
Most of the Three.js interaction was done through React Three Fiber. This made the process a whole lot faster than it would've taken otherwise. Some legacy Three.js code is still present for tuning UV wrapping around some meshes.
3D scene was made in blender, then exported to a .gltf, then sized down to a .jsx component using gltfjsx.
To run this project locally, follow these steps:
- Clone the repository
- Install dependencies using
npm install --legacy-peer-deps - Start the development server using
npm start
3D Models were sourced from Sketchfab under CC licensing.
Inspiration from the Monitors r3f demo from Paul Henschel
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent