🚀 3D Portfolio Website

A stunning, interactive 3D portfolio showcasing modern web development with cutting-edge 3D graphics capabilities. This project demonstrates the power of React combined with Three.js to create immersive, animated experiences that captivate visitors and showcase projects in an innovative way.

💻 Tech Stack

Core Technologies:

• Frontend Framework: React 18 with Vite
• 3D Graphics: Three.js, @react-three/fiber, @react-three/drei
• Styling: Tailwind CSS with custom animations
• Animation: GSAP (GreenSock Animation Platform), Framer Motion
• Forms: EmailJS for contact functionality
• Build Tool: Vite
• Linting: ESLint

Key Dependencies:

• @react-three/fiber - React renderer for Three.js
• @react-three/drei - Useful helpers for React Three Fiber
• three - Popular 3D library
• gsap - Advanced animation library
• @emailjs/browser - Email sending functionality
• maath - Math utilities for 3D calculations

📁 Folder Structure

3d_portfolio/
├── public/                 # Static assets and 3D models
│   ├── assets/             # Images, icons, SVGs
│   ├── glb/               # 3D models in GLB format
│   │   ├── flower-transformed.glb
│   │   ├── react_logo.glb
│   │   └── human/         # Character animations (FBX files)
│   ├── models/            # Additional 3D models
│   │   ├── computer.glb
│   │   ├── hacker-room.glb
│   │   └── animations/
│   └── textures/          # Video textures and images
│       ├── project/       # Project preview videos
│       └── desk/          # Desktop textures
├── src/                   # Source code
│   ├── components/        # Reusable 3D and UI components
│   │   ├── CanvasLoader.jsx
│   │   ├── Cube.jsx
│   │   ├── DemoComputer.jsx  # Interactive 3D computer display
│   │   ├── Developer.jsx
│   │   ├── HackerRoom.jsx
│   │   ├── HeroCamera.jsx    # Camera controls for hero section
│   │   ├── ReactLogo.jsx
│   │   ├── Rings.jsx
│   │   └── Target.jsx
│   ├── sections/          # Page sections
│   │   ├── Navbar.jsx
│   │   ├── Hero.jsx
│   │   ├── About.jsx
│   │   ├── Projects.jsx      # 3D project showcase
│   │   ├── Clients.jsx
│   │   ├── Experience.jsx
│   │   ├── Contact.jsx       # EmailJS integrated form
│   │   └── Footer.jsx
│   ├── constants/         # Data and configuration
│   │   └── index.js       # Navigation, projects, reviews data
│   ├── App.jsx           # Main application component
│   ├── main.jsx          # Root React rendering
│   └── index.css         # Global styles
├── package.json          # Project dependencies and scripts
├── vite.config.js        # Vite build configuration
├── tailwind.config.js    # Tailwind CSS configuration
└── README.md

⚡ Project Setup Guide

Prerequisites

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

Installation Steps

1. Clone the repository

git clone https://github.com/devtitus/3D-Portfolio-Site.git
cd 3D-Portfolio-Site

2. Install dependencies

npm install
# or
yarn install

3. Start the development server

npm run dev
# or
yarn dev

4. Open your browser Visit http://localhost:5173 to see the application running

Available Scripts

Script	Description
npm run dev	Starts development server with hot reloading
npm run build	Creates optimized production build
npm run lint	Checks code for linting errors
npm run preview	Locally preview production build

Environment Configuration

The project uses Vite for bundling and development. No additional environment variables are required for basic functionality.

✨ Key Features

🎮 Interactive 3D Experiences

• Dynamic Camera Controls: Smooth camera movements with pointer interaction
• 3D Project Showcase: Computer models displaying project videos in real-time
• Animated Components: GSAP-powered animations for smooth transitions
• Model Loading: Efficient 3D model loading with progress indicators

🎯 Modern Web Technologies

• React 18 Integration: Latest React features and hooks
• Concurrent Rendering: Optimized performance with React's concurrent features
• Responsive Design: Mobile-first approach with Tailwind CSS
• Performance Optimized: Efficient rendering and asset loading

📱 Interactive Elements

• Contact Form: Integrated with EmailJS for direct messaging
• Project Gallery: 3D computer displays with video textures
• Client Testimonials: Rotating review carousel
• Experience Timeline: Animated career progression

🎨 Visual Design

• Custom Animations: GSAP-powered smooth animations
• 3D Lighting: Realistic lighting and shadows
• Texture Mapping: High-quality video and image textures
• Particle Effects: Dynamic visual enhancements

👨‍💻 Developer Information

Creator: Melwyn Titus (devtitus)
GitHub: devtitus
Portfolio: 3D Interactive Portfolio Website
Specialization: Full-stack web development with 3D graphics expertise

Learning Resources

This project serves as an excellent learning resource for:

• React Three Fiber implementation
• 3D model integration in web applications
• Performance optimization techniques
• Modern build tooling with Vite
• Interactive animation principles

---

⭐ Star this repository if you found it inspiring!
🚀 Deploy your own 3D portfolio and showcase your creativity!