🚀 Joshua's 3D Developer Portfolio

🌟 Overview

An immersive 3D portfolio website showcasing cutting-edge web development skills with interactive 3D graphics, smooth animations, and modern design principles. Built to demonstrate expertise in full-stack development, 3D web technologies, and creative problem-solving.

✨ Features

• 🎨 Stunning 3D Graphics - Interactive 3D models and animations using Three.js and React Three Fiber
• 🎭 Smooth Animations - Fluid transitions and effects powered by Framer Motion
• 📱 Fully Responsive - Optimized for all devices from mobile to desktop
• 🌓 Dark Theme - Modern dark mode design with custom color palette
• 📧 Contact Form - Integrated email functionality using EmailJS
• ⚡ Performance Optimized - Lazy loading, code splitting, and Suspense for fast load times
• 🎯 SEO Friendly - Optimized for search engines and social media sharing

🛠️ Technologies

Frontend

• React 18.2 - Modern React with Hooks and functional components
• Three.js - 3D graphics rendering and WebGL integration
• React Three Fiber - React renderer for Three.js
• Framer Motion - Animation library for smooth transitions
• Tailwind CSS - Utility-first CSS framework
• Vite - Next-generation frontend tooling

Backend & Services

• EmailJS - Email service integration for contact form
• Vercel/Netlify - Deployment and hosting (recommended)

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

git clone https://github.com/joshictech/personal-portfolio.git
cd personal-portfolio

2. Install dependencies

npm install

3. Create environment variables Create a .env file in the root directory and add your EmailJS credentials:

VITE_APP_EMAILJS_SERVICE_ID=your_service_id
VITE_APP_EMAILJS_TEMPLATE_ID=your_template_id
VITE_APP_EMAILJS_PUBLIC_KEY=your_public_key

4. Start the development server

npm run dev

5. Open your browser and visit http://localhost:5173

📦 Build for Production

npm run build

The optimized production build will be in the dist folder.

🎯 Key Sections

1. Hero - Animated introduction with 3D computer model
2. About - Professional overview and core competencies
3. Experience - Detailed work history with timeline visualization
4. Projects - Showcase of best work with live demos and code links
5. Testimonials - Client feedback and recommendations
6. Contact - Interactive contact form with 3D Earth visualization

🎨 Customization

To personalize this portfolio:

1. Update personal info in src/constants/index.js
2. Modify colors in tailwind.config.cjs
3. Change 3D models in public/ directory
4. Update content in component files under src/components/

📄 License

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

🤝 Connect

• Website: joshictech.dev
• GitHub: @joshictech
• Email: contact@joshictech.dev

---

⭐ If you like this portfolio, give it a star on GitHub!