basedhound / 3d-island_portfolio_react

This 3D website, built with React and powered by Three.js, features engaging interactive elements. Navigate aboard a small plane and explore a floating island to discover various information.

3D Island Portflio

📋 Table of Contents

• ✨ Introduction
• ⚙️ Tech Stack
• 🚀 Quick Start

✨ Introduction

[EN] This 3D website, built with React and powered by Three.js, features engaging interactive elements. Navigate aboard a small plane to explore a floating island and discover various information. On the contact page, a fox will dynamically react as you fill out the fields!

[FR] Ce site web 3D, construit avec React et propulsé par Three.js, propose des éléments interactifs captivants. Naviguez à bord d'un petit avion pour explorer une île flottante et découvrir diverses informations. Sur la page de contact, un renard réagira dynamiquement à mesure que vous remplirez les champs !

⚙️ Tech Stack

• React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently manage application state.

• Three.js is a React binding to Three.js, enabling developers to integrate powerful 3D graphics and visualizations into React applications seamlessly.

• Three/Drei is a collection of useful helpers and abstractions for React Three.js applications. It provides components like effects, shaders, and pre-built 3D objects to simplify development.

• Three/Fiber optimizes the React binding for Three.js, utilizing React's reconciliation algorithm (Fiber) to efficiently manage and update the 3D scene graph.

• Vite is a modern build tool that prioritizes speed and efficiency for frontend development. It offers rapid server start-up, instant hot module replacement (HMR), and supports modern JavaScript features out of the box.

• Tailwind is a utility-first CSS framework that facilitates rapid UI development by applying pre-defined utility classes directly in HTML markup, eliminating the need for writing custom CSS.

• EmailJS is a service that simplifies email sending from client-side JavaScript applications. It provides APIs for integrating email functionality without backend setup, making it easier to manage email communication in frontend projects.

🚀 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

Let's install the project dependencies, from your terminal, run:

npm install
# or
yarn install

Running the Project

Installation will take a minute or two, but once that's done, you should be able to run the following command:

npm run dev
# or
yarn dev

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