What is project_3d_developer_portfolio?

adrianhajdin/project_3d_developer_portfolio — explained in plain English

Analysis updated 2026-06-22

★ 7,063JavaScriptAudience · developerComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((repo))
    What it does
      3D portfolio website
      Tutorial project
      Customizable template
    Tech stack
      React Three.js
      Tailwind CSS
      EmailJS contact form
    Features
      3D desktop hero model
      Skill geometry shapes
      Star background animation
    Setup
      Clone and npm install
      Add EmailJS credentials
      Responsive layout included

mindmap root((repo)) What it does 3D portfolio website Tutorial project Customizable template Tech stack React Three.js Tailwind CSS EmailJS contact form Features 3D desktop hero model Skill geometry shapes Star background animation Setup Clone and npm install Add EmailJS credentials Responsive layout included

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Use this as a starting point for your own developer portfolio with 3D animations and a live contact form connected to your inbox.

USE CASE 2

Follow the JavaScript Mastery tutorial video step by step to learn how to integrate Three.js 3D models into a React website.

USE CASE 3

Customize the 3D desktop model, skills section, and project cards with your own content and deploy it as your personal portfolio.

USE CASE 4

Study the React Three Fiber setup to understand how to embed Three.js 3D scenes inside React components.

What is it built with?

JavaScriptReactThree.jsTailwind CSSReact Three FiberEmailJS

How does it compare?

	adrianhajdin/project_3d_developer_portfolio	os-js/os.js	cssinjs/jss
Stars	7,063	7,061	7,069
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	moderate	moderate	easy
Complexity	2/5	3/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires an EmailJS account for the contact form, set credentials in a local environment config file before running.

So what is it?

This repository contains the source code for a personal developer portfolio website that uses interactive 3D graphics. It was created as a tutorial project by the JavaScript Mastery YouTube channel, and a full video walkthrough is available for anyone who wants to build it step by step. The code here is the finished version you build by following along. The portfolio website includes a hero section where a 3D desktop computer model sits on screen and can be customized, a section showing skills represented with rotating 3D geometric shapes, a work experience timeline with animated transitions, a projects section, a contact form connected to a 3D rotating Earth model, and a background filled with randomly placed stars that appear progressively as the page loads. All animations across the site are coordinated so they feel consistent as you scroll. The site is built with React (a JavaScript library for building web interfaces), Three.js (a library for rendering 3D graphics in the browser), and Tailwind CSS (a styling system). React Three Fiber and React Three Drei are used to connect Three.js to React in a way that feels natural within the React component structure. The contact form sends messages through EmailJS, a service that lets you send email from a website without a server. To set it up locally, you clone the repository, install dependencies with npm, and create a configuration file with your EmailJS account credentials. Then you start the development server and the site opens in your browser. The site is responsive, meaning it adjusts its layout for different screen sizes. This project is aimed at developers who want to learn how to add 3D and animation to a website and want a practical, portfolio-ready example to study or use as a starting point.

Copy-paste prompts

Prompt 1

I cloned adrianhajdin/project_3d_developer_portfolio and want to replace the 3D desktop model with my own custom GLB file. Walk me through which component to edit and how to swap the model.

Prompt 2

Help me set up EmailJS in this portfolio project so the contact form sends emails to my inbox. What credentials do I need and where do they go in the config file?

Prompt 3

I want to add a new section to this React portfolio showing blog posts fetched from an API. Show me how to create a component that matches the existing Tailwind CSS styling.

Prompt 4

The stars background in this portfolio loads slowly on mobile. Suggest optimizations for the Three.js particle system to improve performance.

Frequently asked questions