https://github.com/epiled/fitness-gym
🏋️♀️ Criação de projeto autoral de academia a partir das aulas da Digital Innovation One HTML5 e CSS3, adicionei mais coisas a este projeto como animações e controles em Javascript 🏋️♂️
https://github.com/epiled/fitness-gym
css html javascript js
Last synced: about 1 month ago
JSON representation
🏋️♀️ Criação de projeto autoral de academia a partir das aulas da Digital Innovation One HTML5 e CSS3, adicionei mais coisas a este projeto como animações e controles em Javascript 🏋️♂️
- Host: GitHub
- URL: https://github.com/epiled/fitness-gym
- Owner: Epiled
- License: mit
- Created: 2019-12-19T20:13:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-28T20:32:52.000Z (8 months ago)
- Last Synced: 2025-04-12T10:05:51.969Z (about 1 month ago)
- Topics: css, html, javascript, js
- Language: HTML
- Homepage: https://epiled.github.io/fitness-gym/dist
- Size: 86.1 MB
- Stars: 3
- Watchers: 1
- 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)