Interactive 3D Animated Portfolio

A modern, interactive portfolio website built with Next.js,

https://github.com/himanshu8443/3D-Portfolio/assets/99420590/6f11c9db-5f32-41e8-94f9-cbf52be8553e

Tech Stack

• Framework: Next.js 16
• 3D Graphics: Three.js, React Three Fiber, React Three Drei
• Styling: Tailwind CSS
• Animations: Framer Motion, GSAP
• UI Components: React Icons, React Type Animation
• Smooth Scrolling: Lenis, Locomotive Scroll

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 18.0 or higher)
• npm, yarn, or pnpm package manager

Installation

1. Clone the repository:

git clone https://github.com/himanshu8443/Portfolio.git
cd portfolio

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Set up environment variables (if needed for EmailJS): Create a .env.local file in the root directory and add your EmailJS credentials:

EMAILJS_SERVICE_ID=your_service_id (get it from www.emailjs.com)
EMAILJS_TEMPLATE_ID=your_template_id
EMAILJS_PUBLIC_KEY=your_public_key

Running the Project

Development Mode

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser to see the result.

Production Build

Build the application for production:

npm run build
# or
yarn build
# or
pnpm build

Start the production server:

npm start
# or
yarn start
# or
pnpm start

Project Structure

portfolio/
├── src/
│   ├── app/              # Next.js app directory
│   │   ├── layout.js     # Root layout
│   │   ├── page.js       # Home page
│   │   └── globals.css   # Global styles
│   ├── components/       # React components
│   │   ├── canvas/       # 3D canvas components
│   │   ├── hoc/          # Higher-order components
│   │   └── ...           # Other components
│   ├── constants/        # Constants and configuration
│   ├── assets/           # Images and static assets
│   └── utils/            # Utility functions
├── public/               # Public static files
└── ...                   # Config files

Customization

1. Update Personal Information: Edit src/constants/constants.js to add your personal details, projects, and experience.

2. Add/Remove Sections: Modify the src/app/page.js file to include or exclude sections such as About, Projects, Skills, Testimonials, Experience, and Contact.

3. Modify Components: Customize individual components in the src/components directory.

4. Styling: Adjust colors and styles in tailwind.config.js and src/app/globals.css.

License

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

Contact

For questions or support, please open an issue in the GitHub repository.