https://github.com/aroradev1010/3d_portfolio
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.
https://github.com/aroradev1010/3d_portfolio
react reactthreedrei reactthreefiber tailwind threejs vite
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/aroradev1010/3d_portfolio
- Owner: aroradev1010
- Created: 2024-09-08T07:05:14.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-14T09:08:49.000Z (almost 2 years ago)
- Last Synced: 2025-01-31T00:34:35.646Z (over 1 year ago)
- Topics: react, reactthreedrei, reactthreefiber, tailwind, threejs, vite
- Language: JavaScript
- Homepage: https://devarora.vercel.app
- Size: 69.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A 3D Dev Portfolio
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
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.
- Node.js
- React.js
- Three.js
- React Three Fiber
- React Three Drei
- Email JS
- Vite
- Tailwind CSS
## 🔋 Features
👉 **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.
👉 **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
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/aroradev1010/3D_Portfolio.git
cd threejscc-portfolio
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
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](https://www.emailjs.com/).
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.