A visually interactive 3D interface built with React, Three.js, and @react-three/fiber, this project displays employee profiles along a curved grid surface. Users can explore categorized employee images by designation, view employee details on hover, and visit their LinkedIn profiles via clickable elements.
- ✅ Curved 3D Plane: Employee photos are mapped onto a smoothly curved surface.
- ✅ Designation-Based Sections: The grid is divided by role (e.g., CTO, Frontend Developer, etc.) with section headings.
- ✅ Image Hover Effects: Hovering over a profile shows a tooltip with the employee's name, ID, and designation.
- ✅ Interactive Navigation:
- Left/right arrow buttons move the curved surface horizontally.
- Mouse scroll enables zooming in/out.
- Mouse drag allows orbiting the camera around the grid.
- ✅ Clickable LinkedIn Links: Each employee card is clickable and redirects to the respective LinkedIn profile.
- ✅ Dynamic Rendering: All components and data-driven visuals are created using reusable
.jsxfiles. - ✅ Smooth Performance: Optimized for real-time interaction and smooth transitions.
| Tech | Purpose |
|---|---|
| React.js | UI rendering and component structure |
| Three.js | 3D rendering and scene setup |
| @react-three/fiber | React bindings for Three.js |
| @react-three/drei | Useful helpers like OrbitControls, etc. |
| HTML/CSS | Styling, curved container, and layout |