project_3D_developer_portfolio
The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!
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.