Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shahramshakiba/floating-island-3d

Picture this: you have the power to navigate a breathtaking floating island in a mesmerizing 3D environment (⚪Three.js,🔵React.js,🟣Tailwind CSS)
https://github.com/shahramshakiba/floating-island-3d

3d-website my-portfolio portfolio

Last synced: 2 days ago
JSON representation

Picture this: you have the power to navigate a breathtaking floating island in a mesmerizing 3D environment (⚪Three.js,🔵React.js,🟣Tailwind CSS)

Host: GitHub
URL: https://github.com/shahramshakiba/floating-island-3d
Owner: ShahramShakiba
Created: 2024-05-27T19:10:57.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-06-07T18:56:53.000Z (5 months ago)
Last Synced: 2024-06-07T19:36:56.983Z (5 months ago)
Topics: 3d-website, my-portfolio, portfolio
Language: JavaScript
Homepage: https://shahramshakiba.vercel.app/
Size: 49.4 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# _Shahram Shakiba's Portfolio_ nextjs logo react logo tailwindcss logo

### _Description_

> 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.
- #### _It provides a wide range of tools and functionalities for developers to build interactive 3D experiences on the web, ranging from simple animations to complex visualizations._

### _Floating Island Portfolio_ nextjs logo

### 🧩 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]
>> #### It is crucial to grasp that the project incorporates _"Three.js"_, _"Vite"_, _"React.js"_ and _"Tailwindcss"_ to build a visually impressive 3D portfolio.

- Get ready to embark on a journey like no other as you explore this innovative portfolio showcase 🤩

> _Which Concepts Have I Covered_:
01. _Implementing route configurations with the "React Router" Component._
02. _Setting up and utilizing "React-three-fiber", a React renderer designed for Three.js._
03. _Utilizing the 'Canvas' Component to facilitate the display of 3D environments and animations through the utilization of Three.js technology._
04. _Enhancing user experience through the use of "Suspense" component by displaying either "loading indicators" or "fallback content" during data retrieval._
05. _Utilize "React-three-drei" to seamlessly connect React with Three.js and transform jsx into a 3D environment._
06. _Implement and utilize "React-spring-three" to seamlessly incorporate animations and transitions within 3D environments._
07. _Utilizing the "Sketchfab" website to browse pre-built models in search of our specific model._
08. _Incorporate all models such as Island, Plane, and Fonix into the Scene and optimize them for the screen size._
09. _To enhance the Scene, incorporate 'directionalLight', 'ambientLight', and 'hemisphereLight' as light sources._
10. _To incorporate the sky into the scene utilizing the component in a technical manner._
11. _To enhance user interaction, implement the capability for Island rotation using Mouse Events or Touch Events._
12. _Utilize the 'useEffect' and 'useFrame' hooks in React to dynamically update the rotation of an Island component._
13. _Employing plane rotation through the use of the useAnimations Hook in a technical manner._
14. _To enable the bird to traverse the island, employ the 'useEffect' and 'useFrame' hooks for optimal performance and synchronization._
15. _Deploying content to cater to the various phases within the Island's lifecycle._
16. _Integrate a Fox into the Contact Scene and initiate animations for the Fox._
17. _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_ Glowing Star _My Portfolio_

https://github.com/ShahramShakiba/My-Portfolio/assets/110089830/26fe50d2-9698-4881-af3a-5f5fea55fc9b

***

## Man Detective Light Skin Tone Find me around the Web