3D Portfolio Website

Crafted an engaging 3D portfolio site with ReactJS and Three.js, enhancing user interaction through interactive animations while presenting projects and skills.

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/SheLearningCode personal-3dportfolio-website

2. Navigate to the project directory:

   cd 3dportfolio

3. Install the dependencies:

   yarn install

4. Start the development server:

   yarn dev

5. Open your web browser and visit http://localhost:3000/ to view the project locally.

Tech Stack

• React: Frontend framework for building interactive user interfaces.

  • Advantages: Offers component-based architecture for reusability and maintainability. Provides a virtual DOM for efficient rendering and performance optimization.
  • Disadvantages: Steep learning curve for beginners. May introduce overhead for small projects.

• Three.js: Library for creating 3D graphics in the browser.

  • Advantages: Enables creation of complex 3D scenes and animations directly in the browser. Provides extensive documentation and a large community for support.
  • Disadvantages: Requires knowledge of WebGL and 3D rendering concepts. Performance can be an issue for highly detailed scenes on low-end devices.

• Blender: 3D modeling software used for creating custom 3D models and animations.

  • Advantages: Offers powerful tools for modeling, texturing, and animation. Supports a wide range of file formats and plugins.
  • Disadvantages: Steep learning curve due to its extensive feature set. May require significant time investment to master.

• Mixamo: Online platform for rigging and animating 3D characters.

  • Advantages: Provides a vast library of pre-rigged characters and animations. Simplifies the process of rigging and animating 3D models.
  • Disadvantages: Limited customization options compared to manual rigging. Requires an internet connection to access the platform.

• Tailwind CSS: Utility-first CSS framework for styling web applications.

  • Advantages: Offers a highly customizable and responsive design system. Reduces the need for writing custom CSS by providing utility classes.
  • Disadvantages: Can lead to larger CSS file sizes and increased specificity. Requires learning a new approach to CSS styling.

• Vite: Build tool for fast and efficient web development.

  • Advantages: Offers blazing fast build times and hot module replacement for rapid development. Supports modern JavaScript features out of the box.
  • Disadvantages: Relatively new compared to other build tools, which may result in fewer plugins and community support.

Improvements

• Implement a loading button to indicate progress during lengthy loading processes.
• Optimize rendering of 3D elements to reduce load times and improve performance.
• Enhance website responsiveness to ensure compatibility across various devices and screen sizes.
• make better section separation aligning with the 3d Animations