3D Interactive Portfolio

A personal portfolio website designed with Three.js, creating an immersive 3D room environment to showcase projects and information.

✨ Features

• Interactive 3D Environment: Explore a detailed 3D room.
• Theme Switching: Dynamically switch between light and dark themes.
• Navigation: Smooth camera transitions to "About Me" and "Projects" sections.
• Clickable Objects: Interact with elements in the scene like a book, light switch, and project displays.
• Animations: Utilizes GSAP for smooth animations and transitions.
• Responsive Design: Adapts to different screen sizes for a consistent experience.
• Dynamic Content Loading: Loads 3D models, textures, and fonts.

🚀 Live Demo

Link to live demo

🛠️ Technologies Used

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• 3D Rendering: Three.js (r149)
• Animation: GSAP (GreenSock Animation Platform)
• Build Tool: Vite
• UI Controls (Development): dat.GUI (listed as a dependency)
• Model Loading: GLTFLoader with DRACOLoader for compressed 3D models.

⚙️ Setup and Installation

1. Clone the repository:

   git clone https://your-repository-url.git # TODO: Update with actual repository URL
   cd 3d-portfolio

2. Install dependencies: Make sure you have Node.js installed.

   npm install

3. Run the development server:

   npm run dev

   This will start the Vite development server, typically at http://localhost:5173.

📜 Available Scripts

In the project directory (3d-portfolio), you can run the following scripts:

• npm run dev: Starts the development server with hot reloading.
• npm run build: Builds the application for production to the dist folder.
• npm run preview: Serves the production build locally for preview.
• npm run host: Starts the development server and makes it accessible on your local network.

📁 Project Structure

.
├── README.md                # This file
└── 3d-portfolio/
    ├── index.html           # Main HTML entry point
    ├── main.js              # Core Three.js and application logic
    ├── style.css            # Main stylesheet
    ├── vite.config.js       # Vite configuration
    ├── package.json         # Project dependencies and scripts
    ├── public/              # Static assets
    │   ├── draco/           # DRACO decoder files
    │   ├── fonts/           # Font files (e.g., unione.json, helvatica.json)
    │   ├── images/          # Image assets (e.g., favicon.png, logo.png, preview.jpg)
    │   ├── models/          # 3D models (e.g., room.glb)
    │   └── textures/        # Texture files (e.g., arcane.mp4, book-inner2.png)
    └── ... (other Vite and Node.js files like .gitignore, package-lock.json)

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

🙏 Acknowledgements

• Three.js team and community.
• Creators of the 3D models and textures used.

---

This README was generated with assistance from an AI tool.