Suburbia Skate is an interactive 3D skateboarding experience built with modern web technologies like React, Three.js, TailwindCSS, and GSAP. It allows users to customize skateboards and interact with a 3D scene in real-time.
- 3D Skateboard Customization: Change grip tape, bolts, trucks, and deck textures.
- Interactive 3D Scene: Perform animations like ollies and kickflips.
- Responsive Design: Optimized for various screen sizes.
- Modern Stack: Built with Vite, React, Three.js, TailwindCSS, and GSAP.
- React: For building the user interface.
- Three.js: For rendering 3D graphics.
- @react-three/fiber: React renderer for Three.js.
- @react-three/drei: Useful helpers for Three.js.
- GSAP: For smooth animations.
- TailwindCSS: For styling.
- Vite: For fast development and build tooling.
Ensure you have the following installed:
- Node.js: Version 18 or higher.
- pnpm: For managing dependencies.
-
Clone the repository:
git clone https://github.com/your-username/suburbia-skate.git cd suburbia-skate -
Install dependencies:
pnpm install
Start the development server:
pnpm devOpen your browser and navigate to http://localhost:5173.
To create a production build:
pnpm buildThe build output will be in the dist directory.
To preview the production build:
pnpm previewContributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature-name. - Commit your changes:
git commit -m "Add feature-name". - Push to the branch:
git push origin feature-name. - Open a pull request.