Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brunocarvalhofeitosa/airmax270-landingpage
Personal landing page creation project for Nike AirMax Hot Punch 270. This project contains PUG, SCSS, JQuery and Gulp.
https://github.com/brunocarvalhofeitosa/airmax270-landingpage
Last synced: 4 days ago
JSON representation
Personal landing page creation project for Nike AirMax Hot Punch 270. This project contains PUG, SCSS, JQuery and Gulp.
- Host: GitHub
- URL: https://github.com/brunocarvalhofeitosa/airmax270-landingpage
- Owner: BrunoCarvalhoFeitosa
- Created: 2020-01-19T19:21:54.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T04:41:28.000Z (almost 2 years ago)
- Last Synced: 2023-03-07T15:50:57.568Z (over 1 year ago)
- Language: SCSS
- Homepage: http://airmax270.gearhostpreview.com/
- Size: 5.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Esta landing page está hospedada em (http://airmax270.gearhostpreview.com/) e foi feita com Gulp.js, um automatizador de rotinas, compilador e "transpilador" de diversos tipos de arquivos. Através do gulp.js é possível automatizar, por exemplo, builds de imagens, onde o gulp identifica uma imagem, compila seu peso e gera no final uma imagem mais leve, isso vale também para arquivos .pug, .sass, .scss, .less e .js.
Sumário
## Sobre o projeto
https://user-images.githubusercontent.com/46093815/134591813-2370cf9d-1b04-4c57-b898-d610f40ebd6e.mp4
A fim de explorar diversas animações, desenvolvi essa landing page de apresentação do Nike Air Max 270 Hot Punch. Através do gulp.js foi possível implementar hot reload na aplicação e utilizar diversos plugins para chegar a um resultado que para mim foi surpreendente, visto que no momento de seu desenvolvimento eu estava cursando Análise e Desenvolvimento de Sistemas e tinha muito contato com Back-end (C#, SQL e Java) e decidi incrementar em meus estudos algumas ferramentas de Front-end.
### Feito com
* [Gulp.js](https://gulpjs.com/)
* [Javascript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
* [Jquery](https://jquery.com/)
* [SASS](https://sass-lang.com/)
### Hospedagem
Esta lading page está hospedada em (http://airmax270.gearhostpreview.com/). Para hospedar seu app na GearHost é só acessar https://www.gearhost.com/ e criar uma conta, através de um FTP você consegue publicar facilmente e gratuitamente sua aplicação nestes servidores.
## Iniciando o projeto
Primeiramente será necessário clonar este projeto em (https://github.com/BrunoCarvalhoFeitosa/AirMax270-LandingPage.git), após o download será necessário abrir este projeto no seu
editor e no terminal digitar npm install, posteriormente é só executar o script npm start e a aplicação será aberta em seu navegador.
### Pré-requisitos
* npm
```sh
npm install [email protected]
```
### Instalação
1. Clone o repositório
```sh
git clone https://github.com/BrunoCarvalhoFeitosa/AirMax270-LandingPage.git
```
2. Instale os pacotes do NPM
```sh
npm install
```
3. Inicie o projeto
```sh
npm run start
```
## Uso
Esta landing page foi criada como forma de aprendizado pessoal, na época em que a desenvolvi estava cursando Análise e Desenvolvimento de Sistemas, estava me interessando mais pelo front-end
do que back-end e quis intensificar um pouco mais nas animações para explorar melhor o que estava estudando e testando.
## 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/)
## Reconhecimentos
* [GearHost](https://www.gearhost.com/)