https://github.com/bernietv/3d-skateboard-customizer
3D Skateboard Customizer 🛹🚀 build with Next.js and GSAP 🎇🌌
https://github.com/bernietv/3d-skateboard-customizer
gsap nextjs prismic tailwindcss threejs typescript
Last synced: 3 months ago
JSON representation
3D Skateboard Customizer 🛹🚀 build with Next.js and GSAP 🎇🌌
- Host: GitHub
- URL: https://github.com/bernietv/3d-skateboard-customizer
- Owner: BernieTv
- License: mit
- Created: 2025-01-11T09:15:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-11T09:19:30.000Z (over 1 year ago)
- Last Synced: 2025-03-09T22:46:05.001Z (over 1 year ago)
- Topics: gsap, nextjs, prismic, tailwindcss, threejs, typescript
- Language: TypeScript
- Homepage: https://suburbia-skate.netlify.app/
- Size: 14.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 3D Skateboard Customizer App 🛹🎨💻
This repository contains the code and resources for building a **3D Skateboard Customizer App** using the following technologies:
- **[Next.js 15](https://nextjs.org/)** 🚀
- **[Three.js](https://threejs.org/)** 🌌
- **[GSAP](https://greensock.com/gsap/)** 🎥
- **[Prismic CMS](https://prismic.io/)** 📝
- **[TypeScript](https://www.typescriptlang.org/)** 🔒
- **[Tailwind CSS](https://tailwindcss.com/)** 🎨
## Features ✨
- **Interactive 3D Customization**: Users can personalize a 3D skateboard model with custom colors and designs. 🛹🎨
- **Smooth Animations**: Powered by GSAP for responsive and engaging user interactions. 💃
- **Dynamic Content Management**: Integrated with Prismic CMS to manage content dynamically. 📝🔄
- **Responsive UI**: Built with Tailwind CSS to ensure compatibility across devices. 📱💻
- **Deployed for the Web**: Tested and optimized for performance on platforms like Netlify. 🌐🚀
## Table of Contents 📚
1. [Introduction](#introduction)
2. [Technologies Used](#technologies-used)
3. [Installation](#installation)
4. [Usage](#usage)
5. [Features Overview](#features-overview)
6. [Deployment](#deployment)
7. [Contributing](#contributing)
8. [License](#license)
---
## Introduction 🛹
Step into the future of web apps with this **3D Skateboard Customizer**! 🚀 This vibrant project fuses interactive 3D graphics, sleek animations, and modern content management to deliver an exciting and immersive user experience. 🌌✨ Whether you're a skateboard enthusiast or just love experimenting with new tech, this app will blow your mind! 💥
## Technologies Used 🛠️
- **Next.js 15**: Framework for building server-rendered React applications. 🚀
- **Three.js**: Library for rendering 3D graphics. 🌌
- **GSAP**: Animation library for creating smooth transitions and animations. 🎥
- **Prismic CMS**: Headless CMS for managing content dynamically. 📝
- **TypeScript**: Static typing for JavaScript. 🔒
- **Tailwind CSS**: Utility-first CSS framework for building responsive designs. 🎨
## Installation ⚙️
1. Clone the repository:
```bash
git clone https://github.com/BernieTv/3D-Skateboard-Customizer.git
cd 3d-skateboard-customizer
```
2. Install dependencies:
```bash
npm install
```
3. Create a `.env` file and configure your environment variables for Prismic CMS and other services. 🛠️
4. Start the development server:
```bash
npm run dev
```
5. Open your browser and navigate to `http://localhost:3000`. 🌐
## Usage 🎮
- Follow the on-screen prompts to customize your skateboard. 🛹
- Adjust colors, textures, and other properties in real-time. 🎨
- Interact with the 3D model to explore animations and effects. 🌌
## Features Overview ✨
### 1. Interactive 3D Skateboard Model 🛹
- Built using **Three.js** for rendering and manipulating 3D objects. 🌌
### 2. Smooth Animations 🎥
- Powered by **GSAP**, animations bring the skateboard to life with dynamic effects. 💃
### 3. Content Management 📝
- **Prismic CMS** integration allows for easy content updates without touching code. 🔄
### 4. Responsive Design 📱
- **Tailwind CSS** ensures the app adapts seamlessly to different devices and screen sizes. 💻
### 5. Deployment Ready 🌐
- Optimized for deployment on platforms like **Netlify**. 🚀
## Deployment 🚀
To deploy the application:
1. Build the project:
```bash
npm run build
```
2. Deploy using your preferred platform (e.g., Netlify, Vercel, AWS). 🌐
## License 📜
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. 📝