Interactive 3D Portfolio Website

Build this project step by step with HTML + CSS + JAVASCRIPT + REACT.JS + NODE.JS

🤖 Introduction

The 3D Portfolio project is a highly engaging personal website that features animated 3D scenes, smooth camera transitions, interactive model showcases, and responsive design. It’s ideal for developers, designers, or freelancers looking to stand out in the digital crowd.

⚙️ Tech Stack

• Three.js
• React Three Fiber
• Drei
• GSAP
• Tailwind CSS
• Vite
• React 19

🔋 Features

Features of the 3D Portfolio Project

👉 Animated 3D models and reveal animations

👉 Realistic lighting and shadows

👉 GSAP-powered scroll interactions

👉 Responsive design with Tailwind CSS and Flexbox/Grid

👉 Micro Interactions

👉 Multi-section layout (About, Projects, Contact)

👉 Mobile optimized 3D experience

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/adrianhajdin/3d-portfolio.git
cd 3d-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:

VITE_APP_EMAILJS_SERVICE_ID=
VITE_APP_EMAILJS_TEMPLATE_ID=
VITE_APP_EMAILJS_PUBLIC_KEY=

Replace the placeholder values with your actual EmailJS credentials.

Running the Project

npm run dev

Open (https://portfolio-roan-one-11.vercel.app/) in your browser to view the project.