Jabel Jais Mountains

A stunning 3D visualization of Jabel Jais Mountains in Ras Al Khaimah using React Three Fiber

🌐 Live Demo

View Live Demo

📋 Table of Contents

• Features
• Tech Stack
• Project Structure
• Installation
• Usage
• Development
• Building
• Contributing
• License

✨ Features

• 🌄 3D Mountain Visualization - Interactive 3D model of Jabel Jais Mountains using Three.js
• 🎨 Multiple Themes - Light, Dark, and Nature themes with persistent storage
• 📱 Responsive Design - Optimized for desktop and mobile devices
• ⚡ Performance Optimized - Built with Vite for fast development and production builds
• 🎯 Custom Hooks - Reusable hooks for window size, scroll, device detection, and accessibility
• 🎪 Modern React - Built with React 19 and modern development practices
• 🔧 Context API - Global state management for app and theme settings
• 🎭 Post-processing Effects - Bloom and tone mapping for enhanced visuals
• 🎮 Interactive Controls - Orbit controls with auto-rotation and smooth animations

🛠 Tech Stack

• Frontend Framework: React 19.2.0
• 3D Library: Three.js via React Three Fiber 9.5.0
• Build Tool: Vite 5.x
• 3D Components: @react-three/drei 10.7.7
• Post-processing: @react-three/postprocessing
• State Management: React Context API
• Styling: CSS Variables with custom design system
• Linting: ESLint 9.39.1
• Code Formatting: Prettier 3.8.1
• PWA: Workbox for offline caching

📁 Project Structure

jabel-jais-mountains/
├── public/
│   ├── index.html
│   └── assets/
│       └── models/
│           └── s2wt_kamdo_industrial_divinities-transformed.glb
├── src/
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Header.jsx
│   │   │   ├── Footer.jsx
│   │   │   └── Layout.jsx
│   │   ├── ui/
│   │   │   ├── Button.jsx
│   │   │   ├── Loader.jsx
│   │   │   ├── Modal.jsx
│   │   │   └── Spinner.jsx
│   │   └── scene/
│   │       ├── Scene.jsx
│   │       ├── Model.jsx
│   │       ├── Camera.jsx
│   │       ├── Lights.jsx
│   │       ├── Environment.jsx
│   │       └── Controls.jsx
│   ├── features/
│   │   ├── mountains/
│   │   │   ├── MountainModel.jsx
│   │   │   ├── useMountainData.js
│   │   │   └── mountainUtils.js
│   │   └── weather/
│   │       ├── WeatherEffects.jsx
│   │       └── useWeather.js
│   ├── hooks/
│   │   ├── useWindowSize.js
│   │   ├── useScroll.js
│   │   ├── useDeviceDetect.js
│   │   └── usePrefersReducedMotion.js
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── About.jsx
│   │   ├── Contact.jsx
│   │   ├── Privacy.jsx
│   │   └── NotFound.jsx
│   ├── context/
│   │   ├── AppContext.jsx
│   │   └── ThemeContext.jsx
│   ├── styles/
│   │   ├── globals.css
│   │   ├── variables.css
│   │   └── animations.css
│   ├── utils/
│   │   ├── math.js
│   │   ├── helpers.js
│   │   ├── constants.js
│   │   └── performance.js
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── server.js
├── vite.config.js
├── package.json
├── eslint.config.js
├── index.html
├── README.md
├── LICENSE
├── CHANGELOG.md
└── .vscode/
    └── mcp.json

Directory Overview

• src/components/ - Reusable React components
  • layout/ - Layout components (Header, Footer, Layout)
  • ui/ - UI components (Button, Modal, Loader, Spinner)
  • scene/ - Three.js scene components (Camera, Lights, Controls, Model)
• src/features/ - Feature-specific components and logic
  • mountains/ - Mountain visualization components and utilities
  • weather/ - Weather effects and animations
• src/hooks/ - Custom React hooks for common functionality
• src/pages/ - Page components for routing
• src/context/ - React Context providers for global state
• src/styles/ - CSS stylesheets with design system
• src/utils/ - Utility functions and constants
• public/ - Static files served directly

�📦 Installation

# Clone the repository
git clone https://github.com/michael-mpj/Jabel-Jais-Mountains.git

# Navigate to project directory
cd Jabel-Jais-Mountains

# Install dependencies
npm install

🚀 Usage

# Start development server
npm run dev

# Preview production build
npm run preview

The application will be available at http://localhost:5173

🛠 Development

Available Scripts

• npm run dev - Start development server with hot module replacement
• npm run build - Create production build
• npm run build:watch - Watch mode for production builds
• npm run preview - Preview production build locally
• npm run lint - Run ESLint to check code quality
• npm run lint:fix - Fix ESLint issues automatically

Architecture Overview

This project uses a modern React architecture with the following patterns:

• Component Organization: Feature-based structure with clear separation of concerns
• Custom Hooks: Reusable hooks for common functionality (window size, scroll, device detection)
• Context API: Global state management for themes and app settings
• CSS Variables: Design system with reusable CSS custom properties
• 3D Scene Management: Modular Three.js components for camera, lighting, and models

Key Features

• Theme System: Three built-in themes (Light, Dark, Nature) with CSS variable integration
• Responsive Design: Mobile-first approach with device detection hooks
• Performance: Optimized Three.js rendering with post-processing effects
• Accessibility: Reduced motion detection and keyboard navigation support

📦 Building

# Build for production
npm run build

# The output will be in the dist/ directory

🚀 Deployment

The project is configured for deployment on Vercel with the following features:

• PWA Support: Service worker auto-generation with Workbox
• Asset Optimization: Automatic compression and caching
• 3D Model Loading: Optimized loading of GLTF/GLB files
• Environment Variables: Configurable base URL for different environments

Deploy to Vercel

1. Connect your GitHub repository to Vercel
2. Vercel will automatically detect the Vite configuration
3. The build command will run npm run build
4. Static assets will be served from the dist/ directory

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Guidelines

• Follow the established component structure and naming conventions
• Use the custom hooks for common functionality
• Maintain the theme system when adding new UI components
• Ensure accessibility compliance with reduced motion support
• Test 3D components across different devices and browsers

📄 License

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

👤 Author

Michael Joseph - @michael-mpj - Portfolio

🙏 Acknowledgments

• Three.js Community - For the amazing 3D library
• React Three Fiber - For the React renderer for Three.js
• React Three Drei - For the useful Three.js helpers
• Jabel Jais Mountains - For the inspiration and natural beauty