README for Portfolio Repository v2.0

Introduction

Welcome to version 2.0 of the Portfolio repository! This project is a sophisticated and dynamic portfolio website built using a combination of powerful tools and libraries. Below is a detailed overview of the architecture and framework of the codebase. The main purpose of this website is to showcase the developer's skillsets acquired over 1.5 years of freelancing.

Table of Contents

1. Technologies Used
2. Project Structure
3. Key Features
4. Special Features
5. Installation and Setup
6. Development Workflow
7. Building for Production
8. Additional Resources

Technologies Used

• React.js: A JavaScript library for building user interfaces.
• React Three Fiber: A React renderer for Three.js, allowing 3D graphics creation.
• Three.js: A JavaScript library used to create and display animated 3D computer graphics in a web browser.
• Webpack: A module bundler to bundle JavaScript files for usage in a browser.
• Babel: A JavaScript compiler that converts ECMAScript 2015+ code into a backward-compatible version.
• Framer Motion: A library for animations and gestures.
• React Spring: A library for creating animations in React applications.
• Rapier Physics: A physics engine for simulating physical interactions.
• Depth of Field (DOF) Effects: Visual effects that add depth to the 3D scenes.
• SASS/SCSS: A CSS preprocessor to enable the use of variables, nested rules, and more.

Project Structure

The project is organized into several directories and files:

root │ README.md │ package.json │ webpack.config.js │ └───src │ ├───assets │ ├───components │ ├───hooks │ ├───pages │ ├───styles │ └───utils └───public ├───index.html └───assets

• src/: Contains the source code for the application.

  • assets/: Images, fonts, and other static assets.
  • components/: Reusable React components.
  • hooks/: Custom React hooks.
  • pages/: Different pages of the portfolio.
  • styles/: SCSS/CSS files for styling.
  • utils/: Utility functions and helpers.

• public/: Public assets and the main HTML file.

Key Features

• 3D Graphics: Utilizing React Three Fiber and Three.js to create interactive 3D scenes.
• Smooth Animations: Implementing Framer Motion and React Spring for fluid animations and transitions.
• Modern Development Tools: Leveraging Webpack for bundling and Babel for JavaScript transpiling.
• Physics Simulation: Integrating Rapier Physics for realistic physics interactions.
• Responsive Design: Ensuring the portfolio is accessible and looks great on all devices.

Special Features

• Interactive Museum World: An immersive experience with character toggles and third-person character movement.
• 3D Arcade World: Featuring nine different games for users to choose from.
• Music FFT Visualization: A music-based world that allows users to input music and visualize it aesthetically using Fast Fourier Transform (FFT).

Installation and Setup

1. Clone the Repository:

   git clone https://github.com/yourusername/PortfolioRevamp.git
   cd PortfolioRevamp
   
   

Additional Resources

• React Documentation
• React Three Fiber Documentation
• Three.js Documentation
• Webpack Documentation
• Babel Documentation
• Framer Motion Documentation
• React Spring Documentation
• Rapier Physics Documentation

Project Structure