A 3D Dev Portfolio

📋 <a name="table">Table of Contents </a>

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Links

<a name="introduction">🤖 Introduction </a>

Built with React.js for handling the user interface, Three.js for rendering 3D elements, and styled with TailwindCSS, the 3D Minimalistic portfolio is a website project. The primary goal is to demonstrate the developer's skills in a unique manner that creates a lasting impact.

If you're getting started and need assistance or face any bugs, hit me up. :P

<a name="tech-stack">⚙️ Tech Stack </a>

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

<a name="features">🔋 Features </a>

👉 Immersive Hero: An eye-catching 3D hacker room that responds to mouse movements, surrounded by animated mini-models.

👉 Interactive About Me: A sleek bento grid layout featuring personal info, a 3D globe pinpointing location, tech stack icons, and a one-click email copy option.

👉 Dynamic Project Showcase: Browse through projects while watching live demos inside a 3D computer model, seamlessly switching between different projects.

👉 Engaging Experience Timeline: Hover over career milestones to trigger interactive 3D animations that bring your professional journey to life.

👉 Client Testimonials: A dedicated section highlighting satisfied clients and their feedback.

👉 Easy Contact Form: A user-friendly email form for visitors to reach out directly from your portfolio.

👉 Clean Footer: A minimalist design featuring social media links for easy networking.

👉 Fully Responsive: Optimized layout ensuring a smooth experience across all devices, from desktop to mobile.

and many more, including code architecture and reusability

<a name="quick-start">🤸 Quick Start </a>

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 https://github.com/aledog007/3D-Three-JS-Portfolio.git
cd threejs-portfolio

Installation

Install the project dependencies using npm:

npm install / npm i

Set Up Environment Variables

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

VITE_APP_EMAILJS_SERVICE_ID=your_emailjs_user_id
VITE_APP_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
VITE_APP_EMAILJS_PUBLIC_KEY=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.

<a name="links">🔗 Links </a>

Here is the list of all the resources used:

• Hacker Room
• Computer
• Target Model
• React Logo
• gltfjsx
• ReadyPlayerMe
• Mixamo
• FBX Animations ZIP