Nagi's 3D Portfolio Project

An interactive 3D portfolio website showcasing my projects and skills.
Built this project with the help of JavaScript Mastery.

📋 Table of Contents

1. ⚙️ Tech Stack
2. ✨ Features
3. 📦 Getting Started

⚙️ Tech Stack

• Next.js
• React.js
• Three.js
• React Three Fiber
• React Three Drei
• Email JS
• Tailwind CSS

✨ Features

Visual and Interactive Elements

• Interactive 3D Models: Utilizes Three.js to render engaging 3D models, providing a captivating visual experience.
• Smooth Animations: Implements fluid transitions to enhance user experience and ensure a seamless flow.
• Real-time Interactivity: Features interactive elements like a bird and dragon that react to user actions, adding a dynamic touch.
• Music Integration: Includes optional background music for an immersive experience, enhancing the overall ambiance.

Technical Capabilities

• Dynamic Content: Uses Next.js for server-side rendering, enabling fast and SEO-friendly content loading.
• Responsive Design: Fully adaptive layout ensures optimal viewing on all devices, from desktops to smartphones.
• Stylish UI: Modern, clean interface designed with Tailwind CSS, offering a visually appealing and user-friendly design.
• Contact Integration: Utilizes EmailJS for a functional contact form, making it easy for visitors to get in touch.

User Experience and Connectivity

• Social Media Integration: Provides easy access to professional profiles via prominent icons, encouraging connectivity.
• Performance Optimization: Ensures fast load times and smooth navigation throughout the site, providing an efficient user experience.

📦 Getting Started

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone git@github.com:Nagi132/nagi_3d_portfolio.git
cd nagi_3d_portfolio

Install dependencies

npm install

Start the development server

npm run dev

Open http://localhost:3000 in your browser to view the project.

✉️ Set Up Environment Variables for EmailJS

Create a new file named .env in the root of your project and add the following content:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_emailjs_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_emailjs_public_key

Replace the placeholder values with your actual EmailJS credentials. You can obtain these credentials by signing up on the EmailJS website.