|
1 | | -# React + TypeScript + Vite |
| 1 | +# DevSpawnPoint - 3D Interactive Portfolio |
2 | 2 |
|
3 | 3 | [](https://app.netlify.com/projects/developerspawnpoint/deploys) |
4 | 4 |
|
| 5 | +## About the Project |
| 6 | + |
| 7 | +DevSpawnPoint is an interactive 3D developer workspace (spawn point) portfolio built with modern web technologies. Visitors can navigate through a realistic 3D room, interact with items on the desk, and discover my projects, social media profiles, and skills in an immersive environment. |
| 8 | + |
5 | 9 | ## Screenshots |
6 | 10 |
|
7 | 11 |  |
8 | 12 | *Interactive 3D workspace environment* |
9 | 13 |
|
10 | 14 |  |
11 | | -*Dark mode view with ambient lighting* |
12 | | - |
13 | | -## About |
14 | | - |
15 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
16 | | - |
17 | | -Currently, two official plugins are available: |
18 | | - |
19 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh |
20 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
21 | | - |
22 | | -## React Compiler |
| 15 | +*Night mode with ambient lighting* |
| 16 | + |
| 17 | +## Tech Stack |
| 18 | + |
| 19 | +This project is optimized using the latest web technologies and 3D graphics libraries: |
| 20 | + |
| 21 | +- **Core:** [React 19](https://react.dev/) & [TypeScript](https://www.typescriptlang.org/) |
| 22 | +- **3D Engine:** [Three.js](https://threejs.org/) |
| 23 | +- **React Bridge:** [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber) |
| 24 | +- **3D Utilities:** [@react-three/drei](https://github.com/pmnd.rs/drei) |
| 25 | +- **Styling:** [Tailwind CSS 4](https://tailwindcss.com/) |
| 26 | +- **Animations:** [Framer Motion](https://www.framer.com/motion/) |
| 27 | +- **AI Integration:** [Google Generative AI (Gemini)](https://ai.google.dev/) |
| 28 | +- **Build Tool:** [Vite](https://vitejs.dev/) |
| 29 | +- **Post-processing:** Bloom and Vignette effects via `@react-three/postprocessing` |
| 30 | + |
| 31 | +## Key Features |
| 32 | + |
| 33 | +- **Interactive 3D Environment:** 360-degree room exploration with zoom and pan capabilities. |
| 34 | +- **Dynamic Screens:** Desktop monitors feature dynamic digital displays showcasing projects and tech stacks. |
| 35 | +- **Matrix Effect:** Custom shader-based Matrix rain effect on specific terminal screens. |
| 36 | +- **Performance Optimization:** Seamless experience with `frameloop="demand"` and optimized DPR settings. |
| 37 | +- **Music & Audio:** Immersive ambient music managed through a central `MusicContext`. |
| 38 | +- **Gemini AI:** Artificial intelligence integration for smart content management and interactions. |
| 39 | + |
| 40 | +## Project Structure |
| 41 | + |
| 42 | +```bash |
| 43 | +src/ |
| 44 | +├── components/ |
| 45 | +│ ├── canvas/ # 3D Models and Scene components (Room, Desk, Monitor, etc.) |
| 46 | +│ ├── overlays/ # UI layers placed over the 3D scene |
| 47 | +│ └── ui/ # Menus, Loading screens, and Buttons |
| 48 | +├── context/ # Centralized state management for Overlays and Music |
| 49 | +├── constants/ # Project data and configurations |
| 50 | +├── assets/ # Static media files |
| 51 | +└── App.tsx # Main entry point and R3F Canvas configuration |
| 52 | +``` |
23 | 53 |
|
24 | | -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). |
| 54 | +## Installation |
25 | 55 |
|
26 | | -## Expanding the ESLint configuration |
| 56 | +To run the project locally: |
27 | 57 |
|
28 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
| 58 | +1. Clone the repository: |
| 59 | + ```bash |
| 60 | + git clone https://github.com/sametuca/DevSpawnPoint-Porfolio.git |
| 61 | + ``` |
| 62 | +2. Install dependencies: |
| 63 | + ```bash |
| 64 | + npm install |
| 65 | + ``` |
| 66 | +3. Start the development server: |
| 67 | + ```bash |
| 68 | + npm run dev |
| 69 | + ``` |
29 | 70 |
|
30 | | -```js |
31 | | -export default defineConfig([ |
32 | | - globalIgnores(['dist']), |
33 | | - { |
34 | | - files: ['**/*.{ts,tsx}'], |
35 | | - extends: [ |
36 | | - // Other configs... |
| 71 | +## Models & Assets |
37 | 72 |
|
38 | | - // Remove tseslint.configs.recommended and replace with this |
39 | | - tseslint.configs.recommendedTypeChecked, |
40 | | - // Alternatively, use this for stricter rules |
41 | | - tseslint.configs.strictTypeChecked, |
42 | | - // Optionally, add this for stylistic rules |
43 | | - tseslint.configs.stylisticTypeChecked, |
| 73 | +The 3D models used in the project are located in the `public/models` directory. All models are in GLTF/GLB format and optimized for web performance. The scene consists of a desk, gaming chair, monitors, decorative items, and custom lighting setups. |
44 | 74 |
|
45 | | - // Other configs... |
46 | | - ], |
47 | | - languageOptions: { |
48 | | - parserOptions: { |
49 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
50 | | - tsconfigRootDir: import.meta.dirname, |
51 | | - }, |
52 | | - // other options... |
53 | | - }, |
54 | | - }, |
55 | | -]) |
56 | | -``` |
57 | | - |
58 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
59 | | - |
60 | | -```js |
61 | | -// eslint.config.js |
62 | | -import reactX from 'eslint-plugin-react-x' |
63 | | -import reactDom from 'eslint-plugin-react-dom' |
64 | | - |
65 | | -export default defineConfig([ |
66 | | - globalIgnores(['dist']), |
67 | | - { |
68 | | - files: ['**/*.{ts,tsx}'], |
69 | | - extends: [ |
70 | | - // Other configs... |
71 | | - // Enable lint rules for React |
72 | | - reactX.configs['recommended-typescript'], |
73 | | - // Enable lint rules for React DOM |
74 | | - reactDom.configs.recommended, |
75 | | - ], |
76 | | - languageOptions: { |
77 | | - parserOptions: { |
78 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
79 | | - tsconfigRootDir: import.meta.dirname, |
80 | | - }, |
81 | | - // other options... |
82 | | - }, |
83 | | - }, |
84 | | -]) |
85 | | -``` |
| 75 | +--- |
| 76 | +*Developed by: [Samet Uca](https://github.com/sametuca)* |
0 commit comments