3d Room_portfolio_react

Interactive 3D Portfolio Website

📋 Table of Contents

1. ✨ Introduction
2. ⚙️ Tech Stack
3. 📝 Features
4. 🤸 Quick Start

✨ Introduction

[EN] 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.

[FR] Ce portfolio 3D est une vitrine personnelle immersive, conçue pour captiver grâce à des scènes animées en 3D, des transitions de caméra fluides, des modèles interactifs et un design entièrement responsive. Idéal pour les développeurs, designers ou freelances souhaitant affirmer leur identité et se démarquer dans le monde numérique.

⚙️ Tech Stack

• Three.js is a JavaScript library for creating and displaying 3D graphics in the browser using WebGL. It simplifies complex 3D rendering tasks by providing a higher-level API, making it easier to build interactive 3D experiences for games, visualizations, and creative web applications.

• React Three Fiber is a React renderer for Three.js that enables developers to build 3D scenes using declarative React components. It brings the power of React to WebGL, allowing seamless integration of 3D content in modern web applications.

• Drei is a helper library for React Three Fiber that offers a collection of useful abstractions and ready-to-use components. It speeds up 3D development by providing tools for cameras, controls, environments, and more—reducing boilerplate and streamlining the workflow.

• GSAP (GreenSock Animation Platform) is a robust JavaScript library for building high-performance animations. Known for its smooth and reliable behavior, GSAP is ideal for animating DOM elements, SVGs, and WebGL content, offering precise control over complex sequences and timelines.

• Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It promotes a compositional styling approach using utility classes directly in HTML, enabling faster prototyping and consistent, maintainable designs.

• Vite is a modern build tool that provides lightning-fast development and optimized production builds. It uses native ES modules and features like hot module replacement to deliver a snappy developer experience, making it a favorite for React, Vue, and other modern frameworks.

• React 19 is the upcoming major version of React that introduces new features like the React Compiler, enhanced performance, and developer-focused improvements. It continues to evolve the component-based architecture while simplifying complex patterns and boosting app efficiency.

📝 Features

👉 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 {git remote URL}

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 http://localhost:5173 in your browser to view the project.# 3d-room_portfolio_react