Badminton-Themed 3D Portfolio

Description

My first computer science portfolio built using Blender and React Three Fiber, consisting of a badminton-themed scene centered around four hidden rooms inside a badminton cork. This project showcases my skills in 3D modeling, animation, and web development. The portfolio includes interactive elements, realistic physics, and immersive sound effects. This portfolio is currently in version 1 and I plan to add more features to it in the future. The best experience is on a tablet or a computer.

Installation

Steps

1. Clone the repository:

   git clone https://github.com/JaMussCraft/Portfolio-Three-JS.git

2. Navigate to the project directory:

   cd Portfolio-Three-JS

3. Install the dependencies:

   npm install

Usage

Running the Project

1. Start the development server:

   npm run dev

Navigating the Project

• Find a "magic birdie" in each room to move onto the next room
• Use the arrow keys to navigate through unlocked rooms.
• Click on interactive elements to explore more details.

Technologies Used

• Three.js: For creating and displaying animated 3D graphics.
• React: For building the user interface.
• React Three Fiber: For integrating Three.js with React.
• Tailwind CSS: For styling the application.
• Vite: For development and build processes.
• GSAP: For animations.
• Leva: For creating a GUI for tweaking parameters.
• React Spring: For animations in React.
• React Three Rapier: For physics simulations.
• PostCSS: For transforming styles with JS plugins.
• Autoprefixer: For parsing CSS and adding vendor prefixes.

Rooms & Future Plans

• Work Room: Inspired by my bedroom. I plan to make the monitor, rubrix cube, and keyboard interactive.
• Play Room: A corner of a badminton court. I plan to turn this into a mini-game playground or embed my 2D badminton game in here.
• About-Me Room: My ideal living room with everything about me, including my Malaysian heritage, interests in Anime and video games.
• Contact Room: Showcases personal projects and my contact information.

Contributions

Contributions are welcome! Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes and commit them (git commit -m 'Add new feature').
4. Push to the branch (git push origin feature-branch).
5. Create a new Pull Request.

Acknowledgements

This project utilizes the following 3D models:

• "Computer Desk" by draakon_4d is licensed under Creative Commons Attribution.
• "Window" by jesseroberts is licensed under Creative Commons Attribution.
• "Window Blinds Low poly 3D model" by AK STUDIO is licensed under Creative Commons Attribution.
• "Low-Poly Bed" by TNTRAT is licensed under Creative Commons Attribution.
• "Simple Ceiling Fan" by Blender3D is licensed under Creative Commons Attribution.
• "Gaming Chair" by 9arts is licensed under Creative Commons Attribution.
• "Rubik's Cube" by DatSketch is licensed under Creative Commons Attribution.
• "mouse pad (keyboard pad)" by ｍｆｋ is licensed under Creative Commons Attribution.
• "RGB Keyboard and Mouse" by Jamesley is licensed under Creative Commons Attribution.
• "Mechanical Keyboard - Aesthetic" by M.Reslan is licensed under Creative Commons Attribution.
• "Asus PC Gaming Monitor" by Artik is licensed under Creative Commons Attribution.
• "Low Poly Style Plant" by Cyber Sun Studio is licensed under Creative Commons Attribution.
• "Master Sword (Glowing)" by Foxy Fitz Hamilton, President of the UNH is licensed under CC Attribution-NonCommercial-NoDerivs.
• "Low Poly Living Room with Furniture" by Jayasurya Aasaithambi is licensed under Creative Commons Attribution.
• "Low Poly Bookshelf Set" by kimmy.k is licensed under Creative Commons Attribution.
• "DISPLAY HOOK" by Clear Edge is licensed under Creative Commons Attribution.
• "Zelda Triforce Lamp" by Jared64 is licensed under Creative Commons Attribution.
• "Frieren【Nanoblock】" by adiobrick is licensed under Creative Commons Attribution.
• "Frieren Staff" by Surya.W.A is licensed under Creative Commons Attribution.
• "CSGO WEAPON: AWP GUNGNIR" by WoodenManufacturing is licensed under Creative Commons Attribution.
• "Linkedin Logo" by timmy is licensed under Creative Commons Attribution.
• "Forest Asset Low-poly 3D models" by Gunther is licensed under Creative Commons Attribution.

Inspired by

• Bruno’s My Room
• Msrsrsks’s Warp to Another Room
• Joan Ramos Refusta's Portfolio

License

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

Contact

Author: James Wong

• LinkedIn
• GitHub
• Email: shwo225@uky.edu