🎨 Jose's 3D Portfolio with React Three Fiber

🌊 Wave Shaders

⚡ Clump Physics

🚀 Tech Stack

• nextjs – React Framework for Production
• typescript – JavaScript with syntax for types
• tailwind – Utility-first CSS framework
• threejs – Lightweight, 3D library with a default WebGL renderer
• @react-three/fiber – React renderer for Threejs on the web and react-native
• @react-three/drei – Useful helpers for react-three-fiber
• @react-three/gltfjsx – Turns GLTFs into JSX components
• @react-three/postprocessing – Postprocessing wrapper for react-three-fiber
• react-spring – Javascript animation

✨ Features

• 🎯 Interactive 3D project showcase with scroll controls
• 🌊 Custom wave shaders and particle effects
• ⚡ Physics-based animations and interactions
• 📱 Fully responsive design
• 🎨 Modern UI with smooth transitions
• 🔗 Direct links to live projects and GitHub repositories

🛠️ Installation

git clone https://github.com/joseook/nextjs-r3f-shaders-portfolio.git
cd nextjs-r3f-shaders-portfolio
npm install
npm run dev

Open http://localhost:3000 in your browser.

📁 Project Structure

src/
├── components/
│   ├── canvas/          # 3D components and scenes
│   └── dom/             # DOM components and UI
├── pages/               # Next.js pages
└── styles/              # Global styles

🎮 Interactive Elements

• Scroll-based 3D navigation through project showcases
• Hover effects with particle systems
• Smooth camera transitions between sections
• Responsive 3D models that adapt to screen size

🔗 Contact

• 📧 Email: joseok.business@gmail.com
• 🌐 Website: Portfolio
• 💼 LinkedIn: jose-40baa9305
• 🐙 GitHub: joseook
• 🐦 Twitter: joseokjs

📄 License

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

Copyright (c) 2025 joseook