# My Room Portfolio

<p align="center"> 
    <img src="./public/roomfinalss1.png">
</p>

**Live: [at010303.vercel.app](https://at010303.vercel.app/)**

Welcome to my interactive 3D room portfolio! This project showcases a virtual room filled with numerous interactive objects. Click on these objects to engage with them—change the lighting and theme, play a game of Mario, listen to music, view my projects, and much more. Feel free to explore and interact with everything!

## Technologies Used

-   **React**: For building the user interface.
-   **react-three/fiber**: For rendering 3D graphics. Learn more about [react-three/fiber (r3f)](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction).
-   **Three.js**: The underlying 3D engine powering React Three Fiber. Discover more about [Three.js](https://threejs.org/).
-   **react-three/drei**: A collection of useful helpers. Find out more at [react-three/drei (drei)](https://github.com/pmndrs/drei#readme).
-   **react-three/postprocessing**: A postprocessing wrapper for @react-three/fiber. Learn more about [react-postprocessing](https://docs.pmnd.rs/react-postprocessing/effect-composer).
-   **leva**: Provides a control panel for interactive elements. See more about [leva](https://github.com/pmndrs/leva).
-   **zustand**: A small, fast, and scalable state-management solution. Learn more at [zustand](https://docs.pmnd.rs/zustand/getting-started/introduction).
-   **react-emulatorjs**: An easy way to embed an emulator into the website. Learn more about [react-emulatorjs](https://www.npmjs.com/package/react-emulatorjs) and [emulatorjs](https://emulatorjs.org/docs).
-   **howler**: An audio library for the modern web. See more about [howler](https://github.com/goldfire/howler.js#documentation).
-   **gsap**: A JavaScript animation library used for theme transitions. Learn more about [GSAP](https://gsap.com/docs/v3/GSAP/).
-   **Blender**: Used for creating all 3D models. Discover more about [Blender](https://www.blender.org/).

## Inspiration

-   [My Room in 3D by Bruno Simon](https://my-room-in-3d.vercel.app/)
-   [Henry Heffernan Portfolio Showcase by Henry Heffernan](https://henryheffernan.com/)
-   [Jesse's Ramen Shop by Jesse Zhou](https://jesse-zhou.com/)

## Setup

To run this project locally, download [Node.js](https://nodejs.org/en/download) and follow these steps:

```
# Install dependencies
npm install

# Run the local server at localhost:5173
npm run dev

# Build for production in the dist/ directory
npm run build
```

Feel free to explore and interact with everything in the 3D room. Enjoy your stay!