To begin with, it is important to note that, this project have been sourced from an exceptional Three.js Course from "JavaScript Mastery".
👤 Instructed by a proficient and expert educator,
"Adrian Hajdin".
Three.js is a JavaScript library that is primarily used for creating 3D computer graphics in a web browser.
🧩 Picture this: you have the power to navigate a breathtaking floating island in a mesmerizing 3D environment.
- This project is not just a showcase of my skills, but a testament to my ability to create dynamic web experiences that push boundaries and leave a lasting impression.
Important
- Get ready to embark on a journey like no other as you explore this innovative portfolio showcase 🤩
Which Concepts Have I Covered:
- Implementing route configurations with the "React Router" Component.
- Setting up and utilizing "React-three-fiber", a React renderer designed for Three.js.
- Utilizing the 'Canvas' Component to facilitate the display of 3D environments and animations through the utilization of Three.js technology.
- Enhancing user experience through the use of "Suspense" component by displaying either "loading indicators" or "fallback content" during data retrieval.
- Utilize "React-three-drei" to seamlessly connect React with Three.js and transform jsx into a 3D environment.
- Implement and utilize "React-spring-three" to seamlessly incorporate animations and transitions within 3D environments.
- Utilizing the "Sketchfab" website to browse pre-built models in search of our specific model.
- Incorporate all models such as Island, Plane, and Fonix into the Scene and optimize them for the screen size.
- To enhance the Scene, incorporate 'directionalLight', 'ambientLight', and 'hemisphereLight' as light sources.
- To incorporate the sky into the scene utilizing the component in a technical manner.
- To enhance user interaction, implement the capability for Island rotation using Mouse Events or Touch Events.
- Utilize the 'useEffect' and 'useFrame' hooks in React to dynamically update the rotation of an Island component.
- Employing plane rotation through the use of the useAnimations Hook in a technical manner.
- To enable the bird to traverse the island, employ the 'useEffect' and 'useFrame' hooks for optimal performance and synchronization.
- Deploying content to cater to the various phases within the Island's lifecycle.
- Integrate a Fox into the Contact Scene and initiate animations for the Fox.
- Utilizing the "react-vertical-timeline-component" to display professional work experience in a structured and organized manner.
Give it a go in real-time and give me a Star 
My Portfolio
Portfolio.mp4
