3D Developer Portfolio
π Table of Contents
- π€ Introduction
- βοΈ Tech Stack
- π Features
- π€Έ Quick Start
- πΈοΈ Snippets
- π Links
- π More
π€ Introduction
This project is a 3D interactive developer portfolio built using React.js, Three.js, and Tailwind CSS.
βοΈ 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.
- Code Architecture and Reusability: Clean, modular, and scalable codebase.
π€Έ Quick Start
Prerequisites
Ensure you have the following installed on your machine:
Cloning the Repository
git clone [email protected]/sjbentley/3D-Portfolio.git
cd 3D-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.
πΈοΈ Snippets
Key snippets from the project will be added here.
π Links
π More
For further questions or feature requests, open an issue in the repository. π
License
This project is licensed under the MIT License.