My 3D Portfolio Project

👾 Tech Stack

View Demo · Documentation · Report Bug · Request Feature

🧰 Getting Started

⚙️ Installation

Step 1:

Use the link below to download or clone this repo:

 https://github.com/MichaelBoitmann/michaelboitmann_portfolio.git

Step 2:

Go to the new folder of the cloned repo:

 cd michaelboitmann_portfolio

Step 3:

Check your node version by typing the command below. Node.JS is required to execute npm :

  node -v

Step 4:

At the main folder execute the following command in console to get the required dependencies:

  npm install

Step 5:

At the main folder execute the following command in console to creates a build directory with a production build of 3d portfolio:

  npm run build

Step 6:

At the main folder execute the following command in console to run the server:

  npm run start

🏃 Run Locally

Step 1:

At the main folder execute the following command in console to get the required dependencies:

  npm install

Step 2:

At the main folder execute the following command in console to run the development server:

  npm run dev

(back to top)

Learning Technology

• ThreeJS - a powerful 3D graphics library for rendering and animating the 3D model
• React Three Fiber - a popular library for creating 3D graphics with ThreeJS in React
• TailwindCSS - a popular utility-first CSS styling framework
• Framer Motion - the most popular library used to bring your React website to life with animations You'll also learn how to:
• Render.com - free site where this project was deployed. This is a unified cloud to build and run all your apps and webistes.
• EmailJS - helps to send emails using client-side technologies only and no server is required.
• Loaded, created and customized stunning 3D models and geometries with various lights, as well as understand the 3D world with a camera and positioning of an object in space.
• Code are reusable and scalable using Higher Order Components (HOCs) and other industry-standard best practices
• Implemented sending emails through a form on the website
• Learn the responsiveness across all devices with improved site's performance using Suspense and Preload.

‼️ Folder Structure

Here is the folder structure of 3D-Portfolio.

MichaelBoitmann_Portfolio/
|- public/
|- src/
  |-- assets/
  |-- components/
  |-- constants/
  |-- hoc/
  |-- utils/
  |-- App.jsx
  |-- index.css
  |-- main.jsx
  |-- styles.js
|- package.json  
|- postcss.config.cjs
|- tailwind.config.cjs
|- vite.config.js

(back to top)