Ujjawal's 3D Portfolio

A developer's portfolio to showcase the projects, achievements, and personal information. Built this project by following step by step guide from the detailed tutorial on JavaScript Mastery YouTube. Thanks to JavaScript Mastery.

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on the YouTube channel, JavaScript Mastery.

🤖 Introduction

Built with Next.js for handling the user interface, Three.js for rendering 3D elements, Framer motion for beautiful animations, Sanity.io for dynamic content, EmailJS for handling the emails, and styled with TailwindCSS, this portfolio demonstrates the developer's skills in a unique manner that creates a lasting impact.

⚙️ Tech Stack

• Next.js
• Three.js
• React Three Fiber
• React Three Drei
• Email JS
• Framer Motion
• Tailwind CSS
• Sanity.io
• Sentry

🔋 Features

👉 3D Hero Section: Captivating introduction featuring a spotlight effect, 3D desktop model, and call-to-action.

👉 Interactive Professional Experience: Prominent display of professional background for emphasis and credibility, utilizing animations powered by framer motion.

👉 Animated Projects: Features animated sections using framer motion for projects.

👉 Bento Grid: Presenting personal information and tech skills using cutting-edge CSS design techniques.

👉 Contact Section with 3D Earth Model:Integrates a 3D earth model with email functionality powered by emailjs.

👉 3D Stars: Generate stars progressively at random positions using Three.js for background display.

👉 Sanity.io Implementation: Utilized headless CMS of sanity.io to deliver my projects and professional experience to the frontend dynamically.

👉 Responsiveness: Seamless adaptability across all devices, ensuring optimal viewing experience for every user.

and many more, including code architecture and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

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

Cloning the Repository

git clone https://github.com/ujstha/ujjawal-shrestha-portfolio.git
cd ujjawal-shrestha-portfolio

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

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
NEXT_PUBLIC_RECIPIENT_NAME=your_name_to_send_email
NEXT_PUBLIC_RECIPIENT_EMAIL=your_email_used_to_send_email
NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
SENTRY_AUTH_TOKEN=your_sentry_auth_token

Replace the placeholder values with your EmailJS, Sanity, and Sentry credentials. You can obtain EmailJS credentials by signing up on the EmailJS website. You can obtain Sanity credentials by signing up on the Sanity website. You can obtain Sentry credentials by signing up on the Sentry website

Running the Project

npm run dev

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