├── .gitignore ├── README.md ├── Scene.js ├── blender └── portfolio_scene_baked_final.blend ├── index.html ├── package.json ├── postcss.config.js ├── public ├── animations │ ├── Falling Idle.fbx │ ├── Standing Idle.fbx │ └── Typing.fbx ├── models │ ├── 646d9dcdc8a5f5bddbfac913.glb │ └── scene.gltf ├── projects │ ├── avatar.jpg │ ├── baking.jpg │ ├── kanagame.jpg │ ├── loader.jpg │ └── wawatmos.jpg ├── textures │ ├── baked.jpg │ └── vscode.mp4 └── vite.svg ├── src ├── App.jsx ├── assets │ └── react.svg ├── components │ ├── Avatar.jsx │ ├── Background.jsx │ ├── Cursor.jsx │ ├── Experience.jsx │ ├── Interface.jsx │ ├── Menu.jsx │ ├── Office.jsx │ ├── Projects.jsx │ └── ScrollManager.jsx ├── config.js ├── index.css └── main.jsx ├── tailwind.config.js ├── vite.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Thumbnail video tutorial](https://github.com/wass08/r3f-portfolio-final/assets/6551176/10e190aa-de14-4f34-a6e7-fca23b73bb15) 2 | 3 | [Video tutorial](https://youtu.be/LooODvrYXzE) 4 | 5 | -------------------------------------------------------------------------------- /Scene.js: -------------------------------------------------------------------------------- 1 | /* 2 | Auto-generated by: https://github.com/pmndrs/gltfjsx 3 | */ 4 | 5 | import React, { useRef } from 'react' 6 | import { useGLTF } from '@react-three/drei' 7 | 8 | export function Model(props) { 9 | const { nodes, materials } = useGLTF('/scene.gltf') 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | ) 80 | } 81 | 82 | useGLTF.preload('/scene.gltf') 83 | -------------------------------------------------------------------------------- /blender/portfolio_scene_baked_final.blend: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/blender/portfolio_scene_baked_final.blend -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Wawa Sensei Portfolio 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "r3f-vite-starter", 3 | "private": true, 4 | "version": "1.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@react-three/drei": "9.75.0", 13 | "@react-three/fiber": "8.13.3", 14 | "framer-motion": "^10.12.16", 15 | "framer-motion-3d": "^10.12.16", 16 | "gsap": "^3.12.0", 17 | "jotai": "^2.1.1", 18 | "leva": "^0.9.34", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0", 21 | "three": "0.146.0" 22 | }, 23 | "devDependencies": { 24 | "@types/react": "^18.0.27", 25 | "@types/react-dom": "^18.0.10", 26 | "@vitejs/plugin-react": "^3.1.0", 27 | "autoprefixer": "^10.4.14", 28 | "postcss": "^8.4.24", 29 | "tailwindcss": "^3.3.2", 30 | "vite": "^4.1.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/animations/Falling Idle.fbx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/animations/Falling Idle.fbx -------------------------------------------------------------------------------- /public/animations/Standing Idle.fbx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/animations/Standing Idle.fbx -------------------------------------------------------------------------------- /public/animations/Typing.fbx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/animations/Typing.fbx -------------------------------------------------------------------------------- /public/models/646d9dcdc8a5f5bddbfac913.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/models/646d9dcdc8a5f5bddbfac913.glb -------------------------------------------------------------------------------- /public/projects/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/projects/avatar.jpg -------------------------------------------------------------------------------- /public/projects/baking.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/projects/baking.jpg -------------------------------------------------------------------------------- /public/projects/kanagame.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/projects/kanagame.jpg -------------------------------------------------------------------------------- /public/projects/loader.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/projects/loader.jpg -------------------------------------------------------------------------------- /public/projects/wawatmos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/projects/wawatmos.jpg -------------------------------------------------------------------------------- /public/textures/baked.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/textures/baked.jpg -------------------------------------------------------------------------------- /public/textures/vscode.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wass08/r3f-portfolio-final/cc8dd2972fe7ef169954d270f782afe364e62f4a/public/textures/vscode.mp4 -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Scroll, ScrollControls } from "@react-three/drei"; 2 | import { Canvas } from "@react-three/fiber"; 3 | import { MotionConfig } from "framer-motion"; 4 | import { Leva } from "leva"; 5 | import { useEffect, useState } from "react"; 6 | import { Cursor } from "./components/Cursor"; 7 | import { Experience } from "./components/Experience"; 8 | import { Interface } from "./components/Interface"; 9 | import { Menu } from "./components/Menu"; 10 | import { ScrollManager } from "./components/ScrollManager"; 11 | import { framerMotionConfig } from "./config"; 12 | 13 | function App() { 14 | const [section, setSection] = useState(0); 15 | const [menuOpened, setMenuOpened] = useState(false); 16 | 17 | useEffect(() => { 18 | setMenuOpened(false); 19 | }, [section]); 20 | 21 | return ( 22 | <> 23 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 45 | 46 | 47 |