Interactive 3D Portfolio with React and Three.js

An interactive 3D portfolio site built using React and Three.js with React Three Fiber (R3F). This project serves as a personal deep-dive into React and R3F, showcasing various interactive 3D elements. The goal is to create an engaging and visually appealing portfolio that demonstrates advanced web development skills and the capabilities of modern web technologies.

The site features a floating laptop model with an interactive iFrame of my standard website, along with multiple other 3D versions of those pages and a title bar integrated into the 3D experience.

Features

• Interactive 3D Models: Showcases all sorts of fun models and designs.
• Multiple Pages: Different pages with all sorts of different effects and interactivity.
• In-Experience NavBar: The NavBar exists as a part of the scene, and animates in and out with the focusing of scenes.
• Toggle View Button: Allows users to toggle the camera view closer to or away from scenes.
• Loading Screen: Custom loading screen displayed while the 3D assets are being loaded.
• Responsive Design: Optimized for both desktop and mobile devices, with mobile users being given a choice between a 3D and 2D experience. Performance monitoring/scaling for lower performance devices included.
• Magic Cube: A 3D box with geometrically impossible holes on its' sides in multiple pages, showcasing the power and design capability within Three.js. Used both on the homepage and in the projects page

Secrets

• if you input #debug at the end of the url, it'll bring up the debug controls for the project! Fun little easter egg, huh? 😉

Tech Stack

• React: JavaScript library for building user interfaces.
• Three.js & React-Three Fiber: 3D library that simplifies WebGL.
• React-Three Drei: Helper components for R3F.
• GSAP: Used for smooth animations of the camera.
• NPM and Vite: Build tools for fast development and optimized production.

Installation

1. Clone the repository:

   git clone https://github.com/eli-parker/eli-parker.github.io.git

2. Navigate to the project directory:

   cd eli-parker.github.io

3. Install dependencies:

   npm install

Usage

1. Start the development server:

   npm start

2. Open your browser and visit the link in the terminal to see the project in action.

Contributing

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature-name

3. Make your changes and commit them:

   git commit -m 'Add some feature'

4. Push to the branch:

   git push origin feature-name

5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

Feel free to reach out if you have any questions or suggestions! I'm always trying to improve and learn more.

• Email: EliParkDev@icloud.com
• GitHub: eli-parker

Credits

Social Media Chiclets

• "3D Github Logo" (https://skfb.ly/oPKSO) by pengedarseni is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
• "3D Linkedin Logo" (https://skfb.ly/oPKUJ) by pengedarseni is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
• "Website Icon" (https://skfb.ly/p7JuX) by Ahmad Riazi is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
• "3D icons / Email" (https://skfb.ly/6wtyp) by Sparrow is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

Computer Monitor

"Computer Monitor Lowpoly Model" (https://skfb.ly/6WPqT) by Marco Zakaria is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

Teeny Tiny Adorable Keyboard

"Cartoon Mini Keyboard" (https://skfb.ly/6yD8L) by Matys is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

Desk Plant

"Low Poly Style Plant" (https://skfb.ly/6YYDV) by Cyber Sun Studio is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

Pedestal

"Pedestal" (https://skfb.ly/6yExK) by elouisetrewartha is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

ThreeJS Journey

This project was created with the help of Three.js Journey with major personal touches added. The base idea came from Bruno Simon, and I'd like to thank him for teaching me Three.js and for his incredible work! If you'd like to make apps like this, check out his program.