Full Stack 3D Portfolio Website

This is a full-stack portfolio website that showcases 3D models with React, Three.js, Node.js, Express.js, and MongoDB. It features a responsive design using Tailwind CSS and integrates Continuous Integration and Continuous Deployment (CI/CD) via GitHub Actions. The app displays an interactive 3D model that users can view and interact with directly in the browser.

Features

• 3D Model Showcase: Display and interact with 3D models in real-time using Three.js.
• Responsive Design: Built with Tailwind CSS to ensure the website looks great on any screen size.
• CI/CD Pipeline: Automates deployment with GitHub Actions.
• Server-side: Uses Node.js and Express.js for the backend and to handle requests.
• Database Integration: Built to easily integrate with MongoDB for storing data (if needed).

Tech Stack

• Frontend:

  • React for dynamic rendering of the 3D models.
  • Three.js to load and display 3D models.
  • Tailwind CSS for styling.

• Backend:

  • Node.js and Express.js to build the API and server.
  • MongoDB (optional) for database storage.

• CI/CD:

  • GitHub Actions for automating deployment to Vercel.

Setup

Prerequisites

Make sure you have Node.js and npm installed on your machine. If not, you can download and install them from here.

1. Clone this repository

Clone the project to your local machine:

git clone https://github.com/your-username/3d-portfolio.git
cd 3d-portfolio

2. Install Dependencies

Client-side (Frontend)

Navigate to the client folder and install the frontend dependencies:

cd client
npm install

Server-side (Backend)

Navigate to the server folder and install the backend dependencies:

cd server
npm install

3. Set Up Environment Variables

For the backend, create a .env file in the server directory with your MongoDB connection string (if you're using MongoDB):

MONGO_URI=your_mongodb_connection_string_here

4. Running the Application Locally

Start the Client

In the client directory, run the following command to start the React frontend:

npm start

Start the Server

In the server directory, run the following command to start the backend:

npm start

This will start both the client and server, and you can access your portfolio website on http://localhost:3000.

5. Deploying the Application

This application uses GitHub Actions for CI/CD. When you push to the main branch, it will automatically deploy the frontend to Vercel and set up any backend integrations.

To deploy manually (optional), make sure you have Vercel and GitHub Actions properly set up to deploy both the frontend and backend.

How to Add a New 3D Model

1. Download a 3D model in .glb format from websites like Sketchfab, Poly Haven, or TurboSquid.
2. Place your model file in the client/public/models/ directory.
3. Update the path to the model in the client/src/components/3DModel.js file if needed:

   const modelPath = "/models/yourModel.glb";