Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/epiled/fitness-gym
Aula da Digital Innovation One HTML5 % CSS3
https://github.com/epiled/fitness-gym
Last synced: about 1 month ago
JSON representation
Aula da Digital Innovation One HTML5 % CSS3
- Host: GitHub
- URL: https://github.com/epiled/fitness-gym
- Owner: Epiled
- Created: 2019-12-19T20:13:45.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-24T19:29:57.000Z (over 1 year ago)
- Last Synced: 2023-09-25T09:17:53.611Z (about 1 year ago)
- Language: HTML
- Size: 74.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🔸 💪 Fitness Gym 🦵 🔸
Projeto pessoal, este repositório foi um dos primeiros que criei no GitHub e ele era basicamente uma página HTML com alguns textos aleto rios, sem qualquer estilo ou propósito
Decidi criar algo novo para esse repositório, afinal ele é um dos mais antigos aqui, e merece um projeto de valor
Escolhi fazer um site autoral sobre academia, originalmente o projeto seria bem mais simples, nem precisaria de Javascript e o layout também seria simples, sua otimização praticamente não existiria, porém, não me contive e fiz um projeto do qual sentiria orgulho em fazer, com grandes níveis de otimização e animações para torna o site mais interativo e convidativo.
Para se ter uma noção do nível de otimização configurei uma série de Tasks no Gulp para automatizar certos processos
Utilizei o conhecimento de diversas áreas para adicionar melhorias e extrair o máximo de performance e qualidade da página.
📑 Tabela de Conteúdos
* [Sobre](#sobre)
* [Referência](#referencia)
* [Sites de inspiração](#inspiracao)
* [Demonstração](#demonstracao)
* [Performance](#performance)
* [Instalação](#instalacao)
* [Como usar](#como-usar)
* [Arquivos Locais](#arquivos_locais)
* [Tecnologias](#tecnologias)
* [Autor](#autor)
🔖 Referência
Os arquivos de wireframes podem ser visto ou editador no seguinte link do Figma, você também encontrara os sites que usei como referência para criar meus wireframes.
Figma:
Fitness Gym
Sites que usei como inspiração
👀 Demonstração
No link abaixo você pode ver a página no ar e rodar seus próprios teste de perfomance ou desempenho
Fitness Gym: https://epiled.github.io/fitness-gym/dist/
https://github.com/Epiled/fitness-gym/assets/55258483/5e89e3d0-5481-4a02-8140-23fe7e54c18a
https://github.com/Epiled/fitness-gym/assets/55258483/94fb9968-dc94-4427-8ae4-bb6061ee46fa
📈 Performance Lighthouse
⚙ Instalação
```
1. git clone https://github.com/Epiled/fitness-gym.git
2. cd fitness-gym
```
👩🏫 Como usar
Arquivos Locais
O projeto pode ser executado atraves do arquivo index.html que se encontra na pasta dist que é o que recomendo usar, clicando duas vezes sobre ele ou abrindo diretamnete sobre o navegador
🛠 Tecnologias
As seguintes tecnologias foram usadas na construção deste projeto:
Também foi usado o modelo de organização CSS Atomic Design e a escrita do CSS foi feita seguindo o padrão BEM
Ao final do projeto é gerado um diretório de 'dist' para distribuição e homologação no qual ocorre a minificação e concatenação do CSS
👨💻 Autor
Felipe De Andrade
Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!
[](https://www.linkedin.com/in/fademendonca/)
[](mailto:[email protected])
[](https://www.instagram.com/felipe.deam/)
[](https://codepen.io/epiled)