https://github.com/websharkdev/theavatar
https://github.com/websharkdev/theavatar
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/websharkdev/theavatar
- Owner: websharkdev
- Created: 2023-12-18T12:11:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-18T12:47:47.000Z (over 2 years ago)
- Last Synced: 2025-10-24T17:45:16.257Z (8 months ago)
- Language: TypeScript
- Homepage: https://theavatar.vercel.app
- Size: 2.33 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Avatar
This project was created specifically for The Avatar Factory and serves as the technical task for the Three.js Front-end Developer position. The main goal of this project is to display a model (Test Camila), apply animations, and showcase different emotions.
## Technologies Used
- [Next.js](https://nextjs.org/) - React framework for production.
- [React](https://reactjs.org/) - A JavaScript library for building user interfaces.
- [Three.js](https://threejs.org/) - A cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser.
- [TypeScript](https://www.typescriptlang.org/) - A superset of JavaScript that adds static types to the language.
- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework.
- [Lamina](https://lamina.js.org/) - A declarative way of working with WebGL.
- [Leva](https://leva.engine.gl/) - The first component input library for Vue and React.
- [Next Cloudinary](https://github.com/transitive-bullshit/next-cloudinary) - Seamless Cloudinary image integration for Next.js.
## Description
One of the challenges encountered in this project was the highly detailed model (200 MB) which affected optimization and loading speed. To address this, the model was compressed, resulting in a reduced size of 150 MB.
Additionally, a custom character was created and animated. With the help of AI, the text was converted to speech, and lip synchronization was added to the animation.
Significant effort was dedicated to optimization and reducing user waiting time. To achieve this, the avatar was exported without textures, and a special preloader was created to provide users with a preview of what they will see on the screen.
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/your-username/theavatar.git
cd theavatar
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
Visit [theavatar.vercel.app/](https://theavatar.vercel.app/) in your browser to experience the The Avatar
## Scripts
- `npm run build`: Build the production-ready application.
- `npm start`: Start the production server.
- `npm run lint`: Lint the codebase for consistent code style.
Feel free to contribute and enhance the virtual exploration of this aviation marvel! 🚀🌐