A 3D Interactive Portfolio Website Built with Three.js, React, and Vite

Hello, everyone,

I’d be happy to show you my own portfolio site created with Three.js, React, and Vite.

Current Site: Farras Syuja | Keahlian Saya

The focus was on developing an online portfolio with simplicity, interactivity, and the application of 3D graphics coupled with smooth motions. The design involved the integration of an interactive background with the help of three.js, transitions with Framer and GSAP, and the creation of a fully responsive design with CSS.

The 3D scene is well integrated inside the React components, with optimized lighting, camera controls, and looping animations. The main priority was to ensure the best possible performance, which was maintained by keeping the assetslightweight.

“This project has enabled me to learn how the capabilities of Three.js can be used to improve current web interfaces and narratives on personal portfolio pages.
I would greatly be interested in receiving your input on how the current project can be optimized from the perspective of performance, organization, or flow of animations.” Thank you for taking the time to visit. Live Site: Farras Syuja | Keahlian Saya

I like the intro effect.

1 Like

With respect, it is a cool idea, but there is nto much to say about it..

One thing that I would change is better quality textures on the planets also , feel free to use the Sun I made; it will look good on your galaxy Start , you can find the source on the forum if you want it.

I advise you to take this course it will open your mind and help you a lot https://simondev.io/

1 Like

Thanks a lot for the suggestion!
I really like your Sun, it looks amazing. However, it seems to require more performance, and I’m still focusing on keeping the scene smooth, even on devices with lower specs.
I also appreciate the course recommendation. SimonDev’s course sounds really interesting to me, I might check it out sometime.

1 Like

Go for it, about performance, the Sun is nothing, since you are a creative developer, push the limits, here is a website that I like and it has sooo much in it the sun shuld be nothing

Threejs is capable of amazing things!

I assume you want to burn out his phone with this sun…

You are comparing the skills of the person who writes “…This project has enabled me to learn how the capabilities of Three.js can be used to improve current web interfaces and narratives on personal portfolio pages…” with the skills of one of the best agencies in the world. It makes sense…

1 Like

I wanted to share one of my favorite websites to demonstrate what Three.js is capable of… in regard of performance because he is concerned about it.