Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devmagno/bikcraft
🚴 Site que oferece serviços de montagem de bicicletas personalizadas.
https://github.com/devmagno/bikcraft
adobe-xd devmagno html-css-js sass scout-app sendgrid ui-design ux-ui wireframe
Last synced: about 2 months ago
JSON representation
🚴 Site que oferece serviços de montagem de bicicletas personalizadas.
- Host: GitHub
- URL: https://github.com/devmagno/bikcraft
- Owner: devMagno
- License: mit
- Created: 2020-10-02T16:40:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-19T01:29:44.000Z (about 4 years ago)
- Last Synced: 2023-08-29T07:50:07.340Z (over 1 year ago)
- Topics: adobe-xd, devmagno, html-css-js, sass, scout-app, sendgrid, ui-design, ux-ui, wireframe
- Language: HTML
- Homepage: https://devmagno.github.io/bikcraft/views/
- Size: 1.73 MB
- Stars: 7
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bikcraft 🚴
## 📖 Sobre
O projeto **Bikcraft** foi desenvolvido durante o curso de **Web Design Completo** da **[Origamid](https://www.origamid.com/)**. Durante o curso, aprendemos todos os princípios básicos de **UI/UX Design** e **codificação**, colocando todos os conceitos em prática desenvolvendo **desde o wireframe até o design** e por fim, o **código do site** da **Bikcraft** uma empresa que vende bicicletas personalizadas feitas sob medida, onde desenvolvemos conceitos como **HTML semântico**, **otimização** de imagens e arquivos CSS, **SEO** e utilização do **Google Analytics**.
Posteriormente, durante o curso de **CSS com SASS**, foi realizada uma **engenharia reversa** do projeto, utilizando **imports** para melhor organização do projeto e atualizando o sistema de grid com o uso de **loops**, além do uso de **variáveis** de cores e **mixins** para as diferentes tipografias do projeto.
---
## 🚀 Tecnologias e ferramentas utilizadas
- **HTML5**
- **CSS3**
- **JavaScript** (com os plugins [SimpleSlide](https://github.com/origamid/simple-slide), [SimpleAnime](https://github.com/origamid/simple-anime) e [SimpleForm](https://github.com/origamid/simple-form))
- **PHP** (envio de e-mail com [SendGrid](https://sendgrid.com/))
- **SASS**
- **Scout App** (compilador do SASS)
---
## 🖥️ Demonstração
[](https://devmagno.github.io/bikcraft/views/index.html "Clique para acessar o projeto")
Você pode acessar o projeto clicando [aqui](https://devmagno.github.io/bikcraft/views/index.html).
---
## 🔖 Layout
Tanto o **wireframe** quanto o **design** do projeto **Bikcraft** foram desenvolvidos no **Adobe XD,** ambos **navegáveis** e que você pode acessar nos links abaixo:
- **[Wireframe do projeto](https://xd.adobe.com/view/95e96e6a-d057-42e1-a34f-bc99d2963f42-c0ba/?fullscreen&hints=off)**
- **[Design do projeto](https://xd.adobe.com/view/49a2fc68-e3ac-4e9c-b825-0217fcc8c506-1cf1/?fullscreen&hints=off)**
---
## 🔧 Como executar o projeto
```bash
# Clone o repositório
git clone https://github.com/devMagno/bikcraft
# Entre no diretório
cd bikcraft
```
Depois disso, utilize uma ferramenta como o [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) para criar um servidor local e executar o projeto.
---
## 📝 Licença
O projeto está sob a licença MIT. Para saber mais, acesse o arquivo [LICENSE](https://github.com/devMagno/bikcraft/blob/master/LICENSE).
---
**Desenvolvido com 💛 por [Guilherme Magno](https://github.com/devmagno/).**