Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brunocarvalhofeitosa/apple-gsap
iPhone 15 Pro clone made with Next.js, Gsap, Three.js and TailwindCSS.
https://github.com/brunocarvalhofeitosa/apple-gsap
Last synced: 4 days ago
JSON representation
iPhone 15 Pro clone made with Next.js, Gsap, Three.js and TailwindCSS.
- Host: GitHub
- URL: https://github.com/brunocarvalhofeitosa/apple-gsap
- Owner: BrunoCarvalhoFeitosa
- Created: 2024-03-23T22:23:16.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-06-17T15:09:10.000Z (5 months ago)
- Last Synced: 2024-06-18T16:50:53.838Z (5 months ago)
- Language: TypeScript
- Homepage: https://bruno-carvalho-feitosa-apple-gsap.vercel.app
- Size: 41.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Clone da landing page oficial da Apple para apresentação do novo iPhone 15 Pro, neste projeto utilizei Next.js, Typescript, Three.js, GSAP e TailwindCSS.
Sumário
## Modelo 3D do iPhone 15
Toda a página é responsiva e totalmente animada utilizando efeitos do Three.js e GSAP, a animação mais avançada e complexa é a do modelo 3D do iPhone, onde é possível rotacioná-lo utilizando o mouse, como o exemplo abaixo.
https://github.com/BrunoCarvalhoFeitosa/apple-gsap/assets/46093815/d125aaeb-1832-417f-b760-922d3a5774d6
### Homepage completa
https://github.com/BrunoCarvalhoFeitosa/apple-gsap/assets/46093815/62ff77e3-f903-4155-942a-5b93a1fe7860
### Feito com
* [Next.js](https://nextjs.org)
* [Typescript](https://www.typescriptlang.org)
* [GSAP](https://gsap.com)
* [Three.js](https://threejs.org)
* [TailwindCSS](https://tailwindcss.com)
* [Vercel](https://vercel.com)
### Hospedagem
A aplicação está em produção neste link: (https://bruno-carvalho-feitosa-apple-gsap.vercel.app).
## Iniciando o projeto
Primeiramente será necessário clonar este projeto em (https://github.com/BrunoCarvalhoFeitosa/apple-gsap.git), após o download será necessário abrir este projeto no seu editor e no terminal digitar npm install ou yarn, posteriormente é só rodar em seu terminal o comando npm run dev ou yarn dev.
### Pré-requisitos
* npm
```sh
npm install npm@latest -g
```
### Instalação
1. Clone o repositório
```sh
git clone https://github.com/BrunoCarvalhoFeitosa/apple-gsap.git
```
2. Instale os pacotes do NPM
```sh
npm install ou yarn
```
3. Inicie o projeto
```sh
npm run dev ou yarn dev
```
## License
Distribuído sob a licença MIT.
## Contato
Bruno Carvalho Feitosa - [GitHub](https://github.com/BrunoCarvalhoFeitosa) - [LinkedIn](https://www.linkedin.com/in/bruno-carvalho-feitosa/)