Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aroradev1010/teecraft
Design T-shirts using the power of Three.js and the elegance of Tailwind CSS. Unleash your creativity, design unique masterpieces, and redefine your fashion statement.
https://github.com/aroradev1010/teecraft
3d framer-motion reactjs tailwindcss threejs
Last synced: about 2 months ago
JSON representation
Design T-shirts using the power of Three.js and the elegance of Tailwind CSS. Unleash your creativity, design unique masterpieces, and redefine your fashion statement.
- Host: GitHub
- URL: https://github.com/aroradev1010/teecraft
- Owner: aroradev1010
- Created: 2023-07-14T12:58:25.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-14T09:01:13.000Z (5 months ago)
- Last Synced: 2024-11-09T02:52:57.720Z (3 months ago)
- Topics: 3d, framer-motion, reactjs, tailwindcss, threejs
- Language: JavaScript
- Homepage: https://thunderous-pegasus-3b214e.netlify.app
- Size: 5.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A 3D Dev Portfolio
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
Built with React.js for handling the user interface, Three.js for rendering 3D elements, and styled with TailwindCSS, the 3D Minimalistic portfolio is a website project. The primary goal is to demonstrate the developer's skills in a unique manner that creates a lasting impact.
- Node.js
- React.js
- Three.js
- React Three Fiber
- React Three Drei
- Vite
- Tailwind CSS
## 🔋 Features
👉 **Immersive Hero**: An eye-catching 3D room that responds to mouse movements.
👉 **Advanced Color Picker**: Tailor your T-shirt’s hue to match your style or mood with precision, and see your color choices instantly reflected on the 3D model.
👉 **Flexible File Upload & Design Options**: Personalize your T-shirt by uploading your own images with ease. Choose whether to feature your artwork as a prominent logo or to cover the entire shirt with your design.
👉 **Interactive 3D T-Shirt Model**: Experience real-time visual feedback as you customize your T-shirt; the model intuitively responds to your mouse movements, allowing you to see every angle and detail of your creation.
👉 **Fully Responsive**: Optimized layout ensuring a smooth experience across all devices, from desktop to mobile.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/aroradev1010/TeeCraft.git
cd threejscc-portfolio
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.