3D Developer Portfolio

Abdullah Al Mahi is a 3D developer portfolio website built using React.js, Three.js, and React Three Fiber. It features a 3D desktop model, animated sections, and a 3D earth model with email functionality. The website is fully responsive and optimized for all devices.

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 How To Run

🤖 Introduction

Abdullah Al Mahi is a 3D developer portfolio website built using React.js, Three.js, and React Three Fiber. It features a 3D desktop model, animated sections, and a 3D earth model with email functionality. The website is fully responsive and optimized for all devices.

⚙️ Tech Stack

• React.js
• Three.js
• React Three Fiber
• React Three Drei
• Email JS
• Vite
• Tailwind CSS

🔋 Features

👉 Customizable 3D Hero Section: Includes a 3D desktop model easily customizable to suit specific needs.

👉 Interactive Experience and Work Sections: Utilizes animations powered by framer motion for engaging user experience.

👉 3D Skills Section: Showcases skills using 3D geometries through three.js and React Three fiber

👉 Animated Projects and Testimonials: Features animated sections using framer motion for projects and client testimonials.

👉 Contact Section with 3D Earth Model:Integrates a 3D earth model with email functionality powered by emailjs.

👉 3D Stars: Generate stars progressively at random positions using Three.js for background display.

👉 Consistent Animations: Implements cohesive animations throughout the website using framer motion.

👉 Responsive Design: Ensures optimal display and functionality across all devices.

and many more, including code architecture and reusability

🤸 How to Run

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 git@github.com:aamahi/portfolio.git
cd portfolio

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

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.