3D Web Portfolio

Original idea here! 💡

Description

I'm building an 3D Developer Portfolio using ThreeJS, React Three Fiber, TailwindCSS, and Framer Motion.

Throughout the project, I'm learning how to utilize ThreeJS, a powerful 3D graphics library, for rendering and animating 3D models. I'll also incorporate React Three Fiber, a popular library that will enable me to create stunning 3D graphics within a React environment.

To enhance the visual appeal of the portfolio, I'll implement TailwindCSS, a utility-first CSS styling framework, and I'll use Framer Motion, the go-to library for adding captivating animations to React websites.

During the development process, I'm gaining proficiency in loading, creating, and customizing 3D models and geometries. Additionally, I'm learning how to work with different lights and manipulate the camera and object positioning within the 3D world.

To ensure the code's reusability and scalability, I'm implementing Higher Order Components (HOCs) and following industry-standard best practices. I'll also integrate a form on the website for visitors to send emails conveniently.

Furthermore, I'll focuse on creating a responsive design that performs well across various devices. I'll use techniques such as Suspense and Preload to optimize the site's performance and improve user experience.

By completing this project, I will have gained valuable skills in 3D web development using ThreeJS, React Three Fiber, TailwindCSS, and Framer Motion. My portfolio now showcases my expertise in creating visually stunning and interactive 3D websites.

Languages and Utilities involved

• ThreeJS
• React Three Fiber
• TailwindCSS
• Framer Motion

IDE Used

• Visual Studio Code

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone [email protected]:adrianhajdin/project_3D_developer_portfolio.git
cd project_3D_developer_portfolio

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Important

I've made some modifications to fetch a Nodemailer server with CORS implemented. Be aware of this, but you can still implement EmailJS using the original tutorial.

Create a new file named .env in the root of your project and add the following content:

REACT_APP_EMAILJS_USERID=your_emailjs_user_id
REACT_APP_EMAILJS_TEMPLATEID=your_emailjs_template_id
REACT_APP_EMAILJS_RECEIVERID=your_emailjs_receiver_id

Replace the placeholder values with your actual EmailJS credentials. You can obtain these credentials by signing up on the EmailJS website.

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

I'm planning on adding new features in the future, as well as other changes to improve the portfolio.