3D-Portfolio Tailwind Templates

3d Portfolio

React.js, Three.js, Email JS, Vite, and Tailwind CSS.

3D Developer Portfolio


πŸ“‹ Table of Contents

  1. πŸ€– Introduction
  2. βš™οΈ Tech Stack
  3. πŸ”‹ Features
  4. 🀸 Quick Start
  5. πŸ•ΈοΈ Snippets
  6. πŸ”— Links
  7. πŸš€ 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.

πŸš€ More

For further questions or feature requests, open an issue in the repository. πŸš€

License

This project is licensed under the MIT License.

Top categories

Loading Svelte Themes