3D Developer Portfolio

A modern, interactive 3D developer portfolio built with React, Three.js, and TailwindCSS. This portfolio showcases skills, projects, and experience with stunning 3D visuals and animations.

Features

• Interactive 3D Elements - Utilizes Three.js and React Three Fiber for immersive 3D components
• Responsive Design - Fully responsive layout that works on all devices
• 3D Models - Custom 3D models with interactive controls
• Animated Technology Icons - 3D floating technology icons with smooth animations
• Dynamic Hero Section - Featuring a 3D computer model that adapts to screen size
• Experience Timeline - Vertical timeline showcasing professional experience
• Project Showcase - Interactive cards displaying projects with tags and links
• Contact Form - Email.js integration for direct contact
• Testimonials Section - Client feedback display
• Animated Star Background - Dynamic star field in the contact section
• Smooth Scrolling - Enhanced user experience with smooth section transitions
• Modern UI - Clean, professional interface with TailwindCSS

Technologies Used

Frontend

• React.js - Frontend library for building user interfaces
• Three.js - JavaScript 3D library
• React Three Fiber - React renderer for Three.js
• React Three Drei - Useful helpers for React Three Fiber
• Framer Motion - Animation library for React
• TailwindCSS - Utility-first CSS framework
• React Router - Navigation and routing
• React Tilt - Parallax tilt effect for project cards
• React Vertical Timeline - Timeline component for experience section

Development

• Vite - Next generation frontend tooling
• Node.js - JavaScript runtime
• JavaScript (ES6+) - Modern JavaScript features
• PostCSS - CSS transformation tool
• Git - Version control

Web3 & Blockchain

• Hardhat - Ethereum development environment
• Truffle - Development framework for Ethereum
• Brownie - Python-based development and testing framework for smart contracts

Project Structure

3D-Portfolio/
├── public/             # Static assets and 3D models
├── src/
│   ├── assets/         # Images and icons
│   ├── components/     # React components
│   │   ├── canvas/     # 3D components using Three.js
│   │   └── ...         # Other UI components
│   ├── constants/      # Project data and configuration
│   ├── hoc/            # Higher-order components
│   ├── utils/          # Utility functions
│   ├── App.jsx         # Main application component
│   ├── index.css       # Global styles
│   ├── main.jsx        # Entry point
│   └── styles.js       # Styled components
├── index.html          # HTML entry point
├── package.json        # Dependencies and scripts
├── tailwind.config.js  # TailwindCSS configuration
├── postcss.config.js   # PostCSS configuration
└── vite.config.js      # Vite configuration

Sections

1. Hero - Introduction with 3D computer model
2. About - Overview of skills and services
3. Experience - Professional work history with timeline
4. Tech - Technologies and skills with 3D floating icons
5. Works - Project showcase with descriptions and links
6. Feedbacks - Client testimonials
7. Contact - Contact form with animated star background

Getting Started

Prerequisites

• Node.js (v14.0.0 or later)
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/yourusername/3D-portfolio.git
cd 3D-portfolio

2. Install dependencies

npm install
# or
yarn

3. Run the development server

npm run dev
# or
yarn dev

4. Open http://localhost:5173 in your browser

Building for Production

npm run build
# or
yarn build

Customization

You can customize the portfolio by modifying the data in the src/constants/index.js file:

• Update the services array to change your offered services
• Modify the technologies array to showcase your tech stack
• Edit the experiences array to update your work history
• Change the testimonials array to add client feedback
• Update the projects array to showcase your work

License

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

Acknowledgments

• Three.js for the amazing 3D library
• React Three Fiber for making Three.js integration with React seamless
• TailwindCSS for the utility-first styling approach