https://github.com/basedhound/3d-island_portfolio_react

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.
https://github.com/basedhound/3d-island_portfolio_react

3d portfolio r3f react tailwind three-drei three-fiber threejs vite

Last synced: about 2 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/basedhound/3d-island_portfolio_react
• Owner: basedhound
• Created: 2024-01-25T04:19:19.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-25T10:03:15.000Z (5 months ago)
• Last Synced: 2024-11-09T03:23:46.795Z (3 months ago)
• Topics: 3d, portfolio, r3f, react, tailwind, three-drei, three-fiber, threejs, vite
• Language: JavaScript
• Homepage: https://3d-island-fv.vercel.app
• Size: 33.2 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    

      

    

  
3D Island Portflio



##  
 📋 Table of Contents

- ✨ [Introduction](#introduction)

- ⚙️ [Tech Stack](#tech-stack)

- 🚀 [Quick Start](#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**](https://react.dev/reference/react) is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently manage application state.

- [**Three.js**](https://threejs.org/docs/) is a React binding to Three.js, enabling developers to integrate powerful 3D graphics and visualizations into React applications seamlessly.

- [**Three Drei**](https://github.com/pmndrs/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**](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) optimizes the React binding for Three.js, utilizing React's reconciliation algorithm (Fiber) to efficiently manage and update the 3D scene graph.

- [**Vite**](https://vitejs.dev/guide/) 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**](https://v2.tailwindcss.com/docs) 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**](https://www.emailjs.com/docs/examples/reactjs/) 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](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)


**Cloning the Repository**

```bash

git clone {git remote URL}

```


**Installation**

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

```bash

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:

```bash

npm run dev

# or

yarn dev

```

Open [`http://localhost:5173`](http://localhost:5173) in your browser to view the project.