# 3d-react-3

**Repository Path**: zhangyudada/3d-react-3

## Basic Information

- **Project Name**: 3d-react-3
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-22
- **Last Updated**: 2026-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🌟 3D React Portfolio

<div align="center">
  <h2>Modern 3D Portfolio</h2>
  <p>
    A stunning 3D portfolio website showcasing modern web technologies and interactive experiences
  </p>

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/GourangaDasSamrat/3d-react-portfolio-2)

[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/GourangaDasSamrat/3d-react-portfolio-2)

<a href="https://gouranga.eu.org/"><strong>✨ View Live Demo »</strong></a>

</div>
  <p style="margin-top:16px;">
    <a href="https://deepwiki.com/GourangaDasSamrat/3d-react-portfolio-2/" title="Detailed documentation on DeepWiki">
      <img alt="DeepWiki Docs" src="https://img.shields.io/badge/Documentation-DeepWiki-4B79FF?style=for-the-badge&logo=readthedocs&logoColor=white" />
    </a>
  </p>
  <p><em>For detailed documentation, guides, and configuration notes — visit the DeepWiki page above.</em></p>
</div>
---

## 🎯 Key Features

<div align="center">
  <table>
    <tr>
      <td align="center">🎨</td>
      <td>Modern UI/UX Design</td>
      <td align="center">🌐</td>
      <td>Interactive 3D Elements</td>
    </tr>
    <tr>
      <td align="center">📱</td>
      <td>Fully Responsive</td>
      <td align="center">🎭</td>
      <td>Stunning Animations</td>
    </tr>
    <tr>
      <td align="center">🎵</td>
      <td>Background Music</td>
      <td align="center">📧</td>
      <td>Contact Form</td>
    </tr>
    <tr>
      <td align="center">⚡</td>
      <td>Fast Performance</td>
      <td align="center">🎮</td>
      <td>Interactive Models</td>
    </tr>
  </table>
</div>

## 🎥 Demo & Showcase

<div align="center">
  <h3>Experience the Live Demo</h3>
  <a href="https://gouranga.eu.org/">
    <img src="https://img.shields.io/badge/Click%20to%20Visit-Portfolio%20Website-blue?style=for-the-badge&logo=netlify&logoColor=white&labelColor=20232A">
  </a>

