This is my Portfolio made with Next.js, three.js and framer-motion. If you are here to offer me an opportunity, I am looking forward to working with you.
If you want to locally run this project, check out the commands in package.json, for example next dev will start a dev environment for the app. This project is styled using css modules, which are included in the styles folder. Static files like images and icons are in the public folder. As this was created with create-next-app, pages are in pages and I made a special folder for components. It is hosted using Vercel, which are the authors of Next.js and integrate with this framework very naturally.
The 3D effect is accomplished using the three.js library. After an initial setup of the camera and WebGL renderer, a large amount of points is rendered on a block and they are immediately given velocity to start moving, using an acceleration property so that it looks more natural. It is done as points on a block and not individual objects to make the performance better, which might already be a problem with this effect on really old computers.
The animations are done using the framer-motion, which just allows me to do simple movements of objects upon render. Instead of a vertical scrolling design, this site instead uses horizontal tiles and navbar navigation, which is allowed by Next.js which provides the paths in the URL. This way, we get the positives of both a Single page application and a Server-rendered page.