Portfolio I made with ♥️, React and Three JS. https://rajaosama.me/
The purpose of the project is to provide an open-source portfolio for the developers. A Simple Clean design made with React JS, Tailwind, Three Js, maximo, Vercel, and The model used with in the project is by Ready Player.
Create awesome looking Portfolio and show case your work, because as a developer/designer we have to keep growing in all aspect of the life.
You can visit the Live Website by clicking on the above GIF video.
git clone https://github.com/Raja0sama/rm-portfolio.git
cd rm-portfolio
code .
yarn start | npm start
To Create your very own 3d avatar there are few steps that you will have to do, a bit complicated but once you done with the steps, it will look just awesome.
cd public && npx gltfjsx model.glb
const group = useRef();
const { nodes, materials, animations } = useGLTF("/model.glb");
const { actions } = useAnimations(animations, group);
useEffect(() => {
materials.castShadow = true;
materials.receiveShadow = true;
if (materials?.material?.map) materials.material.map.anisotropy = 16;
actions["idle.001"]?.play();
}, []);
In the model.js file, look at the existing one to understand what is happening, basically we are triggering animation to play on mount.
Or
Just hide the model by going into Page/Home
and with in Home Object, look for the property showModel
and set it false.
To Modify content of the overall site, kindly visit src/portfolio_static
and there will be portfolio Object that contain Objects with the name of the page and a layout.
You can use Vercel to deploy the site easily by using npx vercel --prod
You are welcome to contribute to the project, Fork the repo and make a pull request with detail description. Obviously the structure of the website need to be consistent, but you are welcome to open up a pull request with the changes you hope to see in the repo.