[<img src="https://img.youtube.com/vi/ZG73Dhri9CA/0.jpg" width="600" height="350">](https://www.youtube.com/watch?v=ZG73Dhri9CA)

</div>

## 📱 Mobile Navigation System

A modern, responsive hamburger menu is implemented for mobile devices, ensuring seamless navigation and a clean UI on smaller screens. The menu uses Framer Motion for smooth slide-in/out animations, aligning with the overall design and enhancing user experience. The navigation links are hidden on desktop and shown in a mobile drawer on small screens.

## 🚀 Tech Stack

<div align="center">

|   Category    | Technologies                                                                                                                                                                                                                                                                                         |
| :-----------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Frontend Core | ![React](https://img.shields.io/badge/React-18-blue?logo=react&logoColor=white&labelColor=20232A) ![Three.js](https://img.shields.io/badge/Three.js-Latest-black?logo=three.js&labelColor=20232A) ![TailwindCSS](https://img.shields.io/badge/Tailwind-3-38B2AC?logo=tailwind-css&labelColor=20232A) |
|  Build & Dev  | ![Vite](https://img.shields.io/badge/Vite-4-646CFF?logo=vite&labelColor=20232A) ![ESLint](https://img.shields.io/badge/ESLint-Latest-4B32C3?logo=eslint&labelColor=20232A)                                                                                                                           |
|   3D Assets   | ![3D Models](https://img.shields.io/badge/3D_Models-Custom-orange?labelColor=20232A) ![GLTF](https://img.shields.io/badge/GLTF-Models-red?labelColor=20232A)                                                                                                                                         |
|   Animation   | ![Framer](https://img.shields.io/badge/Framer_Motion-Latest-ff69b4?logo=framer&labelColor=20232A)                                                                                                                                                                                                    |
|  Deployment   | ![Netlify](https://img.shields.io/badge/Netlify-Latest-00C7B7?logo=netlify&logoColor=white&labelColor=20232A)                                                                                                                                                                                        |

</div>

## 📁 Project Structure

```bash
src/
  ├── assets/        # 3D models, images, icons, sounds
  │   ├── 3d/       # GLTF models
  │   ├── icons/    # SVG icons
  │   └── images/   # Images & textures
  ├── components/   # Reusable UI components
  │   ├── HamburgerMenu.jsx  # Responsive hamburger menu for mobile navigation
  ├── constants/    # Configuration & constants
  ├── hooks/        # Custom React hooks
  ├── models/       # 3D model components
  └── pages/        # Application pages & routing
```

## 🎯 Performance Metrics

<div align="center">

### 📊 Lighthouse Scores

| Metric         |                                                           Score                                                           |
| :------------- | :-----------------------------------------------------------------------------------------------------------------------: |
| Performance    |     ![Performance](https://img.shields.io/badge/95-brightgreen?style=flat-square&label=Performance&labelColor=20232A)     |
| Accessibility  |  ![Accessibility](https://img.shields.io/badge/100-brightgreen?style=flat-square&label=Accessibility&labelColor=20232A)   |
| Best Practices | ![Best Practices](https://img.shields.io/badge/95-brightgreen?style=flat-square&label=Best%20Practices&labelColor=20232A) |
| SEO            |            ![SEO](https://img.shields.io/badge/100-brightgreen?style=flat-square&label=SEO&labelColor=20232A)             |

### ⚡ PageSpeed Insights

| Metric                         |                                         Value                                         |
| :----------------------------- | :-----------------------------------------------------------------------------------: |
| First Contentful Paint (FCP)   | ![FCP](https://img.shields.io/badge/0.8s-success?style=flat-square&labelColor=20232A) |
| Largest Contentful Paint (LCP) | ![LCP](https://img.shields.io/badge/1.2s-success?style=flat-square&labelColor=20232A) |
| Total Blocking Time (TBT)      | ![TBT](https://img.shields.io/badge/50ms-success?style=flat-square&labelColor=20232A) |
| Cumulative Layout Shift (CLS)  | ![CLS](https://img.shields.io/badge/0.1-success?style=flat-square&labelColor=20232A)  |

</div>

## 🚦 Getting Started

```bash
# Clone the repository
git clone https://github.com/your-username/3d-react-portfolio-2.git

# Install dependencies
npm install

# Start development server
npm run dev
```

Then open http://localhost:5173 in your browser. 🎉

## 👤 Author & Contact

<p align="center">
  <img src="https://i.postimg.cc/KjDqkbXm/1765031414996-3.jpg"
       alt="Gouranga Das Samrat"
       width="120"
       style="border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,0.15);" />
</p>

<h3 align="center">Gouranga Das Samrat</h3>

<p align="center">
  <i>
    Software Developer
  </i>
</p>

<p align="center">
  <a href="https://linkedin.com/in/gouranga-das-samrat">
    <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white"/>
  </a>
  <a href="https://x.com/gouranga_khulna">
    <img src="https://img.shields.io/badge/X-000000?style=for-the-badge&logo=x&logoColor=white"/>
  </a>
  <a href="https://bsky.app/profile/gouranga-khulna.bsky.social">
    <img src="https://img.shields.io/badge/Bluesky-0285FF?style=for-the-badge&logo=bluesky&logoColor=white"/>
  </a>
  <a href="https://www.facebook.com/gourangadassamrat">
    <img src="https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white"/>
  </a>
</p>

<p align="center">
  <a href="https://leetcode.com/u/gourangadassamrat/">
    <img src="https://img.shields.io/badge/LeetCode-FFA116?style=for-the-badge&logo=leetcode&logoColor=white"/>
  </a>
  <a href="https://www.hackerrank.com/profile/gouranga_das_kh1">
    <img src="https://img.shields.io/badge/HackerRank-2EC866?style=for-the-badge&logo=hackerrank&logoColor=white"/>
  </a>
  <a href="https://codepen.io/gouranga-das-samrat">
    <img src="https://img.shields.io/badge/CodePen-000000?style=for-the-badge&logo=codepen&logoColor=white"/>
  </a>
</p>

<p align="center">
  <a href="https://medium.com/@gouranga.das.khulna">
    <img src="https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white"/>
  </a>
  <a href="https://dev.to/gouranga-das-khulna/">
    <img src="https://img.shields.io/badge/Dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white"/>
  </a>
  <a href="mailto:gouranga.samrat@gmail.com">
    <img src="https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white"/>
  </a>
</p>

<p align="center">
  <i>
    Open to collaboration, frontend & full-stack projects,
    or meaningful discussions around JavaScript, React & web architecture.
  </i>
</p>

## 🔗 Live Link

Visit the live website: [https://gouranga.eu.org/](https://gouranga.eu.org/)

## 💎 Acknowledgement

<div align="center">

Inspired by [Adrian Hajdin's 3D Portfolio](https://github.com/adrianhajdin/3D_portfolio)

[![Stars](https://img.shields.io/github/stars/adrianhajdin/3D_portfolio?style=social)](https://github.com/adrianhajdin/3D_portfolio)

</div>

## 📄 License

This project is licensed under the MIT License. Feel free to use it for your own portfolio!

<div align="center">

Made with ❤️ by [Gouranga Das Samrat](https://github.com/GourangaDasSamrat)

</div>