Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/epiled/spotify

🎶 Página principal do Spotify de 2017 otimizada e com implementação de PWA 🎶
https://github.com/epiled/spotify

bootstrap bootstrap5 css css3 html html5 javascript js progressive-web-app pwa

Last synced: about 1 month ago
JSON representation

🎶 Página principal do Spotify de 2017 otimizada e com implementação de PWA 🎶

Host: GitHub
URL: https://github.com/epiled/spotify
Owner: Epiled
License: mit
Created: 2020-05-26T15:20:25.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-10-29T12:53:43.000Z (about 1 year ago)
Last Synced: 2023-10-29T13:32:37.594Z (about 1 year ago)
Topics: bootstrap, bootstrap5, css, css3, html, html5, javascript, js, progressive-web-app, pwa
Language: HTML
Homepage: https://epiled.github.io/Spotify/
Size: 4.89 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        ![capa-spotify](https://user-images.githubusercontent.com/55258483/178308366-ea3f7e9b-d834-4a28-a943-13bf69626121.png)

🟢 🎵 Spotify 2017 🎵 🟢


Primeiro projeto concluido do curso 

  "Curso completo de Desenvolvimento Web 2018 - Crie 6 projetos"

  do professor Jorge Sant' Ana,

  este primeiro projeto foi a construção da página de Home do Spotify de 2017 com o modo mobile.



O projeto foi refatorado em 2022 para atualizar as tecnologia do Bootstrap 3 para o Bootstrap 5, e remover a dependência do Jquery,

alem disso o projeto passou por otimizações afim de obter melhores resultados de performance.



![Badge](https://img.shields.io/github/last-commit/Epiled/Spotify?style=for-the-badge)

![Badge](https://img.shields.io/github/languages/code-size/Epiled/Spotify?style=for-the-badge)

![Badge](https://img.shields.io/github/languages/count/Epiled/Spotify?style=for-the-badge)

![Bagde](https://img.shields.io/badge/repo%20status-Beta-cyan?style=for-the-badge)

![Bagde](https://img.shields.io/github/v/release/epiled/Spotify?style=for-the-badge)

![Bagde](https://img.shields.io/github/license/Epiled/Spotify?style=for-the-badge)

![Badge](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![Badge](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

![Badge](https://img.shields.io/badge/-JS-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

![Badge](https://img.shields.io/badge/-Bootstrap5-7952B3?style=for-the-badge&logo=bootstrap&logoColor=white)

![Badge](https://img.shields.io/badge/-Gulp-CF4647?style=for-the-badge&logo=gulp&logoColor=white)

![Badge](https://img.shields.io/badge/-Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)

 📑 Tabela de Conteúdos 


   * [Sobre](#sobre)

   * [Demonstração](#demonstracao)

   * [Performance](#performance)

   * [Instalação](#instalacao)

   * [Como usar](#como-usar)

      * [Arquivos Locais](#arquivos_locais)

      * [Pré-Requisitos](#pre-requisitos)

   * [Tecnologias](#tecnologias)

   * [Autor](#autor)

 👀 Demonstração 


No link abaixo você pode ver a página no ar e rodar seus próprios teste de perfomance ou desempenho

Spotify: epiled.github.io/spotify/


![spotify_desktop](https://user-images.githubusercontent.com/55258483/178335246-2bbf5a76-9d7a-4594-a7ed-49df254586a9.gif)

![spotify_mobile](https://user-images.githubusercontent.com/55258483/178335669-263d3077-5bcd-40dd-9753-bb059217c750.gif)

 📈 Performance Lighthouse 


![spotify_performance](https://user-images.githubusercontent.com/55258483/179237352-2a90c312-8c28-4ec5-a214-205956bf1e21.png)

 ⚙ Instalação 


```

1. git clone https://github.com/Epiled/Spotify.git

2. cd Spotify

```

 👩‍🏫 Como usar 


Arquivos Locais

Nesse ponto o projeto já pode ser executado no navegador através do arquivo "index.html" tanto na pasta "src" quanto na "dist"


Para teste de performance e desempenho recomenda-se usar o "index.html" da pasta "dist", já que esse é o arquivo que será colocado no ar


Caso queira testar a ferramenta será necessário cumprir o pré-requisito


Pré-requisito


```

1. npm install

```

Para testar a ferramenta de automatização de processos pre-deploy execute o seguinte comando no terminal da pasta Spotify


```

1. gulp build

```

 🛠 Tecnologias 


As seguintes tecnologias foram usadas na construção deste projeto:



  HTML5

  CSS3

  JavaScript

  Bootstrap 5

  Gulp

  Node.js



 👨‍💻 Autor 




![Felindo](https://user-images.githubusercontent.com/55258483/178338085-2cea8bf2-6d0c-409a-9d0e-23359b7d303e.png)

 


 _{Felipe De Andrade}

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!

[![Linkedin Badge](https://img.shields.io/badge/-Felipe-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/fademendonca/)](https://www.linkedin.com/in/fademendonca/)

[![Gmail Badge](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])

[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/felipe.deam/)](https://www.instagram.com/felipe.deam/)

[![Codepen Badge](https://img.shields.io/badge/-Codepen-000000?style=flat-square&logo=Codepen&logoColor=white&link=https://codepen.io/epiled)](https://codepen.io/epiled)