3D Portfolio Template

A modern 3D developer portfolio template built with React, Vite, TailwindCSS, Three.js, @react-three/fiber, and framer-motion. This template showcases 3D visuals, developer experience, interactive UI, and elegant animations.

---

🚀 Features

• ⚙️ Built with Vite for fast performance and lightweight bundling.
• 🎨 TailwindCSS for rapid UI development.
• 🧩 Uses Three.js and @react-three/fiber to render interactive 3D models.
• 🔁 Reusable and animated components with framer-motion.
• 📧 Email integration via EmailJS for functional contact form.
• 📱 Responsive across all screen sizes with mobile-friendly adjustments.

---

📦 Tech Stack

• React 19
• Vite 6
• TypeScript
• TailwindCSS 3
• Three.js
• @react-three/fiber
• @react-three/drei
• framer-motion
• EmailJS

---

🛠️ Getting Started

1. Clone the Repository

git clone https://github.com/grep-many/3D_PortfolioTemplate.git
cd 3D_PortfolioTemplate

2. Install Dependencies

npm install --legacy-peer-deps

3. Set Environment Variables

Create a .env file and add the following variables:

VITE_EMAILJS_PUBLIC_KEY=your_key_here
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_TOEMAIL=your@emailId

4. Run Development Server

npm run dev

---

🧪 Scripts

Command	Description
npm run dev	Run in development mode
npm run build	Build the app
npm run preview	Preview built app
npm run lint	Run linter

---

📬 Contact Functionality

Contact form sends email using EmailJS. Fill in your EmailJS public key, service ID, and template ID in the .env file to make it functional.

---

📄 License

This project is open-source and available under the MIT License.

---

🌟 Credits

• Designed & developed as an open-source 3D portfolio template.
• Inspired by Three.js and modern developer portfolio trends